DocumentationComponentsTheme Creator
Theme CreatorGitHubIntroduction
InstallationUsageThemingMotion
Components
AI ChatAI Chat PageAI UsageAgent RoutinesAgent TimelineAgent StatusAI AnswerAgent PlanAgent Tool CallsAI ComposerAI Side PanelPrompt Studio
AI agentsContributing

Agent Tool Calls

The tools an agent used in one turn, as quiet rows in the transcript — each with a live status, its input and output a click away, Retry when it fails and Allow or Deny when it needs you.

The block is a composition, so it follows your theme preset. Copy the source from the Code tab and feed the rows from your agent loop; the run here is simulated and nothing is searched, queried or posted. The product marks are sample content.

What it's made of

PartComponent
Transcript shellCard, filled on a grouped page
The questionChat Bubble, mine
The group and each callCollapsible: outline for the group, ghost for a row
Allow, Deny, Retry, Run againButton
Copy input, Copy outputIcon Button, ghost
A running callSpinner
A structured resultCode Block, folding after ten lines
Rows from a queryTable, borderless

A call has five states

Running. The row reads in the present tense ("Searching issues") beside a spinner. Its Output says it is waiting for the result.

Done. The phrase settles to the past tense, a check takes the spinner's place, and the meta gives a short summary and how long the call took.

Failed. An alert mark, the reason on a line under the title, and Retry. The group header counts the failure until it is retried.

Needs approval. The row sits on an outline with a shield, says what allowing it will do, and waits on Deny and Allow. Its Output says the call runs only once you allow it. Allow runs it; Deny ends it.

Denied. The row goes quiet, says Denied and shows a ban mark. The call never ran, and the answer says so.

The group

The header names the turn's work: "Using 3 tools" while the agent works, "Waiting for approval" while a call waits on you, and "Used 4 tools" once every call has finished, with the total time or the number that failed. The marks of the tools used sit before it; a new tool widens the stack.

The list is open while the agent works, a call that needs a decision opens it if it was folded, and it folds itself once every call has finished, so the answer reads right under the header. It never folds once you have opened or closed the group or a row.

Input and output

Open a row to read the arguments the model passed and what came back, each with a copy button. Pick the output that reads best:

  • a list for search results and issues, with a number, a title and a tag
  • a table for rows from a query
  • JSON for a structured response, folded after ten lines
  • text for a sent message or a short log

Copy gives the arguments as JSON, a list as lines and a table as tab separated rows.

Motion

Every movement explains a change, and none plays when the transcript first appears.

  • A row the agent adds opens its own height, so nothing below it jumps.
  • Opening the group or a row opens it on the panel curve; chevrons turn on the indicator spring.
  • Status marks trade places with a short scale and fade, and a changed phrase fades up into place.
  • The marks in the header widen as a new tool joins, so the label glides.
  • The intro and the answer stream in a few words at a time, each chunk only fading in.

With reduced motion every state, label, focus move and announcement stays, and the travel, the spinner and the fades go.

Keyboard and screen readers

  • Tab moves through the group header, each call row, a row's Deny, Allow or Retry, and inside an open row its copy buttons and the show more control.
  • Enter or Space on the header opens or closes the list; on a row it opens or closes Input and Output.
  • A row is one button whose name reads the tool, the phrase and the state, such as "GitHub: Searched issues in tessina/web, Done, 4 results, 1.2s".
  • Status never rests on colour: each state has its own mark, and failed and waiting calls show a reason line.
  • Allow, Deny and Retry are named after the call they act on, and focus moves to that call's row once they are pressed.
  • A failure, a call waiting on you, your decision, copying and the answer are announced once in a polite status region.

In a narrow transcript

Below 440px of group width the phrase gets the row: it wraps instead of truncating, the summary and time move to a line under it, and Deny, Allow and Retry move under the reason. Input and Output drop their indent and use the full row, each argument's name sits over its value, and a wide table scrolls inside its own well, never the page. Below 24rem the transcript's inset tightens too. Every control keeps a 44px target on touch.

Agent PlanAI Composer

On this page

What it's made ofA call has five statesThe groupInput and outputMotionKeyboard and screen readersIn a narrow transcript