Tool Call

Show what an agent did on the way to its answer, as inline chips or cards that open to show the input and output.

Searched clients412msReading invoicesDraft email2.1s

Chase Harbour Dental about what they owe.

Harbour Dental has three open invoices totalling $4,410.00. I drafted a reminder to their accounts inbox; it is in your drafts to review.

get_invoices fails once and retries.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/tool-call.json

Usage

import { ToolCall, ToolCallGroup, ToolChip } from "@/components/ui/tool-call"

<ToolChip name="Searched clients" duration={412} />
 
<ToolCallGroup>
  <ToolCall
    name="search_clients"
    status="done"
    duration={412}
    input={{ query: "Harbour Dental" }}
    output={{ id: "cl_8812", name: "Harbour Dental" }}
  />
  <ToolCall name="get_invoices" status="running" input={{ client: "cl_8812" }} />
</ToolCallGroup>

Pass children to render the result yourself, such as a table:

<ToolCall name="get_invoices" status="done">
  <InvoiceTable />
</ToolCall>

Parts

ToolChip. A compact pill with the tool icon, a name, the duration and a status. Use it inline in a message.
ToolCall. The same pill as the header of a card. It opens to show the input and output as formatted JSON with copy buttons, an error message, your own children, and actions such as a Retry button.
ToolCallGroup. Folds several calls behind one line. It reads "Using tools" while any call runs, then "Used 3 tools", with a count of failed calls.
ToolCallSection. The labelled JSON block with a copy button, for use on its own.

Status

running shows a spinner and hides the duration.
done shows a check.
error tints the call red and plays the error sound once.

Status changes swap in place with a soft fade. Opening and closing play the shared disclosure sounds.

Toggle Group Tooltip

On This Page

Installation Usage Parts Status