tool-ui Components — Preview & Copy

Also in the tool-ui registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

Approval Card

approval-card

Binary confirmation for agent actions.

lucide-react, zod11 files

Audio

Audio playback with artwork and metadata.

lucide-react, zod9 files

Code Block

code-block

Display syntax-highlighted code snippets.

lucide-react, shiki, zod11 files

Code Diff

code-diff

Code Diff component for AI interfaces.

@pierre/diffs, lucide-react, zod10 files

Geo Map

geo-map

Display geolocated entities and fleet positions.

leaflet, react-leaflet, supercluster, zod12 files

Image

Display images with metadata and attribution.

zod14 files

Image Gallery

image-gallery

Grid layout for browsing image collections.

lucide-react, zod18 files

Instagram Post

instagram-post

Render Instagram post previews.

lucide-react, zod8 files

Linkedin Post

linkedin-post

Render LinkedIn post previews.

lucide-react, zod14 files

Option List

option-list

Single or multi-select choices with confirmation actions.

lucide-react, zod14 files

Order Summary

order-summary

Itemized purchase confirmation with pricing.

lucide-react, zod8 files

Parameter Slider

parameter-slider

Numeric parameter adjustment controls.

@radix-ui/react-slider, zod16 files

Plan

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

lucide-react, zod9 files

Preferences Panel

preferences-panel

Compact settings panel for user preferences.

lucide-react, zod16 files

Question Flow

question-flow

Multi-step guided questions with branching.

lucide-react, zod8 files

Stats Display

stats-display

Display key metrics in compact cards.

zod9 files

Terminal

Show command-line output and logs.

ansi-to-react, lucide-react, zod9 files

Video

Video playback with controls and poster.

lucide-react, zod16 files

Weather Widget

weather-widget

Display weather conditions and forecasts.

lucide-react5 files

X Post

x-post

Render X (Twitter) post previews.

lucide-react, zod14 files

From the tool-ui readme

Copy/paste React components for rendering tool calls in AI chat interfaces. Built by assistant-ui.

Docs · Gallery · Quick Start

When a model calls a tool, most apps dump raw JSON into the conversation. These components turn tool payloads into interactive UI like approvals, forms, tables, charts, and media cards so users can understand and act without leaving the chat.

Featured Components

  Option List
  Let users select from multiple choices
  
    
  


  Question Flow
  Multi-step guided questions with branching

Why Tool UI?

Copy/paste, not install — shadcn/ui model. Components live in your codebase. No dependency lock-in.
Schema-validated — Every component has a Zod schema. Parse tool output, render when valid, fail safely when not.
Interactive with receipts — Components aren't just displays. Users make choices that flow back to the assistant. Choices persist as receipts.
Built on shadcn/ui — Radix primitives, Tailwind styling, your theme. No new design system to learn.

Components

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
Media: Audio, Image, Image Gallery, Video

Each component includes a Zod schema for payload validation and presets for realistic example data. Browse them all in the Gallery.

License

MIT License. See LICENSE for details.

tool-ui

Item Carousel

About tool-ui

Also in the tool-ui registry

Approval Card

Audio

Code Block

Code Diff

Geo Map

Image

Image Gallery

Instagram Post

Linkedin Post

Option List

Order Summary

Parameter Slider

Plan

Preferences Panel

Question Flow

Stats Display

Terminal

Video

Weather Widget

X Post

From the tool-ui readme

Featured Components

Why Tool UI?

Components

License

What tool-ui builds on

Hooks and utilities

Registries like tool-ui

Related libraries

About tool-ui

All 1 tool-ui components

tool-ui contents

Item Carousel

About tool-ui

Also in the tool-ui registry

Approval Card

Audio

Code Block

Code Diff

Geo Map

Image

Image Gallery

Instagram Post

Linkedin Post

Option List

Order Summary

Parameter Slider

Plan

Preferences Panel

Question Flow

Stats Display

Terminal

Video

Weather Widget

X Post

From the tool-ui readme

Featured Components

Why Tool UI?

Components

License

What tool-ui builds on

Hooks and utilities

Registries like tool-ui

Related libraries

About tool-ui

All 1 tool-ui components