ToolCall

Card for one AI tool invocation — the tool name, its lifecycle status, collapsible input/output, and approval actions

Category: display · WCAG 2.2-AA · ai, agent, tool, function-call, approval, mcp, status

States

pending
running
awaiting-approval
complete
error
denied

Props

Prop	Type	Default	Description
`name`	`string`	—	The tool’s name, shown in monospace (e.g. `search_web`).
`status`	`'pending' \| 'running' \| 'awaiting-approval' \| 'complete' \| 'error' \| 'denied'`	—	Lifecycle, matching the AI SDK tool-part states: `pending` (input streaming), `running`, `awaiting-approval`, `complete`, `error`, `denied`.
`input`	`ReactNode`	—	The call’s arguments. A string (e.g. `JSON.stringify(args, null, 2)`) renders preformatted; any other node renders as given.
`output`	`ReactNode`	—	The tool’s result — a string renders preformatted, a node as given.
`error`	`ReactNode`	—	Why the call failed. The panel opens itself when status is `error`.
`actions`	`ReactNode`	—	Rich slot below the card — typically Approve / Deny buttons while `awaiting-approval`. Always visible, never inside the collapsible panel.
`labels`	`{ pending?: string; running?: string; awaitingApproval?: string; complete?: string; error?: string; denied?: string; input?: string; output?: string; errorHeading?: string }`	—	Overrides for the component’s user-visible strings (i18n).

Design tokens

--cascivo-color-ai
--cascivo-color-surface
--cascivo-color-border
--cascivo-color-bg-subtle
--cascivo-color-text-muted
--cascivo-color-warning
--cascivo-color-destructive
--cascivo-radius-surface
--cascivo-font-mono
--cascivo-focus-ring

When to use

Showing an AI tool or function call in a conversation, with what it was given and what it returned
Asking the reader to approve or deny a call before it runs (human-in-the-loop)

When not to use

A list of agent steps without payloads — use ChainOfThought
Announcing that the assistant is working — use AiStatus
Showing arbitrary code — use CodeSnippet

How to build an accessible ToolCall in React →

Examples

Running

<ToolCall name="search_web" status="running" input={'{ "query": "cascivo pricing" }'} />

Complete

<ToolCall
  name="get_weather"
  status="complete"
  input={'{ "city": "Berlin" }'}
  output={'{ "tempC": 18, "sky": "clear" }'}
/>

Awaiting approval

<ToolCall
  name="send_email"
  status="awaiting-approval"
  input={'{ "to": "[email protected]", "subject": "Weekly report" }'}
  actions={
    <>
      <Button variant="ghost" size="sm">Deny</Button>
      <Button size="sm">Approve</Button>
    </>
  }
/>

Error

<ToolCall name="fetch_page" status="error" error="The page returned 404." />

Related components

ChainOfThought — A ToolCall can sit in a ChainOfThought step’s detail
Badge — The status is a Badge whose tone follows the lifecycle
AiStatus — AiStatus announces progress; ToolCall is never a live region

← Back to docs