All components (204)

Tool call

AI · ToolCall

What it is and when to use it

A call to a tool: what was called, with what, whether it is running, went well or failed, and what it returned. Folded it leaves one line; one that failed opens by itself, because it is the one to read.

When to use it

In the response of an assistant that uses tools, one per call, in the order they happened.
In an execution log where it matters to see the input and the result of each step.

When not to

For a log line with no input or result: that is a row of ActivityLog.
For the model's reasoning: that is a Reasoning.

Keyboard: it is a disclosure button; Tab reaches it and Enter or Space open and close it. With no input or result there is nothing to unfold and the button is disabled.

Accessibility: the status is said in text -"Running", "Done", "Failed"- as well as with the icon and the colour, and a change of status is announced with a status region without moving focus. The input and the result are focusable code blocks, with their copy button.

Fine-tuning: CSS variables --amset-tool-call-rule (the border) and --amset-tool-call-state (the status colour).

What it looks like

search_orders: Running

{ "status": "pending" }

3 orders: #1042, #1043, #1047

search_orders: Done

{ "pedido": "#1047" }

The customer has no email on file.

enviar_correo: Failed

<ToolCall name="search_orders" status="running" input={consulta} />

<ToolCall
  name="search_orders"
  status="success"
  input={consulta}
  output="3 orders: #1042, #1043, #1047"
  durationMs={850}
  defaultExpanded
/>

<ToolCall
  name="enviar_correo"
  status="error"
  input={consulta}
  output="The customer has no email on file."
  durationMs={120}
/>

Props

Import it with import { ToolCall } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`name`required	`string`	The name of the tool, as is: `search_orders`, `Read`.
`status`required	`ToolCallStatus`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`defaultExpanded`	`boolean`	Open at the start. By default, only if it failed.
`durationMs`	`number`	How long it took, in milliseconds.
`expanded`	`boolean`	—
`input`	`ReactNode`	What it was called with. A string goes in a code block; anything else, as is.
`onExpandedChange`	`(expanded: boolean) => void`	—
`output`	`ReactNode`	What it returned, or the error message.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: