Loading…

AI Tool Call

A collapsible record of a tool the model called, its arguments and its result.

AI
1 file
2 npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add ai-tool

npm packages installed: class-variance-authority, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Tool } from "@/components/ui/ai-tool";

Examples

Every example the tests run, live and operable, side by side.

Default
Statuses
Custom Status Wording
Failed
Ring Indicator
With Summary

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Tool>

Prop	Type	Default
`status`	`ToolStatus`	`"pending"`

Every prop of Radix UI’s Collapsible.Root, plus className.

<ToolHeader>

Prop	Type	Default
`name` (required) The tool's name, as the model called it.	`string`	—
`icon`	`ReactNode`	—
`indicator` Status mark style. `icon` is a glyph per status; `ring` is one ring that breathes while queued, spins with a gap while running, and draws a check or a cross when done. `icon` wins over both.	`"icon" \| "ring"`	`"icon"`
`status`	`ToolStatus`	`"pending"`
`statusLabel` Overrides the status wording.	`string`	—
`summary` A short note before the status — "3 sources", "1.2s". It is part of the trigger's accessible name, so keep it short.	`ReactNode`	—

Every prop of Radix UI’s Collapsible.Trigger, plus className.

<ToolContent>

Every prop of Radix UI’s Collapsible.Content, plus className.

<ToolSection>

Prop	Type	Default
`label` (required)	`string`	—

Plus every attribute of <div>.

<ToolPayload>

Prop	Type	Default
`label`	`string`	`"Payload"`

Plus every attribute of <pre>.

Accessibility

A disclosure: the trigger exposes aria-expanded and controls the panel. Status is stated in words, not by a coloured dot — colour alone is unavailable to a screen reader and to anyone who cannot distinguish it. Payload blocks are focusable named regions, since JSON scrolls and an unfocusable scroll box is unreachable by keyboard. The optional ring indicator is decorative and hidden; the status word stays visible, and the ring stops moving under reduced motion. A summary note is part of the trigger's name, so keep it short.

Quality

Measured from the source and its tests at build time.

All scores

9/9

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

status

ToolStatus

"pending"

Prop

Type

Default

name

The tool's name, as the model called it.

string

—

icon

ReactNode

—

indicator

Status mark style. icon is a glyph per status; ring is one ring that breathes while queued, spins with a gap while running, and draws a check or a cross when done. icon wins over both.

"icon" | "ring"

"icon"

status

ToolStatus

"pending"

statusLabel

Overrides the status wording.

string

—

summary

A short note before the status — "3 sources", "1.2s". It is part of the trigger's accessible name, so keep it short.

ReactNode

—

Prop

Type

Default

label

string

—

Prop

Type

Default

label

string

"Payload"