Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ The A2UI flow disconnects the generation of UI from the execution of UI:
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
(via A2A, AG UI, etc.).
(via A2A, AG-UI, etc.).
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.
Expand All @@ -93,7 +93,7 @@ The A2UI flow disconnects the generation of UI from the execution of UI:

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

- **Transports:** Compatible with **A2A Protocol** and **AG UI**.
- **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).
Expand All @@ -105,7 +105,7 @@ Pick the path that matches where you want to start:
| Path | What you get | Time |
| ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| 🍜 **[Quickstart Restaurant Finder Demo](https://a2ui.org/quickstart/)** | Full-stack A2UI running locally with a Gemini powered ADK agent and Lit renderer. Learn A2UI end-to-end and customize to your use case. | ~5 min |
| ⚛️ **[A2UI + AG-UI (CopilotKit)](docs/guides/a2ui-with-any-agent-framework.md)** | Set up CopilotKit with your agent framework of choice, then enable A2UI rendering. Ready to ship A2UI in a React app. | ~5 min |
| ⚛️ **[A2UI + AG-UI (CopilotKit)](docs/guides/a2ui-with-any-agent-framework.md)** | Set up CopilotKit with your agent framework of choice, then enable A2UI rendering over AG-UI. | ~5 min |
| 🎨 **[A2UI Composer](https://a2ui-composer.ag-ui.com/)** · **[Widget Builder](https://go.copilotkit.ai/A2UI-widget-builder)** | Generate A2UI JSON from a visual editor and paste it into any agent prompt — no install required. | ~1 min |
| 🎬 **[A2UI Theater](https://a2ui-composer.ag-ui.com/theater)** | Step through pre-built A2UI streaming scenarios across Lit, React, and Angular renderers — no install required. | ~1 min |

Expand Down
2 changes: 1 addition & 1 deletion docs/concepts/data-flow.md
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,7 @@ A sequence of self-contained JSON objects is streaming-friendly, easy for LLMs t
A2UI is transport-agnostic — any mechanism that can deliver JSON messages works:

- **[A2A Protocol](https://a2a-protocol.org/)**: Standardized agent-to-agent communication, also used for agent-to-UI delivery
- **[AG UI](https://docs.ag-ui.com/)**: Bidirectional, real-time agent-UI protocol
- **[AG-UI](https://ag-ui.com/)**: Bidirectional, real-time agent-UI protocol
- **REST / HTTP**: Simple request-response or Server-Sent Events (SSE) for one-way streaming
- **WebSocket**: Persistent bidirectional connection, ideal for real-time updates and user actions
- **Any other transport**: gRPC, message queues, custom protocols — if it can carry JSON, it works
Expand Down
22 changes: 11 additions & 11 deletions docs/concepts/transports.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Transports (Message Passing)

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

The actual component rendering is done by the [renderer](../reference/renderers.md),
and the [agents](../reference/agents.md) are responsible for generating the A2UI messages.
Expand All @@ -16,13 +16,13 @@ A2UI defines a sequence of JSON messages. The transport layer is responsible for

## Available Transports

| Transport | Status | Use Case |
| ---------------------------- | ----------- | -------------------------------------- |
| **A2A Protocol** | ✅ Stable | Multi-agent systems, enterprise meshes |
| **AG UI** | ✅ Stable | Full-stack React applications |
| **REST API** | 📋 Planned | Simple HTTP endpoints |
| **WebSockets** | 💡 Proposed | Real-time bidirectional |
| **SSE (Server-Sent Events)** | 💡 Proposed | Web streaming |
| Transport | Status | Use Case |
| ---------------------------- | ----------- | -------------------------------------------------------- |
| **A2A Protocol** | ✅ Stable | Multi-agent systems, enterprise meshes |
| **AG-UI** | ✅ Stable | Full stack React, Vue, Angular applications (CopilotKit) |
| **REST API** | 📋 Planned | Simple HTTP endpoints |
| **WebSockets** | 💡 Proposed | Real-time bidirectional |
| **SSE (Server-Sent Events)** | 💡 Proposed | Web streaming |

## A2A Protocol

Expand All @@ -41,11 +41,11 @@ TODO: Add a detailed guide.

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

## AG UI
## AG-UI

[AG UI](https://ag-ui.com/) translates A2UI messages to AG UI events and handles transport and state sync automatically. It is the recommended transport for React / Next.js clients.
[AG-UI](https://ag-ui.com/) translates A2UI messages to AG-UI events and handles transport and state sync automatically. It is commonly used for full stack React, Vue, and Angular applications. CopilotKit is AG-UI's creator and primary consumer.

**See:** [Use A2UI with Any Agent Framework (Using AG-UI)](../guides/a2ui-with-any-agent-framework.md) — guide to setting up CopilotKit with your agent framework of choice and enabling A2UI rendering.
**See:** [Use A2UI with Any Agent Framework (Using AG-UI)](../guides/a2ui-with-any-agent-framework.md): Set up CopilotKit with your agent framework of choice and enable A2UI rendering.

## Custom Transports

Expand Down
16 changes: 8 additions & 8 deletions docs/ecosystem/a2ui-in-the-world.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,26 +92,26 @@ ADK integrated the A2UI v0.8 basic catalog to automatically render spec-complian

## Partner Integrations

### AG UI / CopilotKit: Full-Stack Agentic Framework
### AG-UI / CopilotKit: Full-Stack Agentic Framework

[AG UI](https://ag-ui.com/) and [CopilotKit](https://www.copilotkit.ai/) provide a comprehensive framework for building agentic applications, with **day-zero A2UI compatibility**.
[AG-UI](https://ag-ui.com/) provides the protocol and [CopilotKit](https://www.copilotkit.ai/) provides the primary full-stack framework for building agentic applications, with **day-zero A2UI compatibility**.

**How they work together:**

AG UI excels at creating high-bandwidth connections between custom frontends and their dedicated agents. By adding A2UI support, developers get the best of both worlds:
AG-UI excels at creating high-bandwidth connections between custom frontends and their dedicated agents. By adding A2UI support, developers get the best of both worlds:

- **State synchronization**: AG UI handles app state and chat history.
- **State synchronization**: AG-UI handles app state and chat history.
- **A2UI rendering**: Render dynamic UIs from third-party agents.
- **Multi-agent support**: Coordinate UIs from multiple agents.
- **React integration**: Seamless integration with React applications.
- **Framework integrations**: React, Vue, Angular, and other app surfaces through CopilotKit.

> "AG UI excels at creating a high-bandwidth connection between a custom-built front-end and its dedicated agent. By adding support for A2UI, we're giving developers the best of both worlds. They can now build rich, state-synced applications that can also render dynamic UIs from third-party agents via A2UI. It's a perfect match for a multi-agent world."
> "AG-UI excels at creating a high-bandwidth connection between a custom-built front-end and its dedicated agent. By adding support for A2UI, we're giving developers the best of both worlds. They can now build rich, state-synced applications that can also render dynamic UIs from third-party agents via A2UI. It's a perfect match for a multi-agent world."
>
> **— Atai Barkai**, Founder of CopilotKit and AG UI
> **— Atai Barkai**, Founder of CopilotKit and AG-UI

**Learn more:**

- [AG UI](https://ag-ui.com/)
- [AG-UI](https://ag-ui.com/)
- [CopilotKit](https://www.copilotkit.ai/)

---
Expand Down
2 changes: 1 addition & 1 deletion docs/ecosystem/community.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ The best way to share your work is to **post in [GitHub Discussions](https://git

## Project Partners

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

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

Expand Down
49 changes: 28 additions & 21 deletions docs/guides/a2ui-with-any-agent-framework.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
# Use A2UI with Any Agent Framework (Using AG-UI)

A2UI is a declarative UI format. [AG-UI](https://ag-ui.com/) is the transport
that carries A2UI messages between an agent and the browser. CopilotKit's
that carries A2UI messages between an agent and an app. CopilotKit's
AG-UI implementation is the fastest path to putting A2UI in front of users
today — any agent framework CopilotKit supports (ADK, LangGraph, CrewAI,
today. Any agent framework CopilotKit supports (ADK, LangGraph, CrewAI,
Mastra, custom Python/TS services, etc.) can emit A2UI and render it in a
React app with no transport glue.
supported app surface with no transport glue.

!!! info "Source of truth"

This guide mirrors the key steps from CopilotKit's
[ADK + A2UI docs](https://docs.copilotkit.ai/adk/generative-ui/a2ui).
[A2UI docs](https://docs.copilotkit.ai/generative-ui/a2ui).
For Google ADK-specific setup, see the
[Google ADK + A2UI guide](https://docs.copilotkit.ai/google-adk/generative-ui/a2ui).
Refer to the CopilotKit docs for the latest API surface.

## 1. Set up CopilotKit

Install CopilotKit into a React/Next.js app with the framework of your
choice (ADK, LangGraph, CrewAI, Mastra, etc.):
Install CopilotKit into your app with the agent framework of your choice
(ADK, LangGraph, CrewAI, Mastra, etc.):

```bash
npx copilotkit@latest init
```

Or follow the [CopilotKit quickstart](https://docs.copilotkit.ai/quickstart)
to wire it into an existing project. This is the standard CopilotKit setup
no A2UI-specific scaffold.
to wire it into an existing project. This is the standard CopilotKit setup,
with no A2UI-specific scaffold.

## 2. Enable A2UI

### Backend

Turn on A2UI in `CopilotRuntime` and inject the `render_a2ui` tool so your
agent can produce A2UI surfaces:
Turn on A2UI in `CopilotRuntime`. For dynamic-schema flows, inject the
`render_a2ui` tool so your agent can produce A2UI surfaces:

```ts title="app/api/copilotkit/route.ts"
import {CopilotRuntime} from '@copilotkit/runtime';
Expand All @@ -43,10 +45,15 @@ const runtime = new CopilotRuntime({
```

Scope to specific agents with `a2ui: { injectA2UITool: true, agents: ["my-agent"] }`.
For fixed-schema flows where your agent already returns `a2ui_operations`,
`a2ui: true` or `a2ui: {}` is enough.

### Frontend

The A2UI renderer activates automatically. Optionally pass a theme:
The A2UI renderer activates automatically. This guide uses React/Next.js
snippets; CopilotKit also supports A2UI through additional app surfaces,
including Vue, Angular, and React Native/headless clients. Optionally pass
a theme:

{% raw %}

Expand All @@ -66,15 +73,15 @@ import {myCustomTheme} from '@copilotkit/a2ui-renderer';

A2UI ships with a built-in catalog (Text, Image, Card, …) that gets you a
working surface immediately. The real power is extending it with _your_
React components your design system, your data shapes so the agent
React components from your design system and data shapes, so the agent
can compose interfaces from primitives you already trust. A catalog has
three pieces:

1. **Definitions** Zod schemas plus a natural-language description. This
is what the agent sees in its system prompt.
2. **Renderers** — typed React components, one per definition. This is
1. **Definitions**: Zod schemas plus a natural-language description. This
is what the agent sees in its system prompt. Note that for client-side functions, the client determines the function's execution boundary (such as clientOnly status) at runtime by reading its configuration from the active catalog definition.
2. **Renderers**: Typed React components, one per definition. This is
what the user sees.
3. **Registration** — pass the catalog through the provider so the A2UI
3. **Registration**: Pass the catalog through the provider so the A2UI
renderer knows how to draw your components.

#### 1. Define component schemas
Expand Down Expand Up @@ -111,7 +118,7 @@ export type MyDefinitions = typeof myDefinitions;

Map each definition to a React component. `createCatalog` is generic over
the definitions type, so the props your renderer receives are type-checked
against the Zod schema a typo in `props.text` is a compile error.
against the Zod schema, so a typo in `props.text` is a compile error.

{% raw %}

Expand Down Expand Up @@ -193,7 +200,7 @@ can use them in any A2UI surface they emit.

For the full BYOC reference (multiple catalogs, theming hooks, advanced
patterns), see CopilotKit's
[Custom Components (BYOC) section](https://docs.copilotkit.ai/adk/generative-ui/a2ui#custom-components-byoc).
[Custom Components (BYOC) section](https://docs.copilotkit.ai/generative-ui/a2ui).

## 3. Advanced usage

Expand All @@ -203,6 +210,6 @@ advanced patterns), see CopilotKit's

## What's next

- **[A2UI Composer](https://a2ui-composer.ag-ui.com/)** — build widgets visually.
- **[Concepts › Transports](../concepts/transports.md)** — how A2UI maps onto AG-UI.
- **[v0.9 specification](../specification/v0.9-a2ui.md)** — the underlying protocol.
- **[A2UI Composer](https://a2ui-composer.ag-ui.com/)**: Build widgets visually.
- **[Concepts › Transports](../concepts/transports.md)**: How A2UI maps onto AG-UI.
- **[v0.9 specification](../specification/v0.9-a2ui.md)**: The underlying protocol.
4 changes: 2 additions & 2 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,11 @@ This repository contains:

[:octicons-arrow-right-24: Run the demo](quickstart.md)

- :material-react:{ .lg .middle } **[A2UI + AG-UI (React)](guides/a2ui-with-any-agent-framework.md)**
- :material-react:{ .lg .middle } **[A2UI + AG-UI (CopilotKit)](guides/a2ui-with-any-agent-framework.md)**

***

Scaffold a Next.js app wired to any agent framework via AG-UI. This is a React + A2UI app, ready to ship.
Scaffold an app with CopilotKit, wire it to any agent framework via AG-UI, then enable A2UI rendering.

[:octicons-arrow-right-24: Use with any agent](guides/a2ui-with-any-agent-framework.md)

Expand Down
Loading
Loading