UnifiedAI - ChatGPT Clone with Multiple AI Models

A modern ChatGPT-style interface powered by Google's Gemini models and open-source models from OpenRouter, built with Next.js, TypeScript, and tRPC.

Features

• 🤖 Multiple AI Models: Support for Gemini models (2.5 Pro, 2.5 Flash, 2.0 Flash) and open-source models from OpenRouter
• 🌟 Open-Source Models: Access to popular open-source models like Mistral, Llama, Qwen, Phi-3, Gemma, and DeepSeek
• 💬 ChatGPT-like UI: Beautiful, responsive interface with dark mode support
• ⚡ Streaming Responses: Real-time streaming of AI responses for a smooth experience
• 🎨 Modern Design: Clean, minimalist design inspired by ChatGPT
• 🔒 Type-Safe: Built with TypeScript and tRPC for end-to-end type safety

Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• A Google Gemini API key (Get one here)
• (Optional) An OpenRouter API key for open-source models (Get one here)
• (Optional) A Perplexity API key for web search models (Get one here)

Getting Started

1. Clone and install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

2. Set up environment variables:

   cp .env.example .env

   Then edit .env and add your API keys:

   GEMINI_API_KEY=your_gemini_api_key_here
   OPENROUTER_API_KEY=your_openrouter_api_key_here
   PERPLEXITY_API_KEY=your_perplexity_api_key_here
   

   Note: You need at least one API key. Gemini API key is required for Gemini models, OpenRouter API key is required for open-source models, and Perplexity API key is required for Perplexity models.

3. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser: Navigate to http://localhost:3000

Project Structure

├── app/                    # Next.js app directory
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Main chat page
│   ├── providers.tsx      # tRPC and React Query providers
│   └── globals.css        # Global styles
├── components/            # React components
│   ├── ChatMessage.tsx    # Message bubble component
│   ├── ChatInput.tsx      # Input component
│   └── ModelSelector.tsx  # Model selection dropdown
├── pages/
│   └── api/               # API routes
│       ├── trpc/          # tRPC endpoint
│       └── chat/          # Unified chat streaming endpoint
├── server/                # Backend server code
│   ├── trpc.ts           # tRPC setup
│   ├── models.ts         # Unified model configuration
│   ├── services/         # API service clients
│   │   └── openrouter.ts # OpenRouter client
│   └── routers/          # tRPC routers
│       ├── gemini.ts     # Gemini API router
│       └── _app.ts       # Main app router
├── types/                 # TypeScript types
└── utils/                 # Utility functions
    └── trpc.ts           # tRPC client setup

Available Models

Google Gemini Models

• Gemini 2.5 Pro: Advanced model with higher performance for complex tasks
• Gemini 2.5 Flash: Optimized for speed and cost-efficiency
• Gemini 2.0 Flash: Earlier version with foundational features

OpenRouter Open-Source Models

• Mistral 7B Instruct: Fast and efficient 7B parameter model
• Llama 3.2 3B Instruct: Lightweight and fast 3B parameter model
• Llama 3.2 1B Instruct: Ultra-lightweight 1B parameter model

Perplexity Models (Web Search & Citations)

• Sonar: Perplexity Sonar model with web search and citations
• Sonar Pro: Most capable Perplexity model with web search and citations

Usage

1. Select a model from the dropdown at the top
2. Type your message in the input box
3. Press Enter to send (Shift+Enter for new line)
4. Watch as the AI streams its response in real-time

Tech Stack

• Framework: Next.js 14
• Language: TypeScript
• API: tRPC
• Styling: Tailwind CSS
• AI: Google Gemini API, OpenRouter API, Perplexity API
• State Management: React Query

License

MIT