Google A2UI 前端可操作性技术入门

快速开始：试用 A2UI

了解 A2UI 的最佳方式就是亲身体验。

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

以下是启动餐厅查找器的方法：

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

# 运行餐厅查找器 A2A 智能体
cd A2UI/samples/agent/adk/restaurant_finder
uv run .

# 运行使用 A2UI Lit 渲染库的 Lit 客户端
cd A2UI/samples/client/lit/shell
npm install
npm run dev

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

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

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

支持的集成

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

快速概览

构建 A2UI 智能体的步骤：

1. 理解用户意图 → 决定显示什么 UI
2. 生成 A2UI JSON → 使用 LLM 结构化输出或提示词
3. 验证与流式传输 → 检查 Schema，发送到客户端
4. 处理动作 → 响应用户交互

从简单智能体开始

我们将使用 ADK 构建一个简单的智能体。我们将从文本开始，最终升级为 A2UI。

详细步骤请参阅 ADK 快速入门。

pip install google-adk
adk create my_agent

然后编辑 my_agent/agent.py 文件，创建一个简单的餐厅推荐智能体。

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:
    """调用此工具获取餐厅列表。"""
     json.dumps([
        {
            : ,
            : ,
            : ,
            : ,
            : ,
            : 
        },
        {
            : ,
            : ,
            : ,
            : ,
            : ,
            : 
        },
        {
            : ,
            : ,
            : ,
            : ,
            : ,
            : 
        }
    ])

You are a helpful restaurant finding assistant. Your goal  to  users find  book restaurants using a rich UI. To achieve this, you MUST follow this logic:
 **For finding restaurants:**
a. You MUST call the `get_restaurants` tool. Extract the cuisine, location,  a specific number (`count`) of restaurants  the usegemini--flash