OpenRouter Chat - Modern AI Chat Application

A modern chat application powered by OpenRouter API that supports multiple AI models. Built with Next.js 15, React 19, TypeScript and Tailwind CSS. This application allows users to chat with different AI models, upload images, and manage conversation history.

🎯 About

This project is a feature-rich chat application that leverages the OpenRouter API to provide access to multiple AI models. It's designed with a focus on user experience, performance, and modern web development practices.

🚀 Features

✅ Implemented Features

1. Multiple AI Model Support

• OpenRouter API integration
• Dynamic model list fetching
• Model switching functionality
• Model-specific feature support (image upload, etc.)

2. Advanced Chat System

• Real-time messaging
• Streaming responses
• Message history management

3. Image Upload

• Base64 image encoding
• File size control (5MB limit)
• Model-specific image support validation

4. Chat Management

• Local storage-based data persistence
• Conversation history list
• Chat deletion functionality
• Active conversation tracking
• Auto title generation

5. Comprehensive Error Handling

• Error Boundary: Catches component lifecycle errors
• Global Error Handler: Catches JavaScript and Promise errors
• Error Logging: Sends errors to logging service
• Notification Messages: User-friendly notifications

6. Modern User Interface

• Responsive design
• Modern look with Tailwind CSS
• Hover effects
• Loading states
• Notification messages

7. Docker Support

• Single command deployment with Docker Compose
• Development and production environments

🛠️ Tech Stack

Frontend

• Next.js 15 - React framework
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS - Styling
• Zustand - State management
• React Query - Data fetching
• React Toastify - Notifications

Backend

• Next.js API Routes - Backend API
• OpenRouter API - AI model access
• Zod - Input validation

DevOps

• Docker - Containerization
• Docker Compose - Multi-container orchestration

📁 Project Structure

src/
├── app/
│   ├── api/                 # API endpoints
│   │   ├── chat/           # Chat API
│   │   ├── errors/         # Error logging API
│   │   └── title/          # Title generation API
│   ├── components/         # React components
│   │   ├── ChatInput.tsx   # Message input component
│   │   ├── ChatHistory.tsx # Chat history
│   │   ├── MessageHistory.tsx # Message display
│   │   ├── Notification.tsx # Notification messages
│   │   └── ErrorBoundary.tsx # Error boundary
│   ├── hooks/              # Custom hooks
│   │   ├── useMessage.ts   # Message handling
│   │   ├── useErrorLogger.ts # Error logging
│   │   └── useGlobalErrorHandler.ts # Global error handling
│   ├── providers/          # Context providers
│   │   └── providers.tsx   # Main providers
│   └── layout.tsx          # Root layout
├── lib/
│   └── validations.ts      # Zod schemas
└── stores/
    ├── ConversationStore.ts # Conversation state
    └── ModelStore.ts       # Model state

🚀 Installation & Setup

Requirements

• Node.js 20+
• Docker and Docker Compose
• OpenRouter API key

Steps

1. Clone the repository

git clone https://github.com/M3R1ttt/OpenRouter-Chat-App.git
cd OpenRouter-Chat-App

2. Create environment file

cp .env.example .env.local

3. Configure OpenRouter API

   • Go to OpenRouter Dashboard
   • Navigate to API Keys section
   • Click Create new key or use existing key
   • Copy your API key

4. Add your API key

# Add your API key, other options are optional
OPENROUTER_API_KEY=your_api_key_here

5. Run with Docker

docker compose up -d

6. Access the application

• Main application: http://localhost:3000

🔧 Development

Local Development

npm install
npm run dev

Build

npm run build
npm start

Code Quality

npm run lint

🎨 Design Decisions

1. State Management

I chose Zustand because:

• Simple and lightweight
• Excellent TypeScript support
• Minimal boilerplate
• Less complex than Redux

2. Styling

I selected Tailwind CSS because:

• Utility-first approach
• Easy responsive design
• No custom CSS needed
• Modern and fast

3. Error Handling

I implemented comprehensive error handling because:

• Production error handling is critical
• Important for user experience
• Makes debugging easier
• Essential for monitoring

📊 Performance

Optimizations

• Next.js 15 - Fast compilation with Turbopack
• React 19 - New features and optimizations
• Tailwind CSS - Utility-first, minimal CSS
• Zustand - Lightweight state management
• Docker - Containerized deployment

🚀 Future Enhancements

1. User Authentication

• NextAuth.js integration
• JWT token management
• User profiles

2. Database Integration

• PostgreSQL/MongoDB integration
• Prisma ORM
• Cloud storage

3. Real-time Features

• Socket.io integration
• Real-time messaging

4. Enhanced UI Features

• Dark mode
• Animations
• Drag and drop
• Keyboard shortcuts

5. Advanced AI Features

• Custom model fine-tuning
• Prompt templates
• Response quality scoring

6. Advanced File Management

• Cloud storage (AWS S3, Cloudinary)
• File compression
• Multiple file uploads
• File preview

7. Enhanced Security

• Rate limiting
• Input sanitization
• CORS configuration
• Security headers