Skip to content

Commit fe74e8c

Browse files
zeroasteriskZaf
andauthored
docs: reorganize files to match nav sections, add ADK + comparison updates (google#776)
* docs: reorganize files to match nav sections - Move catalogs, transports, client_to_server_actions → concepts/ - Move renderers, agents → reference/ - Move where-is-it-used, community → ecosystem/ - Rewrite agent-ui-ecosystem as concise 'How Does A2UI Compare?' intro page - Move third-party integrations (json-render, OpenClaw) to ecosystem - Fix all cross-references for moved files - Remove duplicate nav entries (each page appears once) * docs: refine How Does A2UI Compare page - native-first → declarative UI, clarify host controls styling - MCP Apps: clarify remote controls content, config via tool calling - AG UI: credit CopilotKit team, React renderer, Composer contributions - ChatKit: note shared design philosophy (basic components, declarative) * docs: restore comparison table as At a Glance section * docs: rename 'Where is A2UI Used?' → 'A2UI in the World' * docs: rename where-is-it-used → a2ui-in-the-world, MCP SEP-1865 citation * docs: add Google ADK section to A2UI in the World ADK Web has native A2UI rendering and A2A↔A2UI message conversion. Links to ADK docs, adk-web repo, and agent development guide. * docs: fix CopilotKit attribution — Composer yes, React renderer no React renderer PR google#542 is still open and not by CopilotKit. Composer was contributed by maxkorp (@CopilotKit). * docs: React renderer status — In Review, link to PR google#542 * docs: add redirects for all moved files Old URLs now redirect to new locations: - catalogs, transports, actions → concepts/ - renderers, agents → reference/ - community → ecosystem/ - where-is-it-used → ecosystem/a2ui-in-the-world * docs: React renderer merged, contribution guide, writing fixes - React renderer PR google#542 merged — update status to Stable across all pages - Add React section to client-setup guide - Expand community renderer submission with step-by-step instructions - Replace community showcase placeholder with concrete guidance + sample links - Collapse duplicate partner info in community.md (points to a2ui-in-the-world) - Fix typo (signiciant → significant) - Tighten how-to-use wording, fix Angular install (add @a2ui/web-lib) * docs: add web_core shared library section to renderer development guide Explains what @a2ui/web-lib (web_core) provides, how Lit/Angular/React renderers use it, and why new web renderers should start from it rather than reimplementing message processing and state management. * docs: link renderer names to source in client-setup table * docs: remove stars and last-updated columns from community renderers table * docs: fix ChatKit link to point to actual docs instead of openai.com homepage * docs: add live shields.io badges for stars and last-commit to community renderers * docs: fix broken React sample link, fix relative path in ecosystem --------- Co-authored-by: Zaf <zaf@0-a.org>
1 parent 9d5d493 commit fe74e8c

16 files changed

Lines changed: 208 additions & 130 deletions
File renamed without changes.

docs/concepts/data-flow.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ A2UI is transport-agnostic — any mechanism that can deliver JSON messages work
301301
- **WebSocket**: Persistent bidirectional connection, ideal for real-time updates and user actions
302302
- **Any other transport**: gRPC, message queues, custom protocols — if it can carry JSON, it works
303303

304-
See [transports](../transports.md) for implementation details.
304+
See [transports](transports.md) for implementation details.
305305

306306
## Progressive Rendering
307307

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
Transports deliver A2UI messages from agents to clients. A2UI is transport-agnostic—use any method that can send JSON.
44

5-
The actual component rendering is done by the [renderer](renderers.md),
6-
and the [agents](agents.md) are responsible for generating the A2UI messages.
5+
The actual component rendering is done by the [renderer](../reference/renderers.md),
6+
and the [agents](../reference/agents.md) are responsible for generating the A2UI messages.
77
Getting the messages from the agent to the client is the job of the transport.
88

99
## How It Works
@@ -39,7 +39,7 @@ If you are using A2A, this should be nearly automatic.
3939

4040
TODO: Add a detailed guide.
4141

42-
**See:** [A2A Extension Specification](specification/v0.8-a2a-extension.md)
42+
**See:** [A2A Extension Specification](../specification/v0.8-a2a-extension.md)
4343

4444
## AG UI
4545

@@ -74,4 +74,4 @@ You can use any transport that sends JSON:
7474
## Next Steps
7575

7676
- **[A2A Protocol Docs](https://a2a-protocol.org)**: Learn about A2A
77-
- **[A2A Extension Spec](specification/v0.8-a2a-extension.md)**: A2UI + A2A details
77+
- **[A2A Extension Spec](../specification/v0.8-a2a-extension.md)**: A2UI + A2A details
Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Where is A2UI Used?
1+
# A2UI in the World
22

33
A2UI is being adopted by teams at Google and partner organizations to build the next generation of agent-driven applications. Here are real-world examples of where A2UI is making an impact.
44

@@ -70,6 +70,25 @@ GenUI SDK uses **A2UI as the underlying protocol** for communication between ser
7070

7171
---
7272

73+
### Google ADK: Agent Development Kit
74+
75+
The [Agent Development Kit](https://google.github.io/adk-docs/) (ADK) is Google's open-source framework for building and deploying AI agents. The built-in developer UI, [ADK Web](https://github.com/google/adk-web), includes native A2UI rendering.
76+
77+
**How ADK uses A2UI:**
78+
79+
ADK integrated the A2UI v0.8 standard catalog to automatically render spec-compliant agent parts as native UI components directly in the chat. ADK also handles A2UI↔A2A message conversion, so agents built with ADK can send rich UI to any A2UI-capable client.
80+
81+
- **Built-in rendering**: ADK Web renders A2UI components natively in the dev UI
82+
- **A2A integration**: A2UI messages are converted between A2A DataPart metadata and ADK events
83+
- **Agent SDK**: The [A2UI Python agent SDK](https://github.com/google/A2UI/tree/main/agent_sdks/python) provides an ADK extension for generating A2UI from agents
84+
85+
**Try it:**
86+
- [ADK Documentation](https://google.github.io/adk-docs/)
87+
- [ADK Web](https://github.com/google/adk-web) (developer UI with A2UI support)
88+
- [Agent Development Guide](../guides/agent-development.md) (building A2UI agents with ADK)
89+
90+
---
91+
7392
## Partner Integrations
7493

7594
### AG UI / CopilotKit: Full-Stack Agentic Framework
@@ -134,9 +153,14 @@ The A2UI community is building exciting projects:
134153
- Live examples with code
135154
- Great for learning
136155

156+
### Third-Party Integrations
157+
158+
- **[json-render](https://json-render.dev/docs/a2ui)** — Vercel's React library for rendering A2UI component catalogs via Zod schemas. See [json-render vs. A2UI comparison](https://dipjyotimetia.medium.com/vercels-json-render-vs-google-s-a2ui-the-head-to-head-6f213cf1a23b).
159+
- **[OpenClaw Canvas](https://docs.openclaw.ai/platforms/mac/canvas)** — OpenClaw uses A2UI to render agent-generated UI on connected devices via its canvas system. See [architecture overview](https://ppaolo.substack.com/p/openclaw-system-architecture-overview).
160+
137161
### Community Contributions
138162

139-
Have you built something with A2UI? [Share it with the community!](../community.md)
163+
Have you built something with A2UI? [Share it with the community!](community.md)
140164

141165
---
142166

@@ -145,7 +169,7 @@ Have you built something with A2UI? [Share it with the community!](../community.
145169
- [Quickstart Guide](../quickstart.md) - Try the demo
146170
- [Agent Development](../guides/agent-development.md) - Build an agent
147171
- [Client Setup](../guides/client-setup.md) - Integrate a renderer
148-
- [Community](../community.md) - Join the community
172+
- [Community](community.md) - Join the community
149173

150174
---
151175

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,39 +8,24 @@ A2UI is an open-source project licensed under Apache 2.0. We welcome contributio
88

99
## Community Showcase
1010

11-
> ℹ️ **Coming soon...**
12-
>
13-
> We are considering how best to showcase community projects, examples, themes, renderers, custom components, and more. A 4 minute (or less) demo video and code sample linked in Github discussions is a great way to show off your work.
11+
Built something with A2UI? Show it off!
1412

15-
## Project Partners
16-
17-
A2UI is developed in collaboration with several organizations:
18-
19-
### Google Opal
20-
21-
[Opal](http://opal.google) lets users build, edit, and share AI mini-apps using natural language. The Opal team has been a core contributor to A2UI's development.
22-
23-
### Flutter
13+
The best way to share your work is to **post in [GitHub Discussions](https://github.com/google/A2UI/discussions)** with a short description, a link to your code, and a demo video (4 minutes or less). We feature notable projects in the docs and release notes.
2414

25-
The [GenUI SDK for Flutter](https://docs.flutter.dev/ai/genui) uses A2UI as the UI declaration format for generating dynamic, personalized UIs in Flutter applications.
15+
**Community-built renderers** are listed on the [Ecosystem Renderers](renderers.md) page — check there for community implementations and instructions for adding your own.
2616

27-
### Gemini Enterprise
17+
**Official samples** in the repo are a great reference for what good A2UI projects look like:
2818

29-
A2UI is being integrated into [Gemini Enterprise](https://cloud.google.com/gemini-enterprise?e=48754805) to enable custom agents to render rich, interactive UIs within enterprise applications.
19+
- [Restaurant Finder](https://github.com/google/A2UI/tree/main/samples/agent/adk/restaurant_finder) — ADK agent with dynamic forms
20+
- [Contact Lookup](https://github.com/google/A2UI/tree/main/samples/agent/adk/contact_lookup) — search UI with data binding
21+
- [Angular client](https://github.com/google/A2UI/tree/main/samples/client/angular) — gallery + restaurant client
22+
- [Lit shell](https://github.com/google/A2UI/tree/main/samples/client/lit/shell) — minimal web component client
3023

31-
### AG UI / CopilotKit
32-
33-
[AG UI](https://ag-ui.com/) and [CopilotKit](https://www.copilotkit.ai/) provide day-zero compatibility with A2UI, enabling developers to build rich, state-synced applications that render dynamic UIs from agents.
34-
35-
### A2A
36-
37-
Google's [A2A team](https://a2a-protocol.org/) have been core contributors to A2UI's development, with support from the A2A Technical Steering Committee (TSC).
38-
39-
### ... and more
24+
## Project Partners
4025

41-
There are many organizations and individuals contributing to A2UI's development.
26+
A2UI is developed in collaboration with Google Opal, Flutter (GenUI SDK), Gemini Enterprise, AG UI / CopilotKit, and the A2A team. For full details and case studies, see [A2UI in the World](a2ui-in-the-world.md).
4227

43-
If you have made signiciant contributions to A2UI, please submit your name to this list.
28+
If you have made significant contributions to A2UI, please submit your name to this list.
4429

4530
## Code of Conduct
4631

@@ -74,13 +59,13 @@ Significant contributors may be invited to join the project's maintainer team.
7459
**[github.com/google/A2UI](https://github.com/google/A2UI)**
7560

7661
- **Report Issues**: Found a bug? [Open an issue](https://github.com/google/A2UI/issues)
77-
- **Build Renderers**: See the [roadmap](roadmap.md) for planned frameworks
62+
- **Build Renderers**: See the [roadmap](../roadmap.md) for planned frameworks
7863
- **Share Examples**: Post with `#A2UI` on X/LinkedIn, start a [discussion](https://github.com/google/A2UI/discussions)
7964
- **Improve Docs**: PRs welcome in the `docs/` directory
8065

8166
## Questions?
8267

83-
- Check the [documentation](introduction/what-is-a2ui.md)
68+
- Check the [documentation](../introduction/what-is-a2ui.md)
8469
- Search [GitHub Discussions](https://github.com/google/A2UI/discussions)
8570
- Ask in [GitHub Issues](https://github.com/google/A2UI/issues)
8671

docs/ecosystem/renderers.md

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ Community and third-party A2UI renderer implementations.
88

99
## Community Renderers
1010

11-
| Renderer | Platform | npm / Package | v0.8 | v0.9 | Stars | Last Updated | Links |
12-
|----------|----------|---------------|------|------|-------|-------------|-------|
13-
| **@a2ui-sdk/react** | React (Web) | `@a2ui-sdk/react` | || ~20 | Feb 2026 | [GitHub](https://github.com/easyops-cn/a2ui-sdk) · [npm](https://www.npmjs.com/package/@a2ui-sdk/react) · [Docs](https://a2ui-sdk.js.org/) |
14-
| **A2UI-Android** | Android (Jetpack Compose) | | || ~15 | Feb 2026 | [GitHub](https://github.com/lmee/A2UI-Android) |
15-
| **a2ui-react-native** | React Native (Mobile) || || ~9 | Feb 2026 | [GitHub](https://github.com/sivamrudram-eng/a2ui-react-native) |
16-
| **@zhama/a2ui** | React (Web) | `@zhama/a2ui` | || | Jan 2026 | [npm](https://www.npmjs.com/package/@zhama/a2ui) |
17-
| **A2UI-react** | React (Web) | | || ~9 | Feb 2026 | [GitHub](https://github.com/jem-computer/A2UI-react) |
11+
| Renderer | Platform | v0.8 | v0.9 | Activity | Links |
12+
|----------|----------|------|------|----------|-------|
13+
| **@a2ui-sdk/react** | React (Web) ||| ![Stars](https://img.shields.io/github/stars/easyops-cn/a2ui-sdk?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/easyops-cn/a2ui-sdk?style=flat-square&label=updated) | [GitHub](https://github.com/easyops-cn/a2ui-sdk) · [npm](https://www.npmjs.com/package/@a2ui-sdk/react) · [Docs](https://a2ui-sdk.js.org/) |
14+
| **A2UI-Android** | Android (Compose) ||| ![Stars](https://img.shields.io/github/stars/lmee/A2UI-Android?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/lmee/A2UI-Android?style=flat-square&label=updated) | [GitHub](https://github.com/lmee/A2UI-Android) |
15+
| **a2ui-react-native** | React Native | || ![Stars](https://img.shields.io/github/stars/sivamrudram-eng/a2ui-react-native?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/sivamrudram-eng/a2ui-react-native?style=flat-square&label=updated) | [GitHub](https://github.com/sivamrudram-eng/a2ui-react-native) |
16+
| **@zhama/a2ui** | React (Web) |||| [npm](https://www.npmjs.com/package/@zhama/a2ui) |
17+
| **A2UI-react** | React (Web) ||| ![Stars](https://img.shields.io/github/stars/jem-computer/A2UI-react?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/jem-computer/A2UI-react?style=flat-square&label=updated) | [GitHub](https://github.com/jem-computer/A2UI-react) |
1818

1919
### Notable Mentions
2020

@@ -38,14 +38,25 @@ No credible A2UI renderer packages were found on PyPI as of March 2026. A2UI ren
3838

3939
## Submitting a Renderer
4040

41-
Built an A2UI renderer? We'd love to list it here:
41+
Built an A2UI renderer? We'd love to list it here.
4242

43-
1. Open a PR to add it to this page
44-
2. Or file an issue on the [A2UI repo](https://github.com/google/A2UI)
43+
### How to submit
44+
45+
1. **Fork** the [google/A2UI](https://github.com/google/A2UI) repository
46+
2. **Edit** this file (`docs/ecosystem/renderers.md`) — add a row to the Community Renderers table with your renderer's name, platform, npm package (if any), version support, and a link to the source
47+
3. **Open a PR** against `google/A2UI` with a short description of your renderer
48+
4. **Post in [GitHub Discussions](https://github.com/google/A2UI/discussions)** — let the community know what you built! A short demo video goes a long way.
49+
50+
Need inspiration? Browse the **[community samples](https://github.com/google/A2UI/tree/main/samples)** in the repo — these cover Angular, Lit, and ADK-based agents and are a good starting point.
4551

4652
### What makes a good community renderer?
4753

48-
- Published source code (open-source preferred)
49-
- Clear documentation on which A2UI spec version is supported
50-
- At least basic component coverage (text, buttons, inputs, layout)
51-
- Active maintenance
54+
A listing is more likely to be accepted and used if it:
55+
56+
- Has **published source code** (open-source preferred, MIT or Apache 2.0)
57+
- Clearly states **which A2UI spec version** it supports (v0.8, v0.9, or both)
58+
- Covers **core components**: text, buttons, inputs, and basic layout
59+
- Includes a **README** with install instructions and a minimal usage example
60+
- Is **actively maintained** — flag it as archived if you're no longer supporting it
61+
62+
Community renderers don't need to be production-ready to be listed — experimental and early-stage projects are welcome in the Notable Mentions section.

docs/guides/client-setup.md

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ Integrate A2UI into your application using the renderer for your platform.
66

77
| Renderer | Platform | v0.8 | v0.9 | Status |
88
| ------------------------ | ------------------ | ---- | ---- | ----------------- |
9-
| **React** | Web | | | ✅ Stable |
10-
| **Lit (Web Components)** | Web | | | ✅ Stable |
11-
| **Angular** | Web | | | ✅ Stable |
12-
| **Flutter (GenUI SDK)** | Mobile/Desktop/Web | | | ✅ Stable |
9+
| **[React](https://github.com/google/A2UI/tree/main/renderers/react)** | Web ||| ✅ Stable |
10+
| **[Lit (Web Components)](https://github.com/google/A2UI/tree/main/renderers/lit)** | Web ||| ✅ Stable |
11+
| **[Angular](https://github.com/google/A2UI/tree/main/renderers/angular)** | Web ||| ✅ Stable |
12+
| **[Flutter (GenUI SDK)](https://docs.flutter.dev/ai/genui)** | Mobile/Desktop/Web ||| ✅ Stable |
1313
| **SwiftUI** | iOS/macOS ||| 🚧 Planned Q2 2026 |
1414
| **Jetpack Compose** | Android ||| 🚧 Planned Q2 2026 |
1515

@@ -67,6 +67,20 @@ TODO: Add verified setup example.
6767

6868
**See working example:** [Angular restaurant sample](https://github.com/google/a2ui/tree/main/samples/client/angular/projects/restaurant)
6969

70+
## React
71+
72+
```bash
73+
npm install @a2ui/react @a2ui/web-lib
74+
```
75+
76+
The React renderer provides:
77+
78+
- **`<A2UISurface>` component**: Renders A2UI surfaces in your React app
79+
- **`useA2UI()` hook**: Accesses the message processor from any component
80+
- **`MessageProcessor` class**: Handles incoming A2UI messages (shared with other web renderers)
81+
82+
**See working example:** [React shell](https://github.com/google/A2UI/tree/main/samples/client/react/shell)
83+
7084
## Flutter (GenUI SDK)
7185

7286
```bash
@@ -93,7 +107,7 @@ Common transport options:
93107

94108
TODO: Add transport implementation examples.
95109

96-
**See:** [Transports guide](../transports.md)
110+
**See:** [Transports guide](../concepts/transports.md)
97111

98112
## Handling User Actions
99113

docs/guides/renderer-development.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,62 @@ This document outlines the required features for a new renderer implementation o
55
!!! info "Version Notes"
66
This guide primarily describes the v0.8 message flow. v0.9 renames several messages (`surfaceUpdate``updateComponents`, `dataModelUpdate``updateDataModel`, `beginRendering``createSurface`) and uses a flatter component format. See the [v0.9 specification](../specification/v0.9-a2ui.md) for details.
77

8+
## Web Renderers: Use `@a2ui/web-lib` (`web_core`)
9+
10+
If you're building a renderer for the web (React, Vue, Svelte, etc.), you don't need to implement message processing, state management, or schema validation from scratch. The **[`@a2ui/web-lib`](https://github.com/google/A2UI/tree/main/renderers/web_core)** package (`web_core`) provides all the framework-agnostic logic that the maintained Lit, Angular, and React renderers share.
11+
12+
### What `web_core` provides
13+
14+
| Module | What it does |
15+
|--------|-------------|
16+
| **`MessageProcessor`** | Processes the A2UI JSONL stream, dispatches messages, manages surface lifecycle |
17+
| **`SurfaceModel` / `SurfaceGroupModel`** | State management for surfaces, components, and data models |
18+
| **`DataModel` / `DataContext`** | Data binding resolution, path-based lookups, template list rendering |
19+
| **`ComponentModel`** | Component tree state, adjacency list → tree resolution |
20+
| **Types & Schemas** | TypeScript types for all A2UI components, primitives, colors, styles, and JSON schema validation |
21+
| **Expression parser** | Client-side function evaluation (v0.9) |
22+
23+
### How the maintained renderers use it
24+
25+
All three web renderers follow the same pattern — `web_core` handles the protocol, the renderer handles the UI:
26+
27+
```typescript
28+
// Types — shared across all renderers
29+
import type * as Types from '@a2ui/web_core/types/types';
30+
import type * as Primitives from '@a2ui/web_core/types/primitives';
31+
32+
// v0.8: Message processing and state
33+
import { A2uiMessageProcessor } from '@a2ui/web_core/data/model-processor';
34+
35+
// v0.9: Message processing, surfaces, catalogs
36+
import { MessageProcessor } from '@a2ui/web_core/v0_9';
37+
import { SurfaceModel } from '@a2ui/web_core/v0_9';
38+
39+
// Styles and layout helpers
40+
import * as Styles from '@a2ui/web_core/styles/index';
41+
```
42+
43+
Your renderer only needs to:
44+
45+
1. **Map A2UI component types to your framework's components** (e.g., `Text``<p>`, `Button``<button>`)
46+
2. **Subscribe to state changes** from `web_core` and re-render
47+
3. **Forward user actions** back through the `MessageProcessor`
48+
49+
See the [React renderer](https://github.com/google/A2UI/tree/main/renderers/react), [Lit renderer](https://github.com/google/A2UI/tree/main/renderers/lit), and [Angular renderer](https://github.com/google/A2UI/tree/main/renderers/angular) for working examples of this pattern.
50+
51+
### Version support
52+
53+
`web_core` exports both v0.8 and v0.9 APIs:
54+
55+
- `@a2ui/web_core/v0_8` or `@a2ui/web_core` (default) — stable v0.8
56+
- `@a2ui/web_core/v0_9` — v0.9 with `createSurface`, custom catalogs, client-side functions
57+
- `@a2ui/web_core/v0_9/basic_catalog` — v0.9 basic catalog expression parser and built-in functions
58+
59+
!!! tip "Start with `web_core`"
60+
Building a web renderer without `web_core` means reimplementing ~3,000 lines of message processing, state management, and schema validation. Unless you have a specific reason to diverge, use it.
61+
62+
---
63+
864
## I. Core Protocol Implementation Checklist
965

1066
This section details the fundamental mechanics of the A2UI protocol. A compliant renderer must implement these systems to successfully parse the server stream, manage state, and handle user interactions.

docs/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ Instead of text-only responses or risky code execution, A2UI lets agents send **
3838
In this repo you will find
3939
[A2UI specifications](specification/v0.8-a2ui.md) (v0.8 stable, v0.9 draft),
4040
implementations for
41-
[renderers](renderers.md) (Angular, Flutter, Lit, Markdown, etc.) on the client side,
42-
and [transports](transports.md) (A2A, etc.) which communicate A2UI messages between agents and clients.
41+
[renderers](reference/renderers.md) (Angular, Flutter, Lit, Markdown, etc.) on the client side,
42+
and [transports](concepts/transports.md) (A2A, etc.) which communicate A2UI messages between agents and clients.
4343

4444
<div class="grid cards" markdown>
4545

0 commit comments

Comments
 (0)