AI SDK Gateway Demo
https://github.com/vercel-labs/ai-sdk-gateway-demo- Category
- AI Tools
- Rank
- No. 1511Tools index
Previous survey · No. 1516 ·
- Pricing
- Open Source
- Type
- TOOL
- Builder
- vercel-labs
- GitHub
- 128 stars
- Date
About
Demo app showing how to route between LLM providers using the Vercel AI Gateway.
What it does
A browser chatbot for comparing responses from a curated model set. Users choose a model, send prompts, receive streamed Markdown output, retry failures, clear the conversation, and switch themes. The selected model stays in the page query string, while available choices come from a server endpoint.
Why it's ranked here
This is a focused teaching app with enough real behavior to expose gateway integration patterns. It covers model discovery, selection, streaming chat, retries, error display, and local authentication setup. Its narrow scope and missing test coverage make it more useful as readable reference code than as a complete application foundation.
What's good
The model picker filters gateway results against an explicit allowlist, keeping the demo controlled while displaying provider-supplied names. Model discovery retries failed requests three times at five-second intervals. Chat output streams with Markdown rendering, model choices survive in the URL, and gateway credit-card failures receive specific guidance instead of a generic message.
Tradeoffs
The interface exposes only a small fixed subset of gateway models. Conversations live in client state and disappear when users start a new chat. Direct local development requires periodically refreshing an OIDC token, while older linked projects may need federation enabled manually. The supplied repository text includes no tests and omits the server route implementations used by the client.
How to use it well
Use it when learning the gateway flow or bootstrapping a small model-switching chat experiment on Vercel. Run through several providers, inspect streamed responses, and study how selection, retry states, and authentication fit together. It does not cover durable conversation storage, a complete model browser, automated testing, or broader production operations.
Technical notes+
package.json defines a private Next.js 15 and React 19 TypeScript application with pnpm metadata plus dev, build, start, lint, and type-check scripts. lib/gateway.ts creates the gateway provider and accepts AI_GATEWAY_BASE_URL. lib/constants.ts declares DEFAULT_MODEL and an eight-entry SUPPORTED_MODELS allowlist. lib/hooks/use-available-models.ts fetches /api/models, filters returned GatewayLanguageModelEntry records, and schedules up to three retries with a 5000 millisecond delay. app/page.tsx reads modelId from searchParams. components/chat.tsx passes the current modelId in each message request, renders assistant text through Streamdown, and supports regenerate, stop, and message clearing. The supplied files contain no app/api route implementation.
Observed
- Primary language
- TypeScript with React components
- Application surface
- Next.js browser chatbot with server API requests
- Package manager
- pnpm is pinned; README also permits npm or Yarn
- Install surface
- Install JavaScript packages, link a Vercel project, then run through Vercel CLI
- Authentication
- Local gateway access uses a Vercel project OIDC token
- Model scope
- Eight model identifiers are explicitly allowlisted
- Repository structure
- No test directory or test script appears in the supplied repository text
Read from README.md, package.json, lib/utils.ts, lib/gateway.ts, lib/constants.ts, lib/display-model.ts, lib/hooks/use-available-models.ts, next.config.ts, eslint.config.mjs, postcss.config.mjs, app/page.tsx, app/layout.tsx, components/chat.tsx, components/theme-toggle.tsx, components/model-selector.tsx.
What it can do
Route requests between multiple LLM providers
User prompts and provider selection criteria → LLM responses from selected provider
Compare responses from different LLM providers
Same prompt sent to multiple providers → Side-by-side comparison of provider responses
Switch between LLM providers dynamically
Provider selection (OpenAI, Anthropic, etc.) and user prompt → Response from selected LLM provider
Demonstrate AI Gateway routing functionality
Test prompts and routing configurations → Working examples of multi-provider LLM integration
Process natural language prompts through multiple AI models
Text prompts and questions → AI-generated text responses
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.