feat: Add React Renderer for A2UI Protocol

[mschienbein]

Summary

Complete React implementation of the A2UI specification, providing a production-ready renderer for React applications.

Core Features

• Full protocol support: beginRendering, surfaceUpdate, dataModelUpdate, deleteSurface
• SSE transport with JSONL parsing and automatic reconnection
• JSON Pointer (RFC 6901) data binding resolution
• Multi-surface rendering with independent state management
• Message buffering for out-of-order message delivery

Components (Standard Catalog v0.8)

Category	Components
Layout	Row, Column, Card, Tabs, Modal, Divider
Content	Text (markdown), Image, Icon, Video, AudioPlayer
Interactive	Button, TextField, CheckBox, ChoicePicker, DateTimeInput, Slider, List

Architecture

• MessageProcessor: Central state machine for protocol message handling
• CatalogRegistry: Version-aware component registration (v0.8, v0.9)
• A2UISurface: Renders adjacency-list format to React component tree
• A2UIRoot: Simpler spec-based static rendering

Spec Compliance

• UserAction format matches client_to_server.json schema exactly
• Flat structure with sourceComponentId and ISO 8601 timestamp
• ClientToServerMessage wrapper for wire format

Quick Start

# 1. Build the renderer library
cd renderers/react
npm install
npm run build:lib

# 2. Run the demo
cd ../../samples/client/react
npm install
npm run dev

The demo runs at http://localhost:5173/ with two modes:

• Spec-Based Demo: Static JSON rendering with theme switching
• Protocol Demo: Simulated streaming messages with 8 interactive scenarios

Test Plan

• All 100 unit tests pass (npm test in renderers/react)
• Run quick start steps above
• Verify components render in both light/dark themes
• Test action dispatch from buttons (check browser console)
• Try Protocol Demo scenarios (Flashcard, Dashboard, Quiz, etc.)

Related

Implements React renderer as discussed in A2UI specification roadmap.

[lukasmoschitz]

Hi @mschienbein,,
Thank you for this contribution it looks great!
We appreciate the effort you put into the React renderer, components, and test coverage. We wanted to share that we're collaborating with Google and the React Working Group on the official React renderer for A2UI.
Your work here, especially the component patterns and data binding approach, has been helpful as we've explored the design space.
We'd love to have you involved in the ongoing effort: #542
Thanks for helping push A2UI forward!

[zeroasterisk]

Thanks for this comprehensive React renderer implementation — the architecture with MessageProcessor and CatalogRegistry is well thought out, and 100 tests is impressive coverage.

We're consolidating React renderer efforts under #542, which is the official collaboration between Google and CopilotKit. @lukasmoschitz is leading that work.

We're also transitioning from v0.8 to v0.9 of the spec soon, with shared libraries across renderers. We'd love your help reviewing both the current v0.8 implementation in #542 and the upcoming v0.9 changes — your experience here would be valuable. Would you be interested in contributing there?

Closing this in favor of #542, but thank you for pushing the React ecosystem forward!