Introduction

OpenRouter is a unified API gateway that lets developers access multiple AI language models like GPT-4, Claude, and PaLM through a single integration. It simplifies the process of adding AI capabilities to applications by providing consistent access to different models through one standardized interface.

In this guide, you'll learn how to set up an OpenRouter account, obtain API credentials, implement the backend integration, build a functional frontend, and deploy a production-ready application. We'll cover everything from basic setup to advanced features like streaming responses and implementing efficient caching strategies.

Ready to become an AI whisperer? Let's teach those language models to dance! 🤖💃

OpenRouter provides a unified gateway to access various language models through a single API, making it easier to integrate AI capabilities into your applications. The platform offers both free and premium access to popular models like GPT-4, Claude, and PaLM.

To begin your journey with OpenRouter, navigate to openrouter.ai and create your account. The registration process is straightforward and only requires basic information such as your email address and password.

Once registered, you'll need to set up your API credentials. Here's how to get your API key:

1. Log in to your OpenRouter dashboard
2. Navigate to the "API Keys" section
3. Click "Create New Key"
4. Enter a descriptive name for your key
5. Leave the credit limit field empty for unlimited access
6. Click "Generate" to create your key

Managing your credits is essential for using premium models. OpenRouter operates on a credit-based system where different models consume varying amounts of credits per request. Free credits are available for testing, but you'll need to purchase additional credits for production use.

Credit pricing varies by model:

• GPT-3.5-turbo: 1.5 credits per 1K tokens
• Claude-instant: 2.5 credits per 1K tokens
• GPT-4: 15 credits per 1K tokens

A robust development environment is crucial for building applications with OpenRouter. Next.js and TypeScript provide an excellent foundation for creating scalable AI-powered applications.

Begin by creating a new Next.js project with TypeScript support. Open your terminal and execute:

npx create-next-app@latest my-llm-app --typescript
cd my-llm-app


Install the necessary dependencies for working with OpenRouter:

npm install openai axios


Create a .env.local file in your project root to store your API credentials:

OPENROUTER_API_KEY=your_api_key_here
OPENROUTER_BASE_URL=https://api.openrouter.ai/api/v1


Configure your Next.js application to use environment variables by updating the next.config.js:

module.exports = {
env: {
OPENROUTER_API_KEY: process.env.OPENROUTER_API_KEY,
OPENROUTER_BASE_URL: process.env.OPENROUTER_BASE_URL,
},
}


Creating a robust backend implementation ensures reliable communication with OpenRouter's API. Start by setting up an API route in your Next.js application.

Create a new file at pages/api/generate.ts:

import { Configuration, OpenAIApi } from 'openai'
import { NextRequest } from 'next/server'

export const config = {
runtime: 'edge',
}

const configuration = new Configuration({
apiKey: process.env.OPENROUTER_API_KEY,
basePath: process.env.OPENROUTER_BASE_URL,
})

const openai = new OpenAIApi(configuration)

export default async function handler(req: NextRequest) {
if (req.method !== 'POST') {
return new Response('Method not allowed', { status: 405 })
}

try {
const { prompt } = await req.json()

const completion = await openai.createChatCompletion({
model: 'anthropic/claude-instant-v1',
messages: [{ role: 'user', content: prompt }],
headers: {
'HTTP-Referer': 'https://your-site.com',
'X-Title': 'Your Application Name',
},
})

return new Response(JSON.stringify(completion.data), {
headers: { 'Content-Type': 'application/json' },
})
} catch (error) {
return new Response(JSON.stringify(error), { status: 500 })
}
}


The frontend interface should be intuitive and responsive. Create a new component at components/AIChat.tsx:

import { useState } from 'react'

export default function AIChat() {
const [prompt, setPrompt] = useState('')
const [response, setResponse] = useState('')
const [loading, setLoading] = useState(false)

const generateResponse = async () => {
setLoading(true)
try {
const res = await fetch('/api/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt }),
})

const data = await res.json()
setResponse(data.choices[0].message.content)
} catch (error) {
console.error('Error:', error)
}
setLoading(false)
}

return (

className="w-full p-2 border rounded"
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="Enter your prompt..."
rows={4}
/>
className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
onClick={generateResponse}
disabled={loading}
>
{loading ? 'Generating...' : 'Generate Response'}

{response && (

{response} )} )}

OpenRouter's powerful API system normalizes requests and responses across different providers, making it seamless to work with various AI models. At its core, OpenRouter provides an OpenAI-compatible completion API that developers can leverage either through direct calls or by utilizing the OpenAI SDK.

