# Assistant UI

> Build and maintain assistant-ui based React chat apps with reliable setup, runtime selection, LangGraph wiring, tool UI integration, and upgrade workflows. Use when tasks explicitly involve `assistant-ui` dependencies or APIs, including `assistant-ui` CLI commands (`create/init/add/update/upgrade/codemod`), `@assistant-ui/*` providers/runtimes, `AssistantRuntimeProvider`, Thread/Composer primitives, cloud persistence, or tool rendering behavior. Do not use for generic React chat work, backend-only LangGraph tasks, or non-assistant-ui UI work. If the prompt explicitly says without/no/not assistant-ui, do not trigger this skill.

- Skill: `majiayu000/assistant-ui-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/assistant-ui-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/assistant-ui-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/assistant-ui-2

---


# Assistant UI

## Overview

Use this skill to implement or debug assistant-ui integration end to end: CLI setup, runtime wiring, UI primitives, tool UI, and migration-safe upgrades. Load only the reference file needed for the current subtask to keep context focused.

## Workflow

1. Classify the task before coding.
Determine whether the request is setup, runtime wiring, primitives, tools, cloud persistence, or migration.
If the request includes explicit exclusion language (`without/no/not assistant-ui`), stop and do not use this skill.
2. Select runtime and architecture first.
Choose AI SDK, LangGraph, or external-store path before editing components.
3. Apply setup commands with minimum blast radius.
Prefer the smallest CLI operation (`add` for existing projects, `create` for new projects).
4. Wire provider and thread lifecycle.
Ensure `AssistantRuntimeProvider` and runtime hook are configured before Thread/Composer work.
5. Implement tool UI using current APIs.
Prefer `useAui + Tools({ toolkit })` for registration; use `makeAssistantToolUI` for UI-only bindings.
6. Validate and migrate safely.
Run dry-run upgrade checks first, then codemods, then verification.

## Runtime Decision Rules

- Choose AI SDK runtime when backend communication is a chat endpoint and no graph thread state is required.
- Choose LangGraph runtime when thread lifecycle (`initialize/create/load`) and interrupts are required.
- Choose external store runtime when app state is controlled outside assistant-ui.
- Add Assistant Cloud only when persistence, auth-linked thread continuity, or multi-device resume is required.

Load `references/runtime-selection.md` for the matrix and expected outputs.

## Execution Protocol

1. Read `references/setup-and-cli.md` for command sequence and flags.
2. Read exactly one runtime reference.
- Read `references/langgraph-runtime.md` for LangGraph.
- Read `references/runtime-selection.md` for AI SDK or external-store decisions.
3. Read `references/tool-ui-patterns.md` only if tools are in scope.
4. Read `references/cloud-persistence.md` only if cloud is in scope.
5. Read `references/troubleshooting.md` only when failures appear.

## Output Contract

When implementing assistant-ui tasks, deliver these artifacts unless the user scope explicitly excludes them:

- Runtime provider wiring that matches the chosen runtime.
- Thread and composer integration that compiles with the chosen runtime.
- Tool registration and rendering behavior consistent with current APIs.
- Environment variable expectations for cloud flows.
- Upgrade path or migration notes if dependency upgrades are requested.

## Guardrails

- Prefer `Tools({ toolkit })` over legacy registration helpers.
- Use `makeAssistantToolUI` only for UI bindings to already-defined backend tools.
- Keep LangGraph thread handling explicit: `initialize`, `create`, and `load`.
- Execute upgrade sequence in this order: `update --dry` -> `upgrade` -> `codemod` -> test.
- Avoid broad documentation dumps; load only relevant references.
- Do not activate this workflow for comparison-only requests that do not require assistant-ui implementation changes.

## Reference Map

- Setup and CLI: `references/setup-and-cli.md`
- Runtime selection: `references/runtime-selection.md`
- LangGraph runtime wiring: `references/langgraph-runtime.md`
- Tool UI patterns: `references/tool-ui-patterns.md`
- Cloud persistence: `references/cloud-persistence.md`
- Debug and recovery: `references/troubleshooting.md`