DOCSEARCHbyAlgolia
Submit Docs

A2UI (Agent-to-User Interface)

repository·main·Indexed 12 days ago

https://github.com/a2ui-project/a2ui

An open standard for Agent-to-User Interfaces providing a declarative JSON format for AI agents to generate rich, interactive, and secure UIs. It includes a Python Agent SDK with tools for schema management, response parsing, and support for various inference formats including direct_json, express, elemental, and the experimental S-expression-based Atom format.

Tokens
269.5K
Snippets
625
Records
1.1K
Agent score
94%

What's inside A2UI

  1. Overview of the A2UI Protocol v0.9

    main

    The A2UI (Agent-to-User Interface) Protocol is a JSON-based, streaming protocol designed to dynamically render user interfaces from a server (Agent) to a client (Renderer). It emphasizes a clean separation between UI structure and application data, allowing for progressive rendering as messages arrive.

    Core Message Types

    The server-to-client protocol consists of four primary message types:

    • createSurface: Initializes a new surface for rendering.
    • updateComponents: Adds or updates component definitions within a specific surface.
    • updateDataModel: Inserts or replaces data in a surface's data model.
    • deleteSurface: Removes a surface and its contents from the UI.

    Data Flow Model

    1. Create Surface: Server sends createSurface with a surfaceId.
    2. Update Surface: Server sends updateComponents to define the UI structure.
    3. Update Data Model: Server sends updateDataModel to populate components with data.
    4. Render: Client builds the UI using component definitions and the data model.
    5. Dynamic Updates: Server sends subsequent updateComponents or updateDataModel messages to reflect changes or user interactions.
    6. Delete: Server sends deleteSurface to clean up the UI.

  2. Overview of A2UI Core Library (a2ui_core)

    main

    The a2ui_core library is a framework-agnostic Python library designed for the A2UI protocol (v0.9 and onwards). It serves as the logic-neutral, visual-agnostic layer for Python-based server agents, rendering backends, and conformance testing frameworks.

    Key Capabilities

    • Protocol Handling: Processes and validates A2UI specification envelope messages including CreateSurface, UpdateComponents, UpdateDataModel, and DeleteSurface.
    • Reactive State Management: Uses a custom Signal implementation and hierarchical models (SurfaceGroupModel, SurfaceModel, and ComponentNode) to track state.
    • Data Binding: Provides a DataContext for advanced data binding, dynamic path resolution, and automatic dependency updates.
    • Catalog System: Supports ModelCatalog (compiled object models) and JsonCatalog (raw text-based schemas) for LLM prompt integration.
    • Validation: Combines Pydantic for compiled envelopes and JSON Schema Draft 2020-12 for dynamic catalogs, including topological checks like cyclic layout detection and reachability analysis.
    IMPORTANT

    This library strictly targets A2UI specification v0.9 and onwards. It does not support legacy v0.8 protocol definitions.

  3. Overview of the Restaurant Finder E2E Test

    main

    The end-to-end (e2e) test suite validates the integration between the following three components:

    1. Flutter restaurant finder client: The user-facing mobile/web interface.
    2. Python restaurant finder agent: The backend logic/agent handling requests.
    3. AI model: The underlying intelligence driving the agent.

    Note: These tests are maintained in a separate package and executed in a dedicated CI/CD pipeline because they require an active AI model API key to function.

  4. What is A2UI?

    main

    A2UI (Agent to UI) is a declarative UI protocol designed for agent-driven interfaces. Instead of agents sending raw HTML or JavaScript (which poses security risks and styling issues), they generate structured JSON messages that describe UI components.

    Clients (web, mobile, or desktop apps) receive these messages and render them using their own native components. This ensures that the UI is secure, follows the application's existing styling and accessibility standards, and remains portable across different platforms.

  5. Overview of the A2UI Python Agent SDK

    main
    The a2ui_agent Python SDK provides the implementation for agents to interact with the A2UI (Agent-to-User Interface) protocol. It includes tools for schema management, response parsing (including streaming and JSON healing), and integration with the Agent Development Kit (ADK) to allow agents to send UI components to clients via tool calls.

  6. What is A2UI (Agent-to-User Interface)?

    main

    A2UI is an open standard and set of libraries that allows AI agents to "speak UI" by sending a declarative JSON format describing the intent of a user interface.

    Instead of agents generating executable code (which poses security risks), they send a JSON payload describing a component tree. The client application (the renderer) then maps these abstract descriptions to its own native component library (e.g., Flutter, Angular, Lit, React, or SwiftUI).

    Core Benefits:

    • Security: The UI is declarative data, not executable code. Clients only render components from a pre-approved "catalog."
    • Incremental Updates: The format is a flat list of components with ID references, making it easy for LLMs to generate and update parts of the UI progressively.
    • Framework-Agnostic: The same JSON payload can be rendered across different platforms (Web, Mobile, etc.) by using different renderers.

  7. Overview of the A2UI Protocol v1.0

    main

    The A2UI (Agent-to-User Interface) Protocol is a JSON-based, streaming protocol designed to dynamically render user interfaces from an agent to a renderer. It separates UI structure from application data, allowing for progressive rendering.

    Communication is handled via a unidirectional stream of JSON messages from the agent to the renderer. The renderer consumes these messages to build or update the UI incrementally. User interactions (e.g., button clicks) are handled via a separate return channel (typically via the transport layer) to send actions back to the agent.

  8. Overview of the MCP Host Application Component

    main

    The MCP Host Application is an Angular-based container designed to host Model Context Protocol (MCP) Applications. Its primary role is to securely isolate and host untrusted third-party components (such as Micro-Apps or A2UI components) served by an MCP server.

    Key characteristics:

    • UI-Agnostic: The host contains no specific knowledge of A2UI or the application's internal UI logic; it only manages the infrastructure required for isolation.
    • Security-First: It uses a double-iframe proxy pattern to create a sandbox for untrusted components, preventing security leaks.
    • Communication Bridge: It acts as a passthrough for custom tools and layout messages between the isolated iframe and the MCP server/database.

  9. Core features of @a2ui/web_core

    main

    The @a2ui/web_core package provides the framework-agnostic foundation for A2UI renderers (like Angular, React, or Lit). Key capabilities include:

    • Protocol Handling: Processes and validates A2UI specification messages (v0.8 and v0_9).
    • State Management: Uses @preact/signals-core for reactive data models.
    • DataContext: Handles advanced data binding, dependency tracking, and automatic updates for expressions and functions.
    • Catalog System: An extensible registry for components and functions to enable reuse across different renderers.
    • Schema Validation: Uses Zod to validate protocol messages and component properties.

  10. Understand the A2UI v1.0 Protocol Specification

    main
    The A2UI (Agent-to-UI) v1.0 specification defines a transport-agnostic protocol for communication between agents and user interfaces. It covers the core wire-level protocol envelopes, the UI composition model, data binding rules, and execution boundaries. This version is currently a candidate for stability and is intended to be the foundation for various renderers.

  11. Use the A2UI Iterative Format Optimization Framework

    main

    The A2UI Iterative Format Optimization Framework provides tools to evaluate, benchmark, and optimize alternative A2UI inference formats (such as atom, express, and elemental) against baseline standards. It automates format testing, metric calculation, and history archiving.

    Key Capabilities

    • Format Validation: Tests parsing, compilation, and decompilation of custom inference format payloads.
    • Metric Extraction: Computes schema accuracy, model-graded quality pass rates, token usage, and latency.
    • Composite Scoring: Uses a formula ($S_{opt}$) to balance accuracy and token efficiency.
    • Run Archiving: Preserves logs, metrics, patch diffs, and hypotheses in a history/ directory.
    • Worktree Sync: Synchronizes archived runs from parallel git worktrees into a unified index.

  12. A2UI target audiences and use cases

    main

    A2UI serves three primary developer personas:

    1. Host App Developers (Frontend)

    Focus on building multi-agent platforms or enterprise assistants.

    2. Agent Developers (Backend/AI)

    Focus on building agents that generate UI components like forms and tables.

    • Key benefits: LLM-friendly flat structures, streamable progressive rendering, and portable responses that work across all A2UI clients.
    • Next steps: Follow Agent Development.

    3. Platform Builders (SDK Creators)

    Focus on building orchestration platforms or UI integrations.

    • Key benefits: Standard protocol interoperability (A2A) and extensibility through custom component catalogs.
    • Next steps: Check the Community or Roadmap.