OpenRouter - Unified AI API Gateway Overview

OpenRouter provides a single API to access 200+ language models from OpenAI, Anthropic, Google, Meta, Mistral, and more. It offers intelligent routing, streaming, cost optimization, and standardized OpenAI-compatible interface.

Key Features:

Access 200+ models through one API OpenAI-compatible interface (drop-in replacement) Intelligent model routing and fallbacks Real-time streaming responses Cost tracking and optimization Model performance analytics Function calling support Vision model support

Pricing Model:

Pay-per-token (no subscriptions) Volume discounts available Free tier with credits Per-model pricing varies

Installation:

npm install openai # Use OpenAI SDK

or

pip install openai # Python

Quick Start 1. Get API Key

export OPENROUTER_API_KEY="sk-or-v1-..."

Basic Chat Completion import OpenAI from 'openai';

const client = new OpenAI({ baseURL: 'https://openrouter.ai/api/v1', apiKey: process.env.OPENROUTER_API_KEY, defaultHeaders: { 'HTTP-Referer': 'https://your-app.com', // Optional 'X-Title': 'Your App Name', // Optional } });

async function chat() { const completion = await client.chat.completions.create({ model: 'anthropic/claude-3.5-sonnet', messages: [ { role: 'user', content: 'Explain quantum computing in simple terms' } ], });

console.log(completion.choices[0].message.content); }

Streaming Response async function streamChat() { const stream = await client.chat.completions.create({ model: 'openai/gpt-4-turbo', messages: [ { role: 'user', content: 'Write a short story about AI' } ], stream: true, });

for await (const chunk of stream) { const content = chunk.choices[0]?.delta?.content || ''; process.stdout.write(content); } }

Model Selection Strategy Available Model Categories

Flagship Models (Highest Quality):

const flagshipModels = { claude: 'anthropic/claude-3.5-sonnet', // Best reasoning gpt4: 'openai/gpt-4-turbo', // Best general purpose gemini: 'google/gemini-pro-1.5', // Best long context opus: 'anthropic/claude-3-opus', // Best complex tasks };

Fast Models (Low Latency):

const fastModels = { claude: 'anthropic/claude-3-haiku', // Fastest Claude gpt35: 'openai/gpt-3.5-turbo', // Fast GPT gemini: 'google/gemini-flash-1.5', // Fast Gemini llama: 'meta-llama/llama-3.1-8b-instruct', // Fast open source };

Cost-Optimized Models:

const budgetModels = { haiku: 'anthropic/claude-3-haiku', // $0.25/$1.25 per 1M tokens gemini: 'google/gemini-flash-1.5', // $0.075/$0.30 per 1M tokens llama: 'meta-llama/llama-3.1-8b-instruct', // $0.06/$0.06 per 1M tokens mixtral: 'mistralai/mixtral-8x7b-instruct', // $0.24/$0.24 per 1M tokens };

Specialized Models:

const specializedModels = { vision: 'openai/gpt-4-vision-preview', // Image understanding code: 'anthropic/claude-3.5-sonnet', // Code generation longContext: 'google/gemini-pro-1.5', // 2M token context function: 'openai/gpt-4-turbo', // Function calling };

Model Selection Logic interface ModelSelector { task: 'chat' | 'code' | 'vision' | 'function' | 'summary'; priority: 'quality' | 'speed' | 'cost'; maxCost?: number; // Max cost per 1M tokens contextSize?: number; }

function selectModel(criteria: ModelSelector): string { if (criteria.task === 'vision') { return 'openai/gpt-4-vision-preview'; }

if (criteria.task === 'code') { return criteria.priority === 'quality' ? 'anthropic/claude-3.5-sonnet' : 'meta-llama/llama-3.1-70b-instruct'; }

if (criteria.contextSize && criteria.contextSize > 100000) { return 'google/gemini-pro-1.5'; // 2M context }

// Default selection by priority switch (criteria.priority) { case 'quality': return 'anthropic/claude-3.5-sonnet'; case 'speed': return 'anthropic/claude-3-haiku'; case 'cost': return criteria.maxCost && criteria.maxCost < 0.5 ? 'google/gemini-flash-1.5' : 'anthropic/claude-3-haiku'; default: return 'openai/gpt-4-turbo'; } }

// Usage const model = selectModel({ task: 'code', priority: 'quality', });

Streaming Implementation TypeScript Streaming with Error Handling async function robustStreamingChat( prompt: string, model: string = 'anthropic/claude-3.5-sonnet' ) { try { const stream = await client.chat.completions.create({ model, messages: [{ role: 'user', content: prompt }], stream: true, max_tokens: 4000, });

let fullResponse = '';

for await (const chunk of stream) {
  const delta = chunk.choices[0]?.delta;

  if (delta?.content) {
    fullResponse += delta.content;
    process.stdout.write(delta.content);
  }

  // Handle function calls
  if (delta?.function_call) {
    console.log('\nFunction call:', delta.function_call);
  }

  // Check for finish reason
  if (chunk.choices[0]?.finish_reason) {
    console.log(`\n[Finished: ${chunk.choices[0].finish_reason}]`);
  }
}

return fullResponse;

} catch (error) { if (error instanceof Error) { console.error('Streaming error:', error.message); } throw error; } }

Python Streaming from openai import OpenAI

client = OpenAI( base_url="https://openrouter.ai/api/v1", api_key=os.environ.get("OPENROUTER_API_KEY"), )

def stream_chat(prompt: str, model: str = "anthropic/claude-3.5-sonnet"): stream = client.chat.completions.create( model=model, messages=[{"role": "user", "content": prompt}], stream=True, )

full_response = ""
for chunk in stream:
    if chunk.choices[0].delta.content:
        content = chunk.choices[0].delta.content
        full_response += content
        print(content, end="", flush=True)

print()  # New line
return full_response

React Streaming Component import { useState } from 'react';

function StreamingChat() { const [response, setResponse] = useState(''); const [isStreaming, setIsStreaming] = useState(false);

async function handleSubmit(prompt: string) { setIsStreaming(true); setResponse('');

try {
  const res = await fetch('https://openrouter.ai/api/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      model: 'anthropic/claude-3.5-sonnet',
      messages: [{ role: 'user', content: prompt }],
      stream: true,
    }),
  });

  const reader = res.body?.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader!.read();
    if (done) break;

    const chunk = decoder.decode(value);
    const lines = chunk.split('\n').filter(line => line.trim());

    for (const line of lines) {
      if (line.startsWith('data: ')) {
        const data = line.slice(6);
        if (data === '[DONE]') continue;

        try {
          const parsed = JSON.parse(data);
          const content = parsed.choices[0]?.delta?.content || '';
          setResponse(prev => prev + content);
        } catch (e) {
          // Skip invalid JSON
        }
      }
    }
  }
} catch (error) {
  console.error('Streaming error:', error);
} finally {
  setIsStreaming(false);
}

}

return (

      <button onClick={() => handleSubmit('Explain AI')}>
        {isStreaming ? 'Streaming...' : 'Send'}
      </button>
    </div>
  );
}</p>
<p>Function Calling
Basic Function Calling
const tools = [
  {
    type: 'function',
    function: {
      name: 'get_weather',
      description: 'Get current weather for a location',
      parameters: {
        type: 'object',
        properties: {
          location: {
            type: 'string',
            description: 'City name, e.g. San Francisco',
          },
          unit: {
            type: 'string',
            enum: ['celsius', 'fahrenheit'],
          },
        },
        required: ['location'],
      },
    },
  },
];</p>
<p>async function chatWithFunctions() {
  const completion = await client.chat.completions.create({
    model: 'openai/gpt-4-turbo',
    messages: [
      { role: 'user', content: 'What is the weather in Tokyo?' }
    ],
    tools,
    tool_choice: 'auto',
  });</p>
<p>const message = completion.choices[0].message;</p>
<p>if (message.tool_calls) {
    for (const toolCall of message.tool_calls) {
      console.log('Function:', toolCall.function.name);
      console.log('Arguments:', toolCall.function.arguments);</p>
<pre class="codehilite"><code>  // Execute function
  const args = JSON.parse(toolCall.function.arguments);
  const result = await getWeather(args.location, args.unit);

  // Send result back
  const followUp = await client.chat.completions.create({
    model: 'openai/gpt-4-turbo',
    messages: [
      { role: 'user', content: 'What is the weather in Tokyo?' },
      message,
      {
        role: 'tool',
        tool_call_id: toolCall.id,
        content: JSON.stringify(result),
      },
    ],
    tools,
  });

  console.log(followUp.choices[0].message.content);
}
</code></pre>

<p>}
}</p>
<p>Multi-Step Function Calling
async function multiStepFunctionCall(userQuery: string) {
  const messages = [{ role: 'user', content: userQuery }];
  let iterationCount = 0;
  const maxIterations = 5;</p>
<p>while (iterationCount < maxIterations) {
    const completion = await client.chat.completions.create({
      model: 'openai/gpt-4-turbo',
      messages,
      tools,
      tool_choice: 'auto',
    });</p>
<pre class="codehilite"><code>const message = completion.choices[0].message;
messages.push(message);

if (!message.tool_calls) {
  // No more function calls, return final response
  return message.content;
}

// Execute all function calls
for (const toolCall of message.tool_calls) {
  const functionName = toolCall.function.name;
  const args = JSON.parse(toolCall.function.arguments);

  // Execute function (implement your function registry)
  const result = await executeFunctionCall(functionName, args);

  messages.push({
    role: 'tool',
    tool_call_id: toolCall.id,
    content: JSON.stringify(result),
  });
}

iterationCount++;
</code></pre>

<p>}</p>
<p>throw new Error('Max iterations reached');
}</p>
<p>Cost Optimization
Token Counting and Cost Estimation
import { encoding_for_model } from 'tiktoken';</p>
<p>interface CostEstimate {
  promptTokens: number;
  completionTokens: number;
  promptCost: number;
  completionCost: number;
  totalCost: number;
}</p>
<p>const modelPricing = {
  'anthropic/claude-3.5-sonnet': { input: 3.00, output: 15.00 },  // per 1M tokens
  'anthropic/claude-3-haiku': { input: 0.25, output: 1.25 },
  'openai/gpt-4-turbo': { input: 10.00, output: 30.00 },
  'openai/gpt-3.5-turbo': { input: 0.50, output: 1.50 },
  'google/gemini-flash-1.5': { input: 0.075, output: 0.30 },
};</p>
<p>function estimateCost(
  prompt: string,
  expectedCompletion: number,
  model: string
): CostEstimate {
  const encoder = encoding_for_model('gpt-4');  // Approximation
  const promptTokens = encoder.encode(prompt).length;
  const completionTokens = expectedCompletion;</p>
<p>const pricing = modelPricing[model] || { input: 0, output: 0 };</p>
<p>const promptCost = (promptTokens / 1_000_000) * pricing.input;
  const completionCost = (completionTokens / 1_000_000) * pricing.output;</p>
<p>return {
    promptTokens,
    completionTokens,
    promptCost,
    completionCost,
    totalCost: promptCost + completionCost,
  };
}</p>
<p>// Usage
const estimate = estimateCost(
  'Explain quantum computing',
  500,  // Expected response tokens
  'anthropic/claude-3.5-sonnet'
);</p>
<p>console.log(<code>Estimated cost: $${estimate.totalCost.toFixed(4)}</code>);</p>
<p>Dynamic Model Selection by Budget
async function budgetOptimizedChat(
  prompt: string,
  maxCostPerRequest: number = 0.01  // $0.01 max
) {
  // Estimate with expensive model
  const expensiveEstimate = estimateCost(
    prompt,
    1000,
    'anthropic/claude-3.5-sonnet'
  );</p>
<p>let selectedModel = 'anthropic/claude-3.5-sonnet';</p>
<p>if (expensiveEstimate.totalCost > maxCostPerRequest) {
    // Try cheaper models
    const cheapEstimate = estimateCost(
      prompt,
      1000,
      'anthropic/claude-3-haiku'
    );</p>
<pre class="codehilite"><code>if (cheapEstimate.totalCost > maxCostPerRequest) {
  selectedModel = 'google/gemini-flash-1.5';
} else {
  selectedModel = 'anthropic/claude-3-haiku';
}
</code></pre>

<p>}</p>
<p>console.log(<code>Selected model: ${selectedModel}</code>);</p>
<p>const completion = await client.chat.completions.create({
    model: selectedModel,
    messages: [{ role: 'user', content: prompt }],
  });</p>
<p>return completion.choices[0].message.content;
}</p>
<p>Batching for Cost Reduction
async function batchProcess(prompts: string[], model: string) {
  // Process multiple prompts in parallel with rate limiting
  const concurrency = 5;
  const results = [];</p>
<p>for (let i = 0; i < prompts.length; i += concurrency) {
    const batch = prompts.slice(i, i + concurrency);</p>
<pre class="codehilite"><code>const batchResults = await Promise.all(
  batch.map(prompt =>
    client.chat.completions.create({
      model,
      messages: [{ role: 'user', content: prompt }],
      max_tokens: 500,  // Limit tokens to control cost
    })
  )
);

results.push(...batchResults);

// Rate limiting delay
if (i + concurrency < prompts.length) {
  await new Promise(resolve => setTimeout(resolve, 1000));
}
</code></pre>

<p>}</p>
<p>return results;
}</p>
<p>Model Fallback and Retry Strategy
Automatic Fallback
const modelFallbackChain = [
  'anthropic/claude-3.5-sonnet',
  'openai/gpt-4-turbo',
  'anthropic/claude-3-haiku',
  'google/gemini-flash-1.5',
];</p>
<p>async function chatWithFallback(
  prompt: string,
  maxRetries: number = 3
): Promise<string> {
  for (const model of modelFallbackChain) {
    try {
      console.log(<code>Trying model: ${model}</code>);</p>
<pre class="codehilite"><code>  const completion = await client.chat.completions.create({
    model,
    messages: [{ role: 'user', content: prompt }],
    max_tokens: 2000,
  });

  return completion.choices[0].message.content || '';
} catch (error) {
  console.warn(`Model ${model} failed:`, error);

  // Continue to next model
  if (model === modelFallbackChain[modelFallbackChain.length - 1]) {
    throw new Error('All models failed');
  }
}
</code></pre>

<p>}</p>
<p>throw new Error('No models available');
}</p>
<p>Exponential Backoff for Rate Limits
async function retryWithBackoff<T>(
  fn: () => Promise<T>,
  maxRetries: number = 5
): Promise<T> {
  let lastError: Error;</p>
<p>for (let i = 0; i < maxRetries; i++) {
    try {
      return await fn();
    } catch (error) {
      lastError = error as Error;</p>
<pre class="codehilite"><code>  // Check if rate limit error
  if (error.status === 429) {
    const delay = Math.pow(2, i) * 1000;  // Exponential backoff
    console.log(`Rate limited. Retrying in ${delay}ms...`);
    await new Promise(resolve => setTimeout(resolve, delay));
  } else {
    throw error;  // Non-retryable error
  }
}
</code></pre>

<p>}</p>
<p>throw lastError!;
}</p>
<p>// Usage
const result = await retryWithBackoff(() =>
  client.chat.completions.create({
    model: 'anthropic/claude-3.5-sonnet',
    messages: [{ role: 'user', content: 'Hello' }],
  })
);</p>
<p>Prompt Engineering Best Practices
System Prompts for Consistency
const systemPrompts = {
  concise: 'You are a helpful assistant. Be concise and direct.',
  detailed: 'You are a knowledgeable expert. Provide comprehensive answers with examples.',
  code: 'You are an expert programmer. Provide clean, well-commented code with explanations.',
  creative: 'You are a creative writing assistant. Be imaginative and engaging.',
};</p>
<p>async function chatWithPersonality(
  prompt: string,
  personality: keyof typeof systemPrompts
) {
  const completion = await client.chat.completions.create({
    model: 'anthropic/claude-3.5-sonnet',
    messages: [
      { role: 'system', content: systemPrompts[personality] },
      { role: 'user', content: prompt },
    ],
  });</p>
<p>return completion.choices[0].message.content;
}</p>
<p>Few-Shot Prompting
async function fewShotClassification(text: string) {
  const completion = await client.chat.completions.create({
    model: 'openai/gpt-4-turbo',
    messages: [
      {
        role: 'system',
        content: 'Classify text sentiment as positive, negative, or neutral.',
      },
      { role: 'user', content: 'I love this product!' },
      { role: 'assistant', content: 'positive' },
      { role: 'user', content: 'This is terrible.' },
      { role: 'assistant', content: 'negative' },
      { role: 'user', content: 'It works fine.' },
      { role: 'assistant', content: 'neutral' },
      { role: 'user', content: text },
    ],
  });</p>
<p>return completion.choices[0].message.content;
}</p>
<p>Chain of Thought Prompting
async function reasoningTask(problem: string) {
  const completion = await client.chat.completions.create({
    model: 'anthropic/claude-3.5-sonnet',
    messages: [
      {
        role: 'user',
        content: <code>${problem}\n\nLet's solve this step by step:\n1.</code>,
      },
    ],
    max_tokens: 3000,
  });</p>
<p>return completion.choices[0].message.content;
}</p>
<p>Rate Limits and Throttling
Rate Limit Handler
class RateLimitedClient {
  private requestQueue: Array<() => Promise<any>> = [];
  private processing = false;
  private requestsPerMinute = 60;
  private requestInterval = 60000 / this.requestsPerMinute;</p>
<p>async enqueue<T>(request: () => Promise<T>): Promise<T> {
    return new Promise((resolve, reject) => {
      this.requestQueue.push(async () => {
        try {
          const result = await request();
          resolve(result);
        } catch (error) {
          reject(error);
        }
      });</p>
<pre class="codehilite"><code>  this.processQueue();
});
</code></pre>

<p>}</p>
<p>private async processQueue() {
    if (this.processing || this.requestQueue.length === 0) return;</p>
<pre class="codehilite"><code>this.processing = true;

while (this.requestQueue.length > 0) {
  const request = this.requestQueue.shift()!;
  await request();
  await new Promise(resolve => setTimeout(resolve, this.requestInterval));
}

this.processing = false;
</code></pre>

<p>}
}</p>
<p>// Usage
const rateLimitedClient = new RateLimitedClient();</p>
<p>const result = await rateLimitedClient.enqueue(() =>
  client.chat.completions.create({
    model: 'anthropic/claude-3.5-sonnet',
    messages: [{ role: 'user', content: 'Hello' }],
  })
);</p>
<p>Vision Models
Image Understanding
async function analyzeImage(imageUrl: string, question: string) {
  const completion = await client.chat.completions.create({
    model: 'openai/gpt-4-vision-preview',
    messages: [
      {
        role: 'user',
        content: [
          { type: 'text', text: question },
          { type: 'image_url', image_url: { url: imageUrl } },
        ],
      },
    ],
    max_tokens: 1000,
  });</p>
<p>return completion.choices[0].message.content;
}</p>
<p>// Usage
const result = await analyzeImage(
  'https://example.com/image.jpg',
  'What objects are in this image?'
);</p>
<p>Multi-Image Analysis
async function compareImages(imageUrls: string[]) {
  const completion = await client.chat.completions.create({
    model: 'openai/gpt-4-vision-preview',
    messages: [
      {
        role: 'user',
        content: [
          { type: 'text', text: 'Compare these images and describe the differences:' },
          ...imageUrls.map(url => ({
            type: 'image_url' as const,
            image_url: { url },
          })),
        ],
      },
    ],
  });</p>
<p>return completion.choices[0].message.content;
}</p>
<p>Error Handling and Monitoring
Comprehensive Error Handler
interface ErrorResponse {
  error: {
    message: string;
    type: string;
    code: string;
  };
}</p>
<p>async function robustCompletion(prompt: string) {
  try {
    const completion = await client.chat.completions.create({
      model: 'anthropic/claude-3.5-sonnet',
      messages: [{ role: 'user', content: prompt }],
    });</p>
<pre class="codehilite"><code>return completion.choices[0].message.content;
</code></pre>

<p>} catch (error: any) {
    // Rate limit errors
    if (error.status === 429) {
      console.error('Rate limit exceeded. Please wait.');
      throw new Error('RATE_LIMIT_EXCEEDED');
    }</p>
<pre class="codehilite"><code>// Invalid API key
if (error.status === 401) {
  console.error('Invalid API key');
  throw new Error('INVALID_API_KEY');
}

// Model not found
if (error.status === 404) {
  console.error('Model not found');
  throw new Error('MODEL_NOT_FOUND');
}

// Server errors
if (error.status >= 500) {
  console.error('OpenRouter server error');
  throw new Error('SERVER_ERROR');
}

// Unknown error
console.error('Unknown error:', error);
throw error;
</code></pre>

<p>}
}</p>
<p>Request/Response Logging
class LoggingClient {
  async chat(prompt: string, model: string) {
    const startTime = Date.now();</p>
<pre class="codehilite"><code>console.log('[Request]', {
  timestamp: new Date().toISOString(),
  model,
  promptLength: prompt.length,
});

try {
  const completion = await client.chat.completions.create({
    model,
    messages: [{ role: 'user', content: prompt }],
  });

  const duration = Date.now() - startTime;

  console.log('[Response]', {
    timestamp: new Date().toISOString(),
    duration,
    usage: completion.usage,
    finishReason: completion.choices[0].finish_reason,
  });

  return completion;
} catch (error) {
  console.error('[Error]', {
    timestamp: new Date().toISOString(),
    duration: Date.now() - startTime,
    error,
  });
  throw error;
}
</code></pre>

<p>}
}</p>
<p>Best Practices</p>
<p>Model Selection:</p>
<p>Use fast models (Haiku, Flash) for simple tasks
Use flagship models (Sonnet, GPT-4) for complex reasoning
Consider context size requirements
Test multiple models for your use case</p>
<p>Cost Optimization:</p>
<p>Estimate costs before requests
Use cheaper models when possible
Implement token limits
Cache common responses
Batch similar requests</p>
<p>Streaming:</p>
<p>Always use streaming for user-facing apps
Handle connection interruptions
Show progress indicators
Buffer partial responses</p>
<p>Error Handling:</p>
<p>Implement retry logic with exponential backoff
Use model fallbacks for reliability
Log all errors for debugging
Handle rate limits gracefully</p>
<p>Prompt Engineering:</p>
<p>Use system prompts for consistency
Implement few-shot learning for specific tasks
Use chain-of-thought for complex reasoning
Keep prompts concise to reduce costs</p>
<p>Rate Limiting:</p>
<p>Respect API rate limits
Implement request queuing
Use exponential backoff
Monitor usage metrics</p>
<p>Security:</p>
<p>Never expose API keys in client code
Use environment variables
Implement server-side proxies
Validate user inputs</p>
<p>Monitoring:</p>
<p>Track token usage
Monitor response times
Log errors and failures
Analyze model performance
Common Pitfalls</p>
<p>❌ Exposing API keys in frontend:</p>
<p>// WRONG - API key exposed
const client = new OpenAI({
  baseURL: 'https://openrouter.ai/api/v1',
  apiKey: 'sk-or-v1-...',  // Exposed!
});</p>
<p>✅ Correct - Server-side proxy:</p>
<p>// Backend proxy
app.post('/api/chat', async (req, res) => {
  const { prompt } = req.body;</p>
<p>const completion = await client.chat.completions.create({
    model: 'anthropic/claude-3.5-sonnet',
    messages: [{ role: 'user', content: prompt }],
  });</p>
<p>res.json(completion);
});</p>
<p>❌ Not handling streaming errors:</p>
<p>// WRONG - no error handling
for await (const chunk of stream) {
  console.log(chunk.choices[0].delta.content);
}</p>
<p>✅ Correct - with error handling:</p>
<p>try {
  for await (const chunk of stream) {
    const content = chunk.choices[0]?.delta?.content || '';
    process.stdout.write(content);
  }
} catch (error) {
  console.error('Stream error:', error);
  // Implement retry or fallback
}</p>
<p>❌ Ignoring rate limits:</p>
<p>// WRONG - no rate limiting
const promises = prompts.map(prompt => chat(prompt));
await Promise.all(promises);  // May hit rate limits</p>
<p>✅ Correct - with rate limiting:</p>
<p>const results = [];
for (let i = 0; i < prompts.length; i += 5) {
  const batch = prompts.slice(i, i + 5);
  const batchResults = await Promise.all(batch.map(chat));
  results.push(...batchResults);
  await new Promise(r => setTimeout(r, 1000));  // Delay between batches
}</p>
<p>Performance Optimization
Caching Responses
const responseCache = new Map<string, string>();</p>
<p>async function cachedChat(prompt: string, model: string) {
  const cacheKey = <code>${model}:${prompt}</code>;</p>
<p>if (responseCache.has(cacheKey)) {
    console.log('Cache hit');
    return responseCache.get(cacheKey)!;
  }</p>
<p>const completion = await client.chat.completions.create({
    model,
    messages: [{ role: 'user', content: prompt }],
  });</p>
<p>const response = completion.choices[0].message.content || '';
  responseCache.set(cacheKey, response);</p>
<p>return response;
}</p>
<p>Parallel Processing
async function parallelChat(prompts: string[], model: string) {
  const results = await Promise.all(
    prompts.map(prompt =>
      client.chat.completions.create({
        model,
        messages: [{ role: 'user', content: prompt }],
      })
    )
  );</p>
<p>return results.map(r => r.choices[0].message.content);
}</p>
<p>Resources
Documentation: https://openrouter.ai/docs
API Reference: https://openrouter.ai/docs/api-reference
Model List: https://openrouter.ai/models
Pricing: https://openrouter.ai/docs/pricing
Status Page: https://status.openrouter.ai
Related Skills
MCP Servers: Integration with Model Context Protocol (when built)
TypeScript API Integration: Type-safe OpenRouter clients
Python API Integration: Python SDK usage patterns
Summary
OpenRouter provides unified access to 200+ LLMs
OpenAI-compatible API for easy migration
Cost optimization through model selection and token management
Streaming for responsive user experiences
Function calling for tool integration
Vision models for image understanding
Fallback strategies for reliability
Rate limiting and error handling essential
Perfect for multi-model apps, cost-sensitive deployments, avoiding vendor lock-in</p>
                </article>

                
                <a href="/" class="back-link">← <span data-i18n="detail.backToLeaderboard">返回排行榜</span></a>
            </div>

            
            <aside class="sidebar">
                <section class="related-skills" id="relatedSkillsSection">
                    <h2 class="related-title" data-i18n="detail.relatedSkills">相关 Skills</h2>
                    <div class="related-list" id="relatedSkillsList">
                        
                        <div class="skeleton-card"></div>
                        <div class="skeleton-card"></div>
                        <div class="skeleton-card"></div>
                    </div>
                </section>
            </aside>
        </div>
    </div>


    
    <script src="https://unpkg.com/i18next@23.11.5/i18next.min.js" defer></script>
    <script src="https://unpkg.com/i18next-browser-languagedetector@7.2.1/i18nextBrowserLanguageDetector.min.js" defer></script>

    <script defer>
        // Language resources - same pattern as index page
        const resources = {
            'zh-CN': null,
            'en': null,
            'ja': null,
            'ko': null,
            'zh-TW': null,
            'es': null,
            'fr': null
        };

        // Load language files (only current + fallback for performance)
        async function loadLanguageResources() {
            const savedLang = localStorage.getItem('i18nextLng') || 'en';
            const langsToLoad = new Set([savedLang, 'en']); // current + fallback
            await Promise.all([...langsToLoad].map(async (lang) => {
                try {
                    const response = await fetch(`/locales/${lang}.json`);
                    if (response.ok) {
                        resources[lang] = { translation: await response.json() };
                    }
                } catch (error) {
                    console.warn(`Failed to load ${lang} language file:`, error);
                }
            }));
        }

        // Load a single language on demand (for language switching)
        async function loadLanguage(lang) {
            if (resources[lang]) return;
            try {
                const response = await fetch(`/locales/${lang}.json`);
                if (response.ok) {
                    resources[lang] = { translation: await response.json() };
                    i18next.addResourceBundle(lang, 'translation', resources[lang].translation);
                }
            } catch (error) {
                console.warn(`Failed to load ${lang} language file:`, error);
            }
        }

        // Initialize i18next
        async function initI18n() {
            try {
                await loadLanguageResources();
                
                // Filter out null values from resources
                const validResources = {};
                for (const [lang, data] of Object.entries(resources)) {
                    if (data !== null) {
                        validResources[lang] = data;
                    }
                }
                
                console.log('Loaded languages:', Object.keys(validResources));
                console.log('zh-CN resource:', validResources['zh-CN']);
                console.log('detail.home in resource:', validResources['zh-CN']?.translation?.detail?.home);
                
                // 检查是否有保存的语言偏好
                const savedLang = localStorage.getItem('i18nextLng');
                // 如果没有保存的语言偏好，默认使用英文
                const defaultLang = savedLang && ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'].includes(savedLang) 
                    ? savedLang 
                    : 'en';
                
                await i18next
                    .use(i18nextBrowserLanguageDetector)
                    .init({
                        lng: defaultLang,  // 强制设置初始语言
                        fallbackLng: 'en',
                        supportedLngs: ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'],
                        resources: validResources,
                        detection: {
                            order: ['localStorage'],  // 只使用 localStorage，不检测浏览器语言
                            caches: ['localStorage'],
                            lookupLocalStorage: 'i18nextLng'
                        },
                        interpolation: {
                            escapeValue: false
                        }
                    });

                console.log('i18next initialized, language:', i18next.language);
                console.log('Test translation:', i18next.t('detail.home'));

                // Set initial language in selector
                const langSwitcher = document.getElementById('langSwitcher');
                langSwitcher.value = i18next.language;

                // Update page language
                updatePageLanguage();

                // Language switch event
                langSwitcher.addEventListener('change', async (e) => {
                    await loadLanguage(e.target.value); // load on demand
                    i18next.changeLanguage(e.target.value).then(() => {
                        updatePageLanguage();
                        localStorage.setItem('i18nextLng', e.target.value);
                    });
                });
            } catch (error) {
                console.error('i18next init failed:', error);
            }
        }

        // Translation helper
        function t(key, options = {}) {
            return i18next.t(key, options);
        }

        // Update all translatable elements
        function updatePageLanguage() {
            // Update HTML lang attribute
            document.documentElement.lang = i18next.language;

            // Update elements with data-i18n attribute
            document.querySelectorAll('[data-i18n]').forEach(el => {
                const key = el.getAttribute('data-i18n');
                el.textContent = t(key);
            });
        }

        // Copy command function
        function copyCommand() {
            const command = document.getElementById('installCommand').textContent;
            const btn = document.getElementById('copyBtn');
            
            navigator.clipboard.writeText(command).then(() => {
                btn.textContent = t('copied');
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.textContent = t('copy');
                    btn.classList.remove('copied');
                }, 2000);
            }).catch(() => {
                // Fallback for non-HTTPS
                const textArea = document.createElement('textarea');
                textArea.value = command;
                textArea.style.position = 'fixed';
                textArea.style.left = '-9999px';
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                
                btn.textContent = t('copied');
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.textContent = t('copy');
                    btn.classList.remove('copied');
                }, 2000);
            });
        }

        // Initialize
        document.getElementById('copyBtn').addEventListener('click', copyCommand);
        initI18n();

        // 异步加载相关 Skills
        async function loadRelatedSkills() {
            const owner = 'rawveg';
            const skillName = 'openrouter';
            const currentLang = 'ko';
            const listContainer = document.getElementById('relatedSkillsList');
            const section = document.getElementById('relatedSkillsSection');

            try {
                const response = await fetch(`/api/related-skills/${encodeURIComponent(owner)}/${encodeURIComponent(skillName)}?limit=6`);
                
                if (!response.ok) {
                    throw new Error('Failed to load');
                }

                const data = await response.json();
                const relatedSkills = data.related_skills || [];

                if (relatedSkills.length === 0) {
                    // 没有相关推荐时隐藏整个区域
                    section.style.display = 'none';
                    return;
                }

                // 渲染相关 Skills
                listContainer.innerHTML = relatedSkills.map(skill => {
                    const desc = skill.description || '';
                    const truncatedDesc = desc.length > 60 ? desc.substring(0, 60) + '...' : desc;
                    return `
                        <a href="${currentLang === 'en' ? '' : '/' + currentLang}/skill/${skill.owner}/${skill.repo}/${skill.skill_name}" class="related-card">
                            <div class="related-name">${escapeHtml(skill.skill_name)}</div>
                            <div class="related-meta">
                                <span class="related-owner">${escapeHtml(skill.owner)}</span>
                                <span class="related-installs">${skill.installs}</span>
                            </div>
                            <div class="related-desc">${escapeHtml(truncatedDesc)}</div>
                        </a>
                    `;
                }).join('');

            } catch (error) {
                console.error('Failed to load related skills:', error);
                // 加载失败时显示提示或隐藏
                listContainer.innerHTML = '<div class="related-empty">暂无相关推荐</div>';
            }
        }

        // HTML 转义
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // 页面加载完成后异步加载相关 Skills
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', loadRelatedSkills);
        } else {
            loadRelatedSkills();
        }
    </script>

</body>
</html>

安装

or

Sign up at https://openrouter.ai/keys