Vercel 重磅发布 agent-browser：AI Agent 浏览器自动化的新纪元来了

Vercel 重磅发布 agent-browser：AI Agent 浏�览器自动化的新纪元来了

前几天 Vercel Labs 整了个大活，发布了专门给 AI Agent 用的无头浏览器自动化工具 agent-browser。这玩意儿据说比现在流行的 PlaywrightMCP 能减少高达 93% 的上下文信息消耗，简直不要太巴适！🎉

🔗 Claude Code 国内代理链接
通过此链接注册使用，可以送 20 美金抵扣券直接可用，这波羊毛必须薅！

说实话，现在 AI Agent 玩浏览器自动化都快成标配了。不管是搞爬虫、做测试，还是让 Agent 帮你自动操作网页，都离不开浏览器自动化工具。但是传统的 Playwright、Puppeteer 那一套，对 AI 来说确实有点儿"水土不服"——上下文太长、元素定位太脆弱、输出也不够结构化。agent-browser 就是专门来治这些痛点的，咱们今天就来好好摆一哈这个新玩具。

产品介绍：专门为 AI 量身打造的浏览器工具

agent-browser 是一个基于 Rust 的 CLI 工具，后面跟着一个 Node.js 守护进程来管理浏览器实例。这个架构设计得挺巧妙：Rust 负责快速解析命令和通信，Node.js 负责管理 Playwright 浏览器。要是 Rust 二进制文件用不了，它还能自动降级到纯 Node.js 模式，兼容性杠杠的。

它最核心的特点就是对 LLM 友好。咱们来看看它都解决了哪些问题：

1. 稳定的元素引用系统

这是 agent-browser 最大的杀手锏。传统方式用 CSS 选择器定位元素（比如#submit），但这玩意儿太脆弱了——前端随便改个 class 名字，你的脚本就废了。agent-browser 用了一套类似快照+引用的机制：

# 先获取页面快照，会返回带引用的结构化数据agent-browser snapshot# 输出：# - heading "登录" [ref=e1] [level=1]# - textbox "邮箱" [ref=e3]# - button "提交" [ref=e2]# 然后用稳定的引用来操作agent-browser click @e2# 点击提交按钮agent-browser fill @e3"test@example.com"# 填写邮箱

这个@e2引用是从快照中直接拿到的，不管页面怎么变，只要快照对了，引用就不会错。这比 CSS 选择器靠谱多了！

2. 结构化的 JSON 输出

agent-browser 的所有命令都支持--json参数，输出标准化的 JSON：

{"success":true,"data":{"snapshot":"...","refs":{"e1":{"role":"heading","name":"登录"},"e2":{"role":"button","name":"提交"}}}}

AI 解析这种格式的数据简直不要太轻松，比让它去读一堆 HTML 代码强了不知道多少倍。

3. 语义化定位器

除了引用系统，它还支持各种语义化的定位方式：

# 按 ARIA 角色定位agent-browserfindrole button click --name"提交"# 按文本内容定位agent-browserfindtext"登录"click# 按标签定位agent-browserfindlabel"邮箱"fill"test@test.com"# 当然也支持传统 CSS 选择器agent-browser click"#submit"

这些定位器组合起来用，基本上没有找不着的元素。

产品横向对比：agent-browser vs PlaywrightMCP

咱们来对比一下这两个工具，看看 agent-browser 到底强在哪里：

特性	agent-browser	PlaywrightMCP
架构	Rust CLI + Node.js Daemon	纯 TypeScript/Node.js
上下文消耗	基准（减少 93%）	高（需要完整 DOM 树）
元素定位	稳定引用系统	CSS 选择器为主
输出格式	原生支持 JSON	需要 MCP 协议转换
启动速度	极快（Rust 二进制）	较慢（Node.js 启动）
平台支持	跨平台 + Serverless 友好	主要依赖 Node.js 环境
会话隔离	原生支持多会话	需要额外配置
AI 友好度	专门为 Agent 设计	通用工具

上下文减少 93% 是咋做到的？

这主要是因为 agent-browser 做了几个优化：

智能快照过滤：可以只抓取交互元素（-i参数），去掉那些没用的 div 块
深度限制：限制快照的深度（-d 3只抓前 3 层），去掉深层嵌套
紧凑模式：去掉空的结构元素（-c参数），只保留有内容的部分
作用域限定：只在特定区域内抓取（-s "#main"），忽略页面其他部分

# 这条命令会生成一个非常精简的快照agent-browser snapshot -i -c -d3-s"#main"--json

这些优化组合起来，上下文自然就小多了。

安装和部署

安装这个工具简单得很，几条命令就搞定了：

通过 npm 安装（推荐）

npminstall-g agent-browser agent-browserinstall# 下载 Chromium 浏览器

从源码编译

如果你想自己编译一把，也可以：

gitclone https://github.com/vercel-labs/agent-browsercdagent-browserpnpminstallpnpmbuildpnpmbuild:native# 需要先安装 Rust (https://rustup.rs)pnpmlink--global# 全局可用agent-browserinstall

Linux 系统依赖

Linux 用户可能需要额外安装一些系统依赖：

agent-browserinstall--with-deps# 或者手动安装：npx playwright install-deps chromium

快速上手示例

咱们来看一个完整的例子，模拟用户登录流程：

# 1. 打开网页agent-browseropenhttps://example.com/login# 2. 获取页面结构快照agent-browser snapshot -i --json# 3. 填写表单（使用从快照中获取的引用）agent-browser fill @e3"user@example.com"agent-browser fill @e4"password123"# 4. 提交表单agent-browser click @e5# 5. 等待跳转完成agent-browserwait--text"欢迎"# 6. 截图保存agent-browser screenshot login-success.png# 7. 关闭浏览器agent-browser close

高级功能

agent-browser 还有很多高级功能，简单给大伙儿介绍一下：

多会话管理

可以同时跑多个隔离的浏览器实例，互不干扰：

agent-browser --session agent1opensite-a.com agent-browser --session agent2opensite-b.com# 查看活动会话agent-browser session list

网络拦截和 Mock

# 拦截特定请求agent-browser network route"**/api/**"--abort# Mock API 响应agent-browser network route"**/api/user"--body'{"name":"测试用户"}'

认证头管理

跳过登录流程，直接用 token 访问：

agent-browseropenapi.example.com --headers'{ "Authorization": "Bearer <token>" }'

Serverless 部署

支持轻量级 Chromium 构建，适合部署在 Vercel/AWS Lambda 上：

importchromiumfrom'@sparticuz/chromium';import{BrowserManager}from'agent-browser';exportasyncfunctionhandler(){constbrowser=newBrowserManager();awaitbrowser.launch({executablePath:awaitchromium.executablePath(),headless:true,});}