design-infraReport a problem or share feedback← Catalog
Ai Tool Call
curatedtheme-awarefreesmoothui/ai-tool-call
Collapsible tool invocation whose status badge is one ring that evolves — breathing, spinning, then drawing a check or a cross.
$
npx shadcn@latest add @smoothui/ai-tool-callnpm deps: lucide-react, motion
Our notes
Collapsible tool-invocation row (name, summary, args/result panel) whose status ring breathes while pending, spins while running, then draws a check or cross. Chrome is theme tokens; the success/error ring colours are fixed oklch green/red — swap for your semantic tokens if the design system defines them. Status is also announced via sr-only text. Pairs with smoothui/ai-task-list.- Source
- SmoothUI
- Kind
- component
- Categories
- agent-ui
- Use as
- drop-in — replaces your component
- Applies to
- agent-uiaccordion
- Motion
- on state · subtle · motion + svg · medium cost · respects reduced motion
- Tags
- ai, tool, function-call, agent, status, collapsible, spring, complexity-medium, reduced-motion
- Licence
- MIT ("MIT License — Copyright (c) 2024 Eduardo Calvo", github.com/educlopez/smoothui).
- Live demo
- smoothui.dev
- Docs
- smoothui.dev
Similar
Compare all 4 →- Ai Reasoningsmoothui/ai-reasoningCollapsible reasoning trace: the label shimmers 'Thinking' only while isStreaming, then settles to 'Thought for 3.2s' (measured, or pass duration) and auto-collapses — until the user toggles it, after which it stops deciding for them. Muted-foreground chrome, inherits the theme; no shimmer under reduced motion.
- Ai Approvalsmoothui/ai-approvalHuman-in-the-loop approval card: the chosen option expands to fill the card and the alternatives collapse away, so the decision reads as final; destructive options get bg-destructive/10. All shadcn tokens (bg-background, border-border, text-muted-foreground) and useReducedMotion throughout — the free, theme-aware alternative to beautifui/approval-card (no foundation.css --accent clash). Pass resolvedId when replaying a transcript.
- Ai Context Metersmoothui/ai-context-meterContext-window meter: a ring that fills and shifts to amber at warningAt / red at dangerAt without ever changing size, with a token breakdown on open. Warning/danger colours are fixed oklch; the rest is tokens. Good for chat headers and agent consoles that should show budget pressure quietly.