Tool Call Inspector

AI chats 13

About

A compact agent tool-call row that expands into readable input and result panels, with running and completed states for AI product interfaces.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tool Call Inspector to your project and fits it to your theme.

Code

How Tool Call Inspector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>;
}