Tool
A tool call: name, live status, timing, parameters and result.
Tool shows one tool call compactly: the mono tool name, a live status (shimmer and spinner while running, a signal check when done), and timing. Expand for the exact parameters and the result. Failed calls open themselves so errors are never hidden.
Preview
Parameters
{
"env": "production"
}Error
Error: build failed: Type error in src/routes/index.tsx:42
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/tool.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/tool.
Builds on: collapsible, motion, spinner, text-shimmer
Usage
import { Tool } from "@/components/ui/tool";
<Tool name="web_search" status="running" input={{ query }} />Motion
Running tools shimmer; status marks swap in place.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Tool
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Tool name. |
| status | "pending" | "running" | "success" | "error" | "success" | State. |
| input · output | unknown | — | Pretty-printed JSON or text. |
| duration | number | — | Seconds. |
| icon | ReactNode | — | Tool icon. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: ai tool call ui · function calling component · agent tool use display · mcp tool call ui · shadcn ai tool