Next.js Chat Example with Telemetry

The AI SDK Next.js OpenAI Chat Example with Telemetry is a Vercel-maintained starter from the vercel/ai repository that combines Next.js, the AI SDK, and OpenAI into a streaming ChatGPT-style chat application with OpenTelemetry tracing enabled. It is one of the official AI SDK examples published alongside the AI Toolkit for TypeScript.

What is the Next.js Chat Example with Telemetry?

It is a runnable Next.js example application, published in the vercel/ai repository, that wires the AI SDK to OpenAI in order to stream chat completions to a browser interface. The only input you supply is an OpenAI API key, stored as an environment variable; the output is a working chat bot page that streams model responses token by token while emitting OpenTelemetry telemetry for each AI SDK call. It runs locally on Next.js with npm, Yarn, or pnpm, and it can also be deployed directly to Vercel with one click.

What makes this example stand out?

• Next.js scaffolding — bootstrapped with create-next-app, which pulls the example straight from the vercel/ai repository into a new project directory.
• OpenAI provider integration — the app reads an OpenAI API key, created in the OpenAI dashboard, from an environment file rather than hardcoding credentials.
• Streaming chat interface — renders a ChatGPT-like conversational UI that displays model output as it streams back.
• OpenTelemetry telemetry — AI SDK telemetry support is enabled so model calls can be traced and observed, a capability few chat starters include by default.
• Three package managers — matched install commands for npm, Yarn, and pnpm are documented for bootstrapping the project.
• Environment template — an example env file (.env.local.example) is included to show the required variable, which you copy into a local .env.local file.
• One-click Vercel deploy — a deploy link clones the example, prompts for the OpenAI API key, and names the resulting project vercel-ai-chat-openai-telemetry.
• Documentation pointers — the README links out to AI SDK docs, AI SDK telemetry docs, the Vercel AI Playground, OpenAI's docs, and Next.js docs.

Who should use this example?

• Next.js developers new to the AI SDK: use it as a first working reference for streaming OpenAI responses into a React-based front-end without writing provider plumbing from scratch.
• Teams adding LLM observability: adopt it when you need traces around model calls, since OpenTelemetry is wired in from the start rather than bolted on later.
• Engineers evaluating AI SDK telemetry: run it locally to see what span data the AI SDK emits for a simple chat request before committing to the pattern in production code.
• Prototypers who want fast hosting: deploy the Vercel clone link to get a public chat endpoint running with only an API key as configuration.

How does the example work?

Start by signing up at OpenAI's developer platform and creating an API key in the OpenAI dashboard. Copy the provided example env file to .env.local and set the key as the token value. Run the install command for your package manager (pnpm install, for example), then start the dev server with pnpm dev, or deploy the repository to Vercel instead of running it locally.

FAQ

What do I need to run this example?

An OpenAI account and API key, plus Node.js tooling for npm, Yarn, or pnpm. You copy the example env file to .env.local, place the key there, install dependencies, and start the development server. No other provider credentials are required because the example targets OpenAI specifically.

Does it include telemetry by default?

Yes. The example is built around AI SDK OpenTelemetry support, so model calls are instrumented as part of the sample rather than requiring you to add tracing yourself. The README links to the AI SDK telemetry documentation for configuring where those traces are exported.

Can I deploy it without running it locally?

Yes. A Vercel deploy link clones the vercel/ai example repository, asks for the OpenAI API key as an environment variable, and provisions a project named vercel-ai-chat-openai-telemetry. The same link works whether or not you have already bootstrapped the project with create-next-app.

Which framework and model provider does it use?

It is built on Next.js and calls OpenAI models through the AI SDK, which is the TypeScript toolkit maintained by the creators of Next.js. The chat surface is a streaming web UI, so responses appear incrementally as the model generates them.