AI Elements
Tool
A tool call in the chat, collapsed to its name and status. Opens to show the input and the result as JSON.
packages/design-system/components/ai-elements/tool.tsx
Examples
searchProjects: CompletedThe calendar is not connected.Anatomy
- 01Tool, bordered
- 02Header: wrench, name, status badge, chevron
- 03Content
- 04Parameters
- 05Result or error
Usage
import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from "@repo/design-system/components/ai-elements/tool";
<Tool key={part.toolCallId}>
<ToolHeader type={part.type} state={part.state} />
<ToolContent>
<ToolInput input={part.input} />
<ToolOutput output={part.output} errorText={part.errorText} />
</ToolContent>
</Tool>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ToolHeader type* | "tool-" + name | "dynamic-tool" | none | The part's type. The name after tool- is shown unless title is set. |
| ToolHeader state* | "input-streaming" | "input-available" | "output-available" | "output-error" | ... | none | Pending, Running, Completed, Error, plus the approval states. Sets the badge. |
| ToolHeader title / toolName | string | none | A display name; toolName is required for dynamic tools. |
| ToolInput input | unknown | none | Shown as JSON under Parameters. |
| ToolOutput output / errorText | unknown / string | none | Objects become JSON, strings a code block. errorText turns it red. |
| open / defaultOpen | boolean | none | On Tool, a Collapsible. |
Guidance
Do
- Keep it collapsed by default; people open it when they wonder.
Don't
- Show tool calls people never need to know about.