Chat Tool
Collapsible tool-call cards for inputs, outputs, errors, approvals, and grouped tool activity.
Usage
AI
Completed tool call with JSON args and result.
"use client";
import { ChatMessage, ChatTool } from "@thenamespace/uikit";
const Assistant = ({ children }: { children: React.ReactNode }) => (Use ChatTool to show tool calls emitted by an agent or assistant.
Streaming
AI
{"query":"Namespace UIKit"use client";
import { ChatMessage, ChatTool } from "@thenamespace/uikit";
const Assistant = ({ children }: { children: React.ReactNode }) => (Use streaming state while tool input is still being generated.
Error
Use error state for failed tool calls.
Approval
AI
{"to":"team@acme.com","subject":"Launch update"}"use client";
import { ChatMessage, ChatTool } from "@thenamespace/uikit";
const Assistant = ({ children }: { children: React.ReactNode }) => (Use approval state when a tool requires user confirmation.
Grouped
AI
"use client";
import { ChatMessage, ChatTool, ChatToolGroup } from "@thenamespace/uikit";
const Assistant = ({ children }: { children: React.ReactNode }) => (Use ChatToolGroup to group consecutive tool calls.
Composable
AI
"use client";
import { ChatMessage, ChatTool } from "@thenamespace/uikit";
const Assistant = ({ children }: { children: React.ReactNode }) => (Tool cards expose slots for custom trigger and content layouts.
Anatomy
import {ChatTool, ChatToolGroup} from "@thenamespace/uikit";
<ChatTool
input={{query: "Namespace UIKit"}}
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: "Namespace UIKit"}} label="Input" />
<ChatTool.Result label="Result" value={{matches: 3}} />
</ChatTool.Content>
</ChatTool>
Error State
AI
{"url":"https://example.com"}Request timed out after 30s
"use client";
import { ChatMessage, ChatTool } from "@thenamespace/uikit";
const Assistant = ({ children }: { children: React.ReactNode }) => (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 |
ChatTool.Trigger
Renders the collapsible tool trigger.
ChatTool.Content
Renders the expanded tool body.
ChatTool.Args, Result, Error, Approval
Semantic slots for tool input, output, error details, and approval controls.
ChatToolGroup
Groups multiple ChatTool items. Extends Namespace UIKit Disclosure props.