Multi-Model Chat

A powerful Next.js application for simultaneously chatting with multiple AI models and comparing their responses in real-time. Built with modern web technologies and featuring a beautiful, responsive UI.

Created by Kushagra

✨ Features

🤖 Multi-Model Support

OpenAI GPT-5 - OpenAI's most advanced reasoning model
Claude 4 Sonnet - Anthropic's most capable model with enhanced reasoning
DeepSeek V3 - DeepSeek's latest reasoning model
Gemini 2.0 Flash - Google's next-generation multimodal AI
Perplexity Sonar - Online search-powered AI model

🎯 Core Functionality

Multi-Model Chat: Compare responses from multiple AI models simultaneously
Single Model Mode: Focus on conversation with one specific model
Chat Sessions: Save and manage conversation history
Fork Conversations: Branch off specific model responses into single-model chats
Real-time Streaming: See responses as they're generated
Markdown Support: Proper formatting for code, lists, and rich text

🎨 User Experience

Dark/Light Mode: Toggle between themes
Responsive Design: Works seamlessly on desktop, tablet, and mobile
Horizontal Scrolling: Navigate between model responses easily
Analytics Dashboard: Track API usage and model performance
Model Logos: Visual identification for each AI provider

💾 Data Management

SQLite Database: Local storage for chat sessions and messages
Upstash Redis: Analytics and caching layer
Session Management: Organize and search through chat history
Export Options: Save conversations for future reference

🚀 Quick Start

Prerequisites

Node.js 18+ and npm
API Keys from AI providers (see Environment Variables section)
Upstash Redis account (optional, for analytics)

Installation

Clone the repository

git clone https://github.com/kushagra-18/multi-model-chat.git
cd multi-model-chat

Install dependencies
```
npm install
```
Set up environment variables
```
cp .env.example .env
```
Edit .env and add your API keys (see Environment Variables section below).
Initialize the database The SQLite database will be created automatically when you start the application.
Start the development server
```
npm run dev
```
Open your browser Navigate to http://localhost:3000

🔧 Environment Variables

Create a .env file in the root directory with the following variables:

Required API Keys

Variable	Provider	Get From	Required
`OPENAI_API_KEY`	OpenAI	Platform Dashboard	❌
`ANTHROPIC_API_KEY`	Anthropic	Console	❌
`GOOGLE_GENERATIVE_AI_API_KEY`	Google	AI Studio	✅
`DEEPSEEK_API_KEY`	DeepSeek	Platform	❌
`PERPLEXITY_API_KEY`	Perplexity	Settings	❌

Optional Services

Variable	Service	Get From	Purpose
`KV_REST_API_URL`	Upstash Redis	Console	Analytics
`KV_REST_API_TOKEN`	Upstash Redis	Console	Analytics

Note: At minimum, you need GOOGLE_GENERATIVE_AI_API_KEY as all requests are currently shadowed to Gemini 2.0 Flash for demo purposes. Other API keys enable the full multi-model experience.

🏗️ Project Structure

multi-model-chat/
├── app/                    # Next.js app router
│   ├── api/               # API routes
│   │   ├── chat/          # Chat endpoints
│   │   ├── chats/         # Session management
│   │   └── analytics/     # Usage tracking
│   ├── globals.css        # Global styles
│   └── page.tsx           # Main application
├── components/            # React components
│   ├── ui/               # Reusable UI components
│   └── chat/             # Chat-specific components
├── lib/                  # Utilities and configurations
│   ├── models.ts         # AI model definitions
│   ├── ai-providers.ts   # Provider clients
│   └── database.ts       # SQLite operations
├── types/                # TypeScript type definitions
└── public/               # Static assets

🎮 Usage Guide

Multi-Model Chat Mode

Enter your message in the input field at the bottom
Press Enter or click Send to send to all enabled models
Compare responses side by side in the grid layout
Scroll horizontally to view all model responses
Use action buttons to copy, like, or fork responses

Single Model Mode

