Tool

Displays tool call details including input, output, status, and errors. Ideal for visualizing AI tool usage in chat UIs. Compatible with AI SDK v5 architecture.

Input

location: San Francisco, CA

units: celsius

Output

{
  "temperature": 18,
  "conditions": "Partly cloudy",
  "humidity": 65,
  "wind_speed": 12
}

Call ID: call_weather_123

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/p/tool.json

Examples

Tool States

Processing - Input Streaming

Input

file_path: /src/components/Button.tsx

analysis_type: security

Processing tool call...

Call ID: call_stream_001

Ready - Input Available

Completed - Output Available

Input

location: Tokyo, Japan

units: celsius

Output

{
  "temperature": 22,
  "conditions": "Clear sky",
  "humidity": 58,
  "wind_speed": 8,
  "forecast": "Sunny throughout the day"
}

Call ID: call_success_003

Error - Output Error

Tool States Compact

Props

Tool

Name	Type	Default
`toolPart`	`ToolPart`
`defaultOpen`	`boolean`	`false`
`open`	`boolean`
`class`	`string`
`children`	`Snippet`

Tool Composed

Name	Type	Default
`toolPart`	`ToolPart`
`defaultOpen`	`boolean`	`false`
`class`	`string`

Tool Header

Name	Type	Default
`class`	`string`

Tool Content

Name	Type	Default
`class`	`string`
`children`	`Snippet`

Tool Details

Name	Type	Default
`class`	`string`

Tool Badge

Name	Type	Default
`state`	`ToolState`
`class`	`string`

Tool Part

Name	Type	Default
`type`	`string`
`state`	`ToolState`
`input`	`Record<string, unknown>`
`output`	`Record<string, unknown>`
`toolCallId`	`string`
`errorText`	`string`

Tool State

Name	Type	Default
`ToolState`	`type`	`type ToolState = \| "input-streaming" // Tool is receiving input \| "input-available" // Tool has input and is ready to execute \| "output-available" // Tool has successfully executed \| "output-error"; // Tool execution failed`