SuperAPI AI Directory
Partner with us中文AI newsFavorites
DirectoryNews and tutorials

A2UI - Google's Open-Source Declarative Protocol for Agent-Generated User Interfaces

Author: AI小集 · Original source: AI工具集

What Is A2UI

A2UI (Agent-to-User Interface) is an open-source Agent-based interface protocol from Google, used for interaction between AI and user interfaces. Through AI-generated JSON descriptions, A2UI enables clients to natively render interactive interfaces without the AI writing frontend code. A2UI supports multiple frameworks (such as Flutter, Angular, Lit, etc.), emphasizes security and consistent styling, and is suited for efficient collaboration on complex tasks. A2UI comes with a rich component library and supports customization, enabling AI to use GUIs to communicate with users as naturally as using natural language, driving a transformation in AI interaction methods.

A2UI

Main Features of A2UI

  • Dynamic Generation of User Interfaces: AI can dynamically generate graphical user interfaces (GUIs) based on task requirements, such as forms, date pickers, buttons, etc., optimizing the interaction experience for complex tasks.
  • Secure Client-Side Rendering: Through native client-side rendering, it avoids code injection risks, ensuring UI security while guaranteeing consistent styling across multiple platforms (mobile, web, desktop).
  • Declarative JSON Description: AI only needs to output JSON data describing UI intent, without writing frontend code, reducing development difficulty and improving development efficiency.
  • Rich Component Library: Comes with a Widget Gallery, containing a large number of commonly used UI components, supporting direct use or secondary customization, making it convenient for developers to quickly build interfaces.
  • Framework Agnosticism: Separates UI structure from implementation, supports multiple frontend frameworks (such as Flutter, Angular, Lit, etc.), improving project portability.
  • Incremental Update Capability: The UI is represented as a flat component list and supports incremental updates, making it easy for AI to progressively refine the interface during a conversation.
  • Flexible Extensibility: Supports developers in connecting existing UI components with A2UI's data binding and event system by registering "smart wrappers," achieving a high degree of customization.

How to Use A2UI

  • Environment Preparation: Ensure that Node.js (version ≥18) and a Python environment are installed. Prepare a valid Gemini API key for accessing the AI model.
  • Get the Project: Clone the A2UI project from GitHub to your local machine,git clone https://github.com/google/a2ui.git
  • Set the API Key: In the project directory, set the Gemini API key,export GEMINI_API_KEY="your_gemini_api_key_here"
  • Run the Example: Enter the example directory and run the frontend client:
cd a2ui/samples/client/lit/shell
npm install
npm run dev
    • Open a browser and visithttp://localhost:5173, and you can see the A2UI web application.
  • Try the Features: In the web application, enter prompts such as "book a table for two" or "find nearby Italian restaurants" and observe how AI dynamically generates user interfaces based on the requirements.

A2UI Project Address

  • Project Official Website：https://a2ui.org/
  • GitHub Repository：https://github.com/google/a2ui

A2UI Application Scenarios

  • Intelligent Customer Service: AI dynamically generates forms or interactive interfaces based on user questions, such as entering an order number, selecting a question type, etc., to quickly identify the problem and provide a solution.
  • Online Booking: Such as restaurant, hotel, flight bookings, etc., AI dynamically generates forms containing date pickers, number-of-people input boxes, etc., allowing users to quickly complete bookings.
  • E-commerce Shopping: AI generates product filtering and purchase process interfaces based on user needs, enhancing the shopping experience.
  • Personalized Learning: AI dynamically generates practice questions, test interfaces, or learning resource recommendation interfaces based on students' learning progress, providing a personalized learning experience.
  • Game Interaction: AI dynamically generates task interfaces, item selection interfaces, etc. based on game progress, enhancing the interactivity and fun of the game.