Tool call
Each tool the agent calls, with its input and output.
The tools an agent calls, shown between its message and its answer. Each call takes a server,
a name and a state — queued waits, running spins, done shows how long it took and what
came back. Click a call to fold its input and output open or shut. The reply fades in once
every call is done.
Checking which plans changed this month before I update the pricing page.
Usage
<!-- include core.css + tool-call.css -->
<div class="dm-tcx">
<p class="dm-msg">Checking which plans changed this month.</p>
<div class="dm-tcx-calls">
<div class="dm-tcx-c dm-open">
<button class="dm-tcx-h" aria-expanded="true">
<span class="dm-tcx-ic"><!-- icon --></span>
<span class="dm-tcx-n"><span>billing.</span><b>list_plan_changes</b></span>
<span class="dm-tcx-ms"><span>412 ms</span><span><!-- check --></span></span>
<!-- chev-d -->
</button>
<div class="dm-fold">
<div><div class="dm-tcx-io">
<div><div class="dm-tcx-l">Input</div><pre>{ "since": "2026-10-01" }</pre></div>
<div><div class="dm-tcx-l">Output</div><pre>[ { "plan": "Pro", "price": 24 } ]</pre></div>
</div></div>
</div>
</div>
</div>
<p class="dm-msg dm-tcx-end dm-in">Two plans changed. I updated their prices.</p>
</div>Properties
| Name | Type | Description |
|---|---|---|
message | ReactNode | The agent's message before the calls. |
calls | ToolCallItem[] | The tools the agent called, each a row that folds open. |
reply | ReactNode | The agent's answer after the calls. It fades in once every call is done. |
open | string[] | Keys of the calls that are open. Leave it out to let each call toggle itself. |
defaultOpen | string[] | The calls open at first when open is uncontrolled. |
onOpenChange | (open: string[]) => void | Called with the new open set whenever a call is toggled. |
call.server | string | The tool's server or namespace, like billing. |
call.name | string | The tool's name, like list_plan_changes. |
call.icon | IconName | The icon in front of the call. |
call.state | queued | running | done | queued waits, running spins, done shows the time and output. |
call.duration | string | How long it took, like 412 ms. Shown once done. |
call.input | Json | What the agent sent, shown as highlighted JSON. |
call.output | Json | What came back, shown once done. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The call
rows sit on the stage with a chip-tinted icon badge and chip-tinted JSON blocks; keys, strings and
numbers take their own palette tokens, and the running spinner and fold motion follow the shared
ease. In Soft the rows and JSON blocks are rounder.