Skip to content
Twentyfirst UIHalo

Tool Call

AI · Reasoning, ToolCall

Shows what an agent did between your question and its answer. ToolCall is one tool use; Reasoning is the agent's plan.

ToolCall props: name, icon, status ("running" | "done" | "error" | "waiting"), summary (one line, past tense when done), duration, input, output (string or object, shown as JSON), defaultOpen.
Reasoning props: steps (string[]) or text, duration, streaming (shimmering "Thinking…"), defaultOpen.

  • Collapsed by default: the one-line summary is what people read; details are there when they doubt it.
  • Status icon colors follow the status map: mint done, sky running, butter waiting, blush error.
  • Put them in ChatMessage's before slot, reasoning first, tools in the order they ran.
  1. Find the latest thread from Northwind
  2. Check seat pricing and the renewal date
  3. Draft a short reply, ask before sending
Input
{
  "query": "from:ida@northwind.io",
  "limit": 3
}
Result
{
  "messages": 3,
  "latest": "We need 40 more seats before 1 May."
}

Props

Reasoning

PropTypeNotes
steps?string[]
text?ReactNode
duration?string
streaming?boolean
defaultOpen?boolean
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

ToolCall

PropTypeNotes
namestringRequired
icon?IconName
status?"running" | "done" | "error" | "waiting"
summary?ReactNode
duration?string
input?unknown
output?unknown
defaultOpen?boolean
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.