Tool Call

A collapsible agent tool-invocation status — web search, file reads, code runs — on real <details>/<summary>, the same foundation as Reasoning. Compose results with Sources or any other content.

Searching "JWT auth vulnerabilities"

Examples

Searching

Running state shimmers the label while results populate underneath.

Searching "JWT auth vulnerabilities"

Usage

<ToolCall
  label={'Searching "JWT auth vulnerabilities"'}
  status="running"
  defaultOpen
>
  <Sources heading={null}>…</Sources>
</ToolCall>

Complete

Settled checkmark once the tool finishes; still expandable.

Searched "JWT auth vulnerabilities"

Usage

<ToolCall
  label={'Searched "JWT auth vulnerabilities"'}
  status="complete"
  defaultOpen
>
  <Sources heading={null}>
    <Source title="JWT verification best practices" href="…" />
  </Sources>
</ToolCall>

Status only

Without children, ToolCall is a non-collapsible status row.

Reading src/auth.ts

Usage

<ToolCall label="Reading src/auth.ts" status="complete" />

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Searched "JWT auth vulnerabilities"

Unstyled

Same component — Kernel look stripped. See Platforms.

status

label

defaultOpen

results

Usage

<ToolCall label="Searched "JWT auth vulnerabilities"" status="complete" defaultOpen>
  <Sources heading={null}>
    <Source title="JWT verification best practices" href="…" />
  </Sources>
</ToolCall>

<kernel-tool-call label="Searched "JWT auth vulnerabilities"" status="complete" default-open>
  <kernel-sources heading="">
    <kernel-source title="JWT verification best practices" href="…"></kernel-source>
  </kernel-sources>
</kernel-tool-call>

Props

Props for Tool Call.
Prop	Type	Default
`label`	ReactNode (required)	—
`status`	"pending" \| "running" \| "complete" \| "error"	"pending"
`defaultOpen`	boolean	true while pending/running
`open` / `onOpenChange`	controlled open state	—
`children`	ReactNode	—

Accessibility

Expand/collapse and keyboard support come from native <details> when results are present.
The running state announces via role="status", same polite live-region pattern as ThinkingIndicator.
Without children, the control is a plain status row — no disclosure control to confuse when there's nothing to expand.
Motion (dots + shimmer) freezes under prefers-reduced-motion; the label text still communicates the state.