Tool Call Card

FreeNew

A collapsible card for one AI tool call, showing its name, status and duration, with the input and result as formatted JSON.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

name

status

duration1

open

defaultOpen

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/tool-call-card.json

Usage

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

<ToolCallCard
  name="search_docs"
  status="success"
  duration={842}
  input={{ query: "install", limit: 3 }}
  result={[{ title: "Installation", url: "/docs/installation" }]}
/>

Props

ToolCallCard

Prop	Type	Default	Description
`name`	`string`	-	Tool name, shown in monospace.
`status`	`"pending" \| "running" \| "success" \| "error"`	`"pending"`	Lifecycle state of the call.
`duration`	`number`	-	How long the call took, in milliseconds.
`input`	`unknown`	-	Arguments the model passed. Objects are printed as JSON, strings as-is.
`result`	`unknown`	-	What the tool returned, or the error message when status is `"error"`.
`description`	`ReactNode`	-	Short line under the name.
`open`	`boolean`	-	Controlled open state of the details.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Called when the details open or close.

Also accepts all <div> props. Children are rendered in the details panel after the input and result.

ToolCallStatusBadge

Prop	Type	Default	Description
`status`	`ToolCallStatus`	-	Rendered as an icon plus text.

formatToolDuration(ms) (1240 to "1.2s") is also exported.

Accessibility

Status is always an icon plus a word, never color alone, and changes are announced politely.
The card can't be expanded when it has no input, result or children.
Input and result blocks take a tab stop only when they overflow, so keyboard users can scroll them.