Skip to main content
Urbicon UI

ToolCallCardexperimental

Collapsible card that renders one agent tool call — a status header with the tool name and JSON input/output (or an error) in the body. Opens itself on failure.

Input
json
{
  "city": "Berlin",
  "unit": "celsius"
}
State
Loading...
Loading syntax highlighting...

01 Examples

Lifecycle: running to complete

The consumer owns the tool-call part and mutates its state and output as the real call resolves. While busy the header shows a spinner and a neutral status; on completion it flips to a success badge and reveals the output. The card stays collapsed the whole time — a successful call is not worth a click.
Input
json
{
  "city": "Berlin",
  "unit": "celsius"
}
Loading...
Loading syntax highlighting...

Failure opens itself

A call in the error state starts expanded so the failure is visible without a click, and shows errorMessage above the input. A manual toggle afterwards always wins — auto-open never fights the reader.

permission denied for relation "invoices" (SQLSTATE 42501)

Input
json
{
  "sql": "SELECT * FROM invoices WHERE due < now()"
}
Loading...
Loading syntax highlighting...

Domain-specific body via the children snippet

Pass a children snippet to replace the default JSON input/output with a view built for the tool. The snippet receives the same part; the status header (badge + monospaced tool name) and the collapse mechanics stay. Here a web_search result set renders as a ranked list instead of raw JSON.
  • OKLCH in CSS: why we moved

    example.com/oklch

    94%
  • A perceptual color picker

    example.com/picker

    87%
  • Gamut mapping explained

    example.com/gamut

    71%
Loading...
Loading syntax highlighting...

02 Accessibility

Status is text, not just color

The spinner and the status Badge are decorative (aria-hidden). The header carries a single sr-only line with the current state label (Pending / Running / Done / Failed), so assistive tech reads the status once and never announces a spinner as content.

Disclosure semantics

The header is a real <button> with aria-expanded and aria-controls pointing at the body region — the same Collapsible contract as the rest of the library. Tab to reach it, Enter or Space to toggle. Focus rings use focus-visible:.

Untrusted output

Input and output render as plain text inside CodeBlock, never as interpreted HTML — tool results are untrusted data.

03 API Reference

16 props
16 props 1 required

No matching properties

No matching properties

04 Installation

Import

Loading...
Loading syntax highlighting...