Chat Tool | HeroUI Pro

Usage

Use ChatTool to show tool calls emitted by an agent or assistant.

Streaming

Use streaming state while tool input is still being generated.

Error

Use error state for failed tool calls.

Approval

Use approval state when a tool requires user confirmation.

Grouped

Use ChatToolGroup to group consecutive tool calls.

Composable

Tool cards expose slots for custom trigger and content layouts.

Anatomy

import {ChatTool, ChatToolGroup} from "@heroui-pro/react";

<ChatTool
  input={{query: "HeroUI Pro"}}
  output={{matches: 3}}
  state="output-available"
  toolName="searchDocs"
  triggerPrefix="Used tool: "
/>

<ChatTool state="output-available" toolName="searchDocs">
  <ChatTool.Trigger>
    <ChatTool.StatusIcon />
    Used tool: <strong>searchDocs</strong>
  </ChatTool.Trigger>
  <ChatTool.Content>
    <ChatTool.Args input={{query: "HeroUI Pro"}} label="Input" />
    <ChatTool.Result label="Result" value={{matches: 3}} />
  </ChatTool.Content>
</ChatTool>

CSS Classes

.chat-tool - Tool card root
.chat-tool__trigger - Collapsible trigger
.chat-tool__content - Disclosure content panel
.chat-tool__args - Tool input content
.chat-tool__result - Tool output content
.chat-tool__error - Tool error content
.chat-tool-group - Grouped tool root

API Reference

ChatTool

Prop	Type	Default	Description
`toolName`	`string`	-	Tool display name
`state`	`'input-streaming' \| 'input-available' \| 'output-available' \| 'output-error' \| 'requires-action'`	-	Tool state
`triggerPrefix`	`ReactNode`	-	Optional label rendered before `toolName` in preset mode
`input`	`unknown`	-	Tool input rendered as JSON in preset mode
`output`	`unknown`	-	Tool output rendered as JSON in preset mode
`argsText`	`string`	-	Preformatted tool input text, useful while streaming partial JSON
`errorText`	`string`	-	Error details rendered for `output-error` state
`onApprove`	`() => void`	-	Called by the preset approval action in `requires-action` state
`onReject`	`() => void`	-	Called by the preset rejection action in `requires-action` state
`defaultExpanded`	`boolean`	-	Open by default
`isExpanded`	`boolean`	-	Controlled expanded state