Skip to content
Pinky UI

tool

Tool Call Card

A tool invocation card that flows through pending, running, done and error states.

  • tool
  • agent
  • tool-call
  • status
  • chat

Live preview

{ query: "streaming" }

Quick usage

usage
import { ToolCallCard } from "@pinky-ui/ai-ui";

<ToolCallCard name="search_files" status="running" summary="Searching src/…">
  {"{ query: \"streaming\" }"}
</ToolCallCard>

Install

Add @pinky-ui/ai-ui as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/ai-ui

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
namestring—The tool's name, e.g. "search_files".
status"pending" | "running" | "done" | "error"—Drives the icon and label.
summarystring—One-line result shown while the details panel is collapsed.
childrenReactNode—Expandable detail — arguments, output, a diff. Omit to make the card non-expanding.
defaultOpenbooleanfalseWhether the detail panel starts expanded.
classNamestring—Applied to the outer element.

Accessibility

  • The card carries `role="status"` so status changes (running → done) are announced without a full page interrupt.
  • The trigger button is disabled, not just visually inert, when there is no detail to expand.

Performance

  • The running spinner is a single rotating element, not a Lottie or sprite sheet.

Reduced motion

The running-state spinner still rotates using a plain CSS/Motion loop tied to `useMotionEnabled`'s fallback; only the expand/collapse height animation is removed.

When to use

  • Rendering an agent's tool or function calls inline in a conversation.

When not to use

  • A single boolean loading state — reach for `StreamingActions` or a plain spinner instead.