ToolCall

ToolCall

<ChatMessage role="assistant" name="helixui" footer={
  <ToolCall
    name="web_search"
    summary={`{ q: "design tokens DTCG" }`}
    status="done"
    defaultOpen
    input={<CodeBlock language="json" code={`{ "q": "design tokens DTCG", "limit": 5 }`} />}
    output={<CodeBlock language="json" code={`[{ "title": "DTCG community group", "url": "..." }, …]`} />}
  />
}>
  Found 5 results — the most relevant is the W3C DTCG draft.
</ChatMessage>

Install: @helixui/core

import { ToolCall } from '@helixui/core'

status: stable · since: 0.3.0

Tags: ai, function-call, collapsible, tool

Anatomy

[ ▶ get_weather   running ]
[ ▼ get_weather   ok       ]
     input:  { city: "Seoul" }
     output: { temp: 17 }

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills width, hugs content
• stackable — true
• fullBleed — false

Visual

A collapsible card showing a tool name, status pill (running / ok / error), an optional one-line summary, and expandable input/output sections rendered as code.

Props

Name	Type	Default	Description
name	ReactNode	—	Tool name (e.g. web_search). Required.
status	'running' | 'done' | 'failed'	done	Current state. running shows a pulsing dot.
summary	ReactNode	—	One-line argument summary, shown next to the name when collapsed (e.g. the JSON args, single-line).
defaultOpen	boolean	false	Initially expanded.
open	boolean	—	Controlled open.
onOpenChange	(open) => void	—	Open change handler.
input	ReactNode	—	Slot for input args — typically <CodeBlock language="json" />.
output	ReactNode	—	Slot for the result — text, table, or another CodeBlock.

Slots

• children — extra body content rendered after output

Tokens used

color.bg.surface.default, color.bg.surface.subtle, color.bg.action.brand.subtle, color.bg.action.success.subtle, color.bg.action.danger.subtle, color.border.default, color.border.focus, color.text.primary, color.text.secondary, color.text.muted, color.text.action.brand, color.text.action.success, color.text.action.danger, radius.md, radius.full, space.2, space.3, font.family.sans, font.family.mono, font.size.xs, font.size.sm, font.weight.medium, font.weight.semibold

Accessibility

Notes

• The header button has aria-expanded reflecting the disclosure state.
• Use inside a ChatMessage’s footer slot to attach tool calls to a specific assistant turn.

Composes with

Component	Relation	Note
ChatMessage	child	Inside an assistant message.
CodeBlock	child	Input/output rendered as CodeBlocks.
ThinkingBlock	sibling	Often interleaved with reasoning.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

render a tool invocation

“show a get_weather tool call result”

<ToolCall
  name="get_weather"
  status="ok"
  input={{ city: 'Seoul' }}
  output={{ temp: 17, condition: 'cloudy' }}
/>

Related

• ChatMessage
• CodeBlock
• ThinkingBlock