【OpenClaw 从入门到精通】第 29 篇A2UI — Agent to UI 协议本系列定位零基础入门从安装配置到高级架构全覆盖。本篇你将学到A2UI 工作原理组件类型与交互实战示例一、A2UI 架构Agent → A2UI 指令JSON → Canvas 引擎 → 渲染 UI ↓ 用户交互 → 回传给 AgentAgent 通过canvas工具输出结构化指令Canvas 引擎解析后渲染。用户在 Canvas 上的操作点击、输入可以回传给 Agent。下面是 A2UI 架构的流程图canvas 工具用户交互AgentA2UI 指令 (JSON)Canvas 引擎渲染 UI回传给 Agent二、组件类型组件说明示例text文本块报告、说明chart图表折线/柱状/饼图table表格数据列表form表单输入框/选择器button按钮操作触发gauge仪表盘CPU/Memory 指标image图片截图/生成图dashboard组合面板多组件布局三、交互流程3.1 单向展示Agent → 渲染图表 → 用户查看3.2 双向交互Agent → 渲染表单 → 用户填写 → 提交 → Agent 处理 → 渲染结果下面是交互流程的对比图双向交互Agent渲染表单用户填写提交Agent 处理渲染结果单向展示Agent渲染图表用户查看四、实战示例你帮我做一个服务器配置表单 Agent canvas: render { type: form, title: 服务器配置, fields: [ { name: host, label: 主机地址, type: text, value: localhost }, { name: port, label: 端口, type: number, value: 8080 }, { name: ssl, label: 启用 SSL, type: toggle, value: false } ], actions: [ { label: 保存, type: submit }, { label: 重置, type: reset } ] } → 用户在 Canvas 中填写表单 → 点击保存 → Agent 收到数据并保存 → 渲染 ✅ 配置已保存本篇小结知识点核心内容A2UIAgent 通过结构化指令驱动 UI组件类型text/chart/table/form/button/gauge/image/dashboard交互模式单向展示 / 双向交互Canvas 引擎解析 A2UI 指令并渲染下篇预告第 30 篇Canvas 实战场景如果本篇内容对你有帮助欢迎点赞收藏有任何疑问欢迎在评论区交流。