Development
Plugin
tool-ui
UI components for AI interfaces
Plugin Signal51/100Fair
maintained56
capable55
documented30
adopted61
Install
$ npx -y skills add assistant-ui/tool-ui --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
766
Stars
31
Forks
Maintained
Maintenance
TypeScript
Language
MIT
License
3mo ago
Last commit
9mo ago
Created
Repo: assistant-ui/tool-ui
What's inside
Agents
5tool-ui-designerInterview user and design Tool UI component API. Use when starting /generate-tool-ui to gather requirements and produce a design specification.tool-ui-documenterCreate documentation and registry entries for Tool UI components. Use after implementer to write docs and wire docs/preview registries.tool-ui-examplesCreate presets and showcase entries for Tool UI components. Use after implementer to create compelling examples, gallery entry, and landing page showcase scene.tool-ui-implementerCreate Tool UI component source files. Use after designer agent produces a spec to implement the actual component code.tool-ui-reviewerQuality gate for Tool UI components. Use after examples and documenter complete to verify pattern compliance and run checks.
Commands
7README
1Copy/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
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.
File tree
812assistant-ui/tool-uiView on GitHub
.changeset/
config.json
.claude/
agents/
tool-ui-designer.md
tool-ui-documenter.md
tool-ui-examples.md
tool-ui-implementer.md
tool-ui-reviewer.md
commands/
component.md
fix.md
generate-tool-ui.md
optimize.md
refactor.md
review.md
test.md
docs/
component-workflow.md
copy-guide.md
mdx-authoring.md
operations.md
settings.json
.git-blame-ignore-revs
.githooks/
pre-commit
pre-push
.github/
assets/
gallery.png
header.png
option-list.png
question-flow.png
pull_request_template.md
workflows/
changeset.yaml
ci.yml
npm-publish.yaml
.gitignore
.prettierignore
.vscode/
settings.json
AGENT_CHANGELOG.md
AGENTS.md
apps/
www/
.env.example
.oxfmtrc.jsonc
.oxlintrc.json
.prettierignore
app/
api/
builder/
chat/
route.ts
create-freestyle/
route.ts
chat/
route.ts
mcp-tools/
route.ts
playground/
chat/
route.ts
weather-tuning/
_lib/
tuned-presets-io.ts
apply/
route.ts
recover/
route.ts
builder/
layout.tsx
opengraph-image.tsx
page.tsx
components/
analytics/
posthog-init.client.tsx
assistant-ui/
markdown-text.tsx
thread-list.tsx
tool-fallback.tsx
tooltip-icon-button.tsx
builder/
mcp-icon.tsx
theme-toggle.tsx
webview-actions.ts
webview.tsx
home/
chat-showcase.tsx
demo-chat.tsx
faux-chat-shell-animated.tsx
faux-chat-shell-mobile-animated.tsx
faux-chat-shell-mobile.tsx
faux-chat-shell.tsx
home-background.tsx
home-hero.tsx
home-hexnut-scene.tsx
noise-texture.ts
layout/
app-header.server.tsx
app-shell-animated.client.tsx
app-shell.tsx
header-active-link.client.tsx
mobile-nav-sheet-gate.client.tsx
mobile-nav-sheet.client.tsx
page-shell.tsx
tracked-external-anchor.client.tsx
mdx/
features.tsx
mermaid.tsx
theme/
theme-provider.tsx
visuals/
spinning-hexnut/
hexnut-scene.tsx
docs/
_components/
chat-context-preview.tsx
collaboration-diagram.tsx
component-docs-tabs.tsx
component-preview-shell.tsx
component-preview.tsx
component-previews/
social-post-preview.tsx
copy-markdown-button.tsx
docs-article.tsx
docs-bordered-shell.tsx
docs-content.tsx
docs-header.tsx
docs-nav.tsx
docs-pager.tsx
docs-pages.ts
docs-search-shortcut.ts
docs-search.client.tsx
docs-toc-context.tsx
docs-toc-wrapper.tsx
docs-toc.tsx
gallery-analytics.client.tsx
gallery-card-header.tsx
gallery-docs-link.tsx
header-preview-tabs.tsx
install-command-block.tsx
install-command-line.tsx
interactive-option-demo.tsx
mdx-to-markdown.ts
mock-thread.tsx
preset-example.tsx
preset-selector.tsx
tracked-dynamic-codeblock.tsx
actions/
actions-examples.tsx
content.mdx
opengraph-image.tsx
page.tsx
advanced/
content.mdx
opengraph-image.tsx
page.tsx
agent-skills/
content.mdx
opengraph-image.tsx
page.tsx
approval-card/
content.mdx
opengraph-image.tsx
page.tsx
audio/
content.mdx
opengraph-image.tsx
page.tsx
changelog/
content.mdx
opengraph-image.tsx
page.tsx
chart/
content.mdx
opengraph-image.tsx
page.tsx
citation/
content.mdx
opengraph-image.tsx
page.tsx
code-block/
content.mdx
opengraph-image.tsx
page.tsx
code-diff/
content.mdx
opengraph-image.tsx
page.tsx
data-table/
content.mdx
formatting-gallery.tsx
opengraph-image.tsx
page.tsx
tasks-demo.tsx
design-guidelines/
content.mdx
opengraph-image.tsx
page.tsx
gallery/
opengraph-image.tsx
page.tsx
geo-map/
content.mdx
opengraph-image.tsx
page.tsx
image/
image-gallery/
content.mdx
opengraph-image.tsx
page.tsx
content.mdx
opengraph-image.tsx
page.tsx
instagram-post/
content.mdx
opengraph-image.tsx
page.tsx
item-carousel/
content.mdx
opengraph-image.tsx
page.tsx
layout.tsx
link-preview/
content.mdx
opengraph-image.tsx
page.tsx
linkedin-post/
content.mdx
opengraph-image.tsx
page.tsx
message-draft/
content.mdx
opengraph-image.tsx
page.tsx
option-list/
content.mdx
opengraph-image.tsx
page.tsx
order-summary/
content.mdx
opengraph-image.tsx
page.tsx
overview/
content.mdx
opengraph-image.tsx
page.tsx
page.tsx
parameter-slider/
content.mdx
opengraph-image.tsx
page.tsx
plan/
content.mdx
opengraph-image.tsx
page.tsx
preferences-panel/
content.mdx
opengraph-image.tsx
page.tsx
progress-tracker/
content.mdx
opengraph-image.tsx
page.tsx
question-flow/
content.mdx
opengraph-image.tsx
page.tsx
quick-start/
content.mdx
opengraph-image.tsx
page.tsx
receipts/
content.mdx
opengraph-image.tsx
page.tsx
stats-display/
content.mdx
opengraph-image.tsx
page.tsx
terminal/
content.mdx
opengraph-image.tsx
page.tsx
video/
content.mdx
opengraph-image.tsx
page.tsx
weather-widget/
content.mdx
opengraph-image.tsx
page.tsx
x-post/
content.mdx
opengraph-image.tsx
page.tsx
global-error.tsx
icon.svg
layout.tsx
not-found.tsx
opengraph-image.tsx
page.tsx
playground/
chat-pane.tsx
chat-ui.tsx
opengraph-image.tsx
page.tsx
tool-inspector.tsx
waymo-demo/
opengraph-image.tsx
page.tsx
sandbox/
celestial-effect/
celestial-canvas.tsx
page.tsx
cloud-effect/
cloud-canvas.tsx
page.tsx
lightning-effect/
lightning-canvas.tsx
page.tsx
page.tsx
rain-effect/
page.tsx
rain-canvas.tsx
snow-effect/
page.tsx
snow-canvas.tsx
weather-compositor/
celestial-canvas.tsx
interpolation.ts
page.tsx
presets.ts
tuned-presets.json
weather-effects/
page.tsx
weather-tuning/
components/
checkpoint-dots.tsx
condition-sidebar.tsx
detail-editor.tsx
export-panel.tsx
glass-controls.tsx
parameter-definitions.ts
parameter-matrix-view.tsx
parameter-panel.tsx
parameter-row.tsx
time-dial.tsx
time-matrix-view.tsx
view-mode-toggle.tsx
weather-data-overlay.tsx
hooks/
use-tuning-state.ts
lib/
constants.ts
has-any-tuning-delta.ts
list-updated-params.ts
map-to-canvas-props.ts
recover-repo-overrides.ts
resolve-params.ts
studio-timestamp.ts
tool-ui-export.ts
tool-ui-import.ts
workflow-state.ts
page.tsx
types.ts
weather-widget/
weather-widget-production/
page.tsx
runtime-input.ts
weather-widget-stress/
page.tsx
page.tsx
staging/
_components/
rounded-rect-overlay.tsx
staging-canvas.tsx
staging-showcase.tsx
staging-toolbar.tsx
use-keyboard-shortcuts.ts
use-staging-state.ts
layout.tsx
page.tsx
styles/
builder-loader.css
custom-utilities.css
fumadocs-overrides.css
globals.css
leaflet-overrides.css
nav-sheet.css
prose.css
shadcn-theme.css
squircle.css
theme-transition.css
assets/
fonts/
Geist-Bold.ttf
Geist-Regular.ttf
... 605 moreFAQ
tool-ui is a Claude Code plugin with 1 hand-picked skill for development work, indexed on Flowy. Install it with the command on its page. It includes tool-ui. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is tool-ui?
- UI components for AI interfaces
- How do I install tool-ui?
- Run these in Claude Code: npx -y skills add assistant-ui/tool-ui --agent claude-code. Then prompt normally.
- Does tool-ui auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is tool-ui free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.