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. Read components.json in the user's project and verify: Preferred (AI-assisted integration): 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): Multiple components: Or via shadcn: All 25 Tool UI components with tool-agent prompts and shadcn install commands: Progress Input Display Artifacts Confirmation Media Display (Geo Map) tool-agent (recommended): shadcn (direct): After installing components, wire them into assistant-ui via a Toolkit . This section covers the full setup: provider, runtime, toolkit file, and ID handling. Create an assistant wrapper that provides runtime, transport, and tools: Key points: Create a single toolkit.ts (or toolkit.tsx ) that exports a Toolkit object. Each key is a tool name; each value has type , description , parameters , and render .