Components / agents

Tool Call

One tool call the agent made: its name and status on one line, with the input and the result folded underneath.

import { ToolCall } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { ToolCall } from '@basiiik/ui';

<ToolCall name="search_components" />

• Example values were filled in for the required prop name: replace them with your own.
• Hover and Focused are CSS on the native button. Open is the open prop (or defaultOpen; a failed call starts open). Status is the status prop and is always shown as a word.
• Compose with: badge.
• Storybook: Agents/Tool call.

Props

States. Hover and Focused are CSS on the native button. Open is the open prop (or defaultOpen; a failed call starts open). Status is the status prop and is always shown as a word.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Show a tool or function the agent called, with what it sent and what came back
• A log of what an agent did while it worked

Do not use it when

• The answer itself (use ChatMessage)
• A task list the person approves (a plan card is planned)

Rules for agents

• Put it inside the assistant ChatMessage, in the order the calls happened
• Set status as the call moves: pending, running, done or error
• Pass input and output as the real values; they are formatted for you
• On failure set status="error" and put the reason in error
• Pass duration in seconds when it is known

Avoid

• Showing raw JSON in the message text
• A spinner with no word for the status
• Hiding a failure: an error must be visible without opening anything

Writing the content

• Name: the tool's real name in code type, as the agent called it: "search_components"

Keyboard

• Enter and Space open and close it
• Tab moves to the header button

Accessibility

• A native button with aria-expanded and aria-controls; the panel is a region named by the button
• The status is a word (Waiting, Running, Done, Failed), never colour alone
• An error message is role="alert"; the input and result blocks can be focused to scroll

Colour tokens it reads

Related

• Chat Message
• Reasoning
• Badge
• Conversation

agents 8 Figma variants Try it in the live demo