Repository navigation
feat: add migration guides to landing page - #1482
Conversation
Add section helping users migrate from OpenRouter, LiteLLM, and Vercel AI Gateway with dedicated content pages. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
WalkthroughAdds a complete migrations feature to the LLM Gateway UI, including a new content collection, landing and dynamic pages for migration guides, OpenGraph image generation, and three migration guides (OpenRouter, Vercel AI Gateway, LiteLLM) with hero component integration to surface migrations. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@apps/ui/src/content/migrations/litellm.md`:
- Around line 48-64: The fenced code blocks in
apps/ui/src/content/migrations/litellm.md are missing language identifiers
(triggering MD040); update both model-ID blocks by changing the opening fences
from ``` to ```text so the examples (the root model IDs block containing
"gpt-5.2", "claude-opus-4-5-20251101", "gemini-3-flash-preview" and the
provider-prefixed block containing "openai/gpt-5.2",
"anthropic/claude-opus-4-5-20251101", "google-ai-studio/gemini-3-flash-preview")
use ```text as the fence language.
In `@apps/ui/src/content/migrations/openrouter.md`:
- Around line 139-144: Replace the incorrect environment variable name used when
instantiating the SDK client: in the snippet that calls createLLMGateway and
assigns to llmgateway, change process.env.LLMGATEWAY_API_KEY to
process.env.LLM_GATEWAY_API_KEY so it matches the rest of the guide and other
examples; ensure any related examples or mentions of the env var in this file
also use LLM_GATEWAY_API_KEY for consistency.
In `@apps/ui/src/content/migrations/vercel-ai-gateway.md`:
- Around line 174-192: Update the two fenced code blocks under the "Model Name
Format" section to include a language identifier by replacing the opening ```
with ```text for both the root model IDs block (containing gpt-4o,
claude-3-5-sonnet-20241022, gemini-1.5-pro) and the provider-prefixed model IDs
block (containing openai/gpt-4o, anthropic/claude-3-5-sonnet-20241022,
google-ai-studio/gemini-1.5-pro) so the blocks read ```text ... ``` to satisfy
MD040 and ensure consistent rendering.
🧹 Nitpick comments (4)
apps/ui/src/app/migration/page.tsx (1)
1-41: Replace the dynamic import with a top‑level import.This aligns with the repo rule against dynamic imports in TS/TSX and keeps module loading consistent. Please confirm there isn’t a bundling-specific reason to keep the dynamic import. As per coding guidelines, use top-level imports only.
🛠️ Suggested fix
-import type { Migration } from "content-collections"; +import { allMigrations, type Migration } from "content-collections"; export default async function MigrationPage() { - const { allMigrations } = await import("content-collections"); - return (apps/ui/src/components/landing/hero.tsx (1)
63-97: Consider extracting shared provider icons to reduce duplication.The
providerIconsmap duplicates SVG definitions that also exist inopengraph-image.tsx. While acceptable for now since the styling differs (client-side usescurrentColorandclassName, OG image uses static colors), consider extracting to a shared location if more providers are added.apps/ui/src/app/migration/[slug]/opengraph-image.tsx (2)
86-94: Consider using a generic fallback icon instead of OpenRouterIcon.When an unknown provider is encountered, falling back to
OpenRouterIconcould be misleading in the OG image. Consider creating a generic migration or placeholder icon for unrecognized providers.🔧 Suggested fix
function getIconForProvider(provider: string) { const iconMap: Record<string, () => React.JSX.Element> = { OpenRouter: OpenRouterIcon, "Vercel AI Gateway": VercelIcon, LiteLLM: LiteLLMIcon, }; - return iconMap[provider] || OpenRouterIcon; + return iconMap[provider] || LLMGatewayIcon; }
108-122: Consider a more informative fallback for missing migrations.The current fallback returns a plain black image when a migration isn't found. While this works, consider showing a branded "Not Found" image to maintain visual consistency if someone shares a broken link.
| 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 | ||
| ``` |
There was a problem hiding this comment.
Add language identifiers to the model ID fenced blocks.
This clears the MD040 lint warning and keeps formatting consistent.
🛠️ Suggested fix
-```
+```text
gpt-5.2
claude-opus-4-5-20251101
gemini-3-flash-preview- +text
openai/gpt-5.2
anthropic/claude-opus-4-5-20251101
google-ai-studio/gemini-3-flash-preview
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 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 | |
| ``` | |
| 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: | |
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
52-52: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
60-60: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
In `@apps/ui/src/content/migrations/litellm.md` around lines 48 - 64, The fenced
code blocks in apps/ui/src/content/migrations/litellm.md are missing language
identifiers (triggering MD040); update both model-ID blocks by changing the
opening fences from ``` to ```text so the examples (the root model IDs block
containing "gpt-5.2", "claude-opus-4-5-20251101", "gemini-3-flash-preview" and
the provider-prefixed block containing "openai/gpt-5.2",
"anthropic/claude-opus-4-5-20251101", "google-ai-studio/gemini-3-flash-preview")
use ```text as the fence language.
| // After (LLM Gateway AI SDK Provider) | ||
| import { createLLMGateway } from "@llmgateway/ai-sdk-provider"; | ||
|
|
||
| const llmgateway = createLLMGateway({ | ||
| apiKey: process.env.LLMGATEWAY_API_KEY, | ||
| }); |
There was a problem hiding this comment.
Fix env var name typo in the AI SDK example.
The doc uses LLMGATEWAY_API_KEY, but the rest of the guide (and other guides) use LLM_GATEWAY_API_KEY.
🛠️ Suggested fix
- apiKey: process.env.LLMGATEWAY_API_KEY,
+ apiKey: process.env.LLM_GATEWAY_API_KEY,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // After (LLM Gateway AI SDK Provider) | |
| import { createLLMGateway } from "@llmgateway/ai-sdk-provider"; | |
| const llmgateway = createLLMGateway({ | |
| apiKey: process.env.LLMGATEWAY_API_KEY, | |
| }); | |
| // After (LLM Gateway AI SDK Provider) | |
| import { createLLMGateway } from "@llmgateway/ai-sdk-provider"; | |
| const llmgateway = createLLMGateway({ | |
| apiKey: process.env.LLM_GATEWAY_API_KEY, | |
| }); |
🤖 Prompt for AI Agents
In `@apps/ui/src/content/migrations/openrouter.md` around lines 139 - 144, Replace
the incorrect environment variable name used when instantiating the SDK client:
in the snippet that calls createLLMGateway and assigns to llmgateway, change
process.env.LLMGATEWAY_API_KEY to process.env.LLM_GATEWAY_API_KEY so it matches
the rest of the guide and other examples; ensure any related examples or
mentions of the env var in this file also use LLM_GATEWAY_API_KEY for
consistency.
| ## 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 | ||
| ``` |
There was a problem hiding this comment.
Add language identifiers to the model ID fenced blocks.
This resolves the MD040 lint warning and improves rendering consistency.
🛠️ Suggested fix
-```
+```text
gpt-4o
claude-3-5-sonnet-20241022
gemini-1.5-pro- +text
openai/gpt-4o
anthropic/claude-3-5-sonnet-20241022
google-ai-studio/gemini-1.5-pro
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
180-180: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
188-188: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
In `@apps/ui/src/content/migrations/vercel-ai-gateway.md` around lines 174 - 192,
Update the two fenced code blocks under the "Model Name Format" section to
include a language identifier by replacing the opening ``` with ```text for both
the root model IDs block (containing gpt-4o, claude-3-5-sonnet-20241022,
gemini-1.5-pro) and the provider-prefixed model IDs block (containing
openai/gpt-4o, anthropic/claude-3-5-sonnet-20241022,
google-ai-studio/gemini-1.5-pro) so the blocks read ```text ... ``` to satisfy
MD040 and ensure consistent rendering.
1 participant
Summary
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.