Tracing AI SDK in Next.js with Laminar

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { registerTelemetry } = await import('ai')
    const { LaminarAiSdkTelemetry } = await import('@lmnr-ai/lmnr')

    registerTelemetry(new LaminarAiSdkTelemetry({
      laminarOptions: {
        projectApiKey: process.env.LMNR_PROJECT_API_KEY,
      },
    }))
  }
}

import ChatUI from "@/components/chat-ui";

export default function Home() {
  return (
    <div className="grid grid-rows-[auto_1fr_auto] min-h-screen p-4 sm:p-6 font-[family-name:var(--font-geist-sans)]">
      <header className="py-4 text-center">
        <h1 className="text-2xl font-bold text-blue-600 mb-1">Therapy Chat</h1>
        <p className="text-sm text-gray-600 dark:text-gray-400 max-w-lg mx-auto">
          A safe space to share your thoughts and receive supportive guidance.
          Your conversation is private and confidential.
        </p>
      </header>
      <main className="w-full max-w-4xl mx-auto my-4">
        <ChatUI />
      </main>
      <footer className="py-4 text-center text-sm text-gray-500 dark:text-gray-400">
        <p>AI-powered support | Not a substitute for professional medical advice</p>
      </footer>
    </div>
  );
}

import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";
import { NextRequest, NextResponse } from "next/server";

// Therapeutic instructions for the model
const instructions = `You are an AI-powered therapist assistant. Respond with
empathy, understanding, and professionalism. Your goal is to provide supportive
responses that help the user process their feelings and thoughts. Never give
medical advice or diagnose conditions.`;

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { messages } = body;

    const response = await generateText({
      model: openai("gpt-5.6-luna"),
      instructions,
      messages,
    });

    return NextResponse.json({ message: response.text });
  } catch (error) {
    console.error("Error in chat API:", error);
    return NextResponse.json(
      { error: "Failed to process request" },
      { status: 500 }
    );
  }
}

"use client";

import { useState } from "react";

type Message = {
  role: "user" | "assistant";
  content: string;
};

export default function ChatUI() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;

    // Add user message to chat
    const userMessage: Message = { role: "user", content: input.trim() };
    setMessages((prev) => [...prev, userMessage]);
    setInput("");
    setIsLoading(true);

    try {
      // Send message to API
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          messages: [...messages, userMessage],
        }),
      });

      if (!response.ok) {
        throw new Error("Failed to get response");
      }

      const data = await response.json();
      
      // Add assistant response to chat
      setMessages((prev) => [
        ...prev,
        { role: "assistant", content: data.message },
      ]);
    } catch (error) {
      console.error("Error:", error);
      // Add error message
      setMessages((prev) => [
        ...prev,
        {
          role: "assistant",
          content: "Sorry, I couldn't process the request. Please try again.",
        },
      ]);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className={"flex flex-col h-[70vh] border rounded-lg " +
      "overflow-hidden bg-white dark:bg-gray-800"}>
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.length === 0 ? (
          <div className="text-center text-gray-500 dark:text-gray-400 mt-20">
            <p className="text-lg font-medium mb-2">Welcome to Therapy Chat</p>
            <p className="max-w-md mx-auto">
              Share what's on your mind, and I'll do my best to provide
              supportive guidance. Your privacy is important - this conversation
              stays between us.
            </p>
          </div>
        ) : (
          messages.map((msg, index) => (
            <div
              key={index}
              className={`flex ${
                msg.role === "user" ? "justify-end" : "justify-start"
              }`}
            >
              <div
                className={`max-w-[80%] rounded-lg px-4 py-2 ${
                  msg.role === "user"
                    ? "bg-blue-500 text-white"
                    : "bg-gray-100 dark:bg-gray-700 text-gray-800 " +
                      "dark:text-gray-200"
                }`}
              >
                {msg.content}
              </div>
            </div>
          ))
        )}
        {isLoading && (
          <div className="flex justify-start">
            <div className={"max-w-[80%] rounded-lg px-4 py-2 " +
              "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200"}>
              <div className="flex space-x-2 items-center">
                <div className="w-2 h-2 rounded-full bg-gray-400 animate-pulse">
                </div>
                <div className={"w-2 h-2 rounded-full bg-gray-400 " +
                "animate-pulse delay-150"}></div>
                <div className={"w-2 h-2 rounded-full bg-gray-400 " + 
                "animate-pulse delay-300"}></div>
              </div>
            </div>
          </div>
        )}
      </div>
      <form
        onSubmit={handleSubmit}
        className="border-t dark:border-gray-700 p-4 flex space-x-2"
      >
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type your message..."
          className={"flex-1 border rounded-md px-3 py-2 focus:outline-none " +
            "focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 " +
            "dark:border-gray-600 dark:text-white"}
          disabled={isLoading}
        />
        <button
          type="submit"
          disabled={isLoading || !input.trim()}
          className={"bg-blue-500 text-white rounded-md px-4 py-2 " +
            "hover:bg-blue-600 focus:outline-none focus:ring-2 " +
            "focus:ring-blue-500 disabled:opacity-50 " + 
            "disabled:cursor-not-allowed"}
        >
          Send
        </button>
      </form>
    </div>
  );
}