ToolCall

Display AI tool invocations with status indicators, collapsible inputs and outputs. Essential for agent and function-calling UIs.

ToolCall — Live Demo

Input

{ "query": "latest React 19 features", "max_results": 5 }

Output

[ { "title": "React 19 Release Notes", "url": "https://react.dev/blog/react-19", "snippet": "React 19 introduces Actions, use() hook, and document metadata support..." } ]

ToolCall — Multiple Tools

Import

tsx

import { ToolCall } from "@arc-lo/ui";

Basic usage

tsx

<ToolCall.Root toolName="web_search" status="success">
  <ToolCall.Header />
  <ToolCall.Input>
    {JSON.stringify({ query: "React 19 features" }, null, 2)}
  </ToolCall.Input>
  <ToolCall.Output>
    {JSON.stringify(results, null, 2)}
  </ToolCall.Output>
</ToolCall.Root>

With description in header

tsx

<ToolCall.Root toolName="read_file" status="running">
  <ToolCall.Header>
    <p className="text-xs text-gray-500 mt-0.5">
      Reading src/config.ts
    </p>
  </ToolCall.Header>
</ToolCall.Root>

Agent with multiple tool calls

tsx

function AgentSteps({ steps }) {
  return (
    <div className="space-y-3">
      {steps.map((step) => (
        <ToolCall.Root
          key={step.id}
          toolName={step.tool}
          status={step.status}
        >
          <ToolCall.Header>
            <p className="text-xs text-gray-500 mt-0.5">
              {step.description}
            </p>
          </ToolCall.Header>
          <ToolCall.Input>
            {JSON.stringify(step.input, null, 2)}
          </ToolCall.Input>
          <ToolCall.Output>
            {JSON.stringify(step.output, null, 2)}
          </ToolCall.Output>
        </ToolCall.Root>
      ))}
    </div>
  );
}

Parts

Part	Description
`Root`	Container with status and tool name context
`Header`	Clickable row with status icon, tool name, and badge
`Input`	Collapsible tool arguments display
`Output`	Collapsible result (hidden while pending/running)

Props

Root

Prop	Type	Default	Description
`toolName`	`string`	—	Name of the tool (required)
`status`	`"pending" \| "running" \| "success" \| "error"`	`"pending"`	Current execution status
`defaultOpen`	`boolean`	`false`	Start with details expanded

Statuses

Status	Icon	Badge	Color
`pending`	Gray dot	Queued	Gray
`running`	Spinner	Running	Blue
`success`	Checkmark	Done	Emerald
`error`	X mark	Failed	Red