Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
da8b5e2
docs: full pass on documentation
zeroasterisk Dec 13, 2025
7077d0d
docs: second pass on documentation
zeroasterisk Dec 13, 2025
f250685
Update docs/agents.md
zeroasterisk Dec 15, 2025
a882520
Update docs/agents.md
zeroasterisk Dec 15, 2025
c927529
docs: updates to root level pages
zeroasterisk Dec 15, 2025
2b5a773
Update docs/concepts/components.md
zeroasterisk Dec 15, 2025
1546255
Update docs/concepts/components.md
zeroasterisk Dec 15, 2025
8847c3a
Commit agent changes to make docs consistent with v0.8
jacobsimionato Dec 15, 2025
c298c17
docs: guides/agent-dev
zeroasterisk Dec 15, 2025
0d01c85
Update docs/concepts/data-binding.md
zeroasterisk Dec 15, 2025
5d5d369
docs: reduce scope of concepts pages
zeroasterisk Dec 15, 2025
a8efaf7
Merge remote-tracking branch 'origin/main' into docs
zeroasterisk Dec 15, 2025
41d067f
docs: simplifying
zeroasterisk Dec 15, 2025
cd3916b
update code in docs/guides
jacobsimionato Dec 15, 2025
bc724ec
fix: unclosed blockstring
zeroasterisk Dec 15, 2025
f0fc603
docs: formatting & quickstart
zeroasterisk Dec 15, 2025
6fb4167
Update docs/guides/theming.md
zeroasterisk Dec 15, 2025
3ea2a4b
docs: cleanup to align to v0.8
zeroasterisk Dec 15, 2025
5b352fe
docs: streamline guides and remove unverified code examples
zeroasterisk Dec 15, 2025
6ccd31a
update disclaimers (#284)
dmandar Dec 15, 2025
474dd4a
fix build (#286)
dmandar Dec 15, 2025
4b49344
Remove date from TextField component (#282)
jacobsimionato Dec 15, 2025
8075e41
docs: Greg reviews
zeroasterisk Dec 15, 2025
ea5110d
Merge branch 'main' into docs
jacobsimionato Dec 15, 2025
af1ac7e
Fix broken links and add warning about npms not published yet
jacobsimionato Dec 15, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 31 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ to generate or populate rich user interfaces.

*A gallery of A2UI rendered cards, showing a variety of UI compositions that A2UI can achieve.*

## ⚠️ Status: Experimental
## ⚠️ Status: Early Stage Public Preview

> **Note:** A2UI is currently in **v0.8 (Public Preview)**. The specification and
implementations are functional but evolving. We are opening the project to gather
feedback on the format and collaborate on client renderers. Expect changes.
implementations are functional but are still evolving. We are opening the project to
foster collaboration, gather feedback, and solicit contributions (e.g., on client renderers).
Expect changes.

## Summary

Expand All @@ -40,7 +41,7 @@ The project's core philosophies:
security risk. A2UI is a declarative data format, not executable
code. Your client application maintains a "catalog" of trusted, pre-approved
UI components (e.g., Card, Button, TextField), and the agent can only request
to render components from that catalog.
to render components from that catalog.
* **LLM-friendly and incrementally updateable**: The UI is represented as a flat
list of components with ID references which is easy for LLMs to generate
incrementally, allowing for progressive rendering and a responsive user
Expand All @@ -66,68 +67,72 @@ component logic rather than relying solely on the core system.

Some of the use cases include:

* **Dynamic Data Collection:** An agent generates a bespoke form (date pickers,
* **Dynamic Data Collection:** An agent generates a bespoke form (date pickers,
sliders, inputs) based on the specific context of a conversation (e.g.,
booking a specialized reservation).
* **Remote Sub-Agents:** An orchestrator agent delegates a task to a
* **Remote Sub-Agents:** An orchestrator agent delegates a task to a
remote specialized agent (e.g., a travel booking agent) which returns a
UI payload to be rendered inside the main chat window.
* **Adaptive Workflows:** Enterprise agents that generate approval
* **Adaptive Workflows:** Enterprise agents that generate approval
dashboards or data visualizations on the fly based on the user's query.

## Architecture

The A2UI flow disconnects the generation of UI from the execution of UI:

1. **Generation:** An Agent (using Gemini or another LLM) generates or uses
1. **Generation:** An Agent (using Gemini or another LLM) generates or uses
a pre-generated `A2UI Response`, a JSON payload describing the composition
of UI components and their properties.
2. **Transport:** This message is sent to the client application
2. **Transport:** This message is sent to the client application
(via A2A, AG UI, etc.).
3. **Resolution:** The Client's **A2UI Renderer** parses the JSON.
4. **Rendering:** The Renderer maps the abstract components
3. **Resolution:** The Client's **A2UI Renderer** parses the JSON.
4. **Rendering:** The Renderer maps the abstract components
(e.g., `type: 'text-field'`) to the concrete implementation in the client's codebase.


## Dependencies

A2UI is designed to be a lightweight format, but it fits into a larger ecosystem:

* **Transports:** Compatible with **A2A Protocol** and **AG UI**.
* **LLMs:** Can be generated by any model capable of generating JSON output.
* **Host Frameworks:** Requires a host application built in a supported framework
* **Transports:** Compatible with **A2A Protocol** and **AG UI**.
* **LLMs:** Can be generated by any model capable of generating JSON output.
* **Host Frameworks:** Requires a host application built in a supported framework
(currently: Web or Flutter).

## Getting Started

The best way to understand A2UI is to run the samples.

### Prerequisites
* Node.js (for web clients)
* Python (for agent samples)
* A valid [Gemini API Key](https://aistudio.google.com/) is required for the samples.

* Node.js (for web clients)
* Python (for agent samples)
* A valid [Gemini API Key](https://aistudio.google.com/) is required for the samples.

### Running the Restaurant Finder Demo

1. **Clone the repository:**
1. **Clone the repository:**

```bash
git clone https://github.com/google/A2UI.git
cd A2UI
```

2. **Set your API Key:**
2. **Set your API Key:**

```bash
export GEMINI_API_KEY="your_gemini_api_key"
```

3. **Run the Agent (Backend):**
3. **Run the Agent (Backend):**

```bash
cd samples/agent/adk/restaurant_finder
uv run .
```

4. **Run the Client (Frontend):**
4. **Run the Client (Frontend):**
Open a new terminal window:

```bash
cd samples/client/lit/shell
npm install
Expand All @@ -140,15 +145,14 @@ which uses A2UI under the hood.
CopilotKit has a public [A2UI Widget Builder](https://go.copilotkit.ai/A2UI-widget-builder)
to try out as well.


## Roadmap

We hope to work with the community on the following:

* **Spec Stabilization:** Moving towards a v1.0 specification.
* **More Renderers:** Adding official support for React, Jetpack Compose, iOS (SwiftUI), and more.
* **Additional Transports:** Support for REST and more.
* **Additional Agent Frameworks:** Genkit, LangGraph, and more.
* **Spec Stabilization:** Moving towards a v1.0 specification.
* **More Renderers:** Adding official support for React, Jetpack Compose, iOS (SwiftUI), and more.
* **Additional Transports:** Support for REST and more.
* **Additional Agent Frameworks:** Genkit, LangGraph, and more.

## Contribute

Expand Down
51 changes: 51 additions & 0 deletions docs/agents.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Agents (Server-Side)

Agents are server-side programs that generate A2UI messages in response to user requests.

The actual component rendering is done by the [renderer](renderers.md),
after messages are [transported](transports.md) to the client.
The agent is only responsible for generating the A2UI messages.

## How Agents Work

```
User Input → Agent Logic → LLM → A2UI JSON → Send to Client
```

1. **Receive** user message
2. **Process** with LLM (Gemini, GPT, Claude, etc.)
3. **Generate** A2UI JSON messages as structured output
4. **Send** to client via transport

User interactions from the client can be treated as new user input.

## Sample Agents

The A2UI repository includes sample agents you can learn from:

- [Restaurant Finder](https://github.com/google/A2UI/tree/main/samples/agent/adk/restaurant_finder)
- Table reservations with forms
- Written with the ADK
- [Contact Lookup](https://github.com/google/A2UI/tree/main/samples/agent/adk/contact_lookup)
- Search with result lists
- Written with the ADK
- [Rizzcharts](https://github.com/google/A2UI/tree/main/samples/agent/adk/rizzcharts)
- A2UI Custom components demo
- Written with the ADK

## Different types of agents you will use A2A with

### 1. User Facing Agent (standalone)

A user facing agent is one that is directly interacted with by the user.

### 2. User Facing Agent as a host for a Remote Agent

This is a pattern where the user facing agent is a host for one or more remote agents. The user facing agent will call the remote agent and the remote agent will generate the A2UI messages. This is a common pattern in [A2A](https://a2a-protocol.org) with the client agent calling the server agent.

- The user facing agent may "passthrough" the A2UI message without altering them
- The user facing agent may alter the A2UI message before sending it to the client

### 3. Remote Agent

A remote agent is not directly a part of the user facing UI. Instead it is registered in as a remote agent and can be called by the user facing agent. This is a common pattern in [A2A](https://a2a-protocol.org) with the client agent calling the server agent.
Binary file added docs/assets/A2UI-widget-builder.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/end-to-end-data-flow.png
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look great on a dark mode background, but I suppose there's nothing to do about that. I don't think there's any way to select the image based on brightness mode.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
86 changes: 86 additions & 0 deletions docs/community.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
# Community

Welcome to the A2UI community! We're building the future of agent-driven interfaces together.

## Get Involved

A2UI is an open-source project licensed under Apache 2.0. We welcome contributions from developers, researchers, and anyone interested in advancing agentic user interfaces.

## Community Showcase

!!! info "Coming soon..."
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.

## Project Partners

A2UI is developed in collaboration with several organizations:

### Google Opal

[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.

### Flutter

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.

### Gemini Enterprise

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.

### AG UI / CopilotKit

[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.

### A2A

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).

### ... and more

There are many organizations and individuals contributing to A2UI's development.

If you have made signiciant contributions to A2UI, please submit your name to this list.

## Code of Conduct

We are committed to providing a welcoming and inclusive environment for everyone. All participants are expected to:

- Be respectful and considerate
- Welcome newcomers and help them get started
- Focus on what's best for the community
- Show empathy towards others

Unacceptable behavior will not be tolerated. Report concerns to the project maintainers.

## Recognition

We appreciate all contributions! Contributors are recognized in:

- GitHub's contributor graph
- Release notes
- Project acknowledgments

Significant contributors may be invited to join the project's maintainer team.

## Stay Updated

- **Watch the GitHub repo** for notifications
- **Star the repo** to bookmark and show support
- **Follow releases** to get notified of new versions

## Ways to Contribute

**[github.com/google/A2UI](https://github.com/google/A2UI)**

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

## Questions?

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

Thank you for being part of the A2UI community!
16 changes: 16 additions & 0 deletions docs/composer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# A2UI Composer

Try building A2UI widgets interactively with the **CopilotKit A2UI Widget Builder**.

[![A2UI Composer](assets/A2UI-widget-builder.png)](https://go.copilotkit.ai/A2UI-widget-builder)

**[Launch Widget Builder →](https://go.copilotkit.ai/A2UI-widget-builder)**

## What it does

- Experiment with A2UI components visually
- Generate A2UI JSON by describing what you want
- See real-time previews
- Copy JSON to use in your agents

Built by the [CopilotKit](https://www.copilotkit.ai/) team.
Loading