ToolCallCard

Shows a single AI tool invocation with its name, arguments, result, and execution status.

import { ToolCallCard } from "@aetherstack/ui"

Installation

terminal

npx aether-ui add tool-call-card

Import

import.tsx

import { ToolCallCard } from "@aetherstack/ui"

Usage

toolcallcard.tsx

{/* Completed */}
<ToolCallCard
  toolName="search_web"
  args={{ query: "React hooks" }}
  status="done"
  result={{ results: 12 }}
/>

{/* In progress */}
<ToolCallCard
  toolName="read_file"
  args={{ path: "./src/app.ts" }}
  status="running"
/>

{/* Error */}
<ToolCallCard
  toolName="write_file"
  status="error"
  error="Permission denied"
/>

Props

Prop	Type	Default	Description
toolName*	string	—	Tool function name displayed in the card header.
status*	"pending" \| "running" \| "done" \| "error"	—	Execution status — controls icon and color.
args	Record<string, unknown>	—	Tool arguments displayed as formatted JSON.
result	unknown	—	Tool result displayed as formatted JSON.
error	string	—	Error message shown when status is 'error'.
className	string	—	Additional CSS classes.

* Required

Accessibility

→Status is communicated via both color and an icon — never color alone.
→Collapsible args/result section uses a button with aria-expanded.