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

# Vercel AI SDK

> Learn how to integrate Respan tracing with the Vercel AI SDK (Next.js) using OpenTelemetry.

## What is Vercel AI SDK tracing?

This guide shows how to set up **Respan tracing** with [Next.js](https://nextjs.org/) and the [Vercel AI SDK](https://ai-sdk.dev/) so you can monitor and trace your AI-powered applications.

## Steps to use

If you already have a Next.js + Vercel AI SDK app, start from **Step 1** below.

<Steps>
  <Step title="Install Respan exporter">
    Install the Respan exporter package:

    <CodeGroup>
      ```bash npm theme={"system"}
      npm install @respan/exporter-vercel
      ```

      ```bash yarn theme={"system"}
      yarn add @respan/exporter-vercel
      ```

      ```bash pnpm theme={"system"}
      pnpm add @respan/exporter-vercel
      ```

      ```bash bun theme={"system"}
      bun add @respan/exporter-vercel
      ```
    </CodeGroup>
  </Step>

  <Step title="Set up OpenTelemetry instrumentation">
    Next.js supports OpenTelemetry instrumentation out of the box. Create `instrumentation.ts` in your project root (where `package.json` lives).

    Install Vercel's OpenTelemetry instrumentation:

    ```bash theme={"system"}
    yarn add @vercel/otel
    ```

    Then configure the Respan exporter:

    ```typescript instrumentation.ts theme={"system"}
    import { registerOTel } from "@vercel/otel";
    import { RespanExporter } from "@respan/exporter-vercel";

    export function register() {
      registerOTel({
        serviceName: "next-app",
        traceExporter: new RespanExporter({
          apiKey: process.env.RESPAN_API_KEY,
          baseUrl: process.env.RESPAN_BASE_URL,
          debug: true,
        }),
      });
    }
    ```
  </Step>

  <Step title="Configure environment variables">
    Add your Respan credentials (and your provider key) to `.env.local`:

    <Tabs>
      <Tab title="OpenAI">
        ```bash .env.local theme={"system"}
        OPENAI_API_KEY=your_openai_api_key_here

        RESPAN_API_KEY=your_respan_api_key_here
        RESPAN_BASE_URL=https://api.respan.ai
        ```
      </Tab>

      <Tab title="Anthropic">
        ```bash .env.local theme={"system"}
        ANTHROPIC_API_KEY=your_anthropic_api_key_here

        RESPAN_API_KEY=your_respan_api_key_here
        RESPAN_BASE_URL=https://api.respan.ai
        ```
      </Tab>

      <Tab title="Google Gemini">
        ```bash .env.local theme={"system"}
        GOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key_here

        RESPAN_API_KEY=your_respan_api_key_here
        RESPAN_BASE_URL=https://api.respan.ai
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Enable telemetry in your route">
    In your API route file (e.g. `app/api/chat/route.ts`), enable telemetry by adding the `experimental_telemetry` option.

    <Tabs>
      <Tab title="OpenAI">
        ```typescript app/api/chat/route.ts theme={"system"}
        import { openai } from "@ai-sdk/openai";
        import { streamText } from "ai";

        export const maxDuration = 30;

        export async function POST(req: Request) {
          const { messages, id } = await req.json();
          console.log("chat id", id);

          const result = streamText({
            model: openai("gpt-4o"),
            messages,
            experimental_telemetry: {
              isEnabled: true,
              metadata: {
                customer_identifier: "customer_from_metadata",
              },
            },
          });

          return result.toDataStreamResponse();
        }
        ```
      </Tab>

      <Tab title="Anthropic">
        ```typescript app/api/chat/route.ts theme={"system"}
        import { anthropic } from "@ai-sdk/anthropic";
        import { streamText } from "ai";

        export const maxDuration = 30;

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

          const result = streamText({
            model: anthropic("claude-3-5-sonnet-20240620"),
            messages,
            experimental_telemetry: {
              isEnabled: true,
            },
          });

          return result.toDataStreamResponse();
        }
        ```
      </Tab>

      <Tab title="Google Gemini">
        ```typescript app/api/chat/route.ts theme={"system"}
        import { google } from "@ai-sdk/google";
        import { streamText } from "ai";

        export const maxDuration = 30;

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

          const result = streamText({
            model: google("gemini-2.0-flash"),
            messages,
            experimental_telemetry: {
              isEnabled: true,
            },
          });

          return result.toDataStreamResponse();
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Run locally and verify traces">
    1. Start your dev server:

    <CodeGroup>
      ```bash pnpm theme={"system"}
      pnpm dev
      ```

      ```bash yarn theme={"system"}
      yarn dev
      ```

      ```bash npm theme={"system"}
      npm run dev
      ```

      ```bash bun theme={"system"}
      bun dev
      ```
    </CodeGroup>

    2. Make some chat requests through your application
    3. Verify traces in Respan:
       * Go to **Logs → Traces** in your Respan dashboard
       * Confirm requests are being traced

    If you hit missing dependency errors from `@vercel/otel`, install the missing packages and retry.
  </Step>
</Steps>

## What gets traced

With this setup, Respan will capture:

* **AI model calls**: requests made via the Vercel AI SDK
* **Token usage**: input and output token counts
* **Performance metrics**: latency and throughput
* **Errors**: failed requests and error details
* **Custom metadata**: additional context you attach via telemetry metadata