Interaction / component

Tool Run Card

A compact tool disclosure with captured parameters, explicit approval and inspectable local results.

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Portable derivative preserving the compact Tool/status/disclosure and Parameters/Result hierarchy. Replaces upstream monorepo, AI SDK, icons and code renderer with complete scoped native React/CSS.
Primitive callbacks are caller-owned. Undefined output alone is absent; values are inert text, bounded to depth 8, 500 nodes and 12,000 characters. Getters and toJSON are not invoked; hostile inspection is caught.
Local example starts with editable black/white colors and Request check. Approve calculates real WCAG contrast with a 4.5:1 normal-text target; Deny performs no calculation. Retry captures corrected inputs.
Captured input/run identity guards cancel, edit, stale and duplicate approval. State study is appearance only. Tabs, Pause and Replay preserve work; status changes cancel unfinished work. Reset restores the selected preset/mode.
All states are static and remain usable under reduced motion, hidden documents and paused playback. No implicit network or backend requests.

React 19.2Modern browsersNative disclosure

AI Elements — Vercel, Inc. · Apache-2.0. Portable derivative; original copyright notice and full license included.

Prop	Type	Default	Description
`title`	string	`'Tool run'`	Disclosure title.
`state`	'pending' \| 'approval-requested' \| 'running' \| 'complete' \| 'error' \| 'denied' \| 'cancelled'	`'pending'`	Appearance state; caller owns real task progression.
`input`	unknown	`undefined`	Captured parameters rendered as bounded inert text.
`output`	unknown	`undefined`	Result value; 0, false and null remain meaningful.
`errorText`	string	`undefined`	Readable error message.
`open`	boolean	`undefined`	Controlled disclosure; omit for internal state.
`onOpenChange`	(open: boolean) => void	`undefined`	Receives native disclosure changes.
`disabled`	boolean	`false`	Disables disclosure and every action callback.
`paused`	boolean	`false`	Static design preserves content and interactions.
`replayToken`	number	`0`	Accepted playback input; static disclosure and results are preserved.
`className`	string	`''`	Additional host class.
`onApprove`	() => void	`undefined`	Caller-owned approve action; only displayed in an applicable state.
`onDeny`	() => void	`undefined`	Caller-owned deny action; only displayed in an applicable state.
`onCancel`	() => void	`undefined`	Caller-owned cancel action; only displayed in an applicable state.
`onRetry`	() => void	`undefined`	Caller-owned retry action; only displayed in an applicable state.