Back to Templates
AI SDK, Next.js, and OpenAI Chat Example with Telemetry
This example shows how to use the AI SDK with Next.js and OpenAI to create a ChatGPT-like AI-powered streaming chat bot with OpenTelemetry support.
Deploy your own
Deploy the example using Vercel:
How to use
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example https://github.com/vercel/ai/tree/main/examples/next-openai-telemetry next-openai-telemetry-appyarn create next-app --example https://github.com/vercel/ai/tree/main/examples/next-openai-telemetry next-openai-telemetry-apppnpm create next-app --example https://github.com/vercel/ai/tree/main/examples/next-openai-telemetry next-openai-telemetry-appTo run the example locally you need to:
- Sign up at OpenAI's Developer Platform.
- Go to OpenAI's dashboard and create an API KEY.
- Set the required OpenAI environment variable as the token value as shown the example env file but in a new file called
.env.local pnpm installto install the required dependencies.pnpm devto launch the development server.
Learn More
To learn more about OpenAI, Next.js, and the AI SDK take a look at the following resources:
- AI SDK docs
- AI SDK telemetry support
- Vercel AI Playground
- OpenAI Documentation - learn about OpenAI features and API.
- Next.js Documentation - learn about Next.js features and API.
