Usage
import { ToolCallCard } from "@/registry/components/tool-call-card/tool-call-card";
<ToolCallCard name="…" status={/* … */}>Label</ToolCallCard>Props
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Tool name as the agent calls it, shown in mono – e.g. "search_web" | |
| status | "running" | "success" | "error" | Spinner with a live timer, check with the duration, or a red "Failed" | |
| summary | ReactNode | Short human summary next to the name; truncates with an ellipsis | |
| icon | ReactNode | wrench icon | Icon in the tile on the left – a 16px stroke SVG fits best |
| args | unknown | Arguments – objects are pretty-printed and highlighted, JSON strings are parsed; the section is hidden when undefined | |
| result | unknown | What the tool returned – like args; other strings are shown as plain text. While running without a result, "Waiting for result…" is shown | |
| error | string | Error message, shown in the body when status is "error" | |
| startedAt | number | Start time in ms since epoch – the live timer counts from here instead of from when the card turned running | |
| duration | number | Final duration in ms – otherwise the time measured while the card was running | |
| defaultOpen | boolean | false | Start expanded (uncontrolled) |
| open | boolean | Expanded state (controlled) | |
| onOpenChange | (open: boolean) => void | Called when the header is toggled | |
| openOnError | boolean | true | Opens the card when the call fails and closes it on the next run, unless someone toggled it by hand (uncontrolled only) |
| onRetry | () => void | Shows a Retry button next to the error message | |
| maxCodeHeight | number | 220 | Height in px after which arguments and result are capped with a fade and a "Show all" toggle |
| className | string | Extra class on the root | |
| ToolCallGroup · children | ToolCallCard elements | The cards – the group reads their icon, status and duration props for its header, so pass them as direct children | |
| ToolCallGroup · label | string | "Used N tools" | Header label once nothing is running |
| ToolCallGroup · runningLabel | string | "Using tools…" | Shimmering header label while any card is running |
| ToolCallGroup · duration | number | Total in ms – otherwise the sum of the cards' duration props, or the time measured while any card was running | |
| ToolCallGroup · defaultOpen / open / onOpenChange | boolean / boolean / (open) => void | false | Expanded state, uncontrolled or controlled |
| ToolCallGroup · className | string | Extra class on the root |
When to use
- Tool and function calls in an agent chat or run log – what was called, with what, and what came back - Agents that call several tools per turn – wrap them in ToolCallGroup so the answer isn't buried under cards - Developer-facing views where people need to copy the exact arguments or result to debug
When not to use
Plain chat text.