企业官网建设流程全解析

【OpenClaw 从入门到精通】第 29 篇：A2UI — Agent to UI 协议

本系列定位：零基础入门，从安装配置到高级架构全覆盖。

本篇你将学到

• A2UI 工作原理
• 组件类型与交互
• 实战示例

一、A2UI 架构

Agent → A2UI 指令（JSON） → Canvas 引擎 → 渲染 UI ↓ 用户交互 → 回传给 Agent

Agent 通过canvas工具输出结构化指令，Canvas 引擎解析后渲染。用户在 Canvas 上的操作（点击、输入）可以回传给 Agent。

下面是 A2UI 架构的流程图：

二、组件类型

三、交互流程

3.1 单向展示

Agent → 渲染图表 → 用户查看

3.2 双向交互

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 收到数据并保存 → 渲染 "✅ 配置已保存"

本篇小结

下篇预告

第 30 篇：Canvas 实战场景

如果本篇内容对你有帮助，欢迎点赞收藏！有任何疑问，欢迎在评论区交流。