Google AI 的前端可操作性 A2UI 代码操作

Get started: Try out A2UI

The best way to understand A2UI is to see it in action.

• Start by going to a2ui.org and reading the quickstart guide and documentation.
• Next go to the samples folder and try a client UI and some background sample agents, perhaps the restaurant finder.

Here’s how to launch the restaurant finder:

快速开始：试用A2UI
了解A2UI的最佳方式就是亲身体验。

首先访问a2ui.org，阅读快速入门指南和文档。
接着进入示例文件夹，尝试客户端界面和一些后台示例代理程序，比如餐厅查找器。
以下是启动餐厅查找器的方法：

git clone https://github.com/google/A2UI.git
export GEMINI_API_KEY="your_gemini_api_key"

# Run the restaurant finder A2A agent
cd A2UI/samples/agent/adk/restaurant_finder
uv run .

# Run the lit client that uses the A2UI lit renderer library
cd A2UI/samples/client/lit/shell
npm install
npm run dev

Another way to see A2UI in action is to try the GenUI SDK for Flutter.

The GenUI SDK for Flutter uses A2UI under the covers when talking to remote or server-side agents. It's easy to get started, visit https://docs.flutter.dev/ai/genui or watch the Getting started with GenUI video. In the GenUI SDK repo on GitHub, you can also find a client-server sample that uses A2UI.

CopilotKit has a public A2UI Widget Builder to try out as well.

另一种体验A2UI实际效果的方式是尝试Flutter版GenUI SDK。

Flutter版GenUI SDK在与远程或服务端智能体通信时，底层使用的正是A2UI技术。入门非常简单，请访问https://docs.flutter.dev/ai/genui 或观看《GenUI入门视频》。在GitHub的GenUI SDK代码库中，您还能找到使用A2UI的客户端-服务端示例项目。

CopilotKit平台也提供了公开的A2UI组件构建器供您试用。

Supported integrations

Here are a few key integrations that the project has today, and some that we hope the project supports in the future. We welcome community contributions in these areas.

支持的集成 以下是该项目目前已实现的若干关键集成，以及我们希望未来能支持的集成方向。我们诚挚欢迎社区在这些领域贡献力量。

Quick Overview¶

Building an A2UI agent:

1. Understand user intent → Decide what UI to show
2. Generate A2UI JSON → Use LLM structured output or prompts
3. Validate & stream → Check schema, send to client
4. Handle actions → Respond to user interactions

Start with a simple agent¶

We will use the ADK to build a simple agent. We will start with text and eventually upgrade it to A2UI.

See step-by-step instructions at the ADK quickstart.

pip install google-adk
adk create my_agent

Then edit the my_agent/agent.py file with a very simple agent for restaurant recommendations.

import json from google.adk.agents.llm_agent import Agent from google.adk.tools.tool_context import ToolContext def get_restaurants(tool_context: ToolContext) -> str: """Call this tool to get a list of restaurants.""" return json.dumps([ { "name": "Xi'an Famous Foods", "detail": "Spicy and savory hand-pulled noodles.", "imageUrl": "http://localhost:10002/static/shrimpchowmein.jpeg", "rating": "★★★★☆", "infoLink": "[More Info](https://www.xianfoods.com/)", "address": "81 St Marks Pl, New York, NY 10003" }, { "name": "Han Dynasty", "detail": "Authentic Szechuan cuisine.", "imageUrl": "http://localhost:10002/static/mapotofu.jpeg", "rating": "★★★★☆", "infoLink": "[More Info](https://www.handynasty.net/)", "address": "90 3rd Ave, New York, NY 10003" }, { "name": "RedFarm", "detail": "Modern Chinese with a farm-to-table approach.", "imageUrl": "http://localhost:10002/static/beefbroccoli.jpeg", "rating": "★★★★☆", "infoLink": "[More Info](https://www.redfarmnyc.com/)", "address": "529 Hudson St, New York, NY 10014" }, ])" You are a helpful restaurant finding assistant. Your goal is to help users find and book restaurants using a rich UI. To achieve this, you MUST follow this logic: 1. **For finding restaurants:** a. You MUST call the `get_restaurants` tool. Extract the cuisine, location, and a specific number (`count`) of restaurants from the user's query (e.g., for "top 5 chinese places", count is 5). b. After receiving the data, you MUST follow the instructions precisely to generate the final a2ui UI JSON, using the appropriate UI example from the `prompt_builder.py` based on the number of restaurants.""" root_agent = Agent( model='gemini-2.5-flash', name="restaurant_agent", description="An agent that finds restaurants and helps book tables.", instruction=AGENT_INSTRUCTION, tools=[get_restaurants], )

开发文档阅读 https://a2ui.org/guides/agent-development/

集合仓库 https://a2ui-composer.ag-ui.com/gallery

https://a2ui.org/

https://github.com/google/A2UI