/tool-ui

name: tool-ui
description: Find, install, configure, and integrate Tool UI components in React apps using shadcn registry entries, compatibility checks, scaffolded runtime wiring, toolkit setup with assistant-ui, and troubleshooting workflows. Use when developers ask to add one or more Tool UI components, choose components for a use case, verify compatibility, wire a toolkit in a codebase, or integrate Tool UI payloads into assistant-ui or an existing chat/runtime stack.

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):**

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):**

npx shadcn@latest add @tool-ui/<component-id>

Multiple components:

npx tool-agent "integrate the plan, progress-tracker, and approval-card components for planning flows"

Or via shadcn:

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 | shadcn | | ---------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------------------------------- | | `citation` | Display source references with attribution | `integrate the citation component to display source references with attribution` | `npx shadcn@latest add @tool-ui/citation` | | `item-carousel` | Horizontal carousel for browsing collections | `integrate the item carousel component for horizontal browsing of collections` | `npx shadcn@latest add @tool-ui/item-carousel` | | `link-preview` | Rich link previews with Open Graph data | `integrate the link preview component for rich link previews with Open Graph data` | `npx shadcn@latest add @tool-ui/link-preview` | | `stats-display` | Key metrics and KPIs in a visual grid | `integrate the stats display component for key metrics and KPIs in a visual grid` | `npx shadcn@latest add @tool-ui/stats-display` | | `terminal` | Show command-line output and logs | `integrate the terminal component to show command-line output and logs` | `npx shadcn@latest add @tool-ui/terminal` | | `weather-widget` | Weather display with forecasts and conditions | `integrate the weather widget component for weather display with forecasts and conditions` | `npx shadcn@latest add @tool-ui/weather-widget` |

**Artifacts**

| Component | Description | tool-agent prompt | shadcn | | ---------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ---