企业官网建设流程全解析

• 人工智能
• AI 应用
• AI Agent
• Agent 编排
• Agent 沙箱
• 工具调用
• 浏览器控制
• 本地部署

OpenBot 是一个开源 AI 同事（AI coworkers）项目：每个 Bot 都有自己的"电脑"——浏览器、文件与工具，所有动作先决策、后记录。本次升级中，OpenBot 生成的界面从 A2UI 0.9 切换到 A2UI 1.0：Bot 用 18 个基础组件搭建交互界面，并通过一套设计令牌（Design Tokens）自动继承 OpenBot 的品牌色、圆角和字体，浅色、深色两种主题一次搞定。本文带你快速看懂这次升级改了什么、令牌怎么映射、如何一键开关。

1️⃣ 什么是 A2UI 1.0 升级？

A2UI 是 CopilotKit 的生成式 UI 协议。升级后有三个关键点：

• 组件集不变，协议升级：仍然是同样 18 个基础组件（文本、图片、图标、行、列、卡片、按钮、输入框……），只是改由 A2UI 1.0 协议驱动；
• 旧界面不再回放：升级前 Bot 画的 A2UI 0.9 界面在重新打开对话时不再渲染，消息本身保留；新生成的界面一律走 A2UI 1.0；
• 自动跟随主题：组件直接读取 OpenBot 自己的颜色变量，切换.dark类时深浅色自动切换，无需为暗色模式单独写一套。

背景：OpenBot 目前运行在 CopilotKit 1.83 与 AG-UI 1.0.2 之上，详见 CHANGELOG.md。

2️⃣ 18 个基础组件清单

Bot 可用来"画界面"的组件在 app/src/lib/copilot/a2ui.ts 中一次性声明，一个不多、一个不少：

这个目录被命名为openbot/ui@1，它是从 CopilotKit 标准组件目录"裁剪"出来的：先保留 18 个 A2UI 基础组件，其余标准组件一律排除，直到管理员能审查并治理它们为止（测试见 app/tests/a2ui.test.tsx）。

界面里的按钮不是"死"的：点击会把它声明的动作名和已填写的取值回传给当前对话的 Bot，形成一个"Bot 生成界面 → 用户操作 → 结果回到对话"的闭环。

3️⃣ 品牌色与设计令牌是怎么继承的？

这是本次升级最实用的部分。OpenBot 的主题变量定义在 app/src/theme.css 中（浅色在:root，深色在.dark下，基于 oklch 色彩空间），例如--primary、--card、--border、--radius等。

A2UI 的每个组件只认自己的--a2ui-*变量。OpenBot 在 app/src/lib/copilot/a2ui.ts 里做了一个"转接层"，把 A2UI 变量指向 OpenBot 自己的变量：

这套机制有两个巧妙之处：

1. 一套变量管两套主题：因为var(--foreground)这类变量在.dark下自己会切换，所以 A2UI 界面不用写第二套暗色值，深浅色天然一致；
2. 状态色保持 SDK 原值：成功/危险色的着色、高光和阴影没有对应的 OpenBot 令牌，继续沿用 SDK 内置的浅色/深色值，避免"颜色打架"。

4️⃣ 一键开关：OPENBOT_GENERATIVE_UI

在服务器环境变量中即可整体控制生成式界面（文档见 docs/configuration.md）：

• 默认（未设置 /true/1）：开启。Bot 可以用这 18 个组件回答交互式界面；
• 设置为false或0：关闭。前端不再发送组件目录（app/src/lib/copilot/a2ui.ts 中的generativeUiProviderOptions会直接省略该配置），服务端（server/src/copilot.ts 的generativeUiMiddlewares）也会同步拒绝，并经由/api/capabilities把状态告知浏览器。

💡 提示：如果你的部署禁止浏览器访问 CDN（生成 HTML 可能从 CDN 加载库），可以考虑直接关闭该能力。

5️⃣ 基础组件 ≠ 画廊组件（Gallery）

容易混淆的一点：OpenBot 里还有另一套"画廊组件"，比如可排序数据表showTable、交互表单askForm以及 Playground 里自研编译的组件。它们走的是独立的、按 Bot 单独授权（per-Bot grant）的路径，管理员在 Admin → Playground 中发布后才可用。

本次 A2UI 1.0 升级只改变了基础组件的协议和主题继承，画廊组件及其授权机制完全不受影响。

6️⃣ 相关文件速查

7️⃣ 小结

• 升级后 Bot 生成的界面统一走A2UI 1.0，仍是熟悉的18 个基础组件；
• 通过一层--a2ui-* → var(--*)的令牌映射，组件自动继承品牌色、圆角、字体，深浅色主题零成本切换；
• 一个环境变量OPENBOT_GENERATIVE_UI即可在服务端和浏览器端同时开关；
• 画廊组件（showTable、askForm等）维持原有的管理员授权体系，不受影响。

理解了这套"组件目录 + 设计令牌"的设计，你就能明白为什么 Bot 生成的界面看起来永远和 OpenBot 本体"长得很像"——它们共用同一套颜色语言。🎨

• 人工智能
• AI 应用
• AI Agent
• Agent 编排
• Agent 沙箱
• 工具调用
• 浏览器控制
• 本地部署