> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wandb.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Vercel AI SDK

> Trace Vercel AI SDK calls in Weave using OpenTelemetry

You can trace [Vercel AI SDK](https://ai-sdk.dev/) calls in Weave using [OpenTelemetry (OTel)](https://opentelemetry.io/). The Vercel AI SDK is a TypeScript toolkit for building AI-powered applications, with framework support for Next.js, Nuxt, SvelteKit, and others. It has built-in OpenTelemetry support through its `experimental_telemetry` option.

This guide shows you how to configure OTel to send traces from the Vercel AI SDK to Weave so that you can observe and debug your AI SDK calls in the Weave UI. You can use the AI SDK with Next.js or as a standalone Node.js application. This guide is intended for developers building AI-powered applications with the Vercel AI SDK who want to add tracing to an existing app.

For more information about OTel tracing in Weave, see [Send OTel traces to Weave](../tracking/otel).

## Prerequisites

Before you begin, complete the following setup. Both the Next.js and Node.js examples in this guide require the same dependencies:

1. Install the following Vercel and OTel libraries:

   ```bash theme={null}
   npm install ai @ai-sdk/openai @opentelemetry/api @opentelemetry/sdk-trace-node @opentelemetry/sdk-trace-base @opentelemetry/exporter-trace-otlp-proto @opentelemetry/resources zod
   ```

2. Set the following environment variables:

   ```bash theme={null}
   export WANDB_API_KEY="your-wandb-api-key"
   export OPENAI_API_KEY="your-openai-api-key"
   ```

   You can get your W\&B API key from [User Settings](https://wandb.ai/settings).

## Configure OTel tracing for Next.js

This section demonstrates how to configure Weave in a Next.js app. The example doesn't contain a full app, only the instrumentation configuration and how to invoke the instrumentation on a Vercel AI SDK function (in this case, a call to OpenAI).

### Configure instrumentation

Next.js applications use an `instrumentation.ts` file to set up OTel. This file runs once when the server starts and configures the tracer provider that the AI SDK uses.

To integrate Weave with Vercel's OTel functionality, create an `instrumentation.ts` file in your project root and add the following code to it, updating the `resourceFromAttributes()` function with your team and project names:

```typescript twoslash lines {17-19} title="instrumentation.ts" theme={null}
// @noErrors
import { NodeTracerProvider } from "@opentelemetry/sdk-trace-node";
import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-base";
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto";
import { resourceFromAttributes } from "@opentelemetry/resources";

export function register() {
  const WANDB_API_KEY = process.env.WANDB_API_KEY!;

// Configure OTel exporter to use W&B Weave endpoint.
  const exporter = new OTLPTraceExporter({
    url: "https://trace.wandb.ai/otel/v1/traces",
    headers: { "wandb-api-key": WANDB_API_KEY },
  });

// Configure your W&B credentials.
  const provider = new NodeTracerProvider({
    resource: resourceFromAttributes({
      "wandb.entity": "[YOUR-TEAM-NAME]",
      "wandb.project": "[YOUR-PROJECT-NAME]",
    }),
    spanProcessors: [new BatchSpanProcessor(exporter)],
  });

  provider.register();
}
```

This creates an OTLP exporter configured to send trace data to Weave's OTel endpoint, authenticating with your W\&B API key.

### Configure telemetry on a function

After you've added the instrumentation, use Vercel's `experimental_telemetry` option on any AI SDK function call to emit OTel spans:

```typescript twoslash lines {10} title="route.ts" theme={null}
// @noErrors
import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";

export async function POST(req: Request) {
  const { prompt } = await req.json();

// Add experiment_telemetry field to function.
  const result = await generateText({
    model: openai("gpt-4o-mini"),
    prompt,
    experimental_telemetry: { isEnabled: true },
  });

  return Response.json({ text: result.text });
}
```

All `generateText` calls with telemetry enabled produce OTel spans that are exported to Weave. Your Next.js app is now configured to send Vercel AI SDK traces to Weave.

## Configure OTel tracing for Node.js

If you're not using Next.js, you can configure OTel directly in a standalone Node.js application. For standalone Node.js applications, configure the tracer provider at the top of your entry file before any AI SDK calls so that subsequent AI SDK calls are captured.

After meeting the prerequisites, you can run the following example and generate spans without any additional configuration.

```typescript twoslash lines {11-14,18-19,31} title="test-app.ts" theme={null}
// @noErrors
import { NodeTracerProvider } from "@opentelemetry/sdk-trace-node";
import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-base";
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto";
import { resourceFromAttributes } from "@opentelemetry/resources";
import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";

const WANDB_API_KEY = process.env.WANDB_API_KEY!;

// Configure OTel exporter to use W&B Weave endpoint.
const exporter = new OTLPTraceExporter({
  url: "https://trace.wandb.ai/otel/v1/traces",
  headers: { "wandb-api-key": WANDB_API_KEY },
});

// Configure your W&B credentials.
const provider = new NodeTracerProvider({
  resource: resourceFromAttributes({
    "wandb.entity": "[YOUR-TEAM-NAME]",
    "wandb.project": "[YOUR-PROJECT-NAME]",
  }),
  spanProcessors: [new BatchSpanProcessor(exporter)],
});

provider.register();

// Add experiment_telemetry field to function.
async function main() {
  const result = await generateText({
    model: openai("gpt-4o-mini"),
    prompt: "Explain OpenTelemetry in one sentence.",
    experimental_telemetry: { isEnabled: true },
  });

  console.log(result.text);

  await provider.shutdown();
}

main();
```

`BatchSpanProcessor` flushes spans asynchronously. In short-lived processes like standalone scripts, serverless functions, or CLI tools, call `provider.shutdown()` before the process exits to ensure all spans are sent to Weave. For long-running servers (like a Next.js dev server started through `instrumentation.ts`), this isn't necessary.