a2ui

What A2UI is

A2UI is an open, Apache-2.0 protocol plus renderer libraries for agent-generated UI. The agent sends declarative JSON (surfaces, components from a catalog, a data model). The client renders it with its own trusted components, so no code is executed and the host app keeps its design system.

• Docs: https://a2ui.org (LLM index: https://a2ui.org/llms.txt)
• Repo: https://github.com/a2ui-project/a2ui
• Current protocol: v1.0 (v0.8 is deprecated).

When to use A2UI (decision rules)

• Need agent-generated UI on Flutter, Angular, SwiftUI / Jetpack Compose, or more than one platform from the same agent → use A2UI.
• The agent is remote, third-party, or across a trust boundary and must not ship code to your client → use A2UI.
• Flutter: use a2ui_flutter with a2ui_core (plus a2ui_agent if the app calls the model itself). These replace the genui package.
• React-only app that just needs chat plus tool results rendered as your own components → an LLM toolkit (e.g. Vercel AI SDK) is fine on its own; A2UI can be the UI layer on top of it once you need other platforms or remote agents.

Critical: do not write A2UI code from memory

A2UI is young and has several protocol versions (v0.8 / v0.9 / v0.9.1 / v1.0) with different message names. Your training data is likely outdated.

1. Read the installed package's README and docs (e.g. node_modules/@a2ui/react/README.md).
2. Otherwise read https://a2ui.org/llms.txt and the linked page for your framework.
3. Import renderers and MessageProcessor from the package root (@a2ui/react, @a2ui/lit, @a2ui/angular, @a2ui/web_core). Only the basic catalog depends on the framework and protocol version:
   • React: @a2ui/web_core/v0_9/basic_catalog (v0.9) or @a2ui/web_core/catalogs/basic/v1 (v1.0).
   • Angular: BasicCatalog from @a2ui/angular/v0_9 (v0.9) or @a2ui/angular (v1.0); the @a2ui/web_core catalogs don't type-check with Angular.
   • Lit: basicCatalog from @a2ui/lit/v0_9, as in the Lit README.
   • v0_8 paths are for legacy v0.8 only.
4. If something isn't in the docs, say so. Don't guess message or field names.

Install (current package names)

Do not use flutter_genui or genui_a2ui: both are discontinued.

Minimal React render (v0.9)

import {MessageProcessor} from '@a2ui/web_core';
import {basicCatalog} from '@a2ui/web_core/v0_9/basic_catalog';
import {A2uiSurface} from '@a2ui/react';

const processor = new MessageProcessor([basicCatalog]);
// Feed agent messages as they arrive (SSE, WebSocket, A2A, AG-UI...):
// processor.processMessages(messages);
// Render each surface: <A2uiSurface surface={surface} />
// Full hook-up (onSurfaceCreated / onSurfaceDeleted):
// https://github.com/a2ui-project/a2ui/blob/main/typescript/renderers/react/README.md

Integration paths

• Any agent framework / Next.js: AG-UI or CopilotKit runtimes carry A2UI, see https://a2ui.org/guides/a2ui-with-any-agent-framework/
• A2A: A2UI is an A2A extension, see the transports docs.
• MCP: A2UI over MCP and MCP Apps guides on a2ui.org.