给 AI 智能体一双＂眼睛＂:用 agent-browser 让大模型操控浏览器

看大模型写代码能力已经很强了，但你让它去实际操控一下网页，它就蒙了。不是它不懂，而是它根本没有"看"过网页，更不知道网页上那些按钮在哪里、输入框叫什么名字。

这不是模型的锅，是工具的锅。

今天要聊的，是一个叫 agent-browser 的开源工具。Vercel Labs 出品，29.6k GitHub stars，Rust 写的原生二进制，下载即用。它做的事情很简单：给 AI 智能体提供一套标准化的浏览器操控接口。

为什么 AI 操控浏览器一直很糟糕

过去，AI 想要操控浏览器，基本靠两条路：

第一条路：直接调用 Playwright/Puppeteer API。 模型需要知道 CSS 选择器、知道页面结构、知道哪些元素对应什么操作。这要求模型记忆大量 API 细节不说，页面的选择器还经常变，一不小心就点错。

第二条路：多模态模型直接看图操作。 贵，慢，而且纯视觉判断缺乏结构化信息——模型"看到"了一个按钮，但不一定知道它是提交还是取消。

还有一个更根本的问题：没有标准化协议。各家 AI 平台各搞各的，今天接 Playwright，明天换 Selenium，后天可能又要学 Playwright 的新 API。学习成本极高，迁移成本更高。

agent-browser 是什么

agent-browser 是 Vercel Labs 推出的浏览器自动化 CLI 工具，专为 AI 智能体设计。

它的核心思路是：让 AI 通过快照（snapshot）来理解页面结构，再通过引用（ref）来精准操控元素。 整个交互链路非常自然：

1. agent-browser open https://example.com2. agent-browser snapshot            # 获取带 ref 的可访问性树3. agent-browser click @e2           # 通过 ref 点击元素4. agent-browser fill @e3 "hello"   # 通过 ref 填写表单

注意那个 @e2、@e3——这是快照里每个可交互元素的引用编号。AI 拿到快照后，直接用编号操作，不需要记忆任何 CSS 选择器。

核心功能一览

快照系统：AI 友好的页面理解

snapshot 命令返回的不是一个 DOM 树，而是一个经过 AI 友好处理的可访问性树。每个按钮、输入框、链接都带上了唯一的引用编号。

- heading "Example Domain" [ref=e1] [level=1]- button "Submit" [ref=e2]- textbox "Email" [ref=e3]- link "Learn more" [ref=e4]

拿这个信息去问模型："帮我填一下邮箱然后点提交"，它就知道 @e3 是邮箱输入框，@e2 是提交按钮。

丰富的交互命令

agent-browser 提供了非常完整的浏览器操控命令：

基本上 Selenium/Playwright 能做的，它都能做，而且语法更简洁。

截图标注模式

agent-browser screenshot --annotate 是一个特别实用的功能。它会在截图上叠加可交互元素的编号标签，和快照里的 ref 完全对应——这样一个人类开发者也能直观地看到 AI "看到"了什么。

这对调试 AI 自动化流程非常有价值。

批量执行模式

当你要执行一系列操作时，用 batch 命令可以一次性提交多个命令：

agent-browser batch \  "open https://example.com" \  "snapshot -i" \  "click @e2" \  "screenshot result.png"

这避免了每个命令都重新启动 CLI 的开销，速度更快。

认证状态复用

这是让 agent-browser 真正能用于生产的关键功能。它支持多种方式复用登录状态：

• • Chrome Profile 复用：直接使用本机 Chrome 的登录态，最快
• • 会话持久化：--session-name 自动保存/恢复 cookies 和 localStorage
• • 状态文件导入/导出：可以先在本地完成登录，再把状态文件用到 CI/CD 环境

这意味着你可以本地调试好整个流程，然后完全不动脑地迁移到服务器上跑。

云端浏览器支持

不想在本地装 Chrome？agent-browser 支持直接连接 Browserbase、Browserless、Kernel、Browser Use 等云端浏览器基础设施，一条环境变量就能切换：

export BROWSERLESS_API_KEY="***"agent-browser -p browserless open https://example.com

安全性功能

针对 AI Agent 的特殊需求，agent-browser 还内置了几个安全机制：

• • 域名白名单：--allowed-domains 限制 AI 只能访问指定域名，防止prompt注入后被钓鱼
• • 内容边界标记：在页面输出外包裹分隔符，防止 AI 误读工具输出
• • 操作策略文件：用 JSON 文件定义哪些操作类别需要人工确认
• • 输出长度限制：防止长页面把 context 撑爆

安装和使用

agent-browser 的安装非常简单：

# npm 全局安装（推荐）npm install -g agent-browseragent-browser install  # 首次下载 Chrome# 或者用 Homebrew（macOS）brew install agent-browseragent-browser install# 或者用 Cargo（Rust 生态）cargo install agent-browseragent-browser install

Linux 用户需要额外跑一下：

agent-browser install --with-deps

升级也很方便：

agent-browser upgrade

它会自动检测你的安装方式（npm / Homebrew / Cargo）并使用正确的升级命令。

真实体验

好的地方

速度快。 Rust 原生实现，CLI 和浏览器之间通过 daemon 进程通信，第二次执行几乎是即时的。不像 Playwright 每次都要启动浏览器实例。

上手极简。 装好之后，agent-browser open example.com && agent-browser snapshot -i 两句话就能看到效果。不需要写任何代码，不需要配任何驱动。

设计思路清晰。 snapshot + ref 这套交互模式，是目前我见过最适合 AI 理解和操作的浏览器自动化方案。比让模型去理解 CSS 选择器要自然得多。

认证复用做得很完整。 Chrome Profile 复用这个功能救了命——很多内部系统没有 API，靠 OAuth 登录，这时候能直接用本机 Chrome 的登录态就非常方便。

不足之处

语义查找能力有限。find role button --name "Submit" 这个语义查找很好用，但功能有限，复杂场景下还是得依赖 ref 编号。希望后续能支持更丰富的语义查询语法。

文档仍有进步空间。 核心功能文档齐全，但某些细节（如 --profile 在 Windows 上的限制）散布在不同地方，整理成 FAQ 会更实用。

云端浏览器的连接稳定性。 在弱网环境下连接 Browserless，偶尔会遇到 session 超时。重连机制可以更智能一些。

适用场景

agent-browser 最适合以下场景：

1. 1. AI 智能体浏览器任务：这是它的设计目标。AI 需要搜索信息、填表单、抓取数据时，它是最自然的接口。
2. 2. 自动化测试：相比 Playwright，agent-browser 的命令更简洁，适合写端到端测试脚本。
3. 3. 网页数据采集：需要登录才能访问的数据，用 Chrome Profile 复用登录态，最快搞定。
4. 4. CI/CD 中的浏览器任务：配合 GitHub Actions，在 CI 环境里跑浏览器自动化，不需要装 Chrome，直接用 Browserless。

总结

浏览器自动化是件老事了，但"如何让 AI 更好地操控浏览器"是个新问题。agent-browser 给出的答案是：让 AI 用最接近人类理解方式的方式操控浏览器——先看页面结构（snapshot），再精准操作元素（ref）。

配合认证状态复用和安全机制，这套工具已经可以真正用于生产环境了。

如果你在构建任何需要浏览器能力的 AI Agent，值得一试。

想尝试一下？装好之后，两行命令就能看到效果：

npm install -g agent-browseragent-browser installagent-browser open https://example.com && agent-browser snapshot

试试看，感受一下 AI「真的在看网页」是什么体验。