Tool call

Free · MIT

One tool call as a compact row: what it did in plain words, its status, and how long it took. Expands to the input and output. A failed call opens by default and leads with its error. A call that finishes while on screen draws its tick or cross; one that arrives finished is drawn still.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/tool-call

Brings in: chat, collapsible, locale, payload, status, step-list, streaming-text, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { ToolCallGroup } from "@/components/tool-call"

export default function Example() {
  return (
    <ToolCallGroup
      className="max-w-lg"
      calls={[
        { id: "1", tool: "orders.lookup", title: "Looked up order #4821", status: "succeeded", duration: "0.4s", input: '{ "id": 4821 }', output: '{ "status": "shipped" }', outputLanguage: "json" },
        { id: "2", tool: "carrier.track", title: "Checked the carrier", status: "running" },
        { id: "3", tool: "email.send", title: "Emailed the tracking link", status: "failed", error: "The mail service refused the address." },
      ]}
    />
  )
}

<ToolCall>

Prop	Type	Default	Description
callrequired	`ToolCallData`	—	The call: tool name, plain-words title, status, input, output, duration or error.
className	`string \| undefined`	—	Extra classes for the outer element.

<ToolCallGroup>

A run of tool calls, with a count when it's long enough to fold.

Prop	Type	Default	Description
callsrequired	`ToolCallData[]`	—	Several calls, summarised as a group.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under toolCall in <LocaleProvider strings={{ … }}>; the table is exported as toolCallStrings.

Key	English
input	Input
output	Output
calls	{ one: "{count} tool call", other: "{count} tool calls" }
done	{count} done
failed	{count} failed
working	working
approvedAutomatically	Approved automatically
approvedByPerson	Approved by a person
editedBeforeRun	Edited before it ran
editedNote	A person changed the input before allowing it. Input is what ran.
proposed	As the agent proposed it