The Renderer

Interactive

A2UI is a protocol, not a framework. Here's how semantic intents become React components. The same intents could render to Vue, Angular, Flutter, or terminal output - React is just one target.

Intent JSON331 chars
Loading editor...
Valid intent
React Component Output

Server Status

Current health metrics for prod-server-01

CPU Usage45%
Memory2.1 GB / 4 GB
Uptime14 days, 6 hours
The JSON on the left is passed to IntentRenderer, which dispatches to the <Card /> component.

Common Misconception

Some think A2UI requires framework-specific libraries to be "ready" for React or Vue. In reality, the renderer is just a switch statement mapping intent types to components. If you can build React components, you can render A2UI intents. No special library needed.

Key Concepts

Protocol vs Library

A2UI defines what to show, not how. React, Vue, and Angular are all valid rendering targets.

Intent-Based

LLMs emit semantic intents like Card or DataTable, not HTML or JSX.

Schema-Validated

Every intent is validated with Zod before rendering, ensuring type safety and catching errors early.

Framework-Agnostic

Same intents work with any UI framework that implements a renderer. Swap React for Vue without changing intents.

TL;DR

The renderer is ~50 lines of code. It's a switch statement that maps intent types to React components.

No framework-specific "library" is needed. The A2UI protocol defines the intent schema. Your framework implements the renderer.

React isn't "supported" or "not supported." React is just one possible rendering target for A2UI intents - and building a React renderer takes an afternoon.