From f4428e44f1f73281ff7152ce589e8b2e18896151 Mon Sep 17 00:00:00 2001 From: smakosh Date: Tue, 20 Jan 2026 16:44:06 +0100 Subject: [PATCH] feat: add migration guides to landing page Add section helping users migrate from OpenRouter, LiteLLM, and Vercel AI Gateway with dedicated content pages. Co-Authored-By: Claude Opus 4.5 --- apps/ui/content-collections.ts | 16 +- .../app/migration/[slug]/opengraph-image.tsx | 297 ++++++++++++++++++ apps/ui/src/app/migration/[slug]/page.tsx | 110 +++++++ apps/ui/src/app/migration/page.tsx | 121 +++++++ apps/ui/src/components/landing/hero-rsc.tsx | 11 +- apps/ui/src/components/landing/hero.tsx | 100 +++++- apps/ui/src/content/migrations/litellm.md | 294 +++++++++++++++++ apps/ui/src/content/migrations/openrouter.md | 198 ++++++++++++ .../content/migrations/vercel-ai-gateway.md | 263 ++++++++++++++++ 9 files changed, 1406 insertions(+), 4 deletions(-) create mode 100644 apps/ui/src/app/migration/[slug]/opengraph-image.tsx create mode 100644 apps/ui/src/app/migration/[slug]/page.tsx create mode 100644 apps/ui/src/app/migration/page.tsx create mode 100644 apps/ui/src/content/migrations/litellm.md create mode 100644 apps/ui/src/content/migrations/openrouter.md create mode 100644 apps/ui/src/content/migrations/vercel-ai-gateway.md diff --git a/apps/ui/content-collections.ts b/apps/ui/content-collections.ts index 993cf338f7..464a730a23 100644 --- a/apps/ui/content-collections.ts +++ b/apps/ui/content-collections.ts @@ -78,6 +78,20 @@ const guides = defineCollection({ }), }); +const migrations = defineCollection({ + name: "migrations", + directory: "src/content/migrations", + include: "**/*.md", + schema: z.object({ + id: z.string(), + slug: z.string(), + title: z.string(), + description: z.string(), + date: z.string(), + fromProvider: z.string(), + }), +}); + export default defineConfig({ - collections: [changelog, blog, legal, guides], + collections: [changelog, blog, legal, guides, migrations], }); diff --git a/apps/ui/src/app/migration/[slug]/opengraph-image.tsx b/apps/ui/src/app/migration/[slug]/opengraph-image.tsx new file mode 100644 index 0000000000..d1979c7341 --- /dev/null +++ b/apps/ui/src/app/migration/[slug]/opengraph-image.tsx @@ -0,0 +1,297 @@ +import { ImageResponse } from "next/og"; + +import type { Migration } from "content-collections"; + +export const size = { + width: 1200, + height: 630, +}; +export const contentType = "image/png"; + +// OpenRouter Icon +const OpenRouterIcon = () => ( + + + +); + +// Vercel Icon +const VercelIcon = () => ( + + + +); + +// LiteLLM Icon (Train emoji as text) +const LiteLLMIcon = () => ( +
+ 🚅 +
+); + +// Arrow Icon for migration +const ArrowIcon = () => ( + + + +); + +// LLM Gateway Icon +const LLMGatewayIcon = () => ( + + + + +); + +// Map provider names to their icons +function getIconForProvider(provider: string) { + const iconMap: Record React.JSX.Element> = { + OpenRouter: OpenRouterIcon, + "Vercel AI Gateway": VercelIcon, + LiteLLM: LiteLLMIcon, + }; + + return iconMap[provider] || OpenRouterIcon; +} + +export default async function MigrationOgImage({ + params, +}: { + params: Promise<{ slug: string }>; +}) { + const { allMigrations } = await import("content-collections"); + const { slug } = await params; + + const migration = allMigrations.find( + (migration: Migration) => migration.slug === slug, + ); + + if (!migration) { + return new ImageResponse( + ( +
+ ), + size, + ); + } + + const ProviderIcon = getIconForProvider(migration.fromProvider); + + return new ImageResponse( + ( +
+ {/* Header with logo */} +
+ + + + +
+ + LLM Gateway + + • + Migration Guide +
+
+ + {/* Main content */} +
+ {/* Migration icons */} +
+ {/* From provider icon */} +
+ +
+ + {/* Arrow */} + + + {/* LLM Gateway icon */} +
+ +
+
+ + {/* Title and description */} +
+

+ {migration.title} +

+

+ {migration.description} +

+
+
+ + {/* Footer */} +
+ llmgateway.io +
+
+ ), + size, + ); +} diff --git a/apps/ui/src/app/migration/[slug]/page.tsx b/apps/ui/src/app/migration/[slug]/page.tsx new file mode 100644 index 0000000000..7d14123c64 --- /dev/null +++ b/apps/ui/src/app/migration/[slug]/page.tsx @@ -0,0 +1,110 @@ +import { ArrowLeftIcon } from "lucide-react"; +import Markdown from "markdown-to-jsx"; +import Link from "next/link"; +import { notFound } from "next/navigation"; + +import Footer from "@/components/landing/footer"; +import { HeroRSC } from "@/components/landing/hero-rsc"; +import { getMarkdownOptions } from "@/lib/utils/markdown"; + +import type { Migration } from "content-collections"; +import type { Metadata } from "next"; + +interface MigrationPageProps { + params: Promise<{ slug: string }>; +} + +export default async function MigrationPage({ params }: MigrationPageProps) { + const { allMigrations } = await import("content-collections"); + + const { slug } = await params; + + const migration = allMigrations.find( + (migration: Migration) => migration.slug === slug, + ); + + if (!migration) { + notFound(); + } + + return ( + <> + +
+
+
+
+ + + Back to migration guides + +
+ +
+
+
+ From {migration.fromProvider} +
+

{migration.title}

+
+ {migration.description && ( +

{migration.description}

+ )} +
+
+ +
+ + {migration.content} + +
+
+
+
+
+
+ + ); +} + +export async function generateStaticParams() { + const { allMigrations } = await import("content-collections"); + + return allMigrations.map((migration: Migration) => ({ + slug: migration.slug, + })); +} + +export async function generateMetadata({ + params, +}: MigrationPageProps): Promise { + const { allMigrations } = await import("content-collections"); + + const { slug } = await params; + + const migration = allMigrations.find( + (migration: Migration) => migration.slug === slug, + ); + + if (!migration) { + return {}; + } + + return { + title: `${migration.title} - Migration Guides - LLM Gateway`, + description: migration.description || "Migration guide for LLM Gateway", + openGraph: { + title: `${migration.title} - Migration Guides - LLM Gateway`, + description: migration.description || "Migration guide for LLM Gateway", + type: "article", + }, + twitter: { + card: "summary_large_image", + title: `${migration.title} - Migration Guides - LLM Gateway`, + description: migration.description || "Migration guide for LLM Gateway", + }, + }; +} diff --git a/apps/ui/src/app/migration/page.tsx b/apps/ui/src/app/migration/page.tsx new file mode 100644 index 0000000000..65056eb780 --- /dev/null +++ b/apps/ui/src/app/migration/page.tsx @@ -0,0 +1,121 @@ +import { ArrowRightIcon } from "lucide-react"; +import Link from "next/link"; + +import Footer from "@/components/landing/footer"; +import { HeroRSC } from "@/components/landing/hero-rsc"; + +import type { Migration } from "content-collections"; + +export const metadata = { + title: "Migration Guides | LLM Gateway", + description: + "Step-by-step guides to migrate from OpenRouter, Vercel AI Gateway, LiteLLM, and other LLM providers to LLM Gateway.", + openGraph: { + title: "Migration Guides | LLM Gateway", + description: + "Step-by-step guides to migrate from OpenRouter, Vercel AI Gateway, LiteLLM, and other LLM providers to LLM Gateway.", + }, +}; + +const providerIcons: Record = { + OpenRouter: ( + + + + ), + "Vercel AI Gateway": ( + + + + ), + LiteLLM: 🚅, +}; + +export default async function MigrationPage() { + const { allMigrations } = await import("content-collections"); + + return ( +
+ +
+
+
+

+ Migration Guides +

+

+ Switch to LLM Gateway from other LLM providers with minimal code + changes. Our OpenAI-compatible API makes migration + straightforward. +

+
+ +
+ {allMigrations.map((migration: Migration) => ( + +
+ {providerIcons[migration.fromProvider] || ( + + + + )} +
+

+ {migration.title} +

+

+ {migration.description} +

+
+ Read guide + +
+ + ))} +
+ +
+
+

+ Don't see your provider? +

+

+ LLM Gateway's OpenAI-compatible API works with any client that + supports OpenAI. Just change the base URL and API key. +

+ + View Quick Start Guide + + +
+
+
+
+
+
+ ); +} diff --git a/apps/ui/src/components/landing/hero-rsc.tsx b/apps/ui/src/components/landing/hero-rsc.tsx index c59b41fdbd..caa2a7f9e4 100644 --- a/apps/ui/src/components/landing/hero-rsc.tsx +++ b/apps/ui/src/components/landing/hero-rsc.tsx @@ -1,5 +1,6 @@ import { GitHubStars } from "./github-stars"; import { Hero } from "./hero"; +import { allMigrations } from "content-collections"; export const HeroRSC = async ({ navbarOnly, @@ -8,8 +9,16 @@ export const HeroRSC = async ({ navbarOnly?: boolean; sticky?: boolean; }) => { + const migrations = navbarOnly + ? [] + : allMigrations.map((m) => ({ + slug: m.slug, + title: m.title, + fromProvider: m.fromProvider, + })); + return ( - + ); diff --git a/apps/ui/src/components/landing/hero.tsx b/apps/ui/src/components/landing/hero.tsx index 62b5178830..0f0813e238 100644 --- a/apps/ui/src/components/landing/hero.tsx +++ b/apps/ui/src/components/landing/hero.tsx @@ -60,14 +60,52 @@ const PROVIDER_LOGOS: { name: string; providerId: ProviderId }[] = [ { name: "Inference.net", providerId: "inference.net" }, ]; +interface MigrationData { + slug: string; + title: string; + fromProvider: string; +} + +const providerIcons: Record = { + OpenRouter: ( + + ), + "Vercel AI Gateway": ( + + ), + LiteLLM: ( + + 🚅 + + ), +}; + export function Hero({ navbarOnly, sticky = true, children, + migrations = [], }: { navbarOnly?: boolean; sticky?: boolean; children: React.ReactNode; + migrations?: MigrationData[]; }) { const config = useAppConfig(); @@ -168,6 +206,7 @@ export function Hero({ className="size-4 text-green-500" fill="currentColor" viewBox="0 0 20 20" + aria-hidden="true" >
+ {/* Migration guides section */} + {migrations.length > 0 && ( + +
+

+ Switching from another provider? +

+
+ {migrations.map((migration) => ( + + + {providerIcons[migration.fromProvider] || ( + + + {migration.fromProvider} + +
+
+ + )} + app screen diff --git a/apps/ui/src/content/migrations/litellm.md b/apps/ui/src/content/migrations/litellm.md new file mode 100644 index 0000000000..3c9494d79e --- /dev/null +++ b/apps/ui/src/content/migrations/litellm.md @@ -0,0 +1,294 @@ +--- +id: litellm +slug: litellm +title: Migrate from LiteLLM +description: How to migrate from LiteLLM proxy to LLM Gateway for a managed solution with analytics +date: 2026-01-20 +fromProvider: LiteLLM +--- + +LiteLLM is an excellent open-source library for unifying LLM APIs. LLM Gateway offers similar functionality as a managed service with additional features like built-in analytics, caching, and a web dashboard. + +## Quick Migration + +Since both services expose OpenAI-compatible endpoints, migration is straightforward: + +```diff +- const baseURL = "http://localhost:4000/v1"; // LiteLLM proxy ++ const baseURL = "https://api.llmgateway.io/v1"; + +- const apiKey = process.env.LITELLM_API_KEY; ++ const apiKey = process.env.LLM_GATEWAY_API_KEY; +``` + +## Why Migrate to LLM Gateway? + +| Feature | LiteLLM | LLM Gateway | +| ------------------------ | ------------- | ------------- | +| OpenAI-compatible API | Yes | Yes | +| Self-hosting | Required | Optional | +| Managed cloud service | No | Yes | +| Built-in dashboard | Basic | Comprehensive | +| Response caching | Manual setup | Built-in | +| Cost analytics | Via callbacks | Native | +| Provider management | Config file | Web UI | +| Maintenance | Self-managed | Managed | +| Anthropic-compatible API | Yes | Yes | + +For a detailed feature-by-feature comparison, see [LLM Gateway vs LiteLLM](/compare/litellm). + +## Migration Steps + +### 1. Get Your LLM Gateway API Key + +Sign up at [llmgateway.io/signup](/signup) and create an API key from your dashboard. + +### 2. Map Your Models + +LLM Gateway supports two model ID formats: + +**Root Model IDs** (without provider prefix) - Uses smart routing to automatically select the best provider based on uptime, throughput, price, and latency: + +``` +gpt-5.2 +claude-opus-4-5-20251101 +gemini-3-flash-preview +``` + +**Provider-Prefixed Model IDs** - Routes to a specific provider with automatic failover if uptime drops below 90%: + +``` +openai/gpt-5.2 +anthropic/claude-opus-4-5-20251101 +google-ai-studio/gemini-3-flash-preview +``` + +This means many LiteLLM model names work directly with LLM Gateway: + +| LiteLLM Model | LLM Gateway Model | +| -------------------------------- | ----------------------------------------------------------------- | +| gpt-5.2 | gpt-5.2 or openai/gpt-5.2 | +| claude-opus-4-5-20251101 | claude-opus-4-5-20251101 or anthropic/claude-opus-4-5-20251101 | +| gemini/gemini-3-flash-preview | gemini-3-flash-preview or google-ai-studio/gemini-3-flash-preview | +| bedrock/claude-opus-4-5-20251101 | claude-opus-4-5-20251101 or aws-bedrock/claude-opus-4-5-20251101 | + +For more details on routing behavior, see the [routing documentation](https://docs.llmgateway.io/features/routing). + +### 3. Update Your Code + +#### Python with OpenAI SDK + +```python +from openai import OpenAI + +# Before (LiteLLM proxy) +client = OpenAI( + base_url="http://localhost:4000/v1", + api_key=os.environ["LITELLM_API_KEY"] +) + +response = client.chat.completions.create( + model="gpt-4", + messages=[{"role": "user", "content": "Hello!"}] +) + +# After (LLM Gateway) - model name can stay the same! +client = OpenAI( + base_url="https://api.llmgateway.io/v1", + api_key=os.environ["LLM_GATEWAY_API_KEY"] +) + +response = client.chat.completions.create( + model="gpt-4", # or "openai/gpt-4" to target a specific provider + messages=[{"role": "user", "content": "Hello!"}] +) +``` + +#### Python with LiteLLM Library + +If you're using the LiteLLM library directly, you can point it to LLM Gateway: + +```python +import litellm + +# Before (direct LiteLLM) +response = litellm.completion( + model="gpt-4", + messages=[{"role": "user", "content": "Hello!"}] +) + +# After (via LLM Gateway) - same model name works +response = litellm.completion( + model="gpt-4", # or "openai/gpt-4" to target a specific provider + messages=[{"role": "user", "content": "Hello!"}], + api_base="https://api.llmgateway.io/v1", + api_key=os.environ["LLM_GATEWAY_API_KEY"] +) +``` + +#### TypeScript/JavaScript + +```typescript +import OpenAI from "openai"; + +// Before (LiteLLM proxy) +const client = new OpenAI({ + baseURL: "http://localhost:4000/v1", + apiKey: process.env.LITELLM_API_KEY, +}); + +// After (LLM Gateway) - same model name works +const client = new OpenAI({ + baseURL: "https://api.llmgateway.io/v1", + apiKey: process.env.LLM_GATEWAY_API_KEY, +}); + +const completion = await client.chat.completions.create({ + model: "gpt-4", // or "openai/gpt-4" to target a specific provider + messages: [{ role: "user", content: "Hello!" }], +}); +``` + +#### cURL + +```bash +# Before (LiteLLM proxy) +curl http://localhost:4000/v1/chat/completions \ + -H "Authorization: Bearer $LITELLM_API_KEY" \ + -H "Content-Type: application/json" \ + -d '{ + "model": "gpt-4", + "messages": [{"role": "user", "content": "Hello!"}] + }' + +# After (LLM Gateway) - same model name works +curl https://api.llmgateway.io/v1/chat/completions \ + -H "Authorization: Bearer $LLM_GATEWAY_API_KEY" \ + -H "Content-Type: application/json" \ + -d '{ + "model": "gpt-4", + "messages": [{"role": "user", "content": "Hello!"}] + }' +# Use "openai/gpt-4" to target a specific provider +``` + +### 4. Migrate Configuration + +#### LiteLLM Config (Before) + +```yaml +# litellm_config.yaml +model_list: + - model_name: gpt-4 + litellm_params: + model: gpt-4 + api_key: sk-... + - model_name: claude-3 + litellm_params: + model: claude-3-sonnet-20240229 + api_key: sk-ant-... +``` + +#### LLM Gateway (After) + +With LLM Gateway, you don't need a config file. Provider keys are managed in the web dashboard, or you can use the default LLM Gateway keys. + +For Pro users who want to use their own keys, configure them in the dashboard under Settings > Provider Keys. + +## Streaming Support + +LLM Gateway supports streaming identically to LiteLLM: + +```python +from openai import OpenAI + +client = OpenAI( + base_url="https://api.llmgateway.io/v1", + api_key=os.environ["LLM_GATEWAY_API_KEY"] +) + +stream = client.chat.completions.create( + model="openai/gpt-4", + messages=[{"role": "user", "content": "Write a story"}], + stream=True +) + +for chunk in stream: + if chunk.choices[0].delta.content: + print(chunk.choices[0].delta.content, end="") +``` + +## Function/Tool Calling + +LLM Gateway supports function calling: + +```python +from openai import OpenAI + +client = OpenAI( + base_url="https://api.llmgateway.io/v1", + api_key=os.environ["LLM_GATEWAY_API_KEY"] +) + +tools = [{ + "type": "function", + "function": { + "name": "get_weather", + "description": "Get the weather for a location", + "parameters": { + "type": "object", + "properties": { + "location": {"type": "string"} + }, + "required": ["location"] + } + } +}] + +response = client.chat.completions.create( + model="openai/gpt-4", + messages=[{"role": "user", "content": "What's the weather in Tokyo?"}], + tools=tools +) +``` + +## Removing LiteLLM Infrastructure + +After verifying LLM Gateway works for your use case, you can decommission your LiteLLM proxy: + +1. Update all clients to use LLM Gateway endpoints +2. Monitor the LLM Gateway dashboard for successful requests +3. Shut down your LiteLLM proxy server +4. Remove LiteLLM configuration files + +## Benefits After Migration + +- **No Infrastructure Management**: No proxy servers to maintain or scale +- **Built-in Analytics**: View costs, latency, and usage in the dashboard +- **Response Caching**: Automatic caching reduces costs +- **Web Dashboard**: Manage API keys and view analytics without CLI +- **Automatic Updates**: New models available immediately + +## Self-Hosting LLM Gateway + +If you prefer self-hosting like LiteLLM, LLM Gateway is available under AGPLv3: + +```bash +git clone https://github.com/llmgateway/llmgateway +cd llmgateway +pnpm install +pnpm setup +pnpm dev +``` + +This gives you the same benefits as LiteLLM's self-hosted proxy with LLM Gateway's analytics and caching features. + +## Full Comparison + +Want to see a detailed breakdown of all features? Check out our [LLM Gateway vs LiteLLM comparison page](/compare/litellm). + +## Need Help? + +- Browse available models at [llmgateway.io/models](/models) +- Read the [API documentation](https://docs.llmgateway.io) +- Contact support at contact@llmgateway.io diff --git a/apps/ui/src/content/migrations/openrouter.md b/apps/ui/src/content/migrations/openrouter.md new file mode 100644 index 0000000000..f8664e0dd6 --- /dev/null +++ b/apps/ui/src/content/migrations/openrouter.md @@ -0,0 +1,198 @@ +--- +id: openrouter +slug: openrouter +title: Migrate from OpenRouter +description: Step-by-step guide to migrate from OpenRouter to LLM Gateway with minimal code changes +date: 2026-01-20 +fromProvider: OpenRouter +--- + +LLM Gateway provides a drop-in replacement for OpenRouter with OpenAI-compatible endpoints. Since both services follow the OpenAI API format, migration requires minimal changes to your existing code. + +## Quick Migration + +Replace your OpenRouter configuration with LLM Gateway: + +```diff +- const baseURL = "https://openrouter.ai/api/v1"; +- const apiKey = process.env.OPENROUTER_API_KEY; ++ const baseURL = "https://api.llmgateway.io/v1"; ++ const apiKey = process.env.LLM_GATEWAY_API_KEY; +``` + +## Why Migrate to LLM Gateway? + +Both OpenRouter and LLM Gateway offer robust LLM gateway solutions. Here's how they compare: + +| Feature | OpenRouter | LLM Gateway | +| ------------------------ | ----------------------------- | ------------------------ | +| OpenAI-compatible API | Yes | Yes | +| Multiple providers | Yes (300+ models) | Yes | +| Native AI SDK provider | Yes | Yes | +| Response caching | Yes (prompt caching) | Yes | +| Analytics dashboard | Via third-party integrations | Built-in | +| Cost tracking | Yes | Yes (per-request detail) | +| Provider key management | Yes (BYOK) | Yes (Pro) | +| Self-hosting option | No | Yes (AGPLv3) | +| Simpler API (no headers) | Requires HTTP-Referer/X-Title | Just Authorization | +| Anthropic-compatible API | No | Yes (/v1/messages) | + +For a detailed feature-by-feature comparison, see [LLM Gateway vs OpenRouter](/compare/open-router). + +## Migration Steps + +### 1. Get Your LLM Gateway API Key + +Sign up at [llmgateway.io/signup](/signup) and create an API key from your dashboard. + +### 2. Update Environment Variables + +```bash +# Remove OpenRouter credentials +# OPENROUTER_API_KEY=sk-or-... + +# Add LLM Gateway credentials +export LLM_GATEWAY_API_KEY=llmgtwy_your_key_here +``` + +### 3. Update Your Code + +#### Using fetch/axios + +```typescript +// Before (OpenRouter) +const response = await fetch("https://openrouter.ai/api/v1/chat/completions", { + method: "POST", + headers: { + Authorization: `Bearer ${process.env.OPENROUTER_API_KEY}`, + "Content-Type": "application/json", + "HTTP-Referer": "https://your-site.com", + "X-Title": "Your App Name", + }, + body: JSON.stringify({ + model: "anthropic/claude-3-5-sonnet", + messages: [{ role: "user", content: "Hello!" }], + }), +}); + +// After (LLM Gateway) +const response = await fetch("https://api.llmgateway.io/v1/chat/completions", { + method: "POST", + headers: { + Authorization: `Bearer ${process.env.LLM_GATEWAY_API_KEY}`, + "Content-Type": "application/json", + }, + body: JSON.stringify({ + model: "anthropic/claude-3-5-sonnet-20241022", + messages: [{ role: "user", content: "Hello!" }], + }), +}); +``` + +#### Using OpenAI SDK + +```typescript +import OpenAI from "openai"; + +// Before (OpenRouter) +const client = new OpenAI({ + baseURL: "https://openrouter.ai/api/v1", + apiKey: process.env.OPENROUTER_API_KEY, + defaultHeaders: { + "HTTP-Referer": "https://your-site.com", + "X-Title": "Your App Name", + }, +}); + +// After (LLM Gateway) +const client = new OpenAI({ + baseURL: "https://api.llmgateway.io/v1", + apiKey: process.env.LLM_GATEWAY_API_KEY, +}); + +// Usage remains the same +const completion = await client.chat.completions.create({ + model: "anthropic/claude-3-5-sonnet-20241022", + messages: [{ role: "user", content: "Hello!" }], +}); +``` + +#### Using Vercel AI SDK + +Both OpenRouter and LLM Gateway have native AI SDK providers, making migration straightforward: + +```typescript +import { generateText } from "ai"; + +// Before (OpenRouter AI SDK Provider) +import { createOpenRouter } from "@openrouter/ai-sdk-provider"; + +const openrouter = createOpenRouter({ + apiKey: process.env.OPENROUTER_API_KEY, +}); + +const { text } = await generateText({ + model: openrouter("gpt-5.2"), + prompt: "Hello!", +}); + +// After (LLM Gateway AI SDK Provider) +import { createLLMGateway } from "@llmgateway/ai-sdk-provider"; + +const llmgateway = createLLMGateway({ + apiKey: process.env.LLMGATEWAY_API_KEY, +}); + +const { text } = await generateText({ + model: llmgateway("gpt-5.2"), + prompt: "Hello!", +}); +``` + +## Model Name Mapping + +Most model names are compatible, but here are some common mappings: + +| OpenRouter Model | LLM Gateway Model | +| -------------------------------- | ----------------------------------------------------------------- | +| gpt-5.2 | gpt-5.2 or openai/gpt-5.2 | +| claude-opus-4-5-20251101 | claude-opus-4-5-20251101 or anthropic/claude-opus-4-5-20251101 | +| gemini/gemini-3-flash-preview | gemini-3-flash-preview or google-ai-studio/gemini-3-flash-preview | +| bedrock/claude-opus-4-5-20251101 | claude-opus-4-5-20251101 or aws-bedrock/claude-opus-4-5-20251101 | + +Check the [models page](/models) for the full list of available models. + +## Streaming Support + +LLM Gateway supports streaming responses identically to OpenRouter: + +```typescript +const stream = await client.chat.completions.create({ + model: "anthropic/claude-3-5-sonnet-20241022", + messages: [{ role: "user", content: "Write a story" }], + stream: true, +}); + +for await (const chunk of stream) { + process.stdout.write(chunk.choices[0]?.delta?.content || ""); +} +``` + +## Additional Benefits + +After migrating to LLM Gateway, you get access to: + +- **Response Caching**: Automatic caching for identical requests to reduce costs +- **Detailed Analytics**: Per-request cost tracking, latency metrics, and usage patterns +- **Provider Key Management**: Use your own API keys for providers (Pro plan) +- **Self-Hosting**: Deploy LLM Gateway on your own infrastructure + +## Full Comparison + +Want to see a detailed breakdown of all features? Check out our [LLM Gateway vs OpenRouter comparison page](/compare/open-router). + +## Need Help? + +- Browse available models at [llmgateway.io/models](/models) +- Read the [API documentation](https://docs.llmgateway.io) +- Contact support at contact@llmgateway.io diff --git a/apps/ui/src/content/migrations/vercel-ai-gateway.md b/apps/ui/src/content/migrations/vercel-ai-gateway.md new file mode 100644 index 0000000000..8b862780b8 --- /dev/null +++ b/apps/ui/src/content/migrations/vercel-ai-gateway.md @@ -0,0 +1,263 @@ +--- +id: vercel-ai-gateway +slug: vercel-ai-gateway +title: Migrate from Vercel AI Gateway +description: Guide to migrate from Vercel AI Gateway to LLM Gateway for more control and flexibility +date: 2026-01-20 +fromProvider: Vercel AI Gateway +--- + +Vercel AI Gateway provides a unified interface for AI providers within the Vercel ecosystem. LLM Gateway offers similar functionality with additional features like response caching, detailed analytics, and self-hosting options. + +## Quick Migration + +Replace your Vercel AI SDK provider imports with the LLM Gateway provider: + +```diff +- import { openai } from "@ai-sdk/openai"; +- import { anthropic } from "@ai-sdk/anthropic"; ++ import { generateText } from "ai"; ++ import { createLLMGateway } from "@llmgateway/ai-sdk-provider"; + ++ const llmgateway = createLLMGateway({ ++ apiKey: process.env.LLM_GATEWAY_API_KEY ++ }); + +const { text } = await generateText({ +- model: openai("gpt-5.2"), ++ model: llmgateway("gpt-5.2"), + prompt: "Hello!" +}); +``` + +## Why Migrate to LLM Gateway? + +| Feature | Vercel AI Gateway | LLM Gateway | +| ------------------------ | --------------------- | ---------------------- | +| AI SDK integration | Native | Native + OpenAI compat | +| Response caching | No | Yes | +| Detailed cost analytics | Limited | Comprehensive | +| Provider key management | Per-provider env vars | Centralized (Pro) | +| Self-hosting | No | Yes (AGPLv3) | +| Rate limiting | Platform-level | Customizable | +| Anthropic-compatible API | No | Yes (/v1/messages) | +| Smart routing | No | Yes (auto failover) | + +## Migration Steps + +### 1. Get Your LLM Gateway API Key + +Sign up at [llmgateway.io/signup](/signup) and create an API key from your dashboard. + +### 2. Install the LLM Gateway AI SDK Provider + +Install the native LLM Gateway provider for the Vercel AI SDK: + +```bash +pnpm add @llmgateway/ai-sdk-provider +``` + +This package provides full compatibility with the Vercel AI SDK and supports all LLM Gateway features. + +### 3. Update Your Code + +#### Basic Text Generation + +```typescript +// Before (Vercel AI Gateway with native providers) +import { openai } from "@ai-sdk/openai"; +import { anthropic } from "@ai-sdk/anthropic"; +import { generateText } from "ai"; + +const { text: openaiText } = await generateText({ + model: openai("gpt-4o"), + prompt: "Hello!", +}); + +const { text: claudeText } = await generateText({ + model: anthropic("claude-3-5-sonnet-20241022"), + prompt: "Hello!", +}); + +// After (LLM Gateway - single provider for all models) +import { createLLMGateway } from "@llmgateway/ai-sdk-provider"; +import { generateText } from "ai"; + +const llmgateway = createLLMGateway({ + apiKey: process.env.LLM_GATEWAY_API_KEY, +}); + +const { text: openaiText } = await generateText({ + model: llmgateway("openai/gpt-4o"), + prompt: "Hello!", +}); + +const { text: claudeText } = await generateText({ + model: llmgateway("anthropic/claude-3-5-sonnet-20241022"), + prompt: "Hello!", +}); +``` + +#### Streaming Responses + +```typescript +import { createLLMGateway } from "@llmgateway/ai-sdk-provider"; +import { streamText } from "ai"; + +const llmgateway = createLLMGateway({ + apiKey: process.env.LLM_GATEWAY_API_KEY, +}); + +const { textStream } = await streamText({ + model: llmgateway("anthropic/claude-3-5-sonnet-20241022"), + prompt: "Write a poem about coding", +}); + +for await (const text of textStream) { + process.stdout.write(text); +} +``` + +#### Using in Next.js API Routes + +```typescript +// app/api/chat/route.ts +import { createLLMGateway } from "@llmgateway/ai-sdk-provider"; +import { streamText } from "ai"; + +const llmgateway = createLLMGateway({ + apiKey: process.env.LLM_GATEWAY_API_KEY, +}); + +export async function POST(req: Request) { + const { messages } = await req.json(); + + const result = await streamText({ + model: llmgateway("openai/gpt-4o"), + messages, + }); + + return result.toDataStreamResponse(); +} +``` + +#### Alternative: Using OpenAI SDK Adapter + +If you prefer not to install a new package, you can use `@ai-sdk/openai` with a custom base URL: + +```typescript +import { createOpenAI } from "@ai-sdk/openai"; +import { generateText } from "ai"; + +const llmgateway = createOpenAI({ + baseURL: "https://api.llmgateway.io/v1", + apiKey: process.env.LLM_GATEWAY_API_KEY, +}); + +const { text } = await generateText({ + model: llmgateway("openai/gpt-4o"), + prompt: "Hello!", +}); +``` + +### 4. Update Environment Variables + +```bash +# Remove individual provider keys (optional - can keep as backup) +# OPENAI_API_KEY=sk-... +# ANTHROPIC_API_KEY=sk-ant-... + +# Add LLM Gateway key +export LLM_GATEWAY_API_KEY=llmgtwy_your_key_here +``` + +## Model Name Format + +LLM Gateway supports two model ID formats: + +**Root Model IDs** (without provider prefix) - Uses smart routing to automatically select the best provider based on uptime, throughput, price, and latency: + +``` +gpt-4o +claude-3-5-sonnet-20241022 +gemini-1.5-pro +``` + +**Provider-Prefixed Model IDs** - Routes to a specific provider with automatic failover if uptime drops below 90%: + +``` +openai/gpt-4o +anthropic/claude-3-5-sonnet-20241022 +google-ai-studio/gemini-1.5-pro +``` + +For more details on routing behavior, see the [routing documentation](https://docs.llmgateway.io/features/routing). + +### Model Mapping Examples + +| Vercel AI SDK | LLM Gateway | +| ----------------------------------------- | -------------------------------------------------------------------------------------------------- | +| `openai("gpt-4o")` | `llmgateway("gpt-4o")` or `llmgateway("openai/gpt-4o")` | +| `anthropic("claude-3-5-sonnet-20241022")` | `llmgateway("claude-3-5-sonnet-20241022")` or `llmgateway("anthropic/claude-3-5-sonnet-20241022")` | +| `google("gemini-1.5-pro")` | `llmgateway("gemini-1.5-pro")` or `llmgateway("google-ai-studio/gemini-1.5-pro")` | + +Check the [models page](/models) for the full list of available models. + +## Tool Calling + +LLM Gateway supports tool calling through the AI SDK: + +```typescript +import { createLLMGateway } from "@llmgateway/ai-sdk-provider"; +import { generateText, tool } from "ai"; +import { z } from "zod"; + +const llmgateway = createLLMGateway({ + apiKey: process.env.LLM_GATEWAY_API_KEY, +}); + +const { text, toolResults } = await generateText({ + model: llmgateway("openai/gpt-4o"), + tools: { + weather: tool({ + description: "Get the weather for a location", + parameters: z.object({ + location: z.string(), + }), + execute: async ({ location }) => { + return { temperature: 72, condition: "sunny" }; + }, + }), + }, + prompt: "What's the weather in San Francisco?", +}); +``` + +## Benefits After Migration + +- **Unified API Key**: One API key for all providers instead of managing multiple +- **Response Caching**: Automatic caching reduces costs for repeated requests +- **Cost Analytics**: Track spending per model, per request, with detailed breakdowns +- **Smart Routing**: Automatic provider selection and failover for reliability +- **Self-Hosting**: Deploy on your own infrastructure for complete control +- **No Vendor Lock-in**: OpenAI-compatible API works with any client + +## Self-Hosting LLM Gateway + +If you prefer self-hosting, LLM Gateway is available under AGPLv3: + +```bash +git clone https://github.com/llmgateway/llmgateway +cd llmgateway +pnpm install +pnpm setup +pnpm dev +``` + +This gives you the same managed experience with full control over your infrastructure. + +## Need Help? + +- Browse available models at [llmgateway.io/models](/models) +- Read the [API documentation](https://docs.llmgateway.io) +- Contact support at contact@llmgateway.io