A2UI v0.9 + Ant Design X-Card:Generative UI 的协议层

影响力:A2UI v0.9 = Google 主导(2026 发布,Apache 2.0),CopilotKit 共建;Ant Design X-Card 是首个生产级渲染器;与 AG-UI 互补(AG-UI 管事件流,A2UI 管 UI 描述)。 干活密度:🔵 协议级 + 🟢 干活级 配套:MCP 协议、SKILL.md

🔥 影响力卡片

• 规范:https://a2ui.org/
• 当前版本:v0.9(2026 发布)
• 主导:Google;Apache 2.0;CopilotKit 与社区共建
• 关键采用:Ant Design X-Card(首个生产级渲染器)/ Google Gemini Generative UI / CopilotKit generative-ui 仓
• v0.9 新增:client-defined functions(本地校验)、client→server 数据同步(协同编辑)、统一错误处理、模块化 schema、Agent SDK

🎯 为什么必读

2024 是 “RSC + AI SDK streamUI” 的 generative UI 年;2025 末 AI SDK RSC 暂停,接棒方案是 AI Elements + JSON-Render(2026-03 Vercel)+ A2UI(Google)。

A2UI 解决一个核心问题:agent 怎么”说” UI,客户端怎么”渲染”它,且不执行任意代码。这是把 generative UI 从”产品技巧”变成”通用协议”的关键。

一句话总结

A2UI 让 agent 用声明式 JSON 描述 UI intent,客户端用自己 native widgets(React / Flutter / SwiftUI / Compose)渲染 —— 不执行任意代码,跨框架可移植。

💎 金句墙

★ “Agent says what UI it wants. Client renders with native widgets.” “Agent 说要什么 UI,客户端用原生组件渲染。” —— 译者点评:这是反”RSC streamUI”的设计。RSC streamUI 是把 React 组件直接 stream 到客户端,客户端必须是 React;A2UI 是把 UI intent stream 过去,React/Flutter/SwiftUI/Compose 都能渲染同一份 spec

★ “AG-UI streams events. A2UI describes UI.” “AG-UI 流转事件,A2UI 描述 UI。” —— 译者点评:两个协议互补关系的精确总结。AG-UI = agent ↔ user 的双向通信(input/output/tool calls/HITL);A2UI = agent → UI 的”长什么样”。一个项目可以同时用两者

📋 核心精读

1. A2UI 描述一个表单(JSON intent)

{
  "type": "form",
  "fields": [
    { "type": "text", "name": "email", "label": "Email", "required": true },
    { "type": "password", "name": "password", "label": "Password" },
    { "type": "submit", "label": "Sign In" }
  ],
  "actions": {
    "submit": { "type": "tool", "tool": "auth.signin" }
  }
}

🟢 译者点评:这就是 agent 输出的全部 —— 不是 React JSX,不是 HTML,是声明式 JSON。客户端用自己 design system 的 input/button 渲染。

2. Ant Design X-Card(2026-03-31 发布,首个生产级渲染器)

import { XCard } from '@ant-design/x';

// agent 通过 stream 推送 UI intent
const uiIntent = {
  type: 'form',
  fields: [/* ... */],
  actions: {/* ... */}
};

<XCard intent={uiIntent} onAction={handleAction} />

🟢 译者点评:Ant Design X 2.5.0(2026-03-31)的 X Card 是中文圈第一个生产 A2UI 渲染器;2.7.0(2026-04-30)加 XProvider zeroRuntime CSS-in-JS,把 generative UI 变成 zero-runtime 性能。

3. 与 AG-UI 协同(完整 agent UI stack)

// 上层:AG-UI 双向流(CopilotKit)
import { CopilotKit } from '@copilotkit/react-core';

// 下层:A2UI 渲染(Ant Design X-Card 或自定义)
import { XCard } from '@ant-design/x';

function App() {
  return (
    <CopilotKit url="/api/agent">
      <ChatInterface
        renderUI={(intent) => <XCard intent={intent} />}
      />
    </CopilotKit>
  );
}

🟢 译者点评:AG-UI 管”agent 在干什么”(events / tool calls / HITL),A2UI 管”agent 想给我什么 UI”。CopilotKit 把这两层接通成完整 stack。

4. v0.9 新增能力

🟢 译者点评:v0.9 让 A2UI 从 “demo 友好” 走到 “生产可用”。client-defined functions 是关键 —— 表单校验不能 100% 靠 LLM(贵 + 慢 + 不稳定),A2UI 允许把校验逻辑放客户端。

5. 与 RSC streamUI 路线对比

🟢 译者点评:A2UI 是跨框架最强的(Google 跨 Flutter/Compose/Web 的需求决定的);Vercel JSON-Render 在 React 体系内更顺手。两条路线短期共存。

6. 现有产品中的 generative UI

• ChatGPT Apps SDK(基于 MCP):首批合作 Booking.com / Canva / Coursera / Figma / Expedia / Spotify / Zillow
• Claude Artifacts:输出可嵌入 AI 能力,变动态应用
• Gemini Canvas:Workspace 集成,实时 HTML/React 预览
• Ant Design X-Card:A2UI 协议的中文圈代表实现

🟢 译者总评

1. 现在就关注:A2UI v0.9 是 spec 级的事件,不需要立即上手,但要在 generative UI 选型时把它列进决策矩阵
2. 如果你做中文产品 + 生成式 UI:Ant Design X 2.5+/2.7+ 是最快的路 —— 直接用 X Card 渲染 A2UI
3. 如果你做跨端(Web + Flutter + iOS):A2UI 是唯一协议,因为 native widgets 跨平台
4. 如果你只做 Next.js + React:短期用 AI Elements + JSON-Render(Vercel 系生态对接顺);A2UI 作为长期备选
5. 关键 caveat:v0.9 是 working draft,生产慎用,但不要等 v1.0 才开始想
6. 配套读:MCP 协议(协议层基础)+ llms.txt + Diátaxis(另一个协议化案例)

🔗 调研来源

• A2UI homepage
• A2UI v0.9 announcement (Google Developers)
• A2UI v0.9 What’s New (CopilotKit)
• Ant Design X
• Ant Design X Changelog
• CopilotKit/generative-ui examples
• AG-UI docs
• Vercel JSON-Render — InfoQ
• OpenAI Apps SDK announcement