The base URL for all API interactions is 'https://openrouter.ai/api/v1'. When making requests, developers can enhance their application's visibility on OpenRouter by including optional headers such as 'HTTP-Referer' and 'X-Title'.

Here's a practical example using TypeScript:

const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
'HTTP-Referer': 'https://your-site.com',
'X-Title': 'Your App Name'
},
body: JSON.stringify({
model: 'anthropic/claude-2',
messages: [{ role: 'user', content: 'Hello!' }]
})
});


For Python developers, the implementation is equally straightforward:

from openai import OpenAI

client = OpenAI(
base_url='https://openrouter.ai/api/v1',
api_key='your-api-key'
)

response = client.chat.completions.create(
model='anthropic/claude-2',
messages=[{'role': 'user', 'content': 'Hello!'}]
)


The flexibility of OpenRouter's API becomes apparent when examining its advanced features. The request schema for the POST request to the /api/v1/chat/completions endpoint supports a wide range of parameters that give developers precise control over the AI's output.

Every request must include either 'messages' or 'prompt' as the primary input method. The 'messages' format follows the ChatGPT conversation structure:

{
"messages": [
{"role": "system", "content": "You are a helpful assistant"},
{"role": "user", "content": "What's the weather like?"}
]
}


Temperature control allows fine-tuning of response creativity. A value of 0.0 produces consistent, deterministic responses, while higher values up to 2.0 introduce more randomness and creativity. For example:

{
"messages": [...],
"temperature": 0.7,
"max_tokens": 150,
"stop": ["\n", "User:"]
}


Server-Sent Events (SSE) support enables real-time streaming for all models, creating more responsive applications. This feature can be activated by setting the 'stream' parameter to true:

const stream = await fetch('https://openrouter.ai/api/v1/chat/completions', {
method: 'POST',
headers: {...},
body: JSON.stringify({
messages: [...],
stream: true
})
});


OpenRouter's caching system offers significant cost savings for applications making repeated requests. Most providers automatically enable prompt caching, creating an efficient system for handling similar queries.

The caching mechanism works by storing responses to identical prompts, allowing subsequent requests to retrieve cached results instead of generating new ones. This approach is particularly valuable for applications that frequently handle similar user inputs.

To monitor cache usage and savings, developers can access detailed analytics through:

1. The Activity page in the OpenRouter dashboard
2. Direct API calls to /api/v1/generation
3. Real-time usage statistics in the response headers

Cache pricing follows a straightforward model:

• Initial cache writes are charged at the same rate as original input pricing
• Subsequent cache hits come at no additional cost
• Cache invalidation occurs automatically after provider-specific timeframes

Consider this practical implementation of cache monitoring:

const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
// ... standard request configuration
});

const cacheStatus = response.headers.get('X-Cache-Status');
const cacheSavings = response.headers.get('X-Cache-Savings');

console.log(`Cache Status: ${cacheStatus}`);
console.log(`Savings: ${cacheSavings}`);


Moving from development to deployment requires careful attention to environment setup and configuration. Start by testing your application locally using the development server:

npm run dev


This command launches your application on http://localhost:3000, where you can conduct thorough testing of your LLM integration. The development environment should mirror your production configuration, including environment variables and API keys.

For production deployment, Vercel offers a streamlined process:

1. Push your code to a GitHub repository
2. Connect your repository to Vercel
3. Configure environment variables in the Vercel dashboard
4. Deploy your application

Your deployment configuration should include proper error handling and monitoring:

try {
const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
// ... configuration
});

if (!response.ok) {
throw new Error(`API error: ${response.status}`);
}

const data = await response.json();
// Handle successful response
} catch (error) {
console.error('Error:', error);
// Implement proper error handling
}


Once deployed, users can access your application and begin interacting with the custom model. Implement a clear user interface that guides them through the available options and features while maintaining responsive feedback throughout the interaction process.

Conclusion

OpenRouter provides a powerful gateway to integrate multiple AI language models through a single, standardized API interface. By following the implementation patterns outlined in this guide, developers can quickly build robust AI-powered applications while maintaining control over costs and performance. For a quick start, try this simple curl command to test the API: curl -X POST "https://openrouter.ai/api/v1/chat/completions" -H "Authorization: Bearer $YOUR_API_KEY" -H "Content-Type: application/json" -d '{"model": "anthropic/claude-instant-v1", "messages": [{"role": "user", "content": "Hello!"}]}' - this will give you an immediate feel for how OpenRouter works and help you start building your own AI applications.

Time to let your AI models run wild - just remember to keep them on a reasonable credit limit! 🤖💸