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

• [x] 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.