Kairo AI — The Next Generation AI Assistant

Kairo AI is a sleek, modern AI chatbot inspired by the intelligence of ChatGPT, Claude, and Gemini. Designed with a premium user experience, Kairo AI delivers lightning-fast conversations, beautiful interfaces, Markdown support, authentication, and a seamless AI workflow—all inside a polished, responsive application.

Minimal. Powerful. Intelligent.

🌐 Live Demo: Kairo AI Chatbot 📂 Source Code: https://github.com/codewitharslanjaved/Kairo-AI

---

📸 Preview

🏠 Landing Page

---

🔐 Login Page

---

✨ Sign Up Page

---

💬 AI Chat

---

⚙️ Settings

---

✨ Features

🤖 AI Experience

• 💬 Intelligent AI conversations
• ⚡ Real-time streaming responses
• 🧠 Context-aware conversations
• 📝 Markdown rendering
• 💻 Beautiful code syntax highlighting
• 📋 Copy code with one click
• 📄 Rich AI formatting
• 🔄 Regenerate responses

---

👤 User Experience

• 🔐 Secure Clerk Authentication
• 📱 Fully responsive
• 🌙 Dark & Light Mode
• 🎨 Beautiful modern interface
• ⚙️ User preferences
• 📂 Chat history
• 🔍 Search conversations
• 📌 Pin important chats
• 🗑️ Delete conversations

---

🚀 Performance

• ⚡ Next.js 15 App Router
• ⚛️ React 19
• 🎨 Tailwind CSS v4
• 🧩 Modern component architecture
• 📦 Optimized rendering
• 🚀 Fast page loads
• 💎 Smooth animations

---

📂 Project Structure

Kairo-AI/
│
├── app/
│   ├── (auth)/
│   ├── chat/
│   ├── settings/
│   ├── api/
│   └── layout.js
│
├── components/
│   ├── ui/
│   ├── chat/
│   ├── sidebar/
│   ├── landing/
│   └── settings/
│
├── hooks/
├── lib/
├── public/
│   ├── previews/
│   ├── icons/
│   └── images/
│
├── styles/
├── middleware.ts
└── package.json

---

🚀 Getting Started

Clone the repository

git clone https://github.com/codewitharslanjaved/Kairo-AI.git

Move into the project

cd Kairo-AI

Install dependencies

npm install

Run the development server

npm run dev

Visit

http://localhost:3000

---

🛠️ Tech Stack

Technology	Purpose
Next.js 15	React Framework
React 19	UI Library
Tailwind CSS v4	Styling
Clerk	Authentication
shadcn/ui	UI Components
Radix UI	Accessible Components
React Markdown	Markdown Rendering
Highlight.js	Code Highlighting
Lucide React	Icons
Next Themes	Theme Switching

---

📦 Dependencies

@clerk/nextjs
@clerk/themes
@radix-ui/react-select
class-variance-authority
clsx
highlight.js
lucide-react
next
next-themes
react
react-dom
react-markdown
react-syntax-highlighter
rehype-highlight
remark-gfm
tailwind-merge

---

🎯 Highlights

• 🤖 AI Chat Interface
• 🧠 Smart Conversations
• ⚡ Streaming Responses
• 📄 Markdown Support
• 💻 Code Blocks
• 🌙 Theme Switching
• 🔐 Authentication
• 📱 Responsive Layout
• 📂 Chat History
• 🔍 Search Chats
• 📌 Pinned Conversations
• ⚙️ Settings Management

---

🛣️ Future Roadmap

• 🤖 Multiple AI Models (GPT, Claude, Gemini, DeepSeek)
• 🎤 Voice Chat
• 📄 Document Upload
• 🖼️ AI Image Generation
• 🌐 Web Browsing
• 🧠 Long-Term Memory
• 📱 Progressive Web App
• 🔌 Plugin Support
• 👥 Shared Chats
• 🌍 Multi-language Support
• 📊 Usage Analytics
• 💳 Subscription Plans

---

👨‍💻 Author

Created with ❤️ by Arslan Javed

🌐 Portfolio
https://codewitharslan.vercel.app

💻 GitHub
https://github.com/codewitharslanjaved

---

⭐ Show Your Support

If you found this project helpful, please consider giving it a ⭐ on GitHub.

It really helps and motivates future development.

---

📄 License

This project is licensed under the MIT License.

© 2026 Arslan Javed