AI Chatbot

A sleek, production-ready AI chatbot built with Next.js 14. Supports multiple AI providers (OpenAI GPT-4, Anthropic Claude), streaming responses, conversation history, and a beautiful chat UI.

---

Features

• Multi-Provider Support — Seamlessly switch between OpenAI (GPT-4o, GPT-4o-mini, GPT-4-turbo) and Anthropic (Claude 3.5 Sonnet, Claude 3 Haiku, Claude 3 Opus)
• Streaming Responses — Real-time token-by-token streaming for instant feedback
• Conversation History — Persistent conversations stored in Supabase with full CRUD operations
• Beautiful Chat UI — Clean, modern interface with message bubbles and smooth animations
• Markdown Rendering — Full markdown support including tables, code blocks, lists, and inline formatting
• Syntax Highlighting — Language-aware code blocks with copy-to-clipboard and line numbers
• Dark/Light Theme — Toggle between themes with system preference detection
• Collapsible Sidebar — Conversation list with search, rename, and delete functionality
• Model Selector — Grouped dropdown to pick your preferred AI model on-the-fly
• Auto-Resizing Input — Textarea grows with your message; Enter to send, Shift+Enter for newline
• Stop Generation — Cancel in-progress AI responses at any time
• Rate Limiting — Built-in sliding window rate limiter to protect API endpoints
• Typing Indicator — Animated indicator while the AI is generating a response
• Copy Messages — One-click copy for any message in the conversation
• System Prompt Support — Configurable system prompts per conversation
• Zustand State Management — Lightweight, performant global state with Zustand
• Fully Typed — End-to-end TypeScript with strict mode enabled

---

Screenshots

Chat Interface	Dark Mode	Model Selector

---

Quick Start

Prerequisites

• Node.js 18.17+
• npm or yarn or pnpm
• An OpenAI API key and/or Anthropic API key
• A Supabase project (for conversation persistence)

Installation

# Clone the repository
git clone https://github.com/zouraiz-khan/ai-chatbot-nextjs.git
cd ai-chatbot-nextjs

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env.local

# Fill in your API keys in .env.local

# Run the development server
npm run dev

Open http://localhost:3000 in your browser.

---

Environment Variables

Create a .env.local file in the project root:

# OpenAI
OPENAI_API_KEY=sk-...

# Anthropic
ANTHROPIC_API_KEY=sk-ant-...

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...

Variable	Required	Description
OPENAI_API_KEY	Yes*	Your OpenAI API key
ANTHROPIC_API_KEY	Yes*	Your Anthropic API key
NEXT_PUBLIC_SUPABASE_URL	No	Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY	No	Supabase anonymous key

*At least one AI provider key is required.

---

Supported Models

Provider	Model	Description
OpenAI	gpt-4o	Most capable OpenAI model, multimodal
OpenAI	gpt-4o-mini	Fast and affordable for lightweight tasks
OpenAI	gpt-4-turbo	High intelligence with vision capabilities
Anthropic	claude-3-5-sonnet-20241022	Best balance of intelligence and speed
Anthropic	claude-3-haiku-20240307	Fastest Anthropic model
Anthropic	claude-3-opus-20240229	Most capable Anthropic model

---

Project Structure

ai-chatbot-nextjs/
├── app/
│   ├── api/
│   │   ├── chat/
│   │   │   └── route.ts          # Streaming chat endpoint
│   │   └── conversations/
│   │       └── route.ts          # Conversation CRUD
│   ├── globals.css               # Global styles + Tailwind
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Main chat page
├── components/
│   ├── ChatMessage.tsx           # Message bubbles
│   ├── ChatInput.tsx             # Input with controls
│   ├── Sidebar.tsx               # Conversation sidebar
│   ├── CodeBlock.tsx             # Syntax-highlighted code
│   ├── MarkdownRenderer.tsx      # Markdown rendering
│   ├── ModelSelector.tsx         # AI model picker
│   └── ThemeToggle.tsx           # Dark/light toggle
├── lib/
│   ├── ai-providers.ts          # Provider abstraction
│   ├── supabase.ts              # Supabase client
│   └── rate-limit.ts            # Rate limiting
├── stores/
│   └── useChatStore.ts          # Zustand state
├── tailwind.config.ts
├── tsconfig.json
├── next.config.js
└── package.json

---

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript 5.3
• AI SDK: Vercel AI SDK 3.x
• AI Providers: OpenAI, Anthropic
• Database: Supabase (PostgreSQL)
• Styling: TailwindCSS 3.4
• State Management: Zustand
• Markdown: react-markdown + remark-gfm
• Code Highlighting: react-syntax-highlighter
• Icons: Lucide React
• Theming: next-themes

---

Development

# Development server
npm run dev

# Type checking
npm run type-check

# Lint
npm run lint

# Build for production
npm run build

# Start production server
npm start

---

Supabase Setup

Create the following table in your Supabase project:

CREATE TABLE conversations (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL DEFAULT 'New Conversation',
  messages JSONB DEFAULT '[]'::jsonb,
  model TEXT DEFAULT 'gpt-4o',
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

-- Enable RLS
ALTER TABLE conversations ENABLE ROW LEVEL SECURITY;

-- Allow all operations for anon key (configure as needed)
CREATE POLICY "Allow all" ON conversations FOR ALL USING (true);

---

License

MIT License - see LICENSE for details.

---

Author

Zouraiz Khan

• GitHub: @zouraiz-khan