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.

Installation

Copy and paste the following code into your project.

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

Examples

Basic Tool

Input

location: San Francisco, CA

units: celsius

Output

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

Call ID: call_weather_123

Tool States

Show different states of tool execution: pending, running, completed, and error.

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

A more compact view showing different tool states in a streamlined layout.

Component API

The Tool component is built using shadcn-svelte Collapsible primitives and provides both composed and composable patterns.

ToolComposed

All-in-one component that includes header, content, and details.

ToolComposed

Prop	Type	Default	Description
`toolPart`	`ToolPart`	-	The tool invocation data to display
`defaultOpen`	`boolean`	`false`	Whether the tool details are expanded by default
`class`	`string`	-	Additional CSS classes

Tool (Root)

Root component using Collapsible.Root for composable pattern.

Tool

Prop	Type	Default	Description
`toolPart`	`ToolPart`	-	The tool invocation data to display
`defaultOpen`	`boolean`	`false`	Whether the tool details are expanded by default
`open`	`boolean`	-	Controlled open state (bindable)
`class`	`string`	-	Additional CSS classes
`children`	`Snippet`	-	Child components (ToolHeader, ToolContent)

ToolHeader

Displays tool name, state badge, and collapsible trigger.

ToolHeader

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes

ToolContent

Collapsible content wrapper for tool details.

ToolContent

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes
`children`	`Snippet`	-	Content to display (usually ToolDetails)

ToolDetails

Displays formatted JSON input/output and error messages.

ToolDetails

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes

ToolBadge

State badge component showing tool execution status.

ToolBadge

Prop	Type	Default	Description
`state`	`ToolState`	-	The state of the tool: 'input-streaming' \| 'input-available' \| 'output-available' \| 'output-error'
`class`	`string`	-	Additional CSS classes

ToolPart Type

TypeScript interface for tool invocation data.

ToolPart

Prop	Type	Default	Description
`type`	`string`	-	The name/type of the tool (e.g., 'get_weather', 'search_web')
`state`	`ToolState`	-	The state of the tool: 'input-streaming' \| 'input-available' \| 'output-available' \| 'output-error'
`input`	`Record<string, unknown>`	-	The input parameters passed to the tool (optional)
`output`	`Record<string, unknown>`	-	The output data returned from the tool (optional)
`toolCallId`	`string`	-	Unique identifier for the tool call (optional)
`errorText`	`string`	-	Error message if the tool execution failed (optional)

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