ToolCallCard

Collapsible AI-tool invocation. Icon + summary + status badge + Approve/Reject for capability-gated tools.

Inspired by Cursor tool cards, Claude tool use display, Anthropic Workbench.

Preview

What it looks like.

Switch the call's outcome to see status colours and the (collapsible) input/output blocks.

Arguments

{ "cmd": "rg -n 'TODO' src/", "cwd": "/Users/dev/project" }

Result

src/lib.rs:142:    // TODO: surface this in the audit log
src/main.rs:23:    // TODO: handle SIGINT
2 matches

Live — the real component, scoped to this frame.

Usage

Drop it into your app.

import { ToolCallCard } from '@locara/components'

<ToolCallCard
  tool="edit-file"
  summary={<><code>apps/transcribe/src/main.tsx</code> · 3 changes</>}
  status="pending"
  requiresApproval
  onApprove={() => tools.approve(id)}
  onReject={() => tools.reject(id)}
  args={<CodeBlock language="json" code={JSON.stringify(args, null, 2)} />}
/>

Or copy the source into your repo: locara add tool-call-card

Design notes

Why it works this way.

Approval gating is the load-bearing affordance. A Locara runtime can stream tool-call cards to the chat in a 'pending' state and let the user inspect args before approving. After approval, the consumer flips the status to 'running' → 'success' / 'error', and the user sees the lifecycle inline.