---

name: model-picker-gateway description: Use when a chat feature lets users choose among many models routed through an AI gateway, and you need the picker UI and the API route to agree on the allowed set without shipping the gateway key or trusting a client-supplied model id.

Client-Safe Model Picker over a Gateway

When to trigger

Building a model selector where the client sends a chosen model id to your route, which forwards it to a gateway (for example the Vercel AI Gateway) that can reach many providers on one key.

One registry, no secrets, imported by both sides

Keep the offered models in a single client-safe module that holds no secrets. The picker imports it to render options; the route imports it to validate the request. Because it is secret-free, shipping it to the browser is fine, and there is exactly one list to keep true.

export interface ChatModel { id: string; label: string; provider: string; credits: 1 | 2 | 3 }
export const CHAT_MODELS: readonly ChatModel[] = [
  { id: "moonshotai/kimi-k2.5", label: "Kimi K2.5", provider: "Moonshot", credits: 1 },
  { id: "anthropic/claude-sonnet-5", label: "Sonnet 5", provider: "Anthropic", credits: 2 },
  { id: "openai/gpt-5.4", label: "GPT-5.4", provider: "OpenAI", credits: 3 },
] as const;
export function isChatModel(id: string): boolean {
  return CHAT_MODELS.some((m) => m.id === id);
}

Ids are the gateway's provider/model form; verify them against the gateway's /v1/models list before shipping, because a typo fails at request time, not build time.

Never trust the client's model id

The route validates the incoming id against the whitelist before anything reaches the gateway. Without that check, a caller can request an arbitrary or more expensive model than the UI offers.

if (!isChatModel(requested)) return new Response("Unknown model", { status: 400 });
const cost = CHAT_MODELS.find((m) => m.id === requested)!.credits;

Tie the price to the model, not the message

Inference cost varies widely across models, so carry a per-model credit tier in the same registry (economy 1, standard 2, premium 3) instead of a flat per-message price. Charge that tier, and deduct only after a successful generation so a failed call is free.

Pitfalls

• Reading the model from the request and forwarding it unchecked lets a caller pick any gateway model, blowing your cost model and margin. Validate against the whitelist first.
• Putting the gateway key in the shared model module leaks it to the browser. The registry holds ids and labels only; the key stays server-side.
• A flat per-message charge underprices premium models and overprices cheap ones. Price per model tier.
• Hardcoding the model id string in two places (UI and route) drifts. Import the one registry in both.