Tool
The Tool component displays a collapsible interface for showing/hiding tool details. It is designed to take the ToolUIPart type from the AI SDK and display it in a collapsible interface.
Tool Components Example
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Usage with AI SDK
Build a simple stateful weather app that renders the last message in a tool using useChat.
Add the following component to your frontend:
+page.svelte
Add the following route to your backend:
api/chat/+server.ts
Features
- Collapsible interface for showing/hiding tool details
- Visual status indicators with icons and badges
- Support for multiple tool execution states (pending, running, completed, error)
- Formatted parameter display with JSON syntax highlighting
- Result and error handling with appropriate styling
- Composable structure for flexible layouts
- Accessible keyboard navigation and screen reader support
- Consistent styling that matches your design system
- Auto-opens completed tools by default for better UX
Props
Tool
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the tool container |
children | Snippet | - | Child components (typically ToolHeader, ToolInput, ToolOutput, ToolContent) |
...restProps | CollapsibleProps | - | All other Collapsible component props are supported |
ToolHeader
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | - | The name/type of the tool being executed |
state | 'input-streaming' | 'input-available' | 'output-available' | 'output-error' | - | Current state of the tool execution |
class | string | - | Additional CSS classes to apply to the header |
...restProps | CollapsibleTriggerProps | - | All other CollapsibleTrigger component props are supported |
ToolInput
| Prop | Type | Default | Description |
|---|---|---|---|
input | any | - | The input parameters passed to the tool (will be JSON stringified) |
class | string | - | Additional CSS classes to apply to the input container |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ToolOutput
| Prop | Type | Default | Description |
|---|---|---|---|
output | any | - | The output result from the tool execution |
errorText | string | - | Error message to display if the tool execution failed |
class | string | - | Additional CSS classes to apply to the output container |
children | Snippet | - | Custom content to render instead of the default output display |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ToolContent
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the content container |
children | Snippet | - | Custom content to display in the collapsible area |
...restProps | CollapsibleContentProps | - | All other CollapsibleContent component props are supported |