Skip to content
Draft
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 @@ -107,7 +107,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 |
| ⚛️ **[Use A2UI with Any Agent Framework & Harness](docs/public/guides/a2ui-with-any-agent-framework.md)** | Scaffold an AG-UI app or harness for your framework of choice, then enable A2UI rendering over AG-UI. | ~5 min |
| ⚛️ **[Building A2UI Agents with CopilotKit](docs/public/guides/copilotkit.md)** | Scaffold an AG-UI app or harness for your framework of choice with CopilotKit, then enable A2UI rendering over AG-UI. | ~5 min |
| 🎨 **[A2UI Composer](https://a2ui-project.github.io/composer/)** | 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 Expand Up @@ -139,13 +139,13 @@ yarn demo:restaurant

These commands install dependencies across workspaces, build the renderers, start the Python agent, and open the client at `http://localhost:5173`. For step-by-step instructions, alternative demos, and troubleshooting see the **[full Quickstart](docs/public/quickstart.md)**.

### Use A2UI with Any Agent Framework & Harness — Summary
### Building A2UI Agents with CopilotKit — Summary

```bash
npx create-ag-ui-app@latest
```

Use the AG-UI CLI with your framework or harness of choice (Google Chat, ADK, LangGraph, CrewAI, Mastra, Strands, Slack, Teams, etc.), then follow the **[AG-UI guide](docs/public/guides/a2ui-with-any-agent-framework.md)** to enable A2UI rendering. Some scaffold paths use [CopilotKit's A2UI runtime](https://docs.copilotkit.ai/generative-ui/a2ui) with Next.js under the hood, but the setup surface is AG-UI-first.
Use the AG-UI CLI with your framework or harness of choice (Google Chat, ADK, LangGraph, CrewAI, Mastra, Strands, Slack, Teams, etc.), then follow the **[Building A2UI Agents with CopilotKit guide](docs/public/guides/copilotkit.md)** to enable A2UI rendering. Some scaffold paths use [CopilotKit's A2UI runtime](https://docs.copilotkit.ai/generative-ui/a2ui) with Next.js under the hood, but the setup surface is AG-UI-first.

### Other renderers

Expand Down
2 changes: 1 addition & 1 deletion docs/public/concepts/transports.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ TODO: Add a detailed guide.

[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): Set up CopilotKit with your agent framework of choice and enable A2UI rendering.
**See:** [Building A2UI Agents with CopilotKit](../guides/copilotkit.md): Set up CopilotKit with your agent framework of choice and enable A2UI rendering.

## Custom Transports

Expand Down
32 changes: 30 additions & 2 deletions docs/public/ecosystem/a2ui-in-the-world.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,27 @@ GenUI SDK uses **A2UI as the underlying protocol** for communication between ser

---

### Google Genkit: Full-Stack AI Framework

[Genkit](https://genkit.dev/) is Google's open-source framework for building production-grade AI-powered applications and agents across **JavaScript/TypeScript**, **Go**, **Dart**, and **Python**. Genkit provides first-class A2UI support through dedicated server middleware and client helpers in its JavaScript/TypeScript (`@genkit-ai/a2ui`), Go (`github.com/firebase/genkit/go/plugins/a2ui/exp`), and Dart (`genkit_a2ui`) SDKs.

**How Genkit uses A2UI:**

Genkit's A2UI middleware turns standard AI agents into interactive UI generators without manual prompt engineering or brittle JSON parsing. Because emitted envelopes are byte-compatible across all Genkit SDKs, an agent written in TypeScript, Go, or Dart can stream interactive UI surfaces to web renderers (`@a2ui/lit`, `@a2ui/react`, `@a2ui/angular`) or Flutter (`genui`).

- **Multi-language middleware**: Enable A2UI on any agent or prompt in TypeScript (`a2ui()`), Go (`&a2uix.Surfaces{}`), or Dart (`a2ui()`).
- **Automatic catalog injection & validation**: Automatically injects your approved component definitions into system instructions and validates every streamed envelope against your catalog schema.
- **Two-way interactive loop**: Client helpers (`a2uiEnvelopesFromParts` and `actionToMessage`) make it seamless to stream live UI updates and route user interactions back to the agent as the next conversation turn.
- **Full observability**: Inspect every prompt, tool call, and streamed A2UI envelope in the local Genkit Developer UI (`genkit start`).

**Try it:**

- [Genkit A2UI Documentation](https://genkit.dev/docs/agents/a2ui) ([JavaScript/TypeScript](https://genkit.dev/docs/js/agents/a2ui) · [Go](https://genkit.dev/docs/go/agents/a2ui) · [Dart](https://genkit.dev/docs/dart/agents/a2ui))
- [Building A2UI Agents with Genkit Guide](../guides/genkit.md)
- [JavaScript/TypeScript + Lit Sample](https://github.com/genkit-ai/genkit/tree/main/js/testapps/a2ui) · [Go A2UI Middleware Sample](https://github.com/genkit-ai/genkit/tree/main/go/samples/basic-middleware/a2ui) · [Full-Stack Dart & Flutter Sample](https://github.com/genkit-ai/samples/tree/main/a2ui-reservations_dart)

---

### Google ADK: Agent Development Kit

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.
Expand All @@ -88,7 +109,7 @@ ADK integrated the A2UI v0.8 basic catalog to automatically render spec-complian

- [ADK Documentation](https://google.github.io/adk-docs/)
- [ADK Web](https://github.com/google/adk-web) (developer UI with A2UI support)
- [Agent Development Guide](../guides/agent-development.md) (building A2UI agents with ADK)
- [Building A2UI Agents with ADK](../guides/adk.md)

---

Expand Down Expand Up @@ -167,6 +188,11 @@ The A2UI community is building exciting projects:

### Open Source Examples

- **Dining Concierge (Genkit + Flutter)** ([genkit-ai/samples/a2ui-reservations_dart](https://github.com/genkit-ai/samples/tree/main/a2ui-reservations_dart))
- Full-stack pure Dart & Flutter interactive reservation agent
- Shared component catalog between server (`genkit_a2ui`) and client (`genui`)
- Live two-way streaming and multi-turn action handling

- **Restaurant Finder** ([samples/agent/adk/restaurant_finder](../../../samples/agent/adk/restaurant_finder))
- Table reservation with dynamic forms
- Gemini-powered agent
Expand All @@ -193,7 +219,9 @@ Have you built something with A2UI? [Share it with the community!](community.md)
For more information, see the following resources:

- [Quickstart Guide](../quickstart.md) - Try the demo.
- [Agent Development](../guides/agent-development.md) - Build an agent.
- [Building A2UI Agents with Genkit](../guides/genkit.md) - Build an agent with Genkit (TypeScript, Go, Dart).
- [Building A2UI Agents with ADK](../guides/adk.md) - Build an agent with Google ADK (Python).
- [Building A2UI Agents with CopilotKit](../guides/copilotkit.md) - Full-stack apps with CopilotKit & AG-UI.
- [Client Setup](../guides/client-setup.md) - Integrate a renderer.
- [Community](community.md) - Join the community.

Expand Down
2 changes: 1 addition & 1 deletion docs/public/guides/a2ui_over_mcp.md
Original file line number Diff line number Diff line change
Expand Up @@ -490,7 +490,7 @@ selected_catalog = schema_manager.get_selected_catalog()
selected_catalog.validator.validate(a2ui_payload)
```

See the full [Agent Development Guide](agent-development.md) for details on schema management, dynamic catalogs, and streaming.
See the full [Building A2UI Agents with ADK](adk.md) guide for details on schema management, dynamic catalogs, and streaming.

## Next Steps

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Agent Development Guide
# Building A2UI Agents with ADK

Build AI agents that generate A2UI interfaces. This guide covers generating and streaming UI messages from LLMs.
Build AI agents that generate A2UI interfaces with Google's Agent Development Kit (ADK). This guide covers generating and streaming UI messages from LLMs.

## Quick Overview

Expand Down
4 changes: 3 additions & 1 deletion docs/public/guides/client-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -183,5 +183,7 @@ See `try...catch` blocks in `#sendMessage` in [samples/client/lit/shell/app.ts](
- **[Quickstart](../quickstart.md)**: Try the demo application
- **[Theming & Styling](theming.md)**: Customize the look and feel
- **[Defining Your Own Catalog](defining-your-own-catalog.md)**: Extend the component catalog
- **[Agent Development](agent-development.md)**: Build agents that generate A2UI
- **[Building A2UI Agents with Genkit](genkit.md)**: Build Genkit agents that generate A2UI
- **[Building A2UI Agents with ADK](adk.md)**: Build ADK agents that generate A2UI
- **[Building A2UI Agents with CopilotKit](copilotkit.md)**: Build CopilotKit apps that render A2UI
- **[Reference Documentation](../reference/messages.md)**: Deep dive into the protocol
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
# Use A2UI with Any Agent Framework & Harness
# Building A2UI Agents with CopilotKit

A2UI is a declarative UI format. [AG-UI](https://ag-ui.com/) is the transport
that carries A2UI messages between an agent and an app. Use this guide to add
A2UI to an AG-UI app or harness backed by ADK, LangGraph, Mastra, Strands,
CrewAI, Google Chat, Slack, or any other agent framework or service that
supports AG-UI.
A2UI is a declarative UI format. [AG-UI](https://ag-ui.com/) and [CopilotKit](https://www.copilotkit.ai/) provide the transport and runtime that carry A2UI messages between an agent and an app. Use this guide to add A2UI to an app or harness backed by ADK, LangGraph, Mastra, Strands, CrewAI, Google Chat, Slack, or any other agent framework or service that supports AG-UI.

<style>
.agui-demo-video {
Expand Down
3 changes: 2 additions & 1 deletion docs/public/guides/defining-your-own-catalog.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,5 @@ When defining and registering catalogs:

- **[Theming & Styling](theming.md)**: Customize the look and feel of components.
- **[Component Reference](../reference/components.md)**: Explore standard types that might be available for reuse.
- **[Agent Development](agent-development.md)**: Build agents that interact with your Catalog.
- **[Building A2UI Agents with Genkit](genkit.md)**: Build Genkit agents that interact with your Catalog.
- **[Building A2UI Agents with ADK](adk.md)**: Build ADK agents that interact with your Catalog.
Loading
Loading