Components · Legibility

Tool Call Card

The atomic unit of agent legibility. The tool name and a one-line human intent stay visible at all times; arguments and results are one tap away. State is never communicated by color alone, and failures keep the arguments on screen so a human can diagnose without re-running.

When to use

Any time an agent calls a tool the user might want to verify: API requests, file operations, searches, code execution. Use one card per call, in execution order. If your agent makes dozens of rapid calls, group them under a collapsed parent rather than stacking cards.

Behavior

Four states: queued, running (with elapsed time), done, failed. The card expands to show arguments and result. On failure the arguments stay attached to the error, because the wrong assumption usually lives in the inputs, not the stack trace.

Usage

tsx

import { ToolCallCard } from "@/components/tool-call-card";

<ToolCallCard
  name="search_flights"
  intent="Searching SFO → JFK, Aug 12"
  state="running"
  elapsed={3}
  args={JSON.stringify(params, null, 2)}
/>

Install

shell

npx shadcn@latest add https://agent-pitstop.vercel.app/r/tool-call-card.json

Or copy the source from registry/tool-call-card. MIT licensed.