New Project

Provider Registry with Vercel AI SDK

A Next.js chatbot using the Vercel AI SDK's streamText function with a provider registry to allow users to switch models.

DeployView Demo

Provider Registry Preview

This example demonstrates how to use the Vercel AI SDK with Next.js and the experimental_createProviderRegistry function to handle multiple providers and models and switch between them easily in your application.

Deploy your own

How to use

Run create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example https://github.com/vercel-labs/ai-sdk-preview-provider-registry ai-sdk-preview-provider-registry-example
yarn create next-app --example https://github.com/vercel-labs/ai-sdk-preview-provider-registry ai-sdk-preview-provider-registry-example
pnpm create next-app --example https://github.com/vercel-labs/ai-sdk-preview-provider-registry ai-sdk-preview-provider-registry-example

To run the example locally you need to:

  1. Sign up for accounts with the AI providers you want to use (e.g., OpenAI, Anthropic).
  2. Obtain API keys for each provider.
  3. Set the required environment variables as shown in the .env.example file, but in a new file called .env.
  4. npm install to install the required dependencies.
  5. npm run dev to launch the development server.

Learn More

To learn more about Vercel AI SDK or Next.js take a look at the following resources:

  • Vercel AI SDK docs
  • Vercel AI Playground
  • Next.js Documentation
GitHub Repovercel-labs/ai-sdk-preview-provider-registry
LicenseView License
Use Cases
AI
Stack
Next.js
Tailwind
Radix UI

Related Templates

Chatbot

A full-featured, hackable Next.js AI chatbot built by Vercel
Chatbot thumbnail

Dynamic Model Usage with AI SDK

A chatbot that allows you to dynamically set the LLM using Vercel AI SDK with Feature Flags and Edge Config
Dynamic Model Usage with AI SDK thumbnail
DeployView Demo