Agent skill · software engineering · copilotkit
a2ui-renderer
Render A2UI (Agent-to-UI declarative surfaces) in CopilotKit v2. Enable the runtime via CopilotRuntime({ a2ui: {...} }), then enable the provider via <CopilotKit a2ui={{ theme }}>. Auto-activates via /info — do NOT manually pass renderActivityMessages. createA2UIMessageRenderer ships from @copilotkit/react-core/v2; low-level primitives (A2UIProvider, A2UIRenderer, createCatalog) ship from @copilotkit/a2ui-renderer. Covers theme customization, createSurface dedup, action-bridge try/finally cleanup. Load when an agent emits A2UI operations (createSurface / updateComponents / updateDataModel), when wiring a2ui on CopilotRuntime, or when styling A2UI surfaces.
Why this skill is useful
Provides specific integration patterns and usage examples for A2UI in CopilotKit that the AI wouldn't reliably generate on its own.
What it needs
Requires copilotkit/react-core, copilotkit/runtime installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 36,574 stars on the source repository.
What this skill does
This skill builds on copilotkit/react-core (for CopilotKit provider fundamentals) and copilotkit/runtime (for CopilotRuntime fundamentals). Read those first. Setup A2UI has two halves. The runtime declares a2ui middleware; the client enables the a2ui prop on the provider. Once both are set, /info flags A2UI and the client auto-mounts createA2UIMessageRenderer — you do NOT wire renderActivityMessages yourself. Runtime side (app/routes/api.copilotkit.$.tsx) Client side (app/root.tsx or the app shell) Core Patterns Custom catalog Pass a custom catalog to extend the built-in component set. createCatalog and extractSchema let the agent see what components it may render. extractSchema(definitions) is available for passing a JSON-serializable view of the definitions to the runtime's a2ui.schema config — it is not a generic type helper. Type parameters erase at runtime; the agent needs a real runtime schema value (Zod). Override the loading skeleton Common Mistakes CRITICAL forgetting runtime.a2ui Wrong: Correct: Without runtime.a2ui, /info never flags A2UI and the provider's a2ui prop silently no-ops — the renderer never mounts. Source: packages/runtime/src/v2/runtime/core/runtime.ts:55-58,217,242 HIGH manually wiring renderActivityMessages for A2UI Wrong: Correct: The CopilotKit provider auto-detects runtime A2UI via /info and injects the built-in renderer. Passing it through renderActivityMessages duplicates the renderer and can race with the auto-injected one. Source: packages/react-core/src/v2/providers/CopilotKitProvider.tsx:188-222,294-296 MEDIUM re-emitting createSurface on every snapshot Wrong: Correct: The MessageProcessor dedups on surfaceId but re-emitting is an agent-side bug — the client re-runs reconciliation logic for nothing and flickers. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills copilotkit/a2ui-renderer