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.

Examples

Basic Tool

Tool States

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

Completed Tool

Input

query: prompt-kit documentation

max_results: 5

Output

{
  "results": [
    {
      "title": "Prompt Kit - Documentation",
      "url": "https://prompt-kit.com/docs",
      "snippet": "A comprehensive guide to using Prompt Kit components..."
    },
    {
      "title": "Getting Started with Prompt Kit",
      "url": "https://prompt-kit.com/docs/installation",
      "snippet": "Learn how to install and use Prompt Kit in your project..."
    }
  ]
}

Call ID: call_abc123

Processing Tool

Ready Tool

Error Tool

Input

query: SELECT * FROM users WHERE id = ?

params: [ 123 ]

Error

Connection timeout: Unable to connect to database server at localhost:5432

Call ID: call_ghi789

Tool States Compact

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

Installation

Copy and paste the following code into your project.

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

Component API

Tool

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

ToolPart

Prop	Type	Default	Description
`type`	`string`	-	The type of the tool
`state`	`string`	-	The state of the tool (input-streaming, input-available, output-available, output-error)
`input`	`Record<string, unknown>`	-	The input data to the tool
`output`	`Record<string, unknown>`	-	The output data from the tool
`toolCallId`	`string`	-	The tool call identifier
`errorText`	`string`	-	The error text if the tool failed to execute