A unified AI chat interface powered by OpenRouter, allowing users to interact with multiple AI models in a clean, responsive web application.
- Multi-Model Support: Choose from popular AI models including GPT-4o Mini, GPT-4o, Claude 3 Haiku, Claude 3 Sonnet, and Gemini Pro
- Custom API Integration: Connect to external AI providers by providing your own API endpoint, key, and model name
- Real-time Chat: Seamless conversation experience with message history
- Dark Mode Support: Automatic theme switching based on system preferences
- Responsive Design: Works on desktop and mobile devices
- Usage Limits: Built-in rate limiting for OpenRouter models (3 requests per model)
- Buy Credits: Direct link to purchase OpenRouter credits
- Frontend: Next.js 15, React, TypeScript, Tailwind CSS
- Backend: Next.js API Routes
- AI Provider: OpenRouter (with custom API support)
- Styling: Tailwind CSS with dark mode
- Icons: Custom SVG logo
- Node.js 18+
- npm, yarn, pnpm, or bun
- OpenRouter API key (get one at openrouter.ai)
- Clone the repository:
git clone <repository-url>
cd router- Install dependencies:
npm install- Create a
.env.localfile in the root directory and add your OpenRouter API key:
OPENROUTER_API_KEY=your-api-key-here- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
- Select your preferred model from the dropdown
- Type your message in the text box
- Press Enter or click Send
- Check the "Use Custom API" checkbox
- Enter your API URL (e.g.,
https://api.openai.com/v1/chat/completions) - Enter your API key
- Enter the model name
- Start chatting
router/
├── app/
│ ├── api/chat/
│ │ └── route.ts # Chat API endpoint
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main chat interface
├── public/
│ ├── logo.svg # App logo
│ └── ... # Other static assets
├── .env.local # Environment variables
└── README.md # This file
Send a chat message to an AI model.
Request Body:
{
"message": "Hello, world!",
"model": "openai/gpt-4o-mini",
"useCustom": false,
"customUrl": "",
"customKey": "",
"customModel": ""
}Response:
{
"reply": "Hello! How can I help you today?"
}- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is licensed under the MIT License.
- OpenRouter for providing unified access to multiple AI models
- Next.js for the React framework
- Tailwind CSS for styling