第 17 章 WebChat 和控制面板

当你的 AI 助理能"看见"画面、"展示"网页，才是真正的智能助手。

朋友们好呀，我是当当老师 🐾！前面我们一直是用终端（黑窗口）或者聊天软件跟 OpenClaw 交流。但 OpenClaw 可不是只能打字聊天——它自带了一整套视觉界面！

这一章我们来看看 OpenClaw 的"面子工程"：WebChat 网页聊天、Control Dashboard 控制面板、Canvas 画布，还有文件上传。

---

17.1 WebChat 是什么

WebChat 就是 OpenClaw 自带的网页版聊天界面。你在浏览器里打开它，就能像用 ChatGPT 网页版一样跟你的 AI 助理聊天。

什么时候用 WebChat？

• 你在电脑前，不想开终端
• 需要跟 AI 聊复杂的问题，看思考过程
• 想上传文件给 AI 处理
• 需要切换模型、查看会话历史

WebChat 控制面板

17.2 打开 WebChat

启动 OpenClaw 后，默认情况 WebChat 就在 http://127.0.0.1:18789/。

步骤：

1. 确保 OpenClaw 已经启动
2. 打开浏览器（Chrome、Edge、Safari 都行）
3. 地址栏输入：http://127.0.0.1:18789/
4. 如果是第一次打开，会让你设置一个 Gateway Token（网关令牌）

[截图：浏览器地址栏输入 http://127.0.0.1:18789 的画面]

输入令牌后，你就进入了 WebChat 主界面。这个界面分几个区域：

• 左侧：会话列表，显示所有历史聊天
• 中间：聊天主区域，显示对话内容
• 底部：输入框，在这里打字跟 AI 说话
• 右上角：设置按钮，可以切换模型、查看配置

[截图：WebChat 主界面，标注各区域功能]

17.3 WebChat 的基本使用

发送消息

在底部输入框打字，按回车发送。就这么简单！

你：今天天气怎么样？
AI：让我查一下你所在位置的天气……

看 AI 的思考过程

OpenClaw 的一大特色是透明——AI 在想什么、调用了什么工具，你都能看到。

在聊天界面，AI 的回答上方会有一个小区域，显示：

• 🤔 Thinking：AI 的思考过程
• 🔧 Tool Calls：AI 调用了哪些工具（比如查天气、读文件）
• 📊 Token 统计：这次对话用了多少 token

[截图：显示 Thinking 和 Tool Calls 的过程]

你可以点开这些信息，看 AI 是怎么推理的。这比黑盒的 ChatGPT 有意思多了！

切换模型

如果你配置了多个模型（比如 GPT-4、Claude、DeepSeek），可以随时切换：

1. 点右上角的模型名称（或齿轮图标）
2. 从下拉列表里选一个模型
3. 新消息就会用新模型回答

[截图：切换模型的下拉菜单]

17.4 Control Dashboard 控制面板

WebChat 不光是聊天界面。它还包含了完整的控制面板。点击左上角的菜单按钮（三条横线），你会看到几个页面：

Chat 页面（默认）

就是聊天界面。显示完整的对话历史，支持 Markdown、代码块、图片显示。

Sessions 页面

管理所有活跃和历史的会话：

• 查看每个会话的对话记录
• 切换不同会话
• 重置、删除或导出会话
• 重命名会话方便查找

小技巧：把重要对话重命名，比如"2025年项目需求分析"，以后好找。

Config 页面

在线编辑配置文件的地方！这是个大亮点：

• 图形界面修改：不用记命令，点点鼠标就能改配置
• 实时校验：改错了它会提示你，不会搞崩
• 热加载：改完不用重启，即时生效
• 导出配置：可以把自己的配置打包带走

[截图：Config 页面的在线编辑器]

Nodes 页面

管理所有连接到 OpenClaw 的设备节点（手机、平板等）。我们第 18 章会详细讲。

Logs 页面

查看 OpenClaw 运行日志。排错的时候特别有用。

Skills 页面

安装、管理、卸载技能（Skill）。从 ClawHub 搜索安装新技能也在这里。

17.5 Canvas 画布

Canvas（画布）是 OpenClaw 最酷的功能之一。它不是聊天——而是 AI 给你"画"出来的交互界面。

Canvas 能做什么？

AI 可以在 Canvas 上展示：

• 📊 图表和仪表盘：比如 "给我画一个这周的 CPU 使用率图表"
• 🖥️ 交互界面：比如 "帮我做一个简单的待办事项应用"
• 📈 实时数据：比如 "展示我的服务器实时状态"
• 🎨 HTML 页面：AI 可以直接在画布里渲染 HTML

怎么用 Canvas？

方式一：直接在聊天里要求 AI 用 Canvas

你：给我画一个本周的 GitHub commit 统计图表
AI：好的，我来用 Canvas 展示……

方式二：用 /canvas 命令

/canvas 帮我做一个番茄钟计时器

AI 会在 Canvas 上创建一个小应用，你甚至可以直接跟它交互！

[截图：Canvas 上显示的一个交互式番茄钟或图表]

Canvas 的原理

Canvas 用的是 A2UI 协议（Agent-to-User Interface，AI 到用户界面协议）。简单说就是：

1. AI 生成一份 JSON 描述（描述要画什么）
2. Canvas 接收这个 JSON，渲染成真正的 UI
3. 你在 Canvas 上操作，操作结果会反馈给 AI

所以 Canvas 不是截图，是真的可以点、可以拖、可以交互的界面！

访问 Canvas

Canvas 默认在 http://127.0.0.1:18793/。

你可以在浏览器打开它，也可以在 macOS 的 OpenClaw 桌面端直接看到画布面板。

17.6 文件上传

WebChat 支持文件上传。你可以把文件拖进去或者点"上传"按钮。

支持的文件类型

• 📝 文本文件：.txt, .md, .json, .yaml, .csv 等
• 🖼️ 图片：.jpg, .png, .gif, .webp（AI 可以"看"图片内容）
• 📄 文档：.pdf（AI 可以读取内容）
• 💻 代码文件：.py, .js, .ts, .java 等
• 📦 压缩包：.zip（AI 可以解压查看内容）

上传步骤

1. 在 WebChat 底部输入框旁边，点文件上传按钮（📎 或 ➕）
2. 选择要上传的文件
3. 输入框旁边会显示文件名
4. 然后打字告诉 AI 你要对文件做什么

示例：
1. 上传一个 sales.csv 文件
2. 输入："帮我分析这个销售数据，按月份汇总销售额"
3. AI 会读取文件、分析、给你结果

[截图：文件上传后的界面，显示已上传的文件]

实际案例

你：[上传 meeting-notes.txt]
你：帮我把这个会议纪要整理成待办事项列表
AI：好的，我读完了会议纪要，帮你整理了以下待办事项：
1. ✅ 周三前完成原型设计
2. 🔄 周五下午 3 点开评审会
3. 📅 下周一提交测试报告
……

---

17.7 本章小结

从这一章你学会了：

功能	说明	默认地址
WebChat	网页版聊天界面	http://127.0.0.1:18789/
Control Dashboard	管理会话、配置、节点、日志等	同上
Canvas	AI 创建的交互式可视化界面	http://127.0.0.1:18793/
文件上传	给 AI 传文件让它处理	在 WebChat 中操作

下一章我们来玩更酷的——把手机、平板变成 AI 的"眼睛和耳朵"！👀

---