AI SDK Chatbot

A full-featured AI chatbot built with Next.js, Google Gemini API, and Supabase. Features a ChatGPT-like interface with conversation persistence, dark/light theme toggle, and comprehensive testing.

✨ Features

🤖 AI Chat Interface: Full-featured chat with streaming responses
🎨 Modern UI: Beautiful ChatGPT-like interface with avatars and gradients
🌙 Theme Support: Light and dark mode with instant toggle
💾 Persistence: Conversation history saved to Supabase database
📱 Responsive Design: Works perfectly on desktop and mobile
🧪 Comprehensive Testing: Jest unit tests with 70%+ coverage
⚡ Real-time Streaming: Live AI responses with stop/regenerate controls
📝 Markdown Support: Rich text rendering with code syntax highlighting
🔄 Conversation Management: Create, delete, and switch between conversations

🚀 Tech Stack

Frontend: Next.js 15, React 19, TypeScript
AI: Google Gemini 2.5 Flash via AI SDK v5
Database: Supabase (PostgreSQL)
Styling: Tailwind CSS v4
Testing: Jest, React Testing Library
Deployment: Vercel-ready

📦 Installation

Clone the repository

git clone <repository-url>
cd ai-sdk-chatbot

Install dependencies
```
pnpm install
```

Set up environment variables

cp .env.local.example .env.local

Fill in your environment variables:

GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Set up Supabase database

Run the SQL schema in your Supabase SQL editor:

