Tool Ui
Add shadcn-registry Tool UI components and wire them into React chat runtimes, especially assistant-ui, from a single integration workflow.
Overview
Tool UI is an agent skill for the Build phase that finds, installs, and wires shadcn Tool UI components into React apps with optional assistant-ui integration.
Install
npx skills add https://github.com/assistant-ui/tool-ui --skill tool-uiWhat is this skill?
- Step 1 compatibility flow: verify `components.json` exists before installing Tool UI
- Preferred install via `npx tool-agent` with component-specific integrate prompts
- Alternate path: `npx shadcn@latest add @tool-ui/<component-id>` from project root
- Multi-component installs in one command (plan, progress-tracker, approval-card, etc.)
- assistant-ui recommended when no chat runtime exists; optional when a runtime already works
Adoption & trust: 613 installs on skills.sh; 719 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want agent tool calls to show up as polished UI components but lack a repeatable install and runtime wiring path in your React repo.
Who is it for?
Solo builders shipping React agent UIs who use shadcn and want catalog components (plan, progress, approvals) integrated quickly.
Skip if: Non-React stacks or backends-only services with no in-app tool rendering requirements.
When should I use this skill?
Developers ask to add Tool UI components, verify compatibility, wire a toolkit, or integrate Tool UI into assistant-ui or an existing chat stack.
What do I get? / Deliverables
Compatible Tool UI components are added via shadcn or tool-agent and connected to your chat or toolkit runtime so tool payloads render in the app.
- Installed @tool-ui components in the repo
- Runtime/toolkit wiring guidance for assistant-ui or existing chat UI
Recommended Skills
Journey fit
Installing and wiring UI components is core product build work on the frontend shelf. The skill centers on React components, shadcn registry entries, and in-app tool surfaces—not launch or ops.
How it compares
Component integration skill for React tool surfaces, not a replacement MCP server or generic design system audit.
Common Questions / FAQ
Who is tool-ui for?
Indie developers building React agent or chat products who need Tool UI registry components wired with minimal guesswork.
When should I use tool-ui?
During Build when adding Tool UI components, verifying shadcn compatibility, choosing widgets for a flow, or integrating payloads into assistant-ui or an existing runtime.
Is tool-ui safe to install?
It runs standard npx/shadcn installs in your repo; review the Security Audits panel on this page before running network installs in production machines.
SKILL.md
READMESKILL.md - Tool Ui
# Tool UI Use this skill to move from request to working Tool UI integration quickly. Prefer assistant-ui when the project has no existing chat UI/runtime. Treat assistant-ui as optional when the app already has a working runtime. ## Step 1: Compatibility and Doctor Read `components.json` in the user's project and verify: - `components.json` exists. ## Step 2: Install Components ### Install command from project root **Preferred (AI-assisted integration):** ```bash npx tool-agent "integrate the <component> component" ``` Use component-specific prompts from the catalog below (e.g. `integrate the plan component for step-by-step task workflows with status tracking`). **Alternative (direct registry):** ```bash npx shadcn@latest add @tool-ui/<component-id> ``` Multiple components: ```bash npx tool-agent "integrate the plan, progress-tracker, and approval-card components for planning flows" ``` Or via shadcn: ```bash npx shadcn@latest add @tool-ui/plan @tool-ui/progress-tracker @tool-ui/approval-card ``` ### Complete component catalog All 25 Tool UI components with tool-agent prompts and shadcn install commands: **Progress** | Component | Description | tool-agent prompt | shadcn | | ------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------- | | `plan` | Step-by-step task workflows with status tracking | `integrate the plan component for step-by-step task workflows with status tracking` | `npx shadcn@latest add @tool-ui/plan` | | `progress-tracker` | Real-time status feedback for multi-step operations | `integrate the progress tracker component for real-time status feedback on multi-step operations` | `npx shadcn@latest add @tool-ui/progress-tracker` | **Input** | Component | Description | tool-agent prompt | shadcn | | ------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------- | | `option-list` | Let users select from multiple choices | `integrate the option list component to let users select from multiple choices` | `npx shadcn@latest add @tool-ui/option-list` | | `parameter-slider` | Numeric parameter adjustment controls | `integrate the parameter slider component for numeric parameter adjustment controls` | `npx shadcn@latest add @tool-ui/parameter-slider` | | `preferences-panel` | Compact settings panel for user preferences | `integrate the preferences panel component for compact user settings` | `npx shadcn@latest add @tool-ui/preferences-panel` | | `question-flow` | Multi-step guided questions with branching | `integrate the question flow component for multi-step guided questions with branching` | `npx shadcn@latest add @tool-ui/question-flow` | **Display** | Component | Description | tool-agent prompt