4.3 浏览器工具与 Canvas 画布
生成模型：GPT-5.4 (openai/gpt-5.4) Token 消耗：输入 ~50k tokens，输出 ~3.8k tokens（本节）
到这一节，OpenClaw 的味道就更明显了。前面我们已经看到它可以聊天、能跑 Bash。再往前一步，它甚至可以“看网页”“点页面”“抓数据”“给你推一个可交互界面”。这听起来像两个不同能力，其实都指向同一个方向：让 AI 不只在文本框里工作，而是开始接触真实界面。
这一节分成两部分讲：先讲浏览器工具，再讲 Canvas。前者可以理解成“AI 去操作现成网页”，后者可以理解成“AI 自己给你做一个界面并推过来”。
4.3.1 浏览器工具：不是只会读网页，而是真的会操作页面
很多聊天模型也能“总结网页”，但大多依赖你把网页内容先贴给它。OpenClaw 的浏览器工具更进一步：它可以自己打开网页、等待页面加载、查看页面内容、做点击、截图、提取数据。
如果把 Bash 比作“操作系统的手”，那浏览器工具就像“屏幕里的手”。
最常见的用途包括：
打开某个文档网站，提取重点
登录后查看某个页面信息
截图网页，确认布局或内容
在页面上点击按钮、填写表单
从列表页批量提取数据
这类能力特别适合“网页本来就有信息，但你懒得自己一页页看”的情况。
4.3.2 对非技术用户来说，它到底在干什么
你可以把浏览器工具理解成：OpenClaw 背后连着一个受控浏览器。你给它任务，它会像人一样走几个步骤：
打开页面
等内容出来
找到你关心的区域
必要时点击或滚动
把看到的内容整理回来
这跟单纯“抓 HTML”不一样。因为现代网站很多内容是 JavaScript 动态渲染的，只看初始源码可能啥也没有。浏览器工具的价值就在于，它看到的是“用户真正看到的页面”。
4.3.3 适合学生的几个高频用法
用法一：读文档
这是最轻松也最实用的一类。
例如：
这种任务的好处是，你不用自己复制粘贴半天，也不用担心模型瞎编文档内容。
用法二：网页数据提取
比如课程通知页、比赛榜单、开源项目 release 页面、实验室公告页，都很适合。
用法三：截图和确认界面
如果你在做网页作业或者前端项目，截图功能很实用。
这已经不是“听你描述 bug”，而是它真的去看界面了。
4.3.4 一段浏览器工具的实战对话
这背后的工具调用逻辑，通常会是：
打开目标网址。
观察页面导航和主要卡片。
必要时进入“快速开始”页。
提取标题、说明、示例命令。
汇总成 5 条建议。
对用户来说，最重要的感受是：你不用自己先把网页内容喂给它，它可以自己去读。
4.3.5 浏览器工具的边界：它不是万能爬虫
虽然浏览器工具很强，但你也别把它想成“整个互联网随便拿捏”。从使用者角度，至少要知道下面几个限制。
第一，有些页面需要登录，而且登录流程可能有验证码、多因素认证或者设备限制，这时工具未必能顺利通过。
第二，有些网站内容非常重，加载慢、交互复杂、前端框架很花，AI 操作成功率会受影响。
第三，网页能看到，不代表就适合批量抓。数据提取要尊重网站规则，也要注意别把自己用成违规爬虫。
第四，如果你的目标很模糊，比如“看看这个网站有啥”，那它容易给出一堆泛泛总结；如果你说“提取这三个字段”，效果通常就好很多。
所以浏览器工具的最佳用法，往往不是“随便逛”，而是“带着明确目标去看”。
4.3.6 Canvas 是什么：让 AI 把结果直接做成界面
前面的浏览器工具，操作的是别人的网页。Canvas 则完全不同，它更像 OpenClaw 自带的一块画布，AI 可以把 HTML 或 React 风格的界面推到这块画布上，让你直接看、直接点、直接交互。
如果你第一次接触这个概念，可以这样想：
浏览器工具：AI 去外面的网页里干活。
Canvas：AI 在自己的地盘上给你搭一个小界面。
这就不只是“回你一段 Markdown”了。它可以给你一个可视化卡片、一个表格面板、一个交互式页面，甚至一个小工具原型。
4.3.7 A2UI：把“AI 说话”升级成“AI 直接出界面”
A2UI 是 Agent-to-UI 的缩写，可以翻成“从 Agent 到界面”。名字听上去有点硬，其实核心意思很朴素：AI 不只是回文字，它还能直接生成用户界面。
为什么这个概念重要？因为很多结果，本来就不适合只用纯文字表达。
比如：
课程安排表
实验数据仪表板
旅行计划卡片
倒计时和待办面板
一个可以点按钮的小 Demo
这些东西如果硬塞在聊天框里，要么很丑，要么不好用。Canvas/A2UI 的价值，就是让 AI 产出的东西从“回答”变成“界面产物”。
你甚至可以把它想成一种很轻量的“AI 前端生成能力”：你描述要什么界面，OpenClaw 就把页面推给你看。
4.3.8 怎么把 HTML 或 React 风格界面推到 Canvas
这里很多人第一次会误会，以为 Canvas 只能显示一张截图。不是。它本质上更像一个被 OpenClaw 控制的 Web 容器，所以最自然的内容就是网页界面。
最常见的两种内容来源是：
HTML 页面：AI 直接生成一个完整 HTML 文件，里面带上样式和交互脚本，然后推到 Canvas。
React 风格页面：AI 按组件化思路组织界面，再打包成最终能渲染的页面，推到 Canvas 展示。
对普通读者来说，不用纠结底层细节，你只要记住：Canvas 吃的是“前端界面产物”。你让它做一个页面，它就可以把这个页面投到画布上。
一个很实用的说法是：
如果你更习惯组件化表达，也可以这样说：
这里的关键词不是 HTML 还是 React，而是你把界面需求说清楚了：显示什么、怎么布局、重点在哪块屏幕上看。
4.3.9 Canvas surfaces：它会显示到哪里
你可以把 surface 理解成“画布显示面”。OpenClaw 的 Canvas 不是只属于桌面浏览器，它可以出现在不同设备的界面上。
最常见的 surface 包括：
macOS 上的窗口或嵌入视图
iPhone / iPad 上的 App 内画布区域
Android 手机上的画布区域
这件事很关键，因为它决定了 Canvas 不是一个只适合开发者演示的小玩具。你完全可以把它当成跨设备的展示面板：在电脑上做出来，在手机上看；或者让 AI 直接生成一个更适合移动端阅读的小界面。
所以你在下指令时，最好顺手加上设备感知：
“手机上优先，单列布局”
“桌面端可以两栏”
“字号大一点，适合触屏点击”
这种描述对 Canvas 特别有效，因为它本来就是面向界面的，不只是面向文字的。
4.3.10 Canvas 最适合哪些场景
场景一：把信息整理成可视化面板
例如：
这时候 AI 不是回一张表，而是直接给你一个更像产品原型的东西。
场景二：快速做前端原型
对学生做课程设计特别有用。你不用先开完整工程，也能快速看一个页面概念。
场景三：做交互式小工具
比如计算器、打卡板、排班表、待办板，这些都很适合 Canvas。
因为它的重点不是复杂后端，而是“把一个能用的交互界面先立起来”。
4.3.11 一段 Canvas 的实战对话
如果再进一步，你还可以继续说：
这类体验很像你在和一个会写前端的同学配合，而且反馈速度非常快。
4.3.12 浏览器工具和 Canvas 的差别，一句话讲透
很多读者第一次会把这两个混在一起。你只要记住下面这张对照表就够了。
干什么
操作已有网页
展示 AI 生成的界面
主要用途
阅读、提取、点击、截图
原型、面板、交互式展示
内容来源
外部网站或本地页面
AI 生成的 HTML / UI
用户感觉
AI 在“帮你逛网页”
AI 在“直接给你做界面”
说得再口语一点：
浏览器工具像一个会用网页的研究助理。
Canvas 像一个能把结果直接摆到你面前的界面助手。
4.3.13 第四章最让人兴奋的一点：AI 开始碰真实世界了
到这里，你应该能明显感觉到 OpenClaw 跟普通聊天模型的分水岭在哪里。
普通聊天模型擅长“描述世界”。
OpenClaw 开始能“接触世界”：
用 Bash 碰操作系统
用浏览器碰网页
用 Canvas 碰界面
这件事为什么重要？因为真实任务往往不是“回答一个概念题”，而是要查、要看、要操作、要生成可交付的结果。也正因为这样，OpenClaw 才更像一个实用型助手，而不只是一个聊天窗口。
本节小结
浏览器工具让 OpenClaw 可以像人一样打开网页、读取内容、截图、点击和提取数据，而不是只靠你手动贴网页文本。
它最适合的场景是读文档、抓取页面关键信息、检查网页界面，以及完成轻量网页交互。
Canvas 和浏览器工具不同：前者是 AI 自己生成并推送界面，后者是 AI 去操作现成网页。
A2UI 可以简单理解成“AI 直接出界面”，它让很多原本只适合文字描述的结果，变成更直观的可视化产物。
当 Bash、浏览器和 Canvas 放在一起看时，你会发现 OpenClaw 真正厉害的地方不是会聊，而是开始能替你碰终端、碰网页、碰界面。
Last updated