@tool-ui

Open-source shadcn/ui-based copy-paste components for rendering AI tool-call results as rich interactive widgets in chat interfaces, built by the assistant-ui team. Covers ~25 components across five categories: Progress (Plan, Progress Tracker), Input (Option List, Parameter Slider, Preferences Panel, Question Flow), Display (Citation, Geo Map, Item Carousel, Link Preview, Stats Display, Terminal, Weather Widget), Artifacts (Chart, Code Block, Code Diff, Data Table, Instagram Post, LinkedIn Post, Message Draft, X Post), Confirmation (Approval Card, Order Summary), and Media (Audio, Image, Image Gallery, Video). Each component includes a Zod schema for payload validation. Free MIT. Use for: AI chat applications that need to surface structured tool call outputs as interactive, user-friendly UI rather than raw JSON.

27 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://www.tool-ui.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://www.tool-ui.com/r/registry.json

bun bunx shadcn@latest add https://www.tool-ui.com/r/registry.json

fetch registry curl -s https://www.tool-ui.com/r/registry.json

Components

27 total

Approval Card block

Binary confirmation for agent actions.

npx shadcn@latest add https://www.tool-ui.com/r/approval-card.json

Audio block

Audio playback with artwork and metadata.

npx shadcn@latest add https://www.tool-ui.com/r/audio.json

Chart block

Visualize data with interactive charts.

npx shadcn@latest add https://www.tool-ui.com/r/chart.json

Citation block

Display source references with attribution.

npx shadcn@latest add https://www.tool-ui.com/r/citation.json

Code Block block

Display syntax-highlighted code snippets.

npx shadcn@latest add https://www.tool-ui.com/r/code-block.json

Code Diff block

Code Diff component for AI interfaces.

npx shadcn@latest add https://www.tool-ui.com/r/code-diff.json

Data Table block

Sortable, responsive data tables for tool call results.

npx shadcn@latest add https://www.tool-ui.com/r/data-table.json

Geo Map block

Display geolocated entities and fleet positions.

npx shadcn@latest add https://www.tool-ui.com/r/geo-map.json

Image block

Display images with metadata and attribution.

npx shadcn@latest add https://www.tool-ui.com/r/image.json

Image Gallery block

Grid layout for browsing image collections.

npx shadcn@latest add https://www.tool-ui.com/r/image-gallery.json

Instagram Post block

Render Instagram post previews.

npx shadcn@latest add https://www.tool-ui.com/r/instagram-post.json

Item Carousel block

Horizontal carousel for browsing collections.

npx shadcn@latest add https://www.tool-ui.com/r/item-carousel.json

Link Preview block

Rich link previews with OG data.

npx shadcn@latest add https://www.tool-ui.com/r/link-preview.json

Linkedin Post block

Render LinkedIn post previews.

npx shadcn@latest add https://www.tool-ui.com/r/linkedin-post.json

Message Draft block

Review and confirm drafted messages before sending.

npx shadcn@latest add https://www.tool-ui.com/r/message-draft.json

Option List block

Single or multi-select choices with confirmation actions.

npx shadcn@latest add https://www.tool-ui.com/r/option-list.json

Order Summary block

Itemized purchase confirmation with pricing.

npx shadcn@latest add https://www.tool-ui.com/r/order-summary.json

Parameter Slider block

Numeric parameter adjustment controls.

npx shadcn@latest add https://www.tool-ui.com/r/parameter-slider.json

Plan block

Display step-by-step task workflows in AI interfaces.

npx shadcn@latest add https://www.tool-ui.com/r/plan.json

Preferences Panel block

Compact settings panel for user preferences.

npx shadcn@latest add https://www.tool-ui.com/r/preferences-panel.json

Progress Tracker block

Show real-time status feedback for multi-step operations in AI interfaces.

npx shadcn@latest add https://www.tool-ui.com/r/progress-tracker.json

Question Flow block

Multi-step guided questions with branching.

npx shadcn@latest add https://www.tool-ui.com/r/question-flow.json

Stats Display block

Display key metrics in compact cards.

npx shadcn@latest add https://www.tool-ui.com/r/stats-display.json

Terminal block

Show command-line output and logs.

npx shadcn@latest add https://www.tool-ui.com/r/terminal.json

Video block

Video playback with controls and poster.

npx shadcn@latest add https://www.tool-ui.com/r/video.json

Weather Widget block

Display weather conditions and forecasts.

npx shadcn@latest add https://www.tool-ui.com/r/weather-widget.json

X Post block

Render X (Twitter) post previews.

npx shadcn@latest add https://www.tool-ui.com/r/x-post.json