OpenRouter Integration Guide

Overview

This guide explains the OpenRouter integration added to DeepSite, which provides access to multiple AI models through a single API endpoint.

Added OpenRouter Models

The following OpenRouter models have been integrated:

Free Models

google/gemini-2.5-flash-image-preview:free 🆓🆕
- Max Tokens: 1,048,576
- Features: text, code, multimodal, image, fast
- Description: Free Gemini model with image processing capabilities
deepseek/deepseek-chat-v3.1:free 🆓🆕
- Max Tokens: 131,072
- Features: text, code, reasoning, chat
- Description: Free DeepSeek model optimized for conversations
openai/gpt-oss-20b:free 🆓🆕
- Max Tokens: 16,384
- Features: text, code, reasoning
- Description: Free open-source GPT model with good performance
z-ai/glm-4.5-air:free 🆓🆕
- Max Tokens: 8,192
- Features: text, code, lightweight, fast
- Description: Free lightweight GLM model optimized for speed
moonshotai/kimi-k2:free 🆓🆕
- Max Tokens: 128,000
- Features: text, code, long-context
- Description: Free model with extended context window

Premium Models

openai/gpt-oss-120b:free 💎🆕
- Max Tokens: 32,768
- Features: text, code, reasoning, large
- Description: Large open-source GPT model with advanced capabilities
qwen/qwen3-coder:free 💎🆕
- Max Tokens: 32,768
- Features: code, programming, specialized
- Description: Premium coding-specialized model for developers
tngtech/deepseek-r1t2-chimera:free 💎🆕
- Max Tokens: 65,536
- Features: text, code, reasoning, advanced
- Description: Premium hybrid model with advanced reasoning capabilities

Environment Variables

Add the following environment variable to your .env.local file in Hugging Face Spaces:

# OpenRouter API Key
OPENROUTER_API_KEY=your_openrouter_api_key_here

How to Get OpenRouter API Key

Visit OpenRouter.ai
Sign up for an account
Navigate to the API Keys section
Generate a new API key
Copy the key and add it to your environment variables

Badge System

The integration includes a visual badge system to help users identify model types:

🆕 NEW: Recently added models
💎 PRO: Premium models with advanced capabilities (shown in golden color)
🆓 FREE: Free-tier models

Technical Implementation

Files Modified

lib/providers.ts: Added OpenRouter provider and models
lib/openrouter-client.ts: Created OpenRouter API client
lib/ai-provider-handler.ts: Updated to support OpenRouter
app/api/ai/openrouter/route.ts: New API route for OpenRouter
lib/config.ts: Added OpenRouter provider configuration
lib/api.ts: Added OpenRouter generation method
components/ai/project-generator.tsx: Updated model selection with badges
components/editor/ask-ai/settings.tsx: Enhanced model selection UI

Architecture

The OpenRouter integration follows the same pattern as the existing Google Gemini integration:

User Interface
      ↓
AI Provider Handler (Routing Layer)
      ↓
OpenRouter Client (API Client)
      ↓
OpenRouter API

API Usage

Models are automatically routed to the appropriate provider based on their configuration:

// Automatic provider detection
const selectedModelConfig = AI_MODELS.find(m => m.value === aiModel);
const provider = selectedModelConfig?.category?.includes('openrouter') ? 'openrouter' : 'google';

Usage Examples

Project Generator

Users can now select OpenRouter models in the project generator with visual badges indicating model type and capabilities.

Ask AI Feature

All OpenRouter models are available in the Ask AI settings with proper badges and categorization.

Pro Agent Workflow

OpenRouter models can be used in the Pro Agent workflow for advanced project generation.

Error Handling

The integration includes proper error handling:

API key validation
Model availability checking
Rate limiting awareness
Fallback mechanisms

Performance Considerations

OpenRouter models have different token limits and pricing
Free models may have rate limitations
Premium models offer better performance and larger context windows

Testing

To test the integration:

Set the OPENROUTER_API_KEY environment variable
Start the development server
Try generating content with different OpenRouter models
Verify badges appear correctly in the UI
Check console for any errors

Support

For issues with OpenRouter integration:

Check the console for error messages
Verify API key is correctly set
Ensure selected models are available
Check OpenRouter service status

Future Enhancements

Add model usage analytics
Implement model recommendation system
Add custom model parameters
Enhance error messages
Add model performance metrics