Tool Call
An agent’s tool call as a live card: arguments, status and timer, streamed output, human approval and retry.
Overview
Each tool an agent calls gets a card: a title and the raw tool name, a status pill with a timer (queued, running, done, failed, denied), the arguments as highlighted JSON, and output that streams in like a terminal and follows itself unless the reader scrolls up.
Calls that need a human wait in an amber state that opens itself and focuses Approve: a risk line says what’s at stake, and the person can approve once, always allow that tool, or deny. Failures open with the error and a retry button; successes settle into a one-line result.
Everything is props, so it maps directly onto tool_use / tool_result events from Claude, OpenAI or your own agent loop. ToolCallList stacks a turn’s calls.
When to use
- Agent UIs that call tools (MCP, function calling) and should show what ran.
- Human-in-the-loop approval for risky actions.
When not to use
- Web research specifically: use Web Search.
- A single confirm dialog unrelated to an agent: use Confirm Dialog.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/tool-call.jsonnpx shadcn@latest add https://sundaeui.dev/r/tool-call.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/tool-call.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/tool-call.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy tool-call.tsx and tool-call.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ToolCall, ToolCallList } from '@/components/sundae/tool-call'
<ToolCallList>
{calls.map((c) => (
<ToolCall
key={c.id}
name={c.name}
title={c.title}
icon="database"
args={c.input}
status={c.status} // 'awaiting_approval' | 'running' | 'success' | 'error' | 'denied'
output={c.stdout}
result={c.summary}
error={c.error}
startedAt={c.startedAt}
endedAt={c.endedAt}
risk={{ level: 'high', text: 'Writes to production.' }}
onApprove={({ always }) => approve(c.id, always)}
onDeny={() => deny(c.id)}
onRetry={() => retry(c.id)}
/>
))}
</ToolCallList>Props
| Prop | Type | Default |
|---|---|---|
name*Tool name as the model calls it. | string | — |
titleHuman-readable title; the tool name shows under it. | string | — |
iconIcon in the header. | 'terminal' | 'database' | 'globe' | 'file' | 'code' | 'mail' | 'terminal' |
argsArguments, shown as highlighted JSON. | Record<string, unknown> | — |
status*Current state. | 'awaiting_approval' | 'queued' | 'running' | 'success' | 'error' | 'denied' | — |
outputStreamed output; auto-scrolls while the reader is at the bottom. | string | — |
result / errorOne-line result on success, or the error message. | string | — |
startedAt / endedAtTimestamps for the live timer and final duration. | number | — |
riskWhat approval means, shown above the buttons. | { level: 'low' | 'medium' | 'high'; text: string } | — |
onApprove / onDeny / onRetryonApprove receives { always } from the “Always allow” checkbox. | functions | — |
defaultOpenStart expanded. Approval and errors always open. | boolean | false |
Accessibility
- The header is a button with aria-expanded; collapsed details are inert.
- When a call needs approval, the card opens and focus moves to Approve (without scrolling the page).
- Errors use role="alert". The output panel is focusable so keyboard users can scroll it.
- Reduced motion removes the progress bar, spinner, caret and entrances.
Customization
- Custom properties on .sd-tc: --tc-run, --tc-ok, --tc-err, --tc-warn, and the JSON colours --tc-k / --tc-s / --tc-n.
FAQ
- Is Tool Call free?
- Tool Call is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Tool Call?
- Run npx shadcn@latest add https://sundaeui.dev/r/tool-call.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Tool Call support keyboard and screen readers?
- The header is a button with aria-expanded; collapsed details are inert. When a call needs approval, the card opens and focus moves to Approve (without scrolling the page).
- Does Tool Call respect reduced motion?
- Reduced motion removes the progress bar, spinner, caret and entrances.
More like this
All components →- Pro
Reasoning Trace
Components · Refined - Pro
Composer Attachments
Components · Refined - Pro
Web Search
Components · Refined Agent Thinking
Components · Refined- Pro
Cited Answer
Components · Refined Context Meter
Components · Futuristic