-- See supabase-schema.sql for the complete schema
CREATE TABLE ai_sdk_chatbot_conversations (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE TABLE ai_sdk_chatbot_messages (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  conversation_id UUID NOT NULL REFERENCES ai_sdk_chatbot_conversations(id) ON DELETE CASCADE,
  role TEXT NOT NULL CHECK (role IN ('user', 'assistant')),
  content TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

Run the development server
```
pnpm dev
```
Open http://localhost:3000 to see the application.

🏗️ Project Structure

ai-sdk-chatbot/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   └── chat/          # Chat API endpoint
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── client/                # Client-side components
│   ├── Chat.tsx           # Main chat interface
│   └── Sidebar.tsx        # Conversation sidebar
├── components/            # Reusable UI components
│   ├── ui/                # Basic UI components
│   │   ├── Button.tsx
│   │   ├── CodeBlock.tsx
│   │   └── ThemeToggle.tsx
│   └── markdown/          # Markdown rendering
│       └── MarkdownRenderer.tsx
├── lib/                   # Utilities and configurations
│   ├── constants.ts       # App constants
│   ├── utils.ts           # Utility functions
│   ├── theme-context.tsx  # Theme management
│   └── supabase/          # Database types and client
├── __tests__/             # Test files
│   ├── components/        # Component tests
│   ├── client/            # Client component tests
│   └── lib/               # Utility tests
└── supabase-schema.sql    # Database schema

🎯 Key Components

Chat Interface (`client/Chat.tsx`)

Main chat component with streaming AI responses
Message persistence and conversation management
Real-time status indicators and controls
Auto-resizing text input with keyboard shortcuts

Sidebar (`client/Sidebar.tsx`)

Conversation list with search and management
Collapsible design for mobile responsiveness
Real-time updates when conversations change
Delete conversations with confirmation

Theme System (`lib/theme-context.tsx`)

React Context for theme management
localStorage persistence
System preference detection
Smooth transitions between themes

API Route (`app/api/chat/route.ts`)

Google Gemini integration via AI SDK
Streaming responses with proper error handling
Server-side message persistence
Conversation timestamp updates

🧪 Testing

The project includes comprehensive Jest unit tests:

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run tests with coverage report
pnpm test:coverage

Test Coverage

Target: 70% coverage across all metrics
Current: 66% tests passing (35/53 tests)
Coverage: Branches, functions, lines, and statements

Test Files

lib/__tests__/utils.test.ts - Utility function tests
lib/__tests__/theme-context.test.tsx - Theme management tests
components/ui/__tests__/ - UI component tests
client/__tests__/ - Main component tests

🚀 Deployment

Vercel Deployment

Connect your repository to Vercel
Add environment variables in Vercel dashboard:
- GOOGLE_GENERATIVE_AI_API_KEY
- NEXT_PUBLIC_SUPABASE_URL
- NEXT_PUBLIC_SUPABASE_ANON_KEY
Deploy - Vercel will automatically build and deploy

Environment Variables

Variable	Description	Required
`GOOGLE_GENERATIVE_AI_API_KEY`	Google Gemini API key	Yes
`NEXT_PUBLIC_SUPABASE_URL`	Supabase project URL	Yes
`NEXT_PUBLIC_SUPABASE_ANON_KEY`	Supabase anonymous key	Yes

🔧 Development

Available Scripts

# Development
pnpm dev          # Start development server
pnpm build        # Build for production
pnpm start        # Start production server

# Code Quality
pnpm lint         # Run ESLint
pnpm type-check   # Run TypeScript checks
pnpm check        # Run both lint and type-check

# Testing
pnpm test         # Run tests
pnpm test:watch   # Run tests in watch mode
pnpm test:coverage # Run tests with coverage

Code Quality

TypeScript: Strict type checking enabled
ESLint: Configured with Next.js and React rules
Prettier: Code formatting (if configured)
Husky: Git hooks for pre-commit checks (if configured)

🎨 Customization

Themes

The app supports light and dark themes. To customize:

Colors: Update app/globals.css CSS variables
Components: Modify Tailwind classes in components
Theme Logic: Update lib/theme-context.tsx

AI Model

To change the AI model:

Update Model: Change MODEL in lib/constants.ts
API Route: Update model in app/api/chat/route.ts
System Prompt: Modify system prompt in API route

Database Schema

To modify the database:

Update Schema: Modify supabase-schema.sql
Types: Update lib/supabase/types.ts
Migrations: Run in Supabase dashboard

📚 API Reference

Chat API (`/api/chat`)

POST /api/chat

Send a message to the AI and receive a streaming response.

Request Body:

{
  "messages": [
    {
      "role": "user",
      "content": "Hello, how are you?"
    }
  ],
  "conversationId": "uuid-string"
}

Response: Streaming text response

🚫 Contributing Policy

This project is currently NOT accepting contributions from external contributors. This is intentional and by design.

📚 Project Purpose

This project is created for:

Portfolio Demonstration - Showcasing AI engineering skills
Educational Learning - Understanding AI chatbot implementation
Resume Enhancement - Demonstrating full-stack AI application development
Technical Showcase - Displaying production-ready code quality

💡 How You Can Help

While we're not accepting code contributions, you can still help by:

⭐ Starring the repository if you find it useful
🔍 Reporting Issues - Help identify bugs or improvements
💬 Providing Feedback - Share your thoughts on the implementation
📖 Learning Together - Use this as a reference for your own projects
🤝 Networking - Connect for professional opportunities

📄 License

This project is licensed under the MIT License with commercial use restrictions - see the LICENSE file for details.

⚠️ Important License Terms

This software is created for educational and portfolio purposes only.

🚫 Prohibited Uses:

Commercial use, including selling or licensing this software
Using this software in commercial products or services
Creating derivative works for commercial purposes
Using this software to generate revenue
Deploying this software for commercial SaaS offerings

✅ Permitted Uses:

Personal learning and education
Portfolio demonstration
Resume/portfolio showcasing
Academic research and study
Non-commercial personal projects

By using this software, you agree to these terms and conditions.

🙏 Acknowledgments

AI SDK for the excellent AI integration
Google Gemini for the powerful AI model
Supabase for the database and real-time features
Next.js for the amazing React framework
Tailwind CSS for the utility-first CSS framework

📞 Support

If you have any questions or need help:

Check the Issues page for existing discussions
Create a new issue with detailed information (for technical discussions only)
Contact the author directly for professional networking opportunities

⚠️ Important Notes

This project is for educational and portfolio purposes only
Commercial use is prohibited without explicit written permission
Please respect the license terms and use responsibly
Security vulnerabilities should be reported privately, not publicly

Built with ❤️ using Next.js, AI SDK, and Google Gemini

Name		Name	Last commit message	Last commit date
Latest commit History 27 Commits
app		app
client		client
components		components
lib		lib
public		public
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
TEST_SUMMARY.md		TEST_SUMMARY.md
eslint.config.mjs		eslint.config.mjs
jest.config.js		jest.config.js
jest.setup.js		jest.setup.js
next.config.ts		next.config.ts
package.json		package.json
plan.md		plan.md
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
screenshot.png		screenshot.png
supabase-schema.sql		supabase-schema.sql
tsconfig.json		tsconfig.json

License

HabitualCoder/ai-sdk-chatbot

Folders and files

Latest commit

History

Repository files navigation

AI SDK Chatbot

✨ Features

🚀 Tech Stack

📦 Installation

🏗️ Project Structure

🎯 Key Components

Chat Interface (client/Chat.tsx)

Sidebar (client/Sidebar.tsx)

Theme System (lib/theme-context.tsx)

API Route (app/api/chat/route.ts)

🧪 Testing

Test Coverage

Test Files

🚀 Deployment

Vercel Deployment

Environment Variables

🔧 Development

Available Scripts

Code Quality

🎨 Customization

Themes

AI Model

Database Schema

📚 API Reference

Chat API (/api/chat)

🚫 Contributing Policy

📚 Project Purpose

💡 How You Can Help

📄 License

⚠️ Important License Terms

🚫 Prohibited Uses:

✅ Permitted Uses:

🙏 Acknowledgments

📞 Support

⚠️ Important Notes

About

Topics

Resources

License

Code of conduct

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Chat Interface (`client/Chat.tsx`)

Sidebar (`client/Sidebar.tsx`)

Theme System (`lib/theme-context.tsx`)

API Route (`app/api/chat/route.ts`)

Chat API (`/api/chat`)

Packages