assistant-ui

Wire assistant-ui runtime, UI primitives, and migration workflows.

Updated Feb 7, 2026
One-click install
npx skills add https://github.com/metaphorics/my-skills --skill assistant-ui-metaphorics
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: assistant-ui
Source: https://github.com/metaphorics/my-skills/tree/main/skills/assistant-ui
Command: npx skills add https://github.com/metaphorics/my-skills --skill assistant-ui-metaphorics

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Assistant UI skill helps developers implement and debug end-to-end assistant-ui integrations, covering CLI setup, runtime wiring, UI primitives, tool UI rendering, and migration-safe upgrades. It guides users to load only the reference file needed for the current subtask to keep context focused.

Core Features & Use Cases

  • CLI setup and scaffolding: quick-start flows for new apps and attaching to existing apps.
  • Runtime wiring and provider integration: ensure AssistantRuntimeProvider and runtime hooks are correctly configured for thread lifecycle management.
  • Tool UI and patterns: register and render tools using modern patterns with useAui and Tools, or makeAssistantToolUI for UI-only bindings.
  • Migration-safe upgrades: orchestrated upgrade steps with dry-run checks, codemods, and validation.
  • Reference-driven guidance: load dedicated reference files (e.g., runtime selection, LangGraph wiring) to focus the task.

Quick Start

Load only the reference file needed for the current subtask to keep context focused.

Frequently Asked Questions about assistant-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up assistant-ui in an existing React application?

To set up assistant-ui in an existing app, use the CLI scaffolding tool to quick-start the integration and wire the AssistantRuntimeProvider. This enables thread lifecycle management and initializes the core chat UI primitives.

What is the best way to choose between AI SDK and LangGraph for my assistant-ui runtime?

Choosing between AI SDK and LangGraph for your assistant-ui runtime depends on your architecture. Use the runtime selection reference rules to decide between AI SDK, LangGraph, or an external store based on your specific provider shape and integration needs.

How do I render custom tool UI components within an assistant-ui chat thread?

To render custom tool UI components within an assistant-ui chat thread, register tools using the modern useAui and Tools patterns. Alternatively, use makeAssistantToolUI to create UI-only bindings for your specific tool rendering requirements.

Can I use cloud persistence to maintain persistent chat sessions with assistant-ui?

Yes, you can use optional cloud persistence with assistant-ui to maintain persistent chat sessions. This environment setup ensures your thread lifecycle management retains conversation history across user sessions in your configured external store.

How do I perform a migration-safe upgrade for my assistant-ui integration?

To perform a migration-safe upgrade for your assistant-ui integration, follow the orchestrated upgrade steps including dry-run checks, codemods, and validation. This ensures your runtime wiring and Thread components remain functional during updates.