OpenClaw + Agent Browser：省 93% 上下文的浏览器方案

我的OpenClaw现在能自己登录GitHub 大家好我是小木头，Vercel 最近开源了一个好用的工具 叫agent Browser 专门让AI agent操作浏览器 我在没有图形界面的OpenClaw 已经成功的跑通了它 今天呢就来聊聊怎么做的 先说说agent Browser到底是什么 一句话它是一个专门给AI agent用的

浏览器自动化命令行工具 跟传统的Playwright MCP不一样 它用无障碍树加引用标记的方式 来定位页面元素 AI不需要去解析几千行的DOM结构 一个snapshot命令 回来的就是按钮 输入框这些语义化的元素 每个元素带一个像@e1 @e2这样的引用

在AI应用场景中 或许我们已经习惯于使用像Playwright MCP这类工具 根据对比 使用agent Browser 能够节省高达93%的上下文窗口 这对于像OpenClaw这类 需要长对话的场景来讲 差距是非常显而易见的 为什么在OpenClaw需要装上它呢

OpenClaw本身是一个非常强的AI agent 如果我们需要 让他帮助我们进行上网登录网站 操作网页提交表单等等 需要一个强大的浏览器操作接口 有了agent Browser OpenClaw就多了一双手 可以代表你去操作浏览器 今天要演示的 就是如何利用agent Browser来登录GitHub 并且代表这个登录用户

在网站上进行相关的操作 我们来看一个典型的 浏览器操作的应用场景 现在我打开的呢 就是目前最流行的一个GitHub项目 OpenClaw 如果我在这里期望对它打个星号 它会跳转到登录界面 这也意味着我们需要登录以后呢 才能去做打星星的操作 那么在OpenClaw 我们如何利用agent Browser

来做这个动作呢 现在呢我们就来演示一下 首先是安装agent 根据官方文档的介绍 安装方式非常简单 运行两个命令就好 npm install安装agent Browser 然后呢通过agent Browser install下载浏览器 你可以将这两个命令交给小龙虾的 比如飞书机器人帮助你完成安装 咱们今天的演示呢

通过命令行手动的操作一番 我们一起来看看每一步都会做什么 更好的了解是如何安装 如何使用的 咱们来到我云端部署的OpenClaw 运行这两个命令 好了一切就绪 接下来我们要做的 就是利用agent browser打开GitHub 帮助我完成登录 并且前往OpenClaw代码仓库 帮助我给他打个星星 要利用agent Browser打开一个网页

非常简单 通过那现在呢 agent-browser open命令 并提供一个URL就好 比如 我们将OpenClaw代码仓库的链接交给他 很快我们会在控制台这里呢 看到一些类似的输出 这段文字呢 来自于网页的标题 比如我们将光标 移到打开的这个代码仓库的浏览器 标签页就能看到这么一段文字

那如果我们想要知道在这个页面当中 更加细节的内容呢 我们可以通过agent Browser snap shot 这个命令 来显示当前页面的这个快照 这也是在agent Browser 应用中或许用的最多的命令之一 来看看内容吧 它就以这么一个树状结构 来展示了在页面中的所有元素

每个元素呢 都会有个REF这个标记或引用 它的值 是一个页面中全局唯一的一个值 比如E1136 它关联的就是topic 常见的使用方式中 我们还会添加Dash i这个选项 来打印这个Snapshot 这表示只显示具有交互能力的元素 比如这里看到的这一些呢

都是链接 现在呢 我们就来帮助agent Browser完成登录 我会用我自己的账号信息登录 因此大家要注意 在这里呢 登录后 OpenClaw实际上使用的是我的身份 在访问GitHub 大家确保在所有的操作和应用场景中 理解OpenClaw究竟会做什么 那么明白 接下来可能产生的后果是什么 我们来到OpenClaw

把这个链接给到agent-browser 我让他在这里完成登录 来看看在这个页面上 可交互的元素有哪些 这应该是大家在登录页面上常见的 文本输入框 用户名或者邮箱地址 然后输密码 再点击Sign in登录 我们首先要做的呢 是在文本输入框 输入自己的账号密码信息

首先我们输入用户名或者邮箱地址 它对应的引用呢是e2 我们使用的就是agent Browser fill这个命令 给它e two 后面带的就是我们的账号信息 比如x y z at gmail dot com 好 接下来输入密码password 引用是e3 我们把这个引用更新一下 比如123456

我已经完成了账号的输入 我们再来看一下这个快照中的元素 接下来要点击的就是Sign in这个按钮 对应的引用是e five 使用CLICK命 令点击e five 完成 现在来到的页面是二段验证的页面 我给大家演示一下 在真实的浏览器中看到的 大概是什么样的一个页面 大家看到的应该类似这么一个页面 这也是agent-browser会看到的

通常作为人类或我自己呢 会来到GitHub的移动应用 输入这个数字做验证 那我们怎么知道 现在agent Browser 究竟看到的数字是多少呢 我们依然可以通过Snapshot来看看 在这个页面中究竟有哪些元素 因为这个二段验证中给到的数字呢 并不属于可交互的元素 因此如果我们使用Dash i 是看不到这个数字的

我们就直接用snapshot命令 很明确可以看到 在heading这里有一个99 那我就来到自己的GitHub移动应用 输入99完成验证 好了验证完毕 现在我们就可以通过get-title命令 看看agent Browser究竟落在了什么页面上 刚才给到的登录链接呢 带了跳转回OpenClaw代码仓库的 URL因此呢

它回到了OpenClaw这个项目 我们再次搜索一下star可交互的元素 里面最后一个265K stars这个链接呢 我们现在可以点击 点击它应该就能触发给它打星星 另外在上面我们可以看到这个button start this repository 他的引用呢是126 我们可以尝试使用 点击这个按钮的操作 咱们首先

来到我已经登录的这个Chrome浏览器 这里可以看到 我暂时呢还没有给它打星星 那现在呢 我们就来到 点击这个按钮来给它打个星星 完成 回到我已经登录的这个Chrome浏览器 刷新一下 大家看到吗 已经点上星号了 这表示agent Browser 代表我给这个项目呢打了个星

在这个agent Browser的运行环境中 就已经有了我的登录状态 我们现在可以来到飞书的聊天机器人 让它用agent Browser 帮助我们完成一些网络上的操作 我来举个例子吧 在我现在这个本地运行的 OpenClaw对话小应用中 我可以让他用agent browser 帮助我再次的打开OpenClaw

看看目前最新的一个open issue是什么 我让OpenClaw 使用agent Browser去打开OpenClaw代码仓库 找到最新的open issue 并且告诉我他说的是什么 OpenClaw操作完成 我们看看最后的结果 他成功的找到了 在当时他查看的最新的issue 36799 是关于session logs 这是一个skill 看起来呢

它使用的agent Browser 我也询问他使用的是什么命令 他也告诉我是如何进行操作的 那大家可以看到 他用了agent Browser 来通过open这个命令来打开它 并且找到最新的issue 我们现在来到自己登录的Chrome 能看到最新的issue呢 也正是这个 36799 来看看整个他去尝试打开 发现issue的过程 我让他用agent Browser

去打开OpenClaw代码仓库 并且找到最新的issue 首先呢 他告诉我这个agent Browser的服务不可用 因此他使用的是GitHub的命令行工具 完成了这个操作 也找到了当时的最新的issue 36796 当然 这并不是我想要他去使用的工具 我期望他使用的是agent Browser 我让他再次的尝试也失败了 这次呢我就意识到

他使用的是OpenClaw Browser control service 目前呢不可用 因此呢他就无法去做网络的浏览 我意识到 他并不知道agent Browser这个工具 那我就指导他使用这个工具 最后他成功的找到了这个命令行工具 并且完成了操作 那这就是今天我们分享主要内容 感兴趣的朋友不妨来尝试一下 在刚才 我通过命令行一步一步完成的操作呢

大家都可以通过像飞书机器人等 让OpenClaw帮助你去自动地完成 最后呢我们要来提示一下 在这次的演示的对话场景中 似乎OpenClaw还不是那么的智能 它并不能够第一时间的 优先的就将agent Browser 应用到它的网络浏览的场景中 好像他也并不是第一时间

就知道这个命令行工具的存在 欢迎大家来到评论区分享你的看法 如果你已经有最佳实践 也欢迎在评论区交流 好了今天的分享就到这里 感谢大家收看 我们下期再见