A compact agent tool-call row that expands into readable input and result panels, with running and completed states for AI product interfaces.
"use client";
import { useEffect, useRef } from "react";
import { ToolCallVisualizer } from "@/components/ui/tool-call-inspector";
export default function ToolCallVisualizerDemo() {
const rootRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const timer = window.setTimeout(() => rootRef.current?.querySelector("button")?.click(), 900);
return () => window.clearTimeout(timer);
}, []);
return <div ref={rootRef} className="grid min-h-[520px] w-full place-items-center bg-zinc-50 p-5 dark:bg-zinc-950"><ToolCallVisualizer name="search_web" input={{ query: "customer retention benchmarks" }} result={{ matches: 18, elapsed_ms: 342, top_source: "Industry report" }} /></div>;
}