Explore the official shadcn-svelte AI Elements.

Home Components Docs Cookbook Changelog

Command Palette

Search for a command to run...

200

Getting Started

Introduction
Installation

Components

Chain Of Thought
Checkpoint
Confirmation
Context
Conversation
Image
Inline Citation
Message
Model Selector
Open In Chat
Plan
Prompt Input
Queue
Reasoning
Shimmer
Sources
Suggestion
Task
Tool
Web Preview

Tool

The Tool component displays a collapsible interface for showing and hiding tool details from AI SDK tool parts.

Tool Components Example

Parameters

Result

Parameters

Error

SQL Error: Column 'invalid_column' doesn't exist in table 'users'

Parameters

Parameters

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/tool.json

pnpm dlx jsrepo add @ai/blocks/tool

Composition

Copy the Source Code

Copy and paste the following code into your project:

Task A collapsible task list component for displaying AI workflow progress, with status indicators and optional descriptions.

Web Preview A composable component for previewing the result of a generated UI, with support for live examples and code display.

On this page

Contribute

Report an issue
Request a feature

Sponsor My Work

It would help me build and maintain open-source projects for the community.

Sponsor Bhide Svelte