Click the "Single Model" button in the header
Select your preferred model from the dropdown
Have a focused conversation with one AI model
Switch back to multi-model anytime

Managing Conversations

Save Sessions: Conversations are automatically saved
Access History: Click the history icon to view past chats
Fork Conversations: Click the fork button on any model response to create a new single-model session
Search Chats: Use the sidebar to find specific conversations

🔌 API Endpoints

Chat Endpoints

POST /api/chat/multi - Multi-model chat
POST /api/chat - Single model chat (streaming)

Session Management

GET /api/chats - List all chat sessions
POST /api/chats - Create new session
GET /api/chats/[id] - Get specific session
POST /api/chats/[id]/messages - Add message to session

Analytics

POST /api/analytics/track - Track usage events
GET /api/analytics/model-stats - Get model statistics

🧪 Development

Running Tests

npm test

Building for Production

npm run build
npm start

Linting

npm run lint

🐛 Known Issues & Limitations

Current Bugs

Fork Button Limitation: Fork functionality currently only shows toast notification; doesn't switch to single-model mode automatically
Model Selection: All API calls are shadowed to Gemini 2.0 Flash for demo purposes
Timestamp Type Mismatch: Some TypeScript warnings related to Date vs number types
Session Loading: Forked sessions may not load conversation history in single-model mode

Design Limitations

Horizontal Scroll: Grid layout may not work perfectly on all screen sizes
Message Overflow: Long messages might overflow card boundaries in some cases
Real-time Updates: Analytics refresh every 30 seconds, not real-time
Mobile Experience: Some UI elements may be cramped on very small screens

Performance Considerations

SQLite: May not scale for high-traffic deployments (consider PostgreSQL)
API Rate Limits: No built-in rate limiting for AI provider APIs
Memory Usage: Long conversations may impact browser performance
Concurrent Requests: Multiple model requests happen in parallel (may hit rate limits)

Missing Features

User Authentication: No login system implemented
Conversation Export: No built-in export to PDF/Word functionality
Custom Models: Can't add custom AI models without code changes
File Uploads: No support for document or image uploads
Voice Input: No speech-to-text functionality

🤝 Contributing

We welcome contributions! Here's how you can help:

Reporting Issues

Use the GitHub Issues page
Include steps to reproduce the bug
Add screenshots or screen recordings if helpful
Specify your browser and operating system

Pull Requests

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes with proper commit messages
Add tests if applicable
Submit a pull request with a clear description

Development Setup

# Clone your fork
git clone https://github.com/your-username/multi-model-chat.git
cd multi-model-chat

# Install dependencies
npm install

# Create environment file
cp .env.example .env
# Add your API keys

# Start development server
npm run dev

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

Vercel AI SDK - Powerful AI integration toolkit
Next.js - React framework for production
Tailwind CSS - Utility-first CSS framework
Radix UI - Accessible component primitives
Lucide Icons - Beautiful icon library
Upstash - Redis-compatible database

🆘 Support

Documentation: Check this README and inline code comments
Issues: GitHub Issues
Discussions: GitHub Discussions
Creator: @i_kushagra on X/Twitter

🗺️ Roadmap

Short Term (Next Release)

Fix fork-to-single-model functionality
Improve mobile responsiveness
Add conversation export features
Implement proper error boundaries

Medium Term

Add user authentication system
Support for file uploads (images, documents)
Custom model integration
Advanced analytics dashboard

Long Term

Voice input/output support
Collaborative chat sessions
Plugin system for extensions
Self-hosted deployment guides

👨‍💻 About the Creator

Kushagra is a passionate developer creating innovative AI applications and tools.

Twitter/X: @i_kushagra
GitHub: kushagra

Made with ❤️ for the AI community

Star ⭐ this repo if you found it helpful!

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
app		app
components		components
hooks		hooks
lib		lib
public		public
styles		styles
types		types
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

License

kushagra-18/multi-model-chat

Folders and files

Latest commit

History

Repository files navigation