A modern, responsive AI chat assistant built with Next.js 15, TypeScript, AI-sdk, AI Elements and Google's Gemini AI. Features real-time streaming responses, beautiful syntax highlighting, and a polished dark/light theme.
- 🚀 Real-time Streaming: Watch AI responses appear character by character
- 💬 Smart Conversations: Powered by Google's Gemini 2.0 Flash model
- 🎨 Beautiful UI: Modern design with smooth animations and transitions
- 🌓 Dark/Light Mode: Seamless theme switching with system preference detection
- 📝 Syntax Highlighting: Professional code block rendering with multiple language support
- 🔄 Suggested Prompts: Quick-start conversation with predefined suggestions
- 📱 Responsive Design: Works perfectly on desktop, tablet, and mobile
- ⚡ Error Handling: Smart error messages with actionable guidance
- 🎯 Rate Limit Display: User-friendly quota and rate limit notifications
-
Framework: Next.js 15 with App Router
-
Language: TypeScript
-
AI SDK: @ai-sdk/react for streaming responses
-
AI Elements: AI Elements AI Elements is a component library and custom registry built on top of shadcn/ui to help you build AI-native applications faster. It provides pre-built components like conversations, messages and more
-
AI Provider: Google Gemini 2.0 Flash model
-
Styling: Tailwind CSS v4 with custom components
-
Theme: next-themes for dark mode
-
Icons: Lucide React for beautiful icons
-
Code Highlighting: Custom syntax highlighting with professional themes
-
Font: Geist for optimal readability
Live Demo: https://ai-assistant-rho-rose.vercel.app/
Repository: https://github.com/osamashehta/AI-Assistant
- Node.js 18.17 or later
- pnpm, npm, or yarn
- Google AI API key (free tier available)
-
Clone the repository
git clone https://github.com/osamashehta/AI-Assistant.git cd AI-Assistant -
Install dependencies
pnpm install # or npm install # or yarn install
-
Set up environment variables
cp .env.example .env.local
Edit
.env.localand add your Google AI API key:GOOGLE_GENERATIVE_AI_API_KEY=your_api_key_here
-
Get your API key
- Visit Google AI Studio
- Create a new API key
- Copy and paste it into your
.env.localfile
-
Run the development server
pnpm dev # or npm run dev # or yarn dev
-
Open your browser Navigate to http://localhost:3000
- Type your message in the input field
- Press Enter or click the Send button
- Watch the AI response stream in real-time
- Use the suggestion chips for quick conversations
- Topics include AI trends, programming, and technology
- Click the theme toggle in the top-left corner
- Supports light, dark, and system preference modes
- Ask for code examples or explanations
- Enjoy beautiful syntax highlighting with proper themes
| Variable | Description | Required | Default |
|---|---|---|---|
GOOGLE_GENERATIVE_AI_API_KEY |
Your Google AI API key | Yes | - |
Modify suggestions: Edit the suggestions array in src/app/page.tsx:
const suggestions = [
"What are the latest trends in AI?",
"How does machine learning work?",
// Add your custom suggestions here
];Theme colors: Customize colors in src/app/globals.css:
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
/* Modify other color variables */
}├── src/
│ ├── app/
│ │ ├── api/chat/route.ts # AI chat API endpoint
│ │ ├── globals.css # Global styles and themes
│ │ ├── layout.tsx # Root layout with theme provider
│ │ └── page.tsx # Main chat interface
│ ├── components/
│ │ ├── ai-elements/ # Chat UI components
│ │ │ ├── conversation.tsx # Conversation container
│ │ │ ├── message.tsx # Message components
│ │ │ └── suggestion.tsx # Suggestion chips
│ │ ├── shared/ # Shared components
│ │ │ ├── Container.tsx # Layout container
│ │ │ └── theme-toggle.tsx # Theme switcher
│ │ └── ui/ # Base UI components
│ └── lib/
│ └── utils.ts # Utility functions
├── public/ # Static assets
├── .env.example # Environment variables template
└── package.json # Dependencies and scripts
- Real-time message streaming using Vercel AI SDK
- Supports conversation history and context
- Graceful error handling with retry mechanisms
- Syntax highlighting for 50+ programming languages
- Professional light and dark themes
- Line highlighting and proper indentation
- Copy-friendly code formatting
- Mobile-first responsive layout
- Touch-friendly interactive elements
- Optimized for all screen sizes
- Smooth animations and transitions
- Smart quota limit detection
- User-friendly error messages
- Actionable guidance and helpful links
- Automatic retry suggestions with countdowns
The free tier of Google AI includes:
- 50 requests per day for Gemini 2.0 Flash
- Rate limiting applies automatically
- Upgrade to paid tiers for higher limits
-
Push to GitHub
git push origin main
-
Deploy with Vercel
- Visit vercel.com
- Import your GitHub repository
- Add environment variables in the Vercel dashboard
- Deploy automatically
-
Set Environment Variables
- Go to your Vercel project settings
- Add
GOOGLE_GENERATIVE_AI_API_KEYwith your API key - Redeploy if needed
- Netlify: Build command:
pnpm build, Publish directory:out - Railway: Supports Next.js out of the box
- Digital Ocean: Use App Platform with Node.js
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Vercel AI SDK for the excellent streaming AI integration
- Google AI for the powerful Gemini models
- Tailwind CSS for the utility-first CSS framework
- Lucide for the beautiful icon set
- Next.js team for the amazing React framework
- Author: Osama Shehta
- Project Link: https://github.com/osamashehta/AI-Assistant
- Demo: https://ai-assistant-rho-rose.vercel.app/
⭐ Don't forget to star this repository if you found it helpful!