Observability in Next.js

1
import { openai } from "@ai-sdk/openai";
2
import { streamText, tool } from "ai";
3
import { z } from "zod";
4
5
export const maxDuration = 30;
6
7
export async function POST(req: Request) {
8
  const { messages } = await req.json();
9
10
  const result = streamText({
11
    model: openai("gpt-4o"),
12
    messages,
13
    tools: {
14
      weather: tool({
15
        description: "Get the weather in a location (fahrenheit)",
16
        parameters: z.object({
17
          location: z.string().describe("The location to get the weather for"),
18
        }),
19
        execute: async ({ location }) => {
20
          const temperature = Math.round(Math.random() * (90 - 32) + 32);
21
          return {
22
            location,
23
            temperature,
24
          };
25
        },
26
      }),
27
    },
28
  });
29
30
  return result.toDataStreamResponse();
31
}

1
'use client';
2
3
import { useChat } from '@ai-sdk/react';
4
5
export default function Chat() {
6
  const { messages, input, handleInputChange, handleSubmit } = useChat({
7
    maxSteps: 5,
8
  });
9
10
  return (
11
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
12
      {messages.map(m => (
13
        <div key={m.id} className="whitespace-pre-wrap">
14
          {m.role === 'user' ? 'User: ' : 'AI: '}
15
          {m.parts.map((p, idx) =>
16
            p.type === "tool-invocation" || p.type === "source" ? (
17
              <pre key={idx}>{JSON.stringify(p, null, 2)}</pre>
18
            ) : p.type === "text" ? (
19
              <p key={idx}>{p.text}</p>
20
            ) : (
21
              <p key={idx}>{p.reasoning}</p>
22
            )
23
          )}
24
        </div>
25
      ))}
26
27
      <form onSubmit={handleSubmit}>
28
        <input
29
          className="fixed dark:bg-zinc-900 bottom-0 w-full max-w-md p-2 mb-8 border border-zinc-300 dark:border-zinc-800 rounded shadow-xl"
30
          value={input}
31
          placeholder="Say something..."
32
          onChange={handleInputChange}
33
        />
34
      </form>
35
    </div>
36
  );
37
}

1
import { registerOTel } from "@vercel/otel";
2
3
export function register() {
4
  registerOTel({
5
    serviceName: "humanloop-ai-sdk-agent",
6
  });
7
}

HUMANLOOP_API_KEY=<YOUR_HUMANLOOP_KEY>
OPENAI_API_KEY=<YOUR_OPENAI_KEY>
OTEL_EXPORTER_OTLP_ENDPOINT=https://api.humanloop.com/v5/import/otel
OTEL_EXPORTER_OTLP_PROTOCOL=http/json
OTEL_EXPORTER_OTLP_HEADERS="X-API-KEY=<YOUR_HUMANLOOP_KEY>" # Humanloop API key

1
import { openai } from "@ai-sdk/openai";
2
import { streamText, tool } from "ai";
3
import { z } from "zod";
4
5
export const maxDuration = 30;
6
7
export async function POST(req: Request) {
8
  const { messages } = await req.json();
9
10
  const result = streamText({
11
    model: openai("gpt-4o"),
12
    messages,
13
    experimental_telemetry: {
14
      isEnabled: true,
15
      metadata: {
16
        humanloopPromptPath: "path/to/prompt",
17
        humanloopFlowPath: "path/to/flow", // Optional
18
      },
19
    },
20
    tools: {
21
      weather: tool({
22
        description: "Get the weather in a location (fahrenheit)",
23
        parameters: z.object({
24
          location: z.string().describe("The location to get the weather for"),
25
        }),
26
        execute: async ({ location }) => {
27
          const temperature = Math.round(Math.random() * (90 - 32) + 32);
28
          return {
29
            location,
30
            temperature,
31
          };
32
        },
33
      }),
34
    },
35
  });
36
37
  return result.toDataStreamResponse();
38
}