update
Upgrades an existing assistant-ui application and applies the migrations needed to reach the current AI SDK v7 and assistant-ui 0.15.x lines. Use when updating, bumping, or migrating @assistant-ui/react, @assistant-ui/ai-sdk, the older @assistant-ui/react-ai-sdk alias, ai, or @ai-sdk/react, or when an upgrade exposes removed hooks, scope accessor calls, provider configuration, registry paths, event names, legacy interactables, or tool registrations. Start here for an existing project, post-update type failures, package compatibility, CLI codemods, and version-specific migration order. For a first install or a new project use setup; for authoring a runtime without an upgrade use runtime.
- Installs
- 5.9K
- Last 24h
- +13
- Trending rank
- #7438
- Security
- Pass
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/assistant-ui/skills --skill update- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads update automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
assistant-ui Update
Always consult assistant-ui.com/llms.txt for the latest API.
Upgrade in two passes. First make the AI SDK and its assistant-ui adapter compatible, then update assistant-ui and apply its API migration. Read the relevant references before editing because a direct jump can cross several deprecation windows.
References
- ./references/ai-sdk.md -- AI SDK v4 and v5 to v6 migration, v6 to v7 changes, and adapter pins
- ./references/assistant-ui.md -- assistant-ui 0.8 through 0.15, toolkits, LangGraph, and deprecation policy
- ./references/breaking-changes.md -- quick version and symptom lookup
Detect the installed lines
Run these commands from the application root. npm ls reports the installed dependency graph and npm view reports the published latest version.
npm ls @assistant-ui/react @assistant-ui/ai-sdk @assistant-ui/react-ai-sdk @assistant-ui/core @assistant-ui/store assistant-stream ai @ai-sdk/react
npm view @assistant-ui/react version
npm view @assistant-ui/ai-sdk version
npm view @assistant-ui/react-ai-sdk version
npm view @assistant-ui/core version
npm view @assistant-ui/store version
npm view assistant-stream version
npm view ai version
npm view @ai-sdk/react version
Current published lines as of September 2026:
| Package | Current line |
|---|---|
| assistant-ui | 0.0.x |
| @assistant-ui/react | 0.15.x |
| @assistant-ui/ai-sdk | 0.0.x |
| @assistant-ui/react-ai-sdk | 1.4.x |
| @assistant-ui/core | 0.3.x |
| @assistant-ui/store | 0.3.x |
| assistant-stream | 0.3.x |
| assistant-cloud | 0.1.x |
| ai | 7.x |
@assistant-ui/react-ai-sdk re-exports the same API for older installs. New code imports from @assistant-ui/ai-sdk.
Choose the migration set
Compare the installed @assistant-ui/react version against every threshold below. Apply every applicable guide in ascending version order.
| Installed before | Check for |
|---|---|
| 0.8.x | The historical UI package split. The current upgrade bundle intentionally excludes v0-8/ui-package-split because its destination is incompatible with current runtimes. Move to the Elements registry manually. |
| 0.9.x | The v0-9/edge-package-split codemod. |
| 0.10.x | The bundled migration has no dedicated 0.10 codemod. Run the later codemods and resolve remaining package or build errors from the project’s current toolchain. |
| 0.11.x | ContentPart names and MessagePrimitive.Content become MessagePart and MessagePrimitive.Parts. |
| 0.12.x | Unified state API, hook aliases, and camelCase event names. |
| 0.13.x | Review the 0.14 guide before proceeding because it removes the v0.11 and v0.12 deprecations. |
| 0.14.x | Removed aliases and runtime APIs, plus primitive children render functions. |
| 0.15.x | Scope properties, removed legacy hooks, toolUIs, standalone-tool-call, AuiConfig, and threads.selectionChanged. |
Migration order
- Migrate the AI SDK first. Read ai-sdk.md when the project is on v4, v5, or v6. Target ai@^7 and @ai-sdk/react@^4 with @assistant-ui/ai-sdk.
- Update assistant-ui next. Use the threshold table and assistant-ui.md, starting with the oldest applicable version.
- Verify only after the package and source migrations are both complete. Typecheck, build, and exercise chat, tool, approval, and thread-selection paths that the application uses.
Run the CLI
# Update every installed @assistant-ui/* package.
npx assistant-ui@latest update
# Preview package changes without installing them.
npx assistant-ui@latest update --dry
# Preview the complete bundled migration and print each transformed file.
npx assistant-ui@latest upgrade -d -p
# Apply one codemod to a source directory.
npx assistant-ui@latest codemod v0-11/content-part-to-message-part ./src
# Report environment and dependency details.
npx assistant-ui@latest doctor
npx assistant-ui@latest info
The bundled upgrade command runs these codemods in this exact order:
- v0-9/edge-package-split
- v0-11/content-part-to-message-part
- v0-12/assistant-api-to-aui
- v0-12/event-names-to-camelcase
- v0-12/primitive-if-to-aui-if
- v0-15/aui-accessor-calls-to-properties
Use the dry and print form first. After reviewing the diff, run upgrade without -d and -p. Do not add the historical v0-8/ui-package-split codemod to a current upgrade.
0.15.x follow-ups
These changes shipped after 0.15.0 without another major. Sweep for them even if the project already declares 0.15.x.
Move the AI SDK import
// Before
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
// After
import { useChatRuntime } from "@assistant-ui/ai-sdk";
Replace client construction with configuration
useAui takes no configuration. Build a configuration with AuiConfig and give it to the provider. A nested AuiProvider must declare whether it extends the parent client or is isolated.
// Before
const aui = useAui({ tools: Tools({ toolkit }) });
return <AuiProvider value={aui}>{children}</AuiProvider>;
// After
const aui = useAui();
const config = AuiConfig({ tools: Tools({ toolkit }) });
return <AuiProvider extends={aui} config={config}>{children}</AuiProvider>;
At a runtime boundary, replace AssistantRuntimeProvider aui with config. For an isolated root, use AuiProvider extends={null} config={config}.
// Before
return <AssistantRuntimeProvider runtime={runtime} aui={aui}>{children}</AssistantRuntimeProvider>;
// After
const config = AuiConfig({ tools: Tools({ toolkit }) });
return <AssistantRuntimeProvider runtime={runtime} config={config}>{children}</AssistantRuntimeProvider>;
Move copied registry components
Runtime-connected registry components live at components/assistant-ui/elements/<name>.aui.tsx and import as @/components/assistant-ui/elements/<name>.aui. Renderers and standalone Elements use components/assistant-ui/elements/<name>.tsx and omit .aui from their import. Replace retired @/components/assistant-ui/<name> imports during the same sweep.
Consolidate thread selection events
// Before
useAuiEvent("threadListItem.switchedTo", ({ threadId }) => select(threadId));
useAuiEvent("threadListItem.switchedAway", ({ threadId }) => clear(threadId));
// After
useAuiEvent("threads.selectionChanged", ({ threadId, previousThreadId }) => {
select(threadId);
if (previousThreadId) clear(previousThreadId);
});
The new event is shared by the threads scope. A listener that previously lived inside a thread-list item can filter by its item id.
Replace legacy interactables and tool registrations
useAssistantInteractable, Interactables(), and useInteractableState are deprecated since 2026-06-14 and scheduled for removal on or after 2026-09-14. Migrate to unstable_useInteractable, unstable_Interactables(), and unstable_interactableTool.
makeAssistantTool, useAssistantTool, makeAssistantToolUI, and useAssistantToolUI are deprecated. Put the model contract, executor, and renderer in a defineToolkit entry and register it with AuiConfig({ tools: Tools({ toolkit }) }). Read the toolkits section in assistant-ui.md before converting stateful or UI-only tools.
Verify
npx tsc --noEmit
npm run build
npm test
Also open a real chat route and verify an ordinary message, a tool call, an approval gate if present, a thread switch, and the project’s persisted-history path. Run npx assistant-ui@latest doctor and npx assistant-ui@latest info when a dependency or environment mismatch remains.
Common Gotchas
The upgrade command changed imports but the app still uses the old adapter
- The package update only covers @assistant-ui packages. Update ai and @ai-sdk/react separately, then follow the AI SDK reference.
- @assistant-ui/react-ai-sdk is an alias for older installs. Current source imports from @assistant-ui/ai-sdk.
AuiProvider or AssistantRuntimeProvider no longer accepts the old props
- useAui() is context access only. Build AuiConfig({...}) and pass it as config.
- A nested AuiProvider needs extends={aui}; an isolated one needs extends={null}.
A scope lookup no longer behaves like a null check
- aui.thread is always truthy. Check aui.thread.source != null before accessing an optional scope.
- Scope accessors are properties. Call scope methods, not the scope itself.
The typecheck still finds removed hooks or tool maps
- Apply the full removed-hook mapping in assistant-ui.md.
- Replace s.tools.tools with s.tools.toolUIs and the mcp-app group key with standalone-tool-call.
Related Skills
- setup -- install assistant-ui into a project that has not used it before
- runtime -- build or customize an active runtime after the migration
- tools -- author toolkits, frontend tools, approvals, and tool UI
- elements -- install and customize the copied Elements registry components
FAQ
What does the update skill do?
Upgrades an existing assistant-ui application and applies the migrations needed to reach the current AI SDK v7 and assistant-ui 0.15.x lines. Use when updating, bumping, or migrating @assistant-ui/react, @assistant-ui/ai-sdk, the older @assistant-ui/react-ai-sdk alias, ai, or @ai-sdk/react, or when an upgrade exposes removed hooks, scope accessor calls, provider configuration, registry paths, event names, legacy interactables, or tool registrations. Start here for an existing project, post-update type failures, package compatibility, CLI codemods, and version-specific migration order. For a first install or a new project use setup; for authoring a runtime without an upgrade use runtime.
How do I install update?
Run npx skills add https://github.com/assistant-ui/skills --skill update in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/update/ (personal) or .claude/skills/update/ (project).
Which AI agents can use update?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is update safe to install?
Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains update?
It is published by assistant-ui in assistant-ui/skills. It has 5,866 recorded installs.
More from assistant-ui/skills
assistant-ui
assistant-ui/skills
Overview and router for assistant-ui, the React library for building AI chat interfaces from composable primitives and a styled elements catalog. Use for high-level, cross-cutting, or architecture questions: choosing packages, picking a runtime, or understanding the layers (elements, primitives, the aui client with AuiConfig and AuiProvider, the runtime, adapters) and the message model. Covers @assistant-ui/react 0.15.x, @assistant-ui/ai-sdk for AI SDK v7 (useChatRuntime), @assistant-ui/core, @assistant-ui/store, assistant-stream, assistant-cloud, the LangGraph, LangChain, Google ADK, A2A, AG-UI, Eve, OpenCode, and Pi adapters, the @assistant-ui/react-native and @assistant-ui/react-ink bindings, and the useAui, useAuiState, and useAuiEvent hooks. For a specific area route to a focused sibling instead: setup, elements, primitives, runtime, tools, generative-ui, streaming, cloud, thread-list, copilots, markdown, react-mcp, observability, react-native, ink, or upda
streaming
assistant-ui/skills
Streaming wire protocols and backend helpers for assistant-ui, built on the assistant-stream package. Use when building a custom streaming endpoint outside the Vercel AI SDK with createAssistantStreamResponse, createAssistantStream, or createAssistantStreamController; choosing between the Data Stream protocol (useDataStreamRuntime, DataStreamEncoder, DataStreamDecoder) and the Assistant Transport protocol (AssistantTransportEncoder, AssistantTransportDecoder); decoding a response with AssistantStream.fromResponse, UIMessageStreamDecoder, or PlainTextDecoder; or wiring resumable streams through assistant-stream/resumable with in-memory, Redis, or ioredis stores. Route here for wire level symptoms: an unexpected part-start or text-delta shape, a tool call that never settles, a part that silently drops, a Content-Type mismatch, or a reload that cannot resume a response. For runtime hooks use runtime; for AI SDK route handlers without a custom protocol use setup; for cloud persistence use
tools
assistant-ui/skills
Defines model-callable tools and renders their calls in assistant-ui. The authoring model: a "use generative" file whose default export is defineToolkit({...}), compiled by withAui from @assistant-ui/next, aui() from @assistant-ui/vite, or withAui from @assistant-ui/metro, mounted with AuiConfig({ tools: Tools({ toolkit }) }), and exposed to the model with new AISDKToolkit({ toolkit }).tools({ frontend }). Covers the tool kinds (backend, "use client" frontend, humanTool(), providerTool(), externalTool(), stubTool(), defineMcpToolkit()), render and display, ToolCallMessagePartProps, approval gates, MCP servers, MCP Apps, WebMCP, and sub-agent messages. Reach for it when a tool is never called, a tool UI does not render, a frontend result never reaches the model, humanTool() throws at runtime, or an approval gate cannot be answered. For model-composed UI use generative-ui, for MCP servers users add in the browser use react-mcp, and for the styled ToolFallback and ToolGroup use elements.
primitives
assistant-ui/skills
Builds and customizes assistant-ui chat UI from composable, unstyled @assistant-ui/react primitives: ThreadPrimitive, ComposerPrimitive (with UnstableTriggerPopover for mentions and slash commands), MessagePrimitive and MessagePartPrimitive, ActionBarPrimitive, BranchPickerPrimitive, AttachmentPrimitive, ErrorPrimitive, AssistantModalPrimitive, ChainOfThoughtPrimitive, SelectionToolbarPrimitive, SuggestionPrimitive, QueueItemPrimitive, and the ThreadList primitives. Use when assembling or styling a custom Thread, Composer, message list, action bar, branch picker, or suggestion grid; wiring composer input, dictation, quoting, or attachments; or handling editing, branching, virtualization, scrolling, or chain of thought UI. Covers MessagePrimitive.Parts render functions per part type, groupPartByType, AuiIf in selector form, and the unstyled gotchas (AssistantRuntimeProvider, className). For prebuilt UI use setup, for the styled catalog use elements, for multi-thread sidebars use thread
runtime
assistant-ui/skills
Guide to the assistant-ui runtime system, the state and action layer behind every chat surface. Use when creating a runtime (useLocalRuntime with a ChatModelAdapter, useExternalStoreRuntime for Redux or Zustand backed stores, useRemoteThreadListRuntime, useCloudThreadListRuntime, useAssistantTransportRuntime), wiring AssistantRuntimeProvider, or reading and mutating thread, message, composer, and attachment state. Covers useAui, useAuiState, and useAuiEvent with the stable selector rule, the scope accessors (aui.thread, aui.message, aui.composer, and siblings), the AuiConfig plus AuiProvider grammar, RuntimeCapabilities, and the attachment, speech, dictation, feedback, suggestion, and history adapters. Route here for a provider error ('Cannot read property of undefined'), a removed v0.12 hook import, an infinite re-render from an object literal selector, or state not updating. For multi-thread list UI use thread-list instead; for toolkit definitions and tool call UI use tools instead.
thread-list
assistant-ui/skills
Builds and customizes multiple conversation lists in assistant-ui with the runtime connected ThreadList and ThreadListSidebar elements, ThreadListPrimitive, ThreadListItemPrimitive, ThreadListItemMorePrimitive, useAui, useAuiState, and threads.selectionChanged. Use when adding a conversation sidebar, switching, archiving, renaming, deleting, searching, grouping, paginating, or persisting threads, or when thread state is stale after authentication. Covers AssistantCloud, RemoteThreadListRuntime, and ExternalStoreThreadListAdapter. Use runtime for the active conversation runtime, cloud for managed authentication and persistence, and elements for registry installation and styling.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.