Agent skill · software engineering · assistant-ui
copilots
Grounding an assistant in your app with assistant-ui copilots (@assistant-ui/react). Use when steering assistant behavior with useAssistantInstructions, feeding lazy send-time app state through useAssistantContext({ getContext }), exposing rendered components to the assistant with makeAssistantVisible(Component, { clickable, editable }), giving the model two-way component state through interactables (unstable_useInteractable for app-scoped panels, unstable_interactableTool inside defineToolkit for thread-scoped artifacts, both mounted via AuiConfig({ unstable_interactables: unstable_Interactables() })), registering instructions and tools together imperatively with aui.modelContext.register({ getModelContext }), or bridging model context across an iframe boundary with AssistantFrameProvider and useAssistantFrameHost. The legacy Interactables() scope, useAssistantInteractable, and useInteractableState are deprecated since 2026-06-14 and scheduled for removal on or after 2026-09-14; new code uses the unstable_ API. Reach for this when the assistant should read the current page, click or edit UI, read and update component state through auto-generated update_{name} tools, or receive tools and instructions from a sandboxed iframe. For LLM tools and tool-call UI use the tools skill; for runtime and thread state use the runtime skill.
Why this skill is useful
Adds executable scripts and specific API usage patterns for grounding an assistant in a React app, which the AI wouldn't reliably generate on its own.
What it needs
Requires @assistant-ui/react installed locally. About 4k tokens when loaded. Last updated 2026-08-02. 20 stars on the source repository.
What this skill does
assistant-ui Copilots Always consult assistant-ui.com/llms.txt for the latest API. Copilots ground an assistant in your running app: steer it with instructions, feed it lazy app state, let it read and drive rendered components, give it two way state through interactables, and share model context across an iframe boundary. References ./references/instructions.md -- useAssistantInstructions ./references/model-context.md -- useAssistantContext, imperative modelContext().register, ModelContextRegistry ./references/visible.md -- makeAssistantVisible ./references/interactables.md -- app-scoped and thread-scoped interactables, versions, persistence, partial updates ./references/assistant-frame.md -- AssistantFrameProvider and useAssistantFrameHost Orientation All APIs ship from @assistant-ui/react and run inside AssistantRuntimeProvider. Pick the smallest tool for the job: Instructions and context are the lightweight starting point. Reach for makeAssistantVisible when the assistant needs to perceive or drive existing DOM, and for interactables when it needs structured two-way state it can mutate through auto-generated update{name} tools. Interactables have two generations. The current one is the unstable family (unstableInteractables(), unstableuseInteractable, unstableinteractableTool); the prefix flags it as subject to change, not as unsupported. The legacy family (Interactables(), useAssistantInteractable, useInteractableState) is deprecated as of 2026-06-14 and scheduled for removal on or after 2026-09-14. The two scopes are mutually exclusive: mount only one interactables API in one AuiConfig. getContext is evaluated fresh each time the model context is read, so it always reflects current state. Register imperatively when instructions and tools need to ship from the same provider: register returns an unsubscribe function; returning it from useEffect cleans up the provider on unmount. Multiple providers compose: system strings concatenate and tools maps merge. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills assistant-ui/copilots