Tool call UI with the OpenAI Agents SDK

import { Agent, run, tool } from "@openai/agents";
import { z } from "zod";

export type ToolEvent = { id: string; name: string; status: "running" | "done" | "error"; input?: string; output?: string; at: number };

const lookUpInvoice = tool({
  name: "look_up_invoice",
  description: "Find a Stripe invoice by number",
  parameters: z.object({ number: z.string() }),
  execute: async ({ number }) => JSON.stringify({ number, status: "open", amountDue: 41300 }),
});

const agent = new Agent({ name: "Billing agent", instructions: "Answer billing questions.", tools: [lookUpInvoice] });

export async function POST(req: Request) {
  const { message }: { message: string } = await req.json();
  const result = await run(agent, message, { stream: true });
  const encoder = new TextEncoder();

  const body = new ReadableStream({
    async start(controller) {
      const send = (event: ToolEvent) => controller.enqueue(encoder.encode(`${JSON.stringify(event)}\n`));
      for await (const event of result) {
        if (event.type !== "run_item_stream_event") continue;
        const raw = event.item.rawItem;
        if (event.name === "tool_called" && raw.type === "function_call") send({ id: raw.callId, name: raw.name, status: "running", input: raw.arguments, at: Date.now() });
        if (event.name === "tool_output" && raw.type === "function_call_result" && event.item.type === "tool_call_output_item")
          send({ id: raw.callId, name: raw.name, status: "done", output: String(event.item.output), at: Date.now() });
      }
      await result.completed;
      controller.close();
    },
  });

  return new Response(body, { headers: { "Content-Type": "application/x-ndjson" } });
}

"use client";

import { useState } from "react";
import { ToolCallRow, ToolCallRowGroup, type ToolCallRowValue } from "@/components/pixilui/tool-call-row";
import type { ToolEvent } from "../app/api/agent/route";

type Row = { name: string; status: ToolEvent["status"]; input?: string; output?: string; startedAt: number; endedAt?: number };

const parse = (text?: string): ToolCallRowValue | undefined => {
  if (text === undefined) return undefined;
  try {
    return JSON.parse(text) as ToolCallRowValue;
  } catch {
    return text; // plain text output stays text
  }
};

export function AgentTools() {
  const [rows, setRows] = useState<Map<string, Row>>(new Map());

  async function ask(message: string) {
    setRows(new Map());
    const response = await fetch("/api/agent", { method: "POST", body: JSON.stringify({ message }) });
    const reader = response.body!.pipeThrough(new TextDecoderStream()).getReader();
    let buffer = "";
    try {
      for (;;) {
        const { value, done } = await reader.read();
        if (done) break;
        buffer += value;
        const lines = buffer.split("\n");
        buffer = lines.pop() ?? "";
        for (const line of lines.filter(Boolean)) {
          const event = JSON.parse(line) as ToolEvent;
          setRows((prev) => {
            const next = new Map(prev);
            const row = prev.get(event.id);
            next.set(event.id, row ? { ...row, status: event.status, output: event.output, endedAt: event.at } : { name: event.name, status: event.status, input: event.input, startedAt: event.at });
            return next;
          });
        }
      }
    } catch {
      setRows((prev) => new Map([...prev].map(([id, row]) => [id, row.status === "running" ? { ...row, status: "error" } : row])));
    }
  }

  return (
    <section>
      <button type="button" onClick={() => ask("Is invoice NW-1042 still open?")}>
        Check invoice NW-1042
      </button>
      {rows.size ? (
        <ToolCallRowGroup>
          {[...rows].map(([id, row]) => (
            <ToolCallRow
              key={id}
              name={row.name}
              status={row.status}
              summary={row.status === "done" ? "Looked up the invoice" : "Looking up the invoice"}
              startedAt={row.startedAt}
              durationMs={row.endedAt ? row.endedAt - row.startedAt : undefined}
              input={parse(row.input)}
              output={parse(row.output)}
              error={row.status === "error" ? "The run stopped before this call returned." : undefined}
            />
          ))}
        </ToolCallRowGroup>
      ) : null}
    </section>
  );
}