█

AI/TLDR

Buy me a coffee
Buy me a coffee
ARTICLE ABOUT YOUR PRODUCT — $150

A2UI

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

GitHub★ 17.1kWebsitea2ui.org
Generative UI SDKsOpen source
Language
TypeScript
License
Apache-2.0
IN SHORT

What is A2UI?

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.

Markdown version ↗

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

A gallery of A2UI-rendered cards: a flight status, task card, coffee order with purchase buttons, track list, recipe card, email compose form, user profile and software purchase form.
A gallery of cards rendered from A2UI JSON, from a flight status to a purchase form.A2UI README ↗

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.

Sequence diagram of the A2UI data flow: the server streams surfaceUpdate and dataModelUpdate messages over SSE, the client renders native widgets, and user actions return to the server as A2A messages.
The end-to-end flow: streamed component and data updates in, user actions back out.A2UI docs ↗

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.

The A2UI Composer workspace with a Gemini chat asking for an EV charging dashboard, the rendered dashboard preview with a charge-limit slider, and the generated A2UI JSON in an editor.
A2UI Composer: prompt, live preview and the generated JSON in one workspace.A2UI Composer docs ↗

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.

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.

bashbash
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

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.

bashbash
npm install @a2ui/react @a2ui/web_core

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.

bashbash
flutter pub add a2ui_flutter a2ui_core

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.

bashbash
npx create-ag-ui-app@latest

Commands and code are distilled from the project's own documentation — always check the official repo for the 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

How A2UI compares

A2UI alongside other open-source generative ui sdks tools AI/TLDR tracks, ranked by GitHub stars.

ToolStarsWhat it does
CopilotKit★ 38.6kA frontend framework for adding in-app AI copilots and agent-driven generative UI to React and other apps, and the maker of the AG-UI protocol.
Vercel AI SDK★ 27.9kA TypeScript toolkit for building AI apps and agents that includes streaming helpers and generative-UI features for rendering model output as React components.
OpenUI★ 22.7kOpenUI lets you describe a UI in plain language, see it rendered live, ask for changes, and convert the result to React, Svelte, or Web Components.
json-render★ 19.6kVercel Labs' generative UI framework: you declare a catalog of allowed components, a model emits JSON constrained to it, and renderers for React, Vue, Svelte, Solid, React Native, PDF, email and whole Next.js or TanStack Start apps draw it.
AG-UI Protocol★ 17.1kAn open protocol that standardizes how AI agents stream events and UI to frontend applications, with SDKs across multiple languages and frameworks.
A2UI★ 17.1kAn open protocol for agents to send declarative UI that apps render with their own native components
OpenUI (Thesys)★ 15.1kAn open standard and runtime for generative UI that uses a compact streaming language to let models emit interactive charts, forms, tables, and cards.
assistant-ui★ 13.1kA TypeScript/React library of composable chat primitives for building AI chat apps that can render tool calls and JSON as interactive React components.