A real-time AI model comparison platform that allows you to test and compare multiple AI models simultaneously for code generation tasks. Built with Next.js 15, AI SDK, TypeScript, and OpenRouter API integration.
- Dynamic Panels: Add or remove model comparison panels on-the-fly
- Side-by-Side View: Compare multiple AI models simultaneously
- Flexible Setup: Start with 2 models, expand to test 3, 4, 5+ models at once
- Easy Controls: Simple
+/-buttons to add/remove comparison panels - Model Selection: Choose multiple models via OpenRouter
- Independent Loading: Each model shows its own loading state
- Node.js 18+ or Bun
- OpenRouter API key (Get one here)
- Basic understanding of AI SDK (optional, for development)
-
Clone the repository
git clone https://github.com/buildfastwithai/models-arena-benchmark.git cd models-arena-benchmark -
Install dependencies
npm install # or bun install -
Start the development server
npm run dev # or bun dev -
Open your browser
Navigate to http://localhost:3000
-
Get OpenRouter API Key
- Sign up at OpenRouter
- Go to Settings → Keys
- Create a new API key
-
Configure the App
- Enter your API key in the sidebar
- Select your preferred AI models
- Start comparing!
- Enter your OpenRouter API key in the sidebar
- Click the external link icon to quickly access your API keys page
- Your key is automatically saved locally for future sessions
- Choose AI models for each comparison panel
- Use the
+button to add more comparison panels - Use the
×button to remove panels (minimum 1 required)
- Enter your prompt in the input box at the bottom
- Click submit to generate code across all selected models
- Watch results appear in real-time as each model completes
- Toggle the eye icon to hide/show the prompt box for full-screen viewing
- Frontend: Next.js 15 (App Router), React 19, TypeScript
- AI Integration: AI SDK for unified AI provider access
- Styling: Tailwind CSS, shadcn/ui components
- API Integration: OpenRouter API via AI SDK
- Icons: Lucide React
Sidebar: Configuration panel with instructions and brandingModelPanel: Individual model comparison panel with resultsModelPanelHeader: Panel controls for add/remove functionalityPromptBox: Input interface with toggle visibilityCodePreview: HTML/CSS/JS code preview and execution
POST /api/generate: Streams AI model responses in real-time- Accepts:
{ prompt: string, models: string[], apiKey: string } - Returns: Server-Sent Events stream with individual model results
- Accepts:
No environment variables required - all configuration is done through the UI.
npm run build
npm start- Model Selection: Find the best AI model for your specific coding tasks
- Performance Testing: Compare response times and code quality
- Prompt Engineering: Test how different models respond to the same prompts
- Benchmarking: Systematic comparison of AI model capabilities
- Quality Analysis: Side-by-side evaluation of generated code
- Documentation: Screenshot and document model performance differences
- Model Evaluation: Team decision-making for AI model adoption
- Demos: Showcase AI capabilities to stakeholders
- Training: Understand different AI model strengths and weaknesses
We welcome contributions! Here's how to get started:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Use the existing component patterns
- Ensure responsive design compatibility
- Test with multiple AI models
- Issues: Report bugs via GitHub Issues
- AI SDK Documentation: Learn more about AI SDK for AI integrations
- Course: Learn to build apps like this with our Gen AI Launchpad
- Website: Check out Build Fast with AI
Built with ❤️ by Build Fast with AI
Want to learn how to build apps like this? Check out our Gen AI Launchpad Course