A2UI协议：让AI把UI说出来

用户："我想订个桌子"
AI："什么时间？"
用户："明天晚上"
AI："几点？"
用户："7点"
AI："几个人？"
...

{
  "surfaceUpdate": {
    "surfaceId": "booking",
    "components": [
      {"id": "title", "component": {"Text": {"text": {"literalString": "预订餐桌"}, "usageHint": "h1"}}},
      {"id": "datetime", "component": {"DateTimeInput": {"value": {"path": "/booking/date"}, "enableDate": true}}},
      {"id": "submit-btn", "component": {"Button": {"action": {"name": "confirm_booking"}}}}
    ]
  }
}

git clone https://github.com/copilotkit/with-a2a-a2ui.git
echo "GEMINI_API_KEY=your_api_key_here" > .env
pnpm install
pnpm dev

RESTAURANT_UI_EXAMPLES = """
{
  "surfaceUpdate": {
    "surfaceId": "default",
    "components": [
      {"id": "root-column", "component": {"Column": {"children": {"explicitList": ["title-heading", "item-list"]}}}},
      {"id": "title-heading", "component": {"Text": {"usageHint": "h1", "text": {"literalString": "Top Restaurants"}}}},
      {"id": "item-list", "component": {"List": {"direction": "vertical", "children": {"template": {"componentId": "item-card-template", "dataBinding": "/items"}}}}},
      {"id": "item-card-template", "component": {"Card": {"child": "card-layout"}}},
      {"id": "template-book-button", "component": {"Button": {"child": "book-now-text", "primary": true, "action": {"name": "book_restaurant", "context": [{"key": "restaurantName", "value": {"path": "name"}}]}}}}
    ]
  }
}
"""

def get_ui_prompt(base_url: str, examples: str) -> str:
    return f"""
    You are a helpful restaurant finding assistant. Your final output MUST be a A2UI UI JSON response.
    
    To generate the response, you MUST follow these rules:
    1. Your response MUST be in two parts, separated by the delimiter: `---a2ui_JSON---`.
    2. The first part is your conversational text response.
    3. The second part is a single, raw JSON object that is a list of A2UI messages.
    
    {examples}
    """

class RestaurantAgent:
    def __init__(self, base_url: str, use_ui: bool = False):
        self.base_url = base_url
        self.use_ui = use_ui
        self._agent = self._build_agent(use_ui)
        
    def _build_agent(self, use_ui: bool) -> LlmAgent:
        if use_ui:
            instruction = AGENT_INSTRUCTION + get_ui_prompt(self.base_url, RESTAURANT_UI_EXAMPLES)
        else:
            instruction = get_text_prompt()
            
        return LlmAgent(
            model=LiteLlm(model="gemini/gemini-2.5-flash"),
            name="restaurant_agent",
            description="An agent that finds restaurants and helps book tables.",
            instruction=instruction,
            tools=[get_restaurants],
        )

# 在 AgentExecutor 中处理 UI 事件
if ui_event_part:
    action = ui_event_part.get("actionName")
    ctx = ui_event_part.get("context", {})
    
    if action == "book_restaurant":
        restaurant_name = ctx.get("restaurantName", "Unknown Restaurant")
        address = ctx.get("address", "Address not provided")
        # 转换为智能体理解的查询
        query = f"USER_WANTS_TO_BOOK: {restaurant_name}, Address: {address}"
    
    elif action == "submit_booking":
        # 处理预订表单提交
        restaurant_name = ctx.get("restaurantName", "Unknown Restaurant")
        party_size = ctx.get("partySize", "Unknown Size")
        reservation_time = ctx.get("reservationTime", "Unknown Time")
        query = f"User submitted a booking for {restaurant_name} for {party_size} people at {reservation_time}"

// 创建 A2UI 消息渲染器
import { createA2UIMessageRenderer } from "@copilotkitnext/a2ui-renderer";
const A2UIMessageRenderer = createA2UIMessageRenderer({ theme });

// 配置 CopilotKit 提供者
<CopilotKitProvider
  runtimeUrl="/api/copilotkit"
  renderActivityMessages={[A2UIMessageRenderer]}
>
  <CopilotChat style={{ flex: 1, minHeight: "100%" }} />
</CopilotKitProvider>

import { CopilotRuntime, createCopilotEndpoint, InMemoryAgentRunner } from"@copilotkitnext/runtime";
import { A2AAgent } from"@ag-ui/a2a";
import { A2AClient } from"@a2a-js/sdk/client";

// 创建 A2A 客户端连接到智能体服务器
const a2aClient = new A2AClient("http://localhost:10002");
const agent = new A2AAgent({ a2aClient, debug: true });

// 创建 CopilotKit 运行时
const runtime = new CopilotRuntime({
agents: { default: agent },
runner: new InMemoryAgentRunner(),
});

// 创建 HTTP 端点
const app = createCopilotEndpoint({
  runtime,
basePath: "/api/copilotkit",
});

exportconst GET = handle(app);
exportconst POST = handle(app);