Vercel 为 AI Agent 专门做了个浏览器自动化工具（附安装方法）

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式AI，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！

之前让 AI Agent 写自动化脚本，最头疼的就是 CSS 选择器。这玩意儿简直是 Agent 的克星——要么选不准，要么网页改个样式脚本就挂了。

最近被 Vercel 开源的 agent-browser 圈粉了。这工具专门为了解决 AI 操作浏览器的痛点设计的，试了一圈，确实比直接硬写 Playwright 舒服太多。

终于不用猜选择器了

这工具最聪明的地方，就是用 refs 机制替代了传统的 CSS 选择器。

以前我们得告诉 AI “去找那个 class 里带 submit 的按钮”，现在不用了。你运行一下 snapshot 命令，它直接给页面拍个快照，给每个能点击、能输入的元素打上唯一标签（比如 @e1, @e2）。

AI 拿到的视角是这样的：

# - button "Submit" [ref=e2]
# - textbox "Email" [ref=e3]

然后操作就变成了：“点击 @e2”，“在 @e3 里填个邮箱”。这逻辑跟人眼操作一模一样，指哪打哪，底层 DOM 结构怎么变都无所谓，稳定性直接上了一个台阶。

Rust 加持，快得飞起

它的 CLI 是用 Rust 写的，背后挂了个 Node.js daemon 管理浏览器实例。

最大的感受就是快。以前跑脚本，初始化浏览器得等半天。现在 daemon 一直在后台挂着，命令发过去几乎是秒响应。对于那种需要连续操作几十步的复杂任务，这种低延迟体验真的回不去。

开箱即用的命令集

文档：https://agent-browser.dev/commands

命令设计没那么多花里胡哨的，全是直觉式操作：

agent-browser open google.com
agent-browser click @e35
agent-browser type "Vercel"
agent-browser wait 500

而且通过 --json 参数还能返回结构化数据，方便 Agent 进一步处理。目前大概有 50 多个命令，日常的截图、Cookie 管理、多 Tab 切换基本都覆盖了。

AI 原生支持

Vercel 毕竟是做开发工具起家的，生态考虑得很周到。它不光是一个工具，还直接提供了适配 Claude Code 的 Skill 文件。

把你下载的 Skill 文件往 .claude/skills 里一扔，AI 立马就学会怎么用这套工具了，连 Prompt 都不用怎么调教。Cursor、Copilot 这些支持 Shell 命令的 Agent 也都能无缝衔接。

链接：SKILL.md：https://github.com/vercel-labs/agent-browser/blob/main/skills/agent-browser/SKILL.md

几个很实用的细节

1. Session 隔离：想测试 “用户 A 和用户 B 同时在线” 的场景？不用开俩浏览器窗口，直接指定不同 Session 就行，Cookie 互不干扰。
2. 视觉降噪：有些网页乱七八糟元素太多，容易把 AI 绕晕。它有个过滤模式，可以只把交互元素提取出来喂给 AI，省 Token 又提高准确率。
3. 这就是即便 serverless 也能跑：支持自定义 Chromium 路径，哪怕是在 AWS Lambda 这种环境里，挂个精简版 Chromium 也能跑起来。

总结

如果你也在折腾 AI Agent 做 E2E 测试或者爬虫，可以推荐试试 agent-browser。

把这种脏活累活丢给专门的工具，才是 AI 时代的正确姿势。

项目地址：agent-browser：https://github.com/vercel-labs/agent-browser