--- name: "@tool-ui" slug: "tool-ui" description: "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." category: "AI/chat UI" tags: ["ai", "audio", "blocks", "cards", "charts", "cms", "dashboard", "developer-tools", "forms", "loaders", "maps", "media", "retro", "tables"] framework: "react" license: "MIT" author: "assistant-ui" website: "https://www.tool-ui.com" github: "https://github.com/assistant-ui/tool-ui" registry: "https://www.tool-ui.com/r/registry.json" pro: false pro_url: null github_stars: 746 component_count: 27 generated_at: "2026-07-28T08:00:50.948Z" --- # @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. ## Links - Website: https://www.tool-ui.com - GitHub: https://github.com/assistant-ui/tool-ui - Registry JSON: https://www.tool-ui.com/r/registry.json - Directory page: https://sh4dcn.vercel.app/registry/tool-ui - This file: https://sh4dcn.vercel.app/md/tool-ui.md ## Install ```sh # add the whole registry (shadcn CLI) npx shadcn@latest add https://www.tool-ui.com/r/registry.json pnpm dlx shadcn@latest add https://www.tool-ui.com/r/registry.json bunx shadcn@latest add https://www.tool-ui.com/r/registry.json # clone the source repo git clone https://github.com/assistant-ui/tool-ui.git # fetch the raw registry index curl -s https://www.tool-ui.com/r/registry.json ``` ## Components (27) | name | type | description | install | | --- | --- | --- | --- | | approval-card | registry:block | Binary confirmation for agent actions. | `npx shadcn@latest add https://www.tool-ui.com/r/approval-card.json` | | audio | registry:block | Audio playback with artwork and metadata. | `npx shadcn@latest add https://www.tool-ui.com/r/audio.json` | | chart | registry:block | Visualize data with interactive charts. | `npx shadcn@latest add https://www.tool-ui.com/r/chart.json` | | citation | registry:block | Display source references with attribution. | `npx shadcn@latest add https://www.tool-ui.com/r/citation.json` | | code-block | registry:block | Display syntax-highlighted code snippets. | `npx shadcn@latest add https://www.tool-ui.com/r/code-block.json` | | code-diff | registry:block | Code Diff component for AI interfaces. | `npx shadcn@latest add https://www.tool-ui.com/r/code-diff.json` | | data-table | registry:block | Sortable, responsive data tables for tool call results. | `npx shadcn@latest add https://www.tool-ui.com/r/data-table.json` | | geo-map | registry:block | Display geolocated entities and fleet positions. | `npx shadcn@latest add https://www.tool-ui.com/r/geo-map.json` | | image | registry:block | Display images with metadata and attribution. | `npx shadcn@latest add https://www.tool-ui.com/r/image.json` | | image-gallery | registry:block | Grid layout for browsing image collections. | `npx shadcn@latest add https://www.tool-ui.com/r/image-gallery.json` | | instagram-post | registry:block | Render Instagram post previews. | `npx shadcn@latest add https://www.tool-ui.com/r/instagram-post.json` | | item-carousel | registry:block | Horizontal carousel for browsing collections. | `npx shadcn@latest add https://www.tool-ui.com/r/item-carousel.json` | | link-preview | registry:block | Rich link previews with OG data. | `npx shadcn@latest add https://www.tool-ui.com/r/link-preview.json` | | linkedin-post | registry:block | Render LinkedIn post previews. | `npx shadcn@latest add https://www.tool-ui.com/r/linkedin-post.json` | | message-draft | registry:block | Review and confirm drafted messages before sending. | `npx shadcn@latest add https://www.tool-ui.com/r/message-draft.json` | | option-list | registry:block | Single or multi-select choices with confirmation actions. | `npx shadcn@latest add https://www.tool-ui.com/r/option-list.json` | | order-summary | registry:block | Itemized purchase confirmation with pricing. | `npx shadcn@latest add https://www.tool-ui.com/r/order-summary.json` | | parameter-slider | registry:block | Numeric parameter adjustment controls. | `npx shadcn@latest add https://www.tool-ui.com/r/parameter-slider.json` | | plan | registry:block | Display step-by-step task workflows in AI interfaces. | `npx shadcn@latest add https://www.tool-ui.com/r/plan.json` | | preferences-panel | registry:block | Compact settings panel for user preferences. | `npx shadcn@latest add https://www.tool-ui.com/r/preferences-panel.json` | | progress-tracker | registry: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 | registry:block | Multi-step guided questions with branching. | `npx shadcn@latest add https://www.tool-ui.com/r/question-flow.json` | | stats-display | registry:block | Display key metrics in compact cards. | `npx shadcn@latest add https://www.tool-ui.com/r/stats-display.json` | | terminal | registry:block | Show command-line output and logs. | `npx shadcn@latest add https://www.tool-ui.com/r/terminal.json` | | video | registry:block | Video playback with controls and poster. | `npx shadcn@latest add https://www.tool-ui.com/r/video.json` | | weather-widget | registry:block | Display weather conditions and forecasts. | `npx shadcn@latest add https://www.tool-ui.com/r/weather-widget.json` | | x-post | registry:block | Render X (Twitter) post previews. | `npx shadcn@latest add https://www.tool-ui.com/r/x-post.json` | ## For AI agents ```text You are adding components from @tool-ui to a shadcn-compatible project. 1. Read this file (https://sh4dcn.vercel.app/md/tool-ui.md) for the component list. 2. Fetch the machine-readable index: https://www.tool-ui.com/r/registry.json 3. Install a single component with its install command from the table above. 4. Full structured record: https://sh4dcn.vercel.app/json (library slug: tool-ui). ```