Vercel AI SDK, Next.js, Edge Config and Feature Flags Example

This example demonstrates how to use the Vercel AI SDK with Next.js, Feature Flags, and Edge Config to create a flexible AI-powered application with dynamic model switching capabilities.

Deploy your own

How to use

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

1
npx create-next-app --example https://github.com/vercel-labs/ai-sdk-flags-edge-config ai-sdk-flags-edge-config-example

1
yarn create next-app --example https://github.com/vercel-labs/ai-sdk-flags-edge-config ai-sdk-flags-edge-config-example

1
pnpm create next-app --example https://github.com/vercel-labs/ai-sdk-flags-edge-config ai-sdk-flags-edge-config-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. Get / Add API keys for each provider.
3. Set up Edge Config in your Vercel dashboard.
4. Set the required environment variables as shown in the .env.example file, but in a new file called .env.
5. npm install to install the required dependencies.
6. npm run dev to launch the development server.

Note: you can generate the value for the FLAGS_SECRET by running the following code in your terminal:

1
node -e "console.log(crypto.randomBytes(32).toString('base64url'))"

To run the node-example.ts file run the following command in your terminal

1
pnpm tsx node-example.ts

Learn More

To learn more about Vercel AI SDK, Next.js, Feature Flags, and Edge Config, take a look at the following resources:

• Vercel AI SDK docs
• Vercel AI Playground
• Vercel Feature Flags documentation
• Vercel Edge Config documentation
• Next.js Documentation - learn about Next.js features and API.