Manzanita Research

Generative UI Frameworks,
Explored

Four frameworks. One question. How should an AI agent describe a user interface? This is a visual guide to the emerging generative UI landscape — how each approach works, where they differ, and which tradeoffs they make.

Like TodoMVC, but for the age of agents.

The Spectrum: Protocol → Platform
A2UI
OpenUI
json-render
Tambo
← Pure spec / BYO everythingBatteries included / managed →
Spring 2026

The Landscape

Each framework lives at a different point on the protocol-to-platform spectrum. Here's the lay of the land.

A2UI
Google · site ↗
Open Protocol / Spec

Protocol for agent-driven interfaces

OpenUI Lang
Thesys · site ↗
Custom DSL + React Runtime (+ C1 hosted API)

Token-efficient DSL for streaming generative UI

json-render
Vercel · site ↗
JSON Schema + React Runtime

JSON-based generative UI with code export

Tambo
Fractal Dynamics · site ↗
Full-Stack SDK + Hosted Platform

Full-stack agent toolkit for React

One Query, Four Architectures

The same question — 'Find me hotels in San Francisco for three nights' — handled by each framework. See the Pipeline view for the full walkthrough.

Click any framework to explore its data flow and developer experience in detail.

Data Flow: A2UI
Your Components
Component Registry
User
Agent
Stream
Renderer
Rendered UI
1
Your components exist
HotelCard, HotelGrid — your design system, your styles
2
Register renderers
Map A2UI component names to your React renderers with data binding resolvers
3
User asks a question
"Find me hotels in San Francisco for three nights"
4
Agent generates A2UI JSONL
surfaceUpdate (tree) + dataModelUpdate (state) + beginRendering (signal)
5
Renderer resolves bindings
JSON Pointer paths like /hotels/0/name are resolved against the data model
6
Your components render
Same HotelCard, same styles — A2UI just provided the props
7
User clicks Book Now
Action sent back to agent as structured JSON — no code execution
Developer Experience
A2UI — developer experience
1── What the developer provides ──
2A component catalog (Card, Image, Text, etc.)
3with native renderers for their platform
4(Angular, Flutter, Lit, Web Components…)
5
6── What the agent generates (JSONL stream) ──
7
8Line 1 → surfaceUpdate (component tree):
9{
10 "surfaceUpdate": {
11 "surfaceId": "main",
12 "components": [
13 {
14 "id": "hotel-card",
15 "component": {
16 "Card": {
17 "child": "hotel-content"
18 }
19 }
20 },
21 {
22 "id": "hotel-content",
23 "component": {
24 "Column": {
25 "children": {
26 "explicitList": ["hotel-image", "hotel-price"]
27 }
28 }
29 }
30 },
31 {
32 "id": "hotel-image",
33 "component": {
34 "Image": {
35 "src": { "path": "/hotels/0/imageUrl" }
36 }
37 }
38 },
39 {
40 "id": "hotel-price",
41 "component": {
42 "Text": {
43 "text": { "path": "/hotels/0/price" }
44 }
45 }
46 }
47 ]
48 }
49}
50
51Line 2 → dataModelUpdate (state):
52{
53 "dataModelUpdate": {
54 "surfaceId": "main",
55 "contents": [
56 {
57 "key": "hotels",
58 "valueList": [
59 {
60 "valueMap": [
61 { "key": "name", "valueString": "Hotel & Spa" },
62 { "key": "imageUrl", "valueString": "/img/hotel.jpg" },
63 { "key": "price", "valueString": "$240/night" }
64 ]
65 }
66 ]
67 }
68 ]
69 }
70}
71
72Line 3 → beginRendering:
73{ "beginRendering": { "surfaceId": "main", "root": "hotel-card" } }
74// Client renders native components with bound data
Manzanita Research
An independent AI lab building tools for creatives.
Spring 2026 · Not affiliated with any listed framework