Tool call

A bracketed card while a tool is running, a single log row once it is done.

# Preview

Demo [scripted]

Press start

# Install

shell

npx shadcn@latest add https://kit.ulasalyesil.com/r/tool-call.json

Add @import "../styles/hud.css"; to your global CSS, after @import "tailwindcss". Zero dependencies beyond React.

# Usage

tsx

import { ToolCall } from "@/components/ui/tool-call";

<ToolCall
  name="search"
  status="running"
  args={{ query: "Istanbul weather this evening" }}
  startedAt={startedAt}
/>

# Props

Prop	Type	Default	Description
name	string		Tool name, shown as [ TOOL: NAME ].
status	"pending" \| "running" \| "awaiting" \| "done" \| "error" \| "denied"		Always written as text. Red is reserved for ERROR.
args	Record<string, unknown>		Value chips. May be partial while pending, so chips appear as keys stream in.
output	ReactNode		Preview, collapsed under OUTPUT.
error	string		Shown in full on error, and the card stays open.
startedAt / endedAt	number		Without startedAt there is no DURATION reading.
onApprove / onDeny	() => void		Buttons render only while awaiting, and only with both.
defaultOpen	boolean		Initial open state. Without it the card follows its status until the reader toggles it.
clock	() => number	performance.now	Timebase for the time props.

# Presets

[ TOOL: SEARCH ][DONE]DURATION []

query: "weather"

Done, folded<ToolCall name="search" status="done" startedAt={0} endedAt={340} />

[ TOOL: FETCH ][ERROR]

url: "https://example.com"

Request timed out

Error<ToolCall name="fetch" status="error" error="Request timed out" />

[ TOOL: SEARCH ][PENDING]

query: "Ista"

Pending, args streaming<ToolCall name="search" status="pending" args={{ query: "Ista" }} />

[ TOOL: DEPLOY ][DENIED]

env: "production"

Denied<ToolCall name="deploy" status="denied" />

# Agent prompt

Paste into Claude Code, Cursor or any coding agent to wire it in.

prompt

Add the —kit Tool call component to this project.
1. Run: npx shadcn@latest add https://kit.ulasalyesil.com/r/tool-call.json
2. Make sure the global CSS imports styles/hud.css after tailwindcss.
3. Import: import { ToolCall } from "@/components/ui/tool-call";
4. Props:
   - name: string. Tool name, shown as [ TOOL: NAME ].
   - status: "pending" | "running" | "awaiting" | "done" | "error" | "denied". Always written as text. Red is reserved for ERROR.
   - args: Record<string, unknown>. Value chips. May be partial while pending, so chips appear as keys stream in.
   - output: ReactNode. Preview, collapsed under OUTPUT.
   - error: string. Shown in full on error, and the card stays open.
   - startedAt / endedAt: number. Without startedAt there is no DURATION reading.
   - onApprove / onDeny: () => void. Buttons render only while awaiting, and only with both.
   - defaultOpen: boolean. Initial open state. Without it the card follows its status until the reader toggles it.
   - clock: () => number. Timebase for the time props.
5. Truth rule: only pass values you actually have. Leave a prop out rather than
   passing a placeholder; its readout will not render.
6. With the Vercel AI SDK: npx shadcn@latest add https://kit.ulasalyesil.com/r/ai-sdk.json
   then: const turn = useKitTurn({ message: lastAssistant, status })