Phoenix, Vercel AI SDK, Next.js, and OpenAI Generative Example with Telemetry

This example shows how to use the Vercel AI SDK with Next.js and OpenAI to create a sample generative application with OpenTelemetry support.

OTEL spans are processed by the @arizeai/openinference-vercel package and collected and viewable in Arize-Phoenix.

Deploy your own

Deploy the example using Vercel:

If you don't already have an OpenAI API key do the following to create one:

To run the example locally you need to:

Set the required OpenAI environment variable as the token value as shown the example env file but in a new file called .env.local.
To run Arize-Phoenix locally run docker run -p 6006:6006 -i -t arizephoenix/phoenix
npm ci to install the required dependencies.
npm run dev to launch the development server.

To view Arize-Phoenix and the example app visit:

To learn more about Phoenix, OpenAI, Next.js, and the Vercel AI SDK take a look at the following resources:

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
app		app
public		public
.env.local.example		.env.local.example
.gitignore		.gitignore
README.md		README.md
instrumentation.ts		instrumentation.ts
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json