# A2UI

> An open protocol for agents to send declarative UI that apps render with their own native components

- Category: App UIs & Builders / Generative UI SDKs
- Language: TypeScript
- Licence: Apache-2.0
- Repository: https://github.com/a2ui-project/a2ui
- Website: https://a2ui.org/
- Canonical page: https://ai-tldr.dev/tools/a2ui/

## In short

A2UI is an open protocol for agents to send declarative UI that apps render with their own native components. The client application renders that description with its own native component library. It sits in the Generative UI SDKs category of the App UIs & Builders tools and is open-source, written in TypeScript and licensed Apache-2.0.

## Overview

A2UI (Agent-to-User Interface) is an open standard and set of libraries that lets AI agents "speak UI". Instead of answering with plain text or sending executable code, an agent sends a declarative JSON payload describing the intent of an interface: a booking form, a flight status card, an approval dashboard. The client application renders that description with its own native component library. The project describes the result as "safe like data, but expressive like code".

Security is the starting point. The client keeps a catalog of trusted, pre-approved components (Card, Button, TextField and so on), and the agent can only request components from that catalog, so an agent running remotely, from a third party or across a trust boundary never ships code into your app. The UI is a flat list of components with ID references, which is easy for an LLM to generate incrementally: the interface can render progressively while it streams, and the agent can patch it as the conversation moves on.

The same payload is framework-agnostic. The repository ships the specification plus renderers for React, Lit (web components) and Angular, an alpha Flutter renderer, Swift and SwiftUI libraries, and agent SDKs for Python and Dart that teach an LLM a catalog and parse its reply into A2UI messages. Messages travel over existing transports such as the A2A protocol and AG-UI. A2UI is Apache 2.0 licensed, created by Google with contributions from CopilotKit and the open-source community.

## What it does

- Declarative JSON format: agents describe components and a data model, never executable code
- Component catalogs: the client decides which components exist, and you can define your own catalog to match your design system
- Streaming, incrementally updatable UI built from a flat adjacency list that LLMs can generate piece by piece
- Renderers for React, Lit and Angular (stable), Flutter and Jetpack Compose (alpha), plus Swift/SwiftUI libraries
- Agent SDKs (Python `a2ui-agent-sdk`, Dart `a2ui_agent`) with adapters for the A2A protocol and Google's Agent Development Kit
- A2UI Composer: a browser-based visual editor with a Gemini assistant, live preview and JSON editor

## Getting started

You can try A2UI in the browser first, run the full-stack demo locally, or add a renderer to your own app.

1. Try it without installing anything

   Open the A2UI Composer at https://a2ui-project.github.io/composer/, describe an interface to its Gemini assistant (it needs a Gemini API key), and watch the rendered preview and the generated A2UI JSON side by side. You can paste the JSON into any agent prompt.

2. Run the Restaurant Finder demo

   The quickstart runs a Gemini-powered ADK agent with the Lit renderer. You need Node.js 18+ with Corepack enabled, uv, and a Gemini API key. The commands install the workspaces, build the renderers, start the Python agent and open the client at http://localhost:5173.

```bash
git clone https://github.com/a2ui-project/a2ui.git
cd a2ui
export GEMINI_API_KEY="your_gemini_api_key"

corepack enable
yarn install
cd samples/client/lit
yarn demo:restaurant
```

3. Add a renderer to your web app

   Install the renderer for your framework together with the shared @a2ui/web_core package. The React renderer provides a MessageProcessor class, an <A2UISurface> component and a useA2UI() hook; @a2ui/lit and @a2ui/angular install the same way.

```bash
npm install @a2ui/react @a2ui/web_core
```

4. Or render on Flutter

   a2ui_flutter renders A2UI surfaces as Flutter widgets and a2ui_core processes the messages and holds surface state. These packages replace the older genui package.

```bash
flutter pub add a2ui_flutter a2ui_core
```

5. Connect any agent framework

   To use A2UI with LangGraph, CrewAI, Mastra, ADK, Strands or another harness, scaffold an AG-UI app with its CLI and then enable A2UI rendering as described in the project's "Use A2UI with Any Agent Framework" guide.

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

## When to use it

- Let an agent build a bespoke form (date pickers, sliders, inputs) for the request in front of it, such as a specialized reservation
- Render a UI returned by a remote sub-agent, for example a travel-booking agent, inside your main chat window without trusting its code
- Generate approval dashboards or data visualizations on the fly in enterprise agent workflows
- Serve one agent to web, Flutter and native mobile clients from the same JSON payload