Hex UIv1

ToolCall

Collapsible card showing a tool/function invocation — name, lifecycle state badge, expandable args + result body.

Completed — state="result"

Arguments
{
  "query": "tabs accessibility",
  "limit": 5
}
Result
{
  "pages": 3,
  "time_ms": 142,
  "top_hit": "/docs/components/tabs"
}

In-flight — state="running"

Installation

pnpm
pnpm dlx @hex-core/cli add tool-call

Streaming run

While the tool is executing, show running state without args.

tsx
<ToolCall name="getWeather" state="running" args={{ city: "NYC" }} />

API Reference

PropTypeDefaultDescription
namerequired
string—Tool / function name (e.g. searchDocs, getWeather).
staterequired
"pending" | "running" | "result" | "error"—Lifecycle of the invocation.
args
object—JSON-stringifiable input passed to the tool.
result
object—JSON-stringifiable output returned by the tool. May be a string for plain-text results.
defaultOpen
booleanfalseStart expanded. Default collapsed to keep the chat clean.
className
string—Additional CSS classes on the outer Collapsible root.

AI Guidance

When to use

Render every tool/function invocation in an agent UI. Map AI SDK v5 `tool-TOOLNAME` parts (state: input-streaming|input-available|output-available|output-error) or LangChain `AIMessage.tool_calls` directly.

When not to use

Don't use for plain assistant text (use Message). Don't render the tool's actual UI here — ToolCall is a debug/transparency card; for a rich tool UI, render that as a sibling node inside the Message.

Common mistakes

  • Passing the entire AI SDK part object as `result` — extract the output payload first
  • Setting `defaultOpen` for every call — quickly clutters the chat
  • Using `state="result"` for an error — use `error` so the user sees red

Accessibility

Built on Radix Collapsible — keyboard expand/collapse with Enter/Space works natively. Add `aria-label` on the trigger if the tool name is opaque.

Token budget: 320

Verified against @hex-core/components@1.12.0

Edit this page on GitHub