FEATURED · 精选文章

A2UI 面向谁:Host 应用开发者、Agent 开发者与平台构建者的适配指南

发布时间 / 2026/9/14 18:47:18
来源 / 创域科博编辑部
栏目 / 资讯中心
A2UI 面向谁:Host 应用开发者、Agent 开发者与平台构建者的适配指南 A2UI 面向谁Host 应用开发者、Agent 开发者与平台构建者的适配指南【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2uiA2UIAgent to UI是一个声明式的 UI 协议让 AI Agent 生成的界面能够在 Web、移动端、桌面端原生渲染而无需执行任何代码。本文基于仓库 who-is-it-for.md 展开系统梳理 A2UI 的三类目标用户Host 应用开发者、Agent 开发者、平台构建者并给出各自的价值主张、适用场景、不适用场景与上手路径帮助你判断「我是否应该使用 A2UI以及该以什么身份接入」。一句话认识 A2UIA2UI 是为构建带丰富交互 UI 的 AI Agent 的开发者而设计的协议。在 what-is-a2ui.md 中A2UI 被定义为A2UI (Agent to UI) is a declarative UI protocol for agent-driven interfaces. AI agents generate rich, interactive UIs that render natively across platforms (web, mobile, desktop) without executing arbitrary code.它的核心是让 Agent 以JSON 消息流的形式描述界面组件、数据结构、交互动作由客户端用自己的原生组件树渲染。安全上Agent 只发送声明式数据、不执行代码体验上渲染出的界面继承宿主应用的设计系统而不是视觉割裂的 iframe。整个协议围绕三个核心思想展开见 concepts/overview.md流式消息UI 更新以 JSON 消息序列从 Agent 流向客户端声明式组件界面以数据描述而非以代码编程数据绑定UI 结构与应用状态分离实现响应式更新。三类目标用户A2UI 的定位并不是所有开发者而是三个具体角色。理解自己属于哪一类是决定如何接入 A2UI 的第一步。1. Host 应用开发者前端构建宿主应用让 Agent 生成 UI典型画像你在构建多 Agent 平台、企业级助手或跨平台应用——这些应用的界面由 Agent 动态生成。为什么选择 A2UI关注点A2UI 的答案品牌控制客户端拥有样式与设计系统的主导权Agent 只能通过语义提示如usageHint影响渲染多 Agent 支持支持本地、远程与第三方 Agent 同时向同一应用提供 UI安全性声明式数据、无代码执行Agent 只能请求客户端可信目录Catalog中的组件跨平台同一协议覆盖 Web、移动端、桌面端可互操作开源协议同一规格被多个渲染器实现对于 Host 应用开发者关键认知是你不需要让 Agent 拥有直接操纵 DOM 或原生视图的能力。Agent 发送的是组件蓝图blueprint而客户端控制样式、主题以及组件如何配置和渲染。这在 agent-ui-ecosystem.md 中被明确为 A2UI 与 MCP Apps 的本质差异——后者由远程服务器通过ui://URI 提供预构建 HTML 并控制全部外观而 A2UI 由宿主应用掌控。上手路径Client Setup客户端接入指南选择渲染器并集成进应用Theming主题与样式定制组件外观以匹配品牌Defining Your Own Catalog自定义组件目录让 Agent 只能使用你应用里的真实组件与视觉语言。仓库中的可运行参考实现分布在 samples/client 目录下提供 Lit、Angular、React、Flutter 四种 shell 客户端以及 renderers 下的各渲染器源码。特别值得一提的是所有 Web 渲染器Lit/Angular/React共享同一个基础库a2ui/web_core位于 renderers/web_core负责消息处理、状态管理与数据绑定只有组件渲染层因框架而异——这意味着跨框架的协议处理行为是一致的。2. Agent 开发者后端/AI构建生成 UI 的 Agent典型画像你在开发能够生成表单、仪表盘与交互式工作流的 Agent通常基于 LLM 框架如 ADK、AG2。为什么选择 A2UI关注点A2UI 的答案LLM 友好扁平的组件结构 ID 引用易于增量生成、纠错与流式输出丰富交互超越纯文本表单、表格、可视化等原生组件生成而非工具UI 是 Agent 生成输出的一部分而不是一个个工具调用可移植一份 Agent 响应在所有的 A2UI 客户端上都能渲染可流式支持边生成边渐进渲染Agent 开发者的核心工作流在 agent-development.md 中被概括为四步理解用户意图→ 决定展示什么 UI生成 A2UI JSON→ 使用 LLM 结构化输出或提示词校验并流式发送→ 检查 schema、发送给客户端处理动作→ 响应用户交互。仓库提供了现成的 Python Agent SDKagent_sdks/python/a2ui_agent其中的A2uiSchemaManager可以自动生成包含 A2UI schema 与组件目录示例的系统提示词配合BasicCatalog即可让 LLM 稳定输出符合协议的 JSON。参考实现可直接查看 samples/agent/adk/restaurant_finderADK 编写的餐厅预订 Agent含动态表单、时间选择与确认流程。上手路径Agent DevelopmentAgent 开发指南。3. 平台构建者SDK 创作者搭建编排平台、框架或 UI 集成典型画像你在构建 Agent 编排平台、框架或需要把远程 Agent 集成进自家生态。两个自测问题你是否要把远程 Agent带入你的应用你是否要把你的 Agent投放到其他你不完全控制的应用中为什么选择 A2UI关注点A2UI 的答案标准协议可与 A2A 及其他传输协议互操作见 transports.md可扩展支持自定义组件目录Catalog开源Apache 2.0 协议见仓库根目录 LICENSE从仓库的 roadmap.md 可以看到A2UI 的传输层已覆盖 A2A、AG-UI、REST、WebSockets、MCP 五种Agent 框架集成则涵盖 AG2A2UIAgent参考实现、ADK 等说明它确实是按标准协议 生态集成的路线在发展。对平台构建者而言A2UI 的价值在于把Agent 生成的界面变成可跨信任边界交换的标准载荷。上手路径Community社区 与 Roadmap路线图。何时使用 A2UI适用场景与反模式推荐使用的场景Agent 生成的 UI这是 A2UI 的核心目的——让 Agent 动态生成界面多 Agent 系统标准协议跨越信任边界远程 Agent 也能向宿主提供 UI跨平台应用一份 Agent 响应、多个渲染器Web/移动端/桌面端安全敏感场景声明式数据、无代码执行规避 iframe 与任意脚本风险品牌一致性客户端掌控样式Agent 生成的 UI 天然融入宿主设计系统。明确不适用的情况A2UI 的定位非常克制以下场景应选择其他技术静态网站直接用 HTML/CSS纯文本聊天用 Markdown 即可A2UI 的组件树属于过度设计未与客户端集成的远程小部件使用 iframe例如 MCP Apps详见 agent-ui-ecosystem.mdUI 与 Agent 需要紧耦合快速共建的应用使用 AG-UI / CopilotKit 这类高带宽前后端直连方案。同时what-is-a2ui.md 还明确了 A2UI 的边界它不是框架是协议、不是 HTML 的替代品服务于 Agent 生成 UI而非静态站点、不是完整的样式系统客户端控制样式仅提供有限的服务器端样式支持、也不局限于 Web同时支持移动端与桌面端。横向对比A2UI vs MCP Apps vs AG-UIagent-ui-ecosystem.md 给出了 Agent 化 UI 领域三类主流方案的对比这是判断你该不该用 A2UI时最直接的决策依据维度A2UIMCP AppsAG-UI思路声明式组件蓝图通过ui://URI 提供预构建 HTML连接后端与前端的高带宽协议渲染原生组件Angular、Flutter、Lit 等沙箱化 iframe开发者自定义任意框架样式宿主应用控制继承设计系统隔离远程服务器控制外观开发者控制属于宿主应用的一部分安全声明式数据、无代码执行沙箱 iframe 隔离应用内可信代码多 Agent✅ 跨信任边界✅ 多个 MCP 服务器⚠️ 主要是单 Agent跨平台✅ Web、移动、桌面、原生⚠️ 偏 Webiframe✅ 协议与框架无关LLM 生成✅ 专为流式输出设计❌ 由服务器预构建✅ 通过 A2UI 集成需要强调的是这三者互补而非竞争AG-UI 可以作为传输管道、A2UI 作为内容载荷use AG-UI as the pipe, A2UI as the contentA2UI 消息可以通过 A2A 协议在多 Agent 系统中传输而 MCP 桥接方案让 MCP 服务器在提供 HTML 资源的同时也能提供 A2UI 蓝图。对于正在搭建 Agent 平台的读者推荐阅读 concepts/transports.md 了解各传输层状态。一个典型请求的完整旅程为了帮助你具象化三类用户各自负责什么这里用一个餐厅预订请求展示 A2UI 消息的完整流程来自 quickstart.md 的交互时序用户在应用中交互发送消息、点击按钮A2A Agent接收请求并把对话发给 LLMGemini 生成 A2UI JSON 消息描述界面A2A Agent把消息流式传回应用A2UI 渲染器宿主应用的一部分将消息转换为 UI 组件应用 UI 更新。对应的 v0.9 消息序列如下Agent 开发者产出Host 应用开发者消费{ version: v0.9.1, createSurface: { surfaceId: main, catalogId: https://a2ui.org/specification/v0_9_1/catalogs/basic/catalog.json }}{ version: v0.9.1, updateComponents: { surfaceId: main, components: [ {id: header, component: Text, text: # Book Your Table, variant: h1}, {id: date-picker, component: DateTimeInput, label: Select Date, value: {path: /reservation/date}, enableDate: true}, {id: submit-text, component: Text, text: Confirm Reservation}, {id: submit-btn, component: Button, child: submit-text, variant: primary, action: {event: {name: confirm_booking}}} ] }}{ version: v0.9.1, updateDataModel: { surfaceId: main, path: /reservation, value: {date: 2025-12-15, time: 19:00, guests: 2} }}注意这里的消息类型——createSurface、updateComponents、updateDataModel、deleteSurface是 v0.9 的核心消息完整对比见 concepts/overview.mdv1.0 候选版还引入了actionResponse以支持客户端到服务器的同步 RPC。整个过程只有 JSON无代码执行——这正是 A2UI 安全模型的根基。按角色推荐的上手路线Host 应用开发者前端阅读 Client Setup 选择渲染器React、Lit、Angular 均稳定支持 v0.8 与 v0.9Flutter GenUI SDK 跨平台稳定参考 samples/client 下的 Lit / Angular / React / Flutter shell用 Theming 定制品牌外观——Web 端通过覆盖 CSS 变量即可例如在:root中设置--a2ui-color-primary: #ff5722;当 Basic Catalog 无法满足设计系统时按 Defining Your Own Catalog 定义专属组件目录并通过supportedCatalogIds向 Agent 通告支持范围。Agent 开发者后端/AI阅读 Agent Development从 ADK 快速开始pip install google-adk或uv run adk create my_agent使用 Python Agent SDK 的A2uiSchemaManager生成带 schema 与示例的系统提示词参考 samples/agent/adk/restaurant_finder 与 agent_sdks/python/a2ui_agent 的实现记住Agent 的输出是文本 A2UI JSON 消息列表需要在发送前用 JSON Schema 校验。平台构建者SDK 创作者阅读 transports.md 与 agents.md理解 A2A 中的三种 Agent 模式面向用户的独立 Agent、承载远程 Agent 的宿主 Agent、远程 Agent关注 roadmap.md 的协议版本v0.9.1 为当前稳定版v1.0 为候选版与渲染器矩阵参考 ecosystem/a2ui-in-the-world.md 中 AG2A2UIAgent、Flutter GenUI 等生态集成模式加入 Community 获取最新生态动态。常见误区澄清A2UI 需要客户端执行 Agent 代码吗不需要。客户端只处理声明式 JSON 与可信目录中的组件无代码执行风险这是它被用于安全敏感场景的根本原因A2UI 只能用于 Web 吗不是。协议与框架无关Flutter、SwiftUI规划中、Jetpack Compose规划中等移动/桌面端均在支持范围内A2UI 是完整的 UI 框架吗不是。它是协议组件渲染与样式由宿主应用及其渲染器负责使用 A2UI 需要绑定某个 LLM 吗不需要。任何能以结构化输出生成 JSON 的 LLMGemini、GPT、Claude 等都可以作为消息生成方。小结判断你是否适合 A2UI本质上是回答两个问题你的界面是否需要由 Agent 动态生成以及你是否希望客户端而非远程服务器掌控样式与安全两个答案都是是那么无论你处于 Host 应用开发者、Agent 开发者还是平台构建者的角色A2UI 都提供了一条跨平台、跨信任边界的标准化路径——协议细节可进一步阅读 What is A2UI 与 Agent UI Ecosystem 对比动手实践则从 Quickstart5 分钟快速开始 出发。【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED — 相关阅读

相关资讯

LATEST — 最新资讯

最新发布

TODAY — 本日精选

新闻

WEEKLY — 本周精选

新闻

MONTHLY — 本月精选

新闻