a2ui README

The project's README from github.com/a2ui-project/a2ui. As one markdown file: README.md.

A2UI: Agent-to-User Interface

A2UI is an open-source project, complete with a format optimized for representing updatable agent-generated UIs and an initial set of renderers, that allows agents to generate or populate rich user interfaces.

Gallery of A2UI components

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

⚠️ Status: Early stage public preview

Note: A2UI's current production release is v0.9.1, a patch release in the stable v0.9 protocol family. The v1.0 specification is a release candidate, while v0.8 is legacy. The specification and 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

Generative AI excels at creating text and code, but agents can struggle to present rich, interactive interfaces to users, especially when those agents are remote or running across trust boundaries.

A2UI is an open standard and set of libraries that allows agents to "speak UI." Agents send a declarative JSON format describing the intent of the UI. The client application then renders this using its own native component library (Flutter, Angular, Lit, etc.).

This approach ensures that agent-generated UIs are safe like data, but expressive like code.

High-level philosophy

A2UI was designed to address the specific challenges of interoperable, cross-platform, generative or template-based UI responses from agents.

The project's core philosophies:

Use cases

Some of the use cases include:

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

Getting started

Pick the path that matches where you want to start:

Path What you get Time
🍜 Quickstart Restaurant Finder Demo 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 Scaffold an AG-UI app or harness for your framework of choice, then enable A2UI rendering over AG-UI. ~5 min
🎨 A2UI Composer Generate A2UI JSON from a visual editor and paste it into any agent prompt — no install required. ~1 min
🎬 A2UI Theater Step through pre-built A2UI streaming scenarios across Lit, React, and Angular renderers — no install required. ~1 min

Restaurant Finder demo — Summary

Prerequisites: Node.js 18+ (with Corepack enabled), uv, and a Gemini API key.

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

# Enable Corepack (macOS Homebrew users: see tip below)
corepack enable

yarn install
cd samples/client/lit
yarn demo:restaurant

[!TIP] macOS Homebrew Users: If you previously installed standalone package managers, unlink conflicts before installing Corepack so Corepack can manage versions per-project:

brew unlink yarn pnpm
brew install corepack
corepack enable

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.

Use A2UI with Any Agent Framework & Harness — Summary

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 to enable A2UI rendering. Some scaffold paths use CopilotKit's A2UI runtime with Next.js under the hood, but the setup surface is AG-UI-first.

Other renderers

For Flutter, check out the GenUI SDK, which uses A2UI under the hood. See docs/public/reference/renderers.md for the full list of client implementations.

Roadmap

We hope to work with the community on the following:

Contribute

A2UI is an Apache 2.0 licensed project. We believe the future of UI is agentic, and we want to work with you to help build it.

See CONTRIBUTING.md for details on how to get started.

a2ui (a2ui-project/a2ui)

Searching Database…

16.7K ·GitHub
Что это такое?A2UI — это открытый протокол и набор библиотек, которые позволяют ИИ-агентам отправлять декларативное описание интерфейса в формате JSON. Клиентские приложения отображают его с помощью собственных нативных компонентов (Flutter, Angular, Lit, React и др.), а не выполняют код, сгенерированный агентом.
Это фреймворк для интерфейсов или скорее протокол передачи данных?Это протокол и формат данных, а не фреймворк для отрисовки: агенты выдают плоский список компонентов в JSON со ссылками по ID, а клиент сопоставляет это абстрактное описание со своей библиотекой нативных виджетов.
Как мне это попробовать?Проще всего без установки — демо A2UI Composer или Theater. Для полноценного локального запуска попробуйте демо Quickstart Restaurant Finder: оно поднимает ADK-агента на базе Gemini с рендерером Lit. Также можно создать заготовку приложения AG-UI для своего фреймворка с помощью AG-UI CLI.
Что нужно установить, чтобы запустить демо Restaurant Finder?Node.js 18+ с включённым Corepack, uv и ключ Gemini API.
Насколько стабильна спецификация, чтобы на ней сейчас что-то строить?Нет — это ранняя публичная превью-версия протокола v0.9.1 (v0.8 устарела, v1.0 пока только релиз-кандидат), поэтому ожидаются несовместимые изменения.
Какие фреймворки уже умеют отображать A2UI?Официально уже поддерживаются веб (Lit/Angular/React через демо) и Flutter (через GenUI SDK); React, Jetpack Compose и SwiftUI — в планах.
Как A2UI делает безопасным отображение интерфейсов, сгенерированных агентом?Клиент ведёт каталог доверенных, заранее одобренных компонентов (например, Card, Button, TextField), и агент может запрашивать только компоненты из этого каталога, а не отправлять исполняемый код.
Может ли агент обновлять интерфейс прямо во время диалога, а не генерировать его заново?Да: интерфейс представляет собой плоский список компонентов со ссылками по ID. Такой список удобно генерировать для LLM по частям, и он позволяет постепенно и отзывчиво обновлять интерфейс по мере продолжения диалога.
Как A2UI работает с транспортными протоколами агентов, например A2A?Данные A2UI не привязаны к конкретному транспорту: они передаются по уже существующим протоколам связи агентов, таким как A2A Protocol и AG-UI, поэтому управлять ими может любая модель, которая умеет выводить JSON.
Что такое «Smart Wrapper» в A2UI?Это шаблон реестра, который позволяет разработчикам сопоставлять типы компонентов на стороне сервера с пользовательскими клиентскими реализациями, например нативными виджетами, компонентами React или iframe в песочнице, при этом политика безопасности остаётся в руках разработчика.
Size
191.3 MB
Stars
16.7K
Age
1y
Commits · 90 Days