Installation
Usage
import { ToolCall } from "@/components/tool-call"
export function SearchStep() {
return (
<ToolCall
name="search_places"
description="Italian · quiet · nearby"
status="done"
duration={1400}
args={{ query: "quiet Italian restaurant", limit: 5 }}
result="5 places found · best match Toscano"
output={{ results: [{ name: "Toscano", rating: 4.6 }] }}
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | The tool's name, in monospace. |
| description | string | — | One line on what this call does. |
| status | "queued" | "running" | "done" | "failed" | "queued" | Where the call is. |
| duration | number | — | Milliseconds it took, shown once done. |
| args | unknown | — | What the agent sent, shown as highlighted JSON. |
| result | ReactNode | — | A readable summary of the result: a sentence or rich cards. |
| output | unknown | — | The raw result, as highlighted JSON. |
| error | ReactNode | — | What went wrong, when failed. |
| icon | ReactNode | wrench | A 16px icon for the tool. |
| ...props | DetailsHTMLAttributes<HTMLDetailsElement> | — | Any details attribute, such as open or onToggle. |
Accessibility
- Built on the native details element: it opens with the keyboard and is announced as expandable.
- The status is spoken as text (for example "Done in 1.4s"), not only shown as colour.
- With prefers-reduced-motion the sweep, spinner and tick don't move.
Changelog
- v1.0.0Latest
First release.