Tool call

One function call by the agent, from MCP tools to API calls: what it did in plain words, the function name, a status pill, the run time, and the input and output on demand.

Input

{
  "url": "https://checkout.atomus.io",
  "standard": "wcag22aa"
}

Output

{
  "violations": 3,
  "passes": 65,
  "incomplete": 0
}

status="pending" · "running" · "success" (expanded) · "error"Live · light and dark follow the theme switch

Add the source to a shadcn project

npx shadcn@latest add https://docs.atomus.io/r/ai-tool-call.jsonOpen in v0

Installs the component source, its CSS and the Atomus tokens into components/atomus/. How the registry works

In Figma

From guidelines/components/ai-tool-call.md

Properties, variants and anatomy of the Figma components. React props use the same names.

Tool call

One function call by the agent: a plain-language title, the function name in monospace, a status pill, the run time, and a disclosure with the input and output as formatted code. Part of the Agent kit.

Figma: component set Tool call on the 🤖 Agent kit page of Atomus 4.0 (node 25548:1134), connected to React with Code Connect. React props use the same names as the Figma properties below.

Property	Type / options
Title	text
Tool name	text
Status	Pending · Running · Success · Error
Duration	number (ms)
Input	code
Output	code
Expanded	boolean
Icon	instance swap (integration logo)

Status

Pending — queued or waiting; clock icon, gray pill.
Running — spinner, bg-ai-subtle pill, the icon tile tints.
Success — check, success pill (“Done”), duration.
Error — alert icon, error pill (“Failed”), error border; the error message replaces the output.

Use for

Showing what an agent did with your systems: searches, API calls, file reads, MCP tools.
Debug views where people need the exact input and output.

Not for

Actions that need permission first: use Approval, then show the Tool call.
The model’s thinking: use Reasoning.

Accessibility

The header is a button with aria-expanded; status pill text changes are announced politely.
Status is a word plus an icon, never colour alone.
Code blocks are focusable and named (“search_docs input”) so keyboard users can scroll them.

Usage

import { ToolCall } from '@stanvision/atomus-react';

<ToolCall
  name="search_docs"
  title="Searched the docs"
  status="success"            // 'pending' | 'running' | 'success' | 'error'
  duration={420}
  input={{ query: 'card border token' }}
  output={{ results: 3 }}
/>

Props at a glance

Full types and defaults are in React API at the end of the page.

name (monospace) and title (plain language); icon for the integration’s logo.
status with an icon and a word; duration in ms.
input and output — strings or objects (formatted as JSON); error replaces the output.
open / defaultOpen / onOpenChange for the disclosure.

Design guidance

From the Figma guidelines.

Write the title as what happened (“Searched the docs”), and keep the function name as a secondary label.
Collapse calls by default; open the one that failed.
Give an error a cause and a next step (“Reconnect Linear and try again”).

Forbidden

Never show secrets, tokens or personal data in the input or output — redact them first.
Never hide a failed tool call; keep it in the thread.

React API

Generated from react/src/components by scripts/gen-react-api.mjs — the same tables agents read in guidelines/components/ai-tool-call.md.

Use only these props; anything else is not part of the API.

`ToolCall`

Figma: Tool call — one function call by the agent: name, status, duration, and a disclosure with the input and output. Status changes are announced politely.

import { ToolCall } from '@stanvision/atomus-react'; — source: react/src/components/ai/ToolCall.tsx

Prop	Type	Default	Description
`name`	`string`	required	Figma: Tool name — the function the agent called, shown in monospace (`search_docs`).
`title`	`ReactNode`	—	Figma: Title — what the call does in plain language (“Searched the docs”). Defaults to `name`.
`status`	`'pending' \| 'running' \| 'success' \| 'error'`	`'success'`	Figma: Status
`input`	`unknown`	—	Figma: Input — the arguments. Objects are shown as formatted JSON.
`output`	`unknown`	—	Figma: Output — the result. Objects are shown as formatted JSON.
`error`	`ReactNode`	—	Error message for `status="error"`; shown in place of the output.
`duration`	`number`	—	Figma: Duration — run time in milliseconds
`icon`	`ReactNode`	—	Replaces the wrench icon (e.g. the integration’s logo)
`open`	`boolean`	—	Expanded (controlled)
`defaultOpen`	`boolean`	`false`	Initial expanded state when uncontrolled
`onOpenChange`	`(open: boolean) => void`	—	Called when the person expands or collapses it
`className`	`string`	—	Extra class on the root element (layout only — never restyle colours or sizes).

Accepts only the props above.