🤖 AI Chatbot

A beautiful, production-ready AI chatbot interface built with cutting-edge web technologies. Experience the future of conversational AI with streaming responses, multi-model support, reasoning visualization, and a modular component architecture.

✨ Features

🎯 Core Capabilities

• Streaming AI Responses - Real-time streaming powered by Vercel AI SDK for instant, fluid conversations
• Multi-Model Support - Seamlessly switch between GPT-4o, Claude Haiku 4.5, Gemini 2.5 Flash, Grok 4 Fast, Deepseek R1, and Perplexity Sonar
• Web Search Integration - Toggle web search mode for real-time information retrieval
• Reasoning Visualization - View AI reasoning chains for transparency and understanding
• Source Citations - Automatic source tracking and citation display for web-search results
• File Attachments - Drag-and-drop file uploads with visual attachment previews

🎨 Modern UI Components

Built with a comprehensive AI Elements component library featuring:

• Conversation - Auto-scrolling chat interface with smooth animations
• Prompt Input - Rich text input with model selection, web search toggle, and attachment support
• Message Components - Beautiful message bubbles with markdown rendering
• Reasoning Panels - Collapsible reasoning displays with streaming indicators
• Source Cards - Elegant citation components with link previews
• Actions Bar - Copy, retry, and interaction controls
• Loader States - Smooth loading animations during AI processing

🏗️ Architecture Highlights

Modular Design - 25+ reusable AI-focused components, each self-contained and composable

• Easy to extend with new features
• TypeScript-first with full type safety
• Radix UI primitives for accessibility and performance
• Tailwind CSS 4 for modern styling

Modern Stack

• Next.js 15 with Turbopack for blazing-fast development
• React 19 with latest hooks and patterns
• Vercel AI SDK for seamless AI integration
• AI Elements components for common UI patterns
• Radix UI for accessible, unstyled primitives
• Tailwind CSS 4 for utility-first styling
• Zod for type safety

🚀 Getting Started

Environment Variables

# Create your .env.local file
cp .sample.env .env.local

Create your AI Gateway API KEY and add to your .env.local file

Install + Run Commands

# Install dependencies
pnpm install

# Run development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

Open http://localhost:3000 to see the chatbot in action.

🛠️ Tech Stack

• Framework: Next.js 15 (App Router)
• AI SDK: Vercel AI SDK (@ai-sdk/react, ai)
• UI Components: Radix UI + Custom AI Elements
• Styling: Tailwind CSS 4
• Language: TypeScript
• State Management: React Hooks
• Markdown Rendering: Streamdown
• Icons: Lucide React

🎓 Key Technologies Demonstrated

• Vercel AI SDK - Streaming text, multi-model support, UI message handling
• **Vercel AI Elements UI Toolkit - Customizable components for common AI interface use cases
• React Server Components - Efficient server-side rendering
• Streaming Responses - Real-time UI updates during AI generation
• Component Composition - Modular, reusable architecture
• TypeScript - Full type safety across the application
• Modern React Patterns - Hooks, context, memoization, controlled components

🔧 Extensibility

This project is designed for easy extension:

Adding New Models

Simply add to the models array in page.tsx:

const models = [
  { name: 'GPT 4o', value: 'openai/gpt-4o' },
  { name: 'Your Model', value: 'provider/model-name' },
];

Creating New Components

Leverage the existing AI Elements pattern:

// New components follow the same modular structure
// Import from @/components/ai-elements/your-component

Customizing Behavior

• Modify the API route (src/app/api/chat/route.ts) for backend logic
• Update UI components in src/components/ai-elements/
• Extend styles via Tailwind CSS classes

📁 Project Structure

src/
├── app/
│   ├── api/chat/         # AI chat API endpoint
│   ├── page.tsx          # Main chatbot interface
│   └── layout.tsx        # App layout
├── components/
│   ├── ai-elements/      # AI-specific UI components
│   └── ui/               # Base UI primitives
└── lib/
    └── utils.ts          # Utility functions

🎯 Use Cases

Perfect for:

• Portfolio demonstrations of AI integration skills
• Building production AI chat interfaces
• Learning modern React and Next.js patterns
• Extending into custom AI applications
• Showcasing full-stack TypeScript expertise

🌟 What Makes This Special

• Production-Ready - Not just a demo, but a fully functional, scalable chatbot
• Beautiful UX - Thoughtful animations, loading states, and user feedback
• Developer Experience - Clean code, TypeScript, modular architecture
• Modern Stack - Latest versions of Next.js, React, and AI SDK
• Extensible - Easy to add features, models, or customizations
• Performance - Optimized with React memoization, streaming, and efficient rendering

---

Built with ❤️ using Next.js, Vercel AI SDK, and modern web technologies.