tool-ui_skill

This skill helps you integrate Tool UI components into React apps quickly by discovering, installing, scaffolding, and validating runtime wiring.

Python

14

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill petekp/claude-code-setup --skill tool-ui

SKILL.md3.0 KB

Overview

This skill helps developers find, install, configure, and wire Tool UI components into React applications using the shadcn registry and supplied scripts. It speeds integration from discovery to a working runtime, includes compatibility checks, scaffolding for frontend and backend wiring, and troubleshooting guidance. Use it to add single components or full component bundles and verify runtime compatibility with assistant-ui or an existing chat stack.

How this skill works

The skill runs automated compatibility and doctor checks against the project, discovers candidate components by intent keywords or bundles, and generates installation commands based on shadcn registry entries. It scaffolds runtime wiring snippets for frontend and backend modes, provides patterns for manual adaptation, and supplies validation and troubleshooting steps to confirm UI behavior and tool-call flows.

When to use it

Adding one or more Tool UI components to a React app
Choosing components to match a specific user flow or intent
Verifying registry and project compatibility before install
Scaffolding runtime wiring for assistant-ui or a custom chat/runtime stack
Troubleshooting rendering, type, or runtime issues after integration

Best practices

Run compatibility and doctor checks before discovering components to catch missing registry entries or alias issues
Install the minimal set of components that satisfy the request and validate each component incrementally
Prefer assistant-ui when no chat runtime exists; treat it as optional if a runtime is already in place
Keep payload schemas explicit and serializable; avoid sending complex non-serializable objects to UI components
Ensure interactive callbacks call addResult(...) from a user action to complete tool flows

Example use cases

Add a planning UI: find a planning-flow bundle, install, scaffold assistant-backend wiring, and validate a real tool call
Integrate an option list into an existing chat runtime: run compatibility checks, install option-list, scaffold frontend snippet, and wire payload handlers
Replace a simple stats widget with a Tool UI stats-display: install component, scaffold manual mode, adapt payload schema, and run typecheck/lint
Create a new assistant-ui chat: install a bundle of chat components, scaffold assistant-frontend and assistant-backend wiring, then run validation and troubleshooting

FAQ

components.json must exist, components.json.aliases.utils must be set (commonly @/lib/utils), and components.json.registries['@tool-ui'] must point to https://tool-ui.com/r/{name}.json.

How do I auto-fix missing registry entries?

Run the compatibility script with --fix: python scripts/tool_ui_compat.py --project <repo-root> --fix to insert the @tool-ui registry entry automatically.

When should I prefer assistant-ui over manual integration?

Prefer assistant-ui when the project has no existing chat UI or runtime. If a stable runtime already exists, use the provided manual/assistant-frontend scaffolds and integration patterns instead.