​
Overview

Vercel’s AI SDK has built-in support for OpenTelemetry based tracing. To set up HoneyHive with your NextJS application, follow these 3 steps:

  1. Enable NextJS’s OpenTelemetry instrumentation.
  2. Set the HoneyHive endpoint and headers in your environment variables.
  3. Generate a client-side sessionId and pass it to your AI SDK call to link multiple AI SDK requests to the same user session.

​
Step 1: Enable NextJS’s OpenTelemetry instrumentation

Borrowing from Vercel’s documentation, here are the steps to instrument your application to emit telemetry data:

First, install OpenTelemetry libraries:

npm install @vercel/otel @opentelemetry/sdk-logs @opentelemetry/api-logs @opentelemetry/instrumentation

Next, create a custom instrumentation.ts (or .js) file in the root directory of the project (or inside src folder if using one) and paste the following code: Note that the serviceName need not be the same as your HoneyHive project name.

import { registerOTel } from '@vercel/otel'
 
export function register() {
  registerOTel({ serviceName: 'your-service-name' })
}

If you are on NextJS 14, you will also need to add a flag to your next.config.mjs or next.config.ts file. If you are on NextJS 15 or later, no action is needed.

const nextConfig = {
  // ...existing config
  experimental: {
    instrumentationHook: true,
  },
};

​
Step 2: Set HoneyHive endpoint and headers in your environment variables

To configure HoneyHive to consume NextJS’s telemetry data, you can set the following environment variables:

OTEL_EXPORTER_OTLP_ENDPOINT=https://api.honeyhive.ai/nextjs
OTEL_EXPORTER_OTLP_HEADERS="Authorization=Bearer <your-honeyhive-api-key>, x-honeyhive=project:<your-honeyhive-project-name>"

OTEL_EXPORTER_OTLP_ENDPOINT is the HoneyHive API endpoint for consuming NextJS telemetry data. OTEL_EXPORTER_OTLP_HEADERS are the headers that contain the HoneyHive API key and project name.

If setting these in your .env file, make sure to reload your application after setting the variables.

​
Step 3: Connect your AI SDK calls to HoneyHive

Since your AI application likely make multiple API calls to the AI SDK, you will want to link multiple API calls to the same user chat session. To do this, we recommend generating a client-side sessionId and passing it to your AI SDK call. A valid sessionId is a random uuidv4 string. For example, you can generate a sessionId when your client-side page is mounted:

First, install uuid:

npm install uuid

Then, generate a sessionId when your client-side page is mounted:

import { v4 as uuidv4 } from 'uuid';

const [sessionId, setSessionId] = useState<string | null>(null);

useEffect(() => {
  setSessionId(uuidv4());
}, []);

Finally, you can pass the sessionId to your AI SDK call along with the other metadata:

const result = streamText({
  model: openai('gpt-4o'),
  messages,
  experimental_telemetry: {
    isEnabled: true,
    metadata: {
      sessionId, // your client-side sessionId
      sessionName: 'customer-support-chat', // your session name
      source: 'prod', // dev, prod, etc. Defaults to 'dev' if not set
      project: 'my-honeyhive-project', // only needed if not set in headers
    },
  },
});

The sessionId will help us link multiple traces to the same user session.

You can find a complete example of this integration in our NextJS Cookbook.

LlamaIndexAnthropic