Tool Call

Visualize tool and function invocations with status, args, and results.

ToolCall shows a tool invocation inside the transcript: status badge, parameters, and result or error. Expand it when you need the payload details.

Parameters

{
  "city": "Tehran",
  "units": "metric"
}

Result

{
  "temperature": 28,
  "condition": "Clear",
  "humidity": 22
}

<ToolCall name="get_weather" status="output-available" defaultOpen>
  <ToolCallHeader label="Get weather" />
  <ToolCallContent>
    <ToolCallInput parameters={{ city: "Tehran" }} />
    <ToolCallOutput result={{ temperature: 28 }} />
  </ToolCallContent>
</ToolCall>

Installation

pnpm dlx cubix@latest add tool-call --base aria

Usage

Import

import {
  ToolCall,
  ToolCallContent,
  ToolCallHeader,
  ToolCallInput,
  ToolCallOutput,
} from "@/components/cubix/tool-call"

Example

<ToolCall name="get_weather" status="output-available" defaultOpen>
  <ToolCallHeader label="Get weather" />
  <ToolCallContent>
    <ToolCallInput parameters={{ city: "Tehran" }} />
    <ToolCallOutput result={{ temperature: 28 }} />
  </ToolCallContent>
</ToolCall>

Composition

ToolCall
├── ToolCallHeader
└── ToolCallContent
    ├── ToolCallInput
    └── ToolCallOutput

Features

Collapsible card with clear status badge and iconography
Pretty-printed parameters and results without a code-block dep
Error and denied states with distinct surfaces

Pending

Parameters

{
  "query": "rollback plan"
}

<ToolCall name="search_docs" status="input-streaming" defaultOpen>
  <ToolCallHeader label="Search docs" />
  <ToolCallContent>
    <ToolCallInput parameters={{ query: "rollback plan" }} />
  </ToolCallContent>
</ToolCall>

Running

Parameters

{
  "service": "checkout",
  "window": "1h"
}

<ToolCall name="list_monitors" status="input-available" defaultOpen>
  ...
</ToolCall>

Awaiting Approval

Parameters

{
  "name": "add_workspace_invites",
  "dryRun": false
}

<ToolCall name="run_migration" status="approval-requested" defaultOpen>
  ...
</ToolCall>

Completed

Parameters

{
  "city": "Tehran",
  "units": "metric"
}

Result

{
  "temperature": 28,
  "condition": "Clear",
  "humidity": 22
}

<ToolCall name="get_weather" status="output-available" defaultOpen>
  <ToolCallHeader label="Get weather" />
  <ToolCallContent>
    <ToolCallInput parameters={...} />
    <ToolCallOutput result={...} />
  </ToolCallContent>
</ToolCall>

Error

Parameters

{
  "invoiceId": "inv_98421"
}

Error

Upstream billing API timed out after 10s.

<ToolCall name="fetch_invoice" status="output-error" defaultOpen>
  <ToolCallOutput error="Upstream billing API timed out after 10s." />
</ToolCall>

Denied

Parameters

{
  "workspaceId": "ws_104"
}

Error

User denied this tool call.

<ToolCall name="delete_workspace" status="output-denied" defaultOpen>
  <ToolCallOutput error="User denied this tool call." />
</ToolCall>

Collapsed

<ToolCall status="output-available" defaultOpen={false}>
  ...
</ToolCall>

Status cycle

Parameters

{
  "source": "prometheus",
  "range": "15m"
}

<ToolCall status={status}>...</ToolCall>

Stack

{calls.map((call) => <ToolCall key={call.id} ... />)}

In a message

Parameters

{
  "city": "Tehran",
  "units": "metric"
}

Result

{
  "temperature": 28,
  "condition": "Clear",
  "humidity": 22
}

Tehran is clear at 28°C with low humidity. Good window for the outdoor cutover checklist.

<Message>
  <MessageContent>
    <ToolCall>...</ToolCall>
    <Bubble variant="muted">...</Bubble>
  </MessageContent>
</Message>

API Reference

ToolCall

Prop	Type	Default	Description
name	string	-	Tool or function name shown in the header.
status	ToolCallStatus	"input-available"	Lifecycle state: Pending, Running, Awaiting Approval, Responded, Completed, Error, Denied.
open	boolean	-	Controlled open state for the collapsible details.
defaultOpen	boolean	-	Initial open state. Defaults open for pending, approval, and error.
onOpenChange	(open: boolean) => void	-	Called when the panel opens or closes.

ToolCallHeader

Prop	Type	Default	Description
label	React.ReactNode	-	Optional human-readable title. When set, the tool name appears as a subtitle.
children	React.ReactNode	-	Optional custom header content instead of the default layout.

ToolCallInput

Prop	Type	Default	Description
parameters	unknown	-	Tool arguments. Objects are pretty-printed as JSON. Alias: input.
input	unknown	-	Alias for parameters.
title	React.ReactNode	"Parameters"	Section label above the parameters.
children	React.ReactNode	-	Custom parameters body instead of auto-formatted JSON.

ToolCallOutput

Prop	Type	Default	Description
result	unknown	-	Successful tool result. Objects are pretty-printed as JSON. Alias: output.
output	unknown	-	Alias for result.
error	React.ReactNode	-	Error content. Forces the Error section title when set. Alias: errorText.
errorText	React.ReactNode	-	Alias for error.
title	React.ReactNode	-	Section label. Defaults to "Result" or "Error".
children	React.ReactNode	-	Custom output body instead of result/error helpers.