The Concept: Your application is the Receiver. It catches the JSON stream from the Agent and turns it into pixels.

A2UI provides official renderers for major frameworks. They handle the hard work:

Parsing the JSONL stream.
Resolving component references.
Dispatching user events back to the agent.

1. Choose Your Renderer

React (Recommended)

This is the most mature renderer, used in most tutorials.

npm install @a2ui/react @a2ui/core

Usage:

import { AIOutput, createRegistry } from '@a2ui/react';

// 1. Create a registry (The Firewall)
const registry = createRegistry({ ... });

// 2. Render the output
<AIOutput registry={registry} data={streamData} />

Web Components (Lit)

Perfect for framework-agnostic implementations.

Note: Release pending.

npm install @a2ui/web-lib lit

Flutter (Mobile)

Native mobile rendering with high performance.

Powered by GenUI SDK.

flutter pub add flutter_genui

2. Connecting the Pipes (Transport)

A2UI is transport agnostic. You can send the JSON over:

HTTP Stream: Simplest, standard.
WebSockets: Real-time bi-directional (great for collaborative agents).
A2A Protocol: For complex multi-agent orchestration.

Example: Simple Fetch & Stream

const response = await fetch('/api/agent');
const reader = response.body.getReader();

// Feed chunks into A2UI parser
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  a2uiParser.feed(value); 
}

When a user clicks a button inside an A2UI component, the library emits an event. Your job is to send this event back to the Agent.

<AIOutput 
  onAction={(action) => {
    // Action = { name: "submit", data: { ... } }
    sendToAgent(action);
  }}
/>

Connecting Your App: Client Setup Guide