---
title: "Next.js Chat Example with Telemetry"
description: "A chatbot using the Vercel AI SDK with Telemetry."
url: "https://vercel.com/templates/next.js/ai-chatbot-telemetry"
links:
  repository: "https://github.com/vercel/ai/tree/main/examples/next-openai-telemetry"
  demo: "https://github.com/vercel/ai/tree/main/examples/next-openai-telemetry"
  deploy: "https://vercel.com/new/clone?demo-title=Next.js+Chat+Example+with+Telemetry&demo-description=A+chatbot+using+the+Vercel+AI+SDK+with+Telemetry.&demo-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Ftree%2Fmain%2Fexamples%2Fnext-openai-telemetry&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3gRwuOJbOt4z8fGl2pVn0m%2F2384e8acc3b94fde579b1ee324e2e725%2FScreenshot_2024-08-06_at_19.24.42.png&project-name=Next.js+Chat+Example+with+Telemetry&repository-name=ai-chatbot-telemetry&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Ftree%2Fmain%2Fexamples%2Fnext-openai-telemetry&from=templates&skippable-integrations=1&env=OPENAI_API_KEY&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Ftree%2Fmain%2Fexamples%2Fnext-openai-telemetry"
---

# Next.js Chat Example with Telemetry

A chatbot using the Vercel AI SDK with Telemetry.

# AI SDK, Next.js, and OpenAI Chat Example with Telemetry

This example shows how to use the [AI SDK](https://ai-sdk.dev/docs) with [Next.js](https://nextjs.org/) and [OpenAI](https://openai.com) to create a ChatGPT-like AI-powered streaming chat bot with [OpenTelemetry support](https://ai-sdk.dev/docs/ai-sdk-core/telemetry).

## Deploy your own

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=ai-sdk-example):

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Ftree%2Fmain%2Fexamples%2Fnext-openai-telemetry&env=OPENAI_API_KEY&envDescription=OpenAI%20API%20Key&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=vercel-ai-chat-openai-telemetry&repository-name=vercel-ai-chat-openai-telemetry)

## How to use

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:

```bash
npx create-next-app --example https://github.com/vercel/ai/tree/main/examples/next-openai-telemetry next-openai-telemetry-app
```

```bash
yarn create next-app --example https://github.com/vercel/ai/tree/main/examples/next-openai-telemetry next-openai-telemetry-app
```

```bash
pnpm create next-app --example https://github.com/vercel/ai/tree/main/examples/next-openai-telemetry next-openai-telemetry-app
```

To run the example locally you need to:

1. Sign up at [OpenAI's Developer Platform](https://platform.openai.com/signup).
2. Go to [OpenAI's dashboard](https://platform.openai.com/account/api-keys) and create an API KEY.
3. Set the required OpenAI environment variable as the token value as shown [the example env file](https://github.com/vercel/ai/tree/main/examples/next-openai-telemetry/.env.local.example) but in a new file called `.env.local`
4. `pnpm install` to install the required dependencies.
5. `pnpm dev` to 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](https://ai-sdk.dev/docs)
- [AI SDK telemetry support](https://ai-sdk.dev/docs/ai-sdk-core/telemetry)
- [Vercel AI Playground](https://ai-sdk.dev/playground)
- [OpenAI Documentation](https://platform.openai.com/docs) - learn about OpenAI features and API.
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

## Related Templates

### [Chatbot](https://vercel.com/templates/next.js/chatbot)

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

### [Object Generation Streaming with useObject](https://vercel.com/templates/next.js/use-object)

An application that converts text inputs into structured objects and streams the expense as it’s being processed using the Vercel AI SDK.

### [Upstash Vector + Vercel AI SDK Starter](https://vercel.com/templates/next.js/upstash-vector-vercel-ai-sdk-starter)

A RAG chatbot starter for expert answers on university degrees. Built using Vercel AI SDK, LangChain, Upstash Vector, and OpenAI.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.