Tool Call

One tool or function call by an assistant with its lifecycle and the permission request shown before it runs.

// Plain markup
import { ToolCall } from "@shavin/ui";

Needs approval

search_tickets

Search support tickets

Needs approval

query: refund AND status:open

Component Source

<ToolCall name="search_tickets" status="needs-approval" description="Search support tickets" input={"query: refund AND status:open"} onApprove={() => {}} onDeny={() => {}} />

Running

read_file

Reading refund-policy-2026.pdf

Running

Component Source

<ToolCall name="read_file" status="running" description="Reading refund-policy-2026.pdf" />

Done with result

search_tickets

12 tickets found

Done

12 open refund tickets, oldest 6 days.

Component Source

<ToolCall name="search_tickets" status="done" description="12 tickets found">12 open refund tickets, oldest 6 days.</ToolCall>

Failed and denied

send_email

Could not reach the mail service

Failed

Timed out after 10s.

delete_file

You denied this request

Denied

Component Source

<Flex direction="column" gap="3">
  <ToolCall name="send_email" status="error" description="Could not reach the mail service">Timed out after 10s.</ToolCall>
  <ToolCall name="delete_file" status="denied" description="You denied this request" />
</Flex>

Props

Prop	Type	Default	Description
name*	string	—	Tool identifier shown in monospace, e.g. "search_tickets".
status	ToolCallStatus	—	Lifecycle of the call.
description	string	—	One line saying what the tool is doing or wants to do, in plain language.
input	string	—	What the tool will receive, shown in the approval request (e.g. a query or file path).
children	React.ReactNode	—	Result of the call. Shown when done or failed.
onApprove	(scope: ToolApprovalScope) => void	—	Called when the user allows a call that needs approval.
onDeny	() => void	—	Called when the user denies a call that needs approval.
hideAlways	boolean	—	Hide the "Always allow" choice.

* required