Tool call

A React component in Beamline's AI & agents category.

One tool call in an agent's run: status, what it did and a short result on one quiet row that opens to the exact input and output; stops for permission when needed, with progress and the reason if allowing fails.

Use it for

Showing the tools an agent called, as they run, with inputs and outputs on demand.
A call that needs the person's permission before it runs.

Not for

The agent's thinking (reasoning).
A multi-step plan the person approves up front (plan).
An action that needs details and choices before approval (approval-card).

Anatomy

status glyph (queued, spinner, check, cross, hand, ban)
tool icon
title (or tool name)
tool name in mono
result meta and duration; the word Failed or Denied when the call did not run to the end
chevron (on hover or focus)
Allow (primary) / Deny (ghost) for approval; they move under the title when the row is too narrow for both
refusal line
input and output blocks (open), always left to right, also in right-to-left pages

Variants

status: pending, running, approval, done, error, denied

States

collapsed
open
not expandable (no input/output yet)
deciding (Allow or Deny shows progress)
refused (reason under the row, still waiting)

Keyboard

Tab to the row; Enter or Space opens and closes it
Tab to Deny / Allow while waiting for approval

Motion

Opens on the system's smooth spring (fade only under reduced motion); the spinner closes into a check or cross when the call ends.

Props

Prop	Type	Default	Description
`name / title / status` (required)	`string / ReactNode / ToolCallStatus`	—
`input / output`	`unknown`	—	Objects are shown as formatted JSON.
`meta / duration / icon`	`ReactNode / number (s) / ReactNode`	—
`onApprove / onDeny`	`() => void \| Promise`	—	A promise shows progress; a rejection shows its reason.
`open / defaultOpen / onOpenChange`	`boolean`	—
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`ToolCallClassNames`	—

Built from

spinner
button

Dependencies

lucide-react, motion

Import

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

Get it

Tool call is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent