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 用了一套类似快照+引用的机制：

bash 复制代码

# 先获取页面快照，会返回带引用的结构化数据
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：

json 复制代码

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

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

3. 语义化定位器

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

bash 复制代码

# 按 ARIA 角色定位
agent-browser find role button click --name "提交"

# 按文本内容定位
agent-browser find text "登录" click

# 按标签定位
agent-browser find label "邮箱" 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"），忽略页面其他部分

bash 复制代码

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

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

安装和部署

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

通过 npm 安装（推荐）

bash 复制代码

npm install -g agent-browser
agent-browser install  # 下载 Chromium 浏览器

从源码编译

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

bash 复制代码

git clone https://github.com/vercel-labs/agent-browser
cd agent-browser
pnpm install
pnpm build
pnpm build:native   # 需要先安装 Rust (https://rustup.rs)
pnpm link --global  # 全局可用
agent-browser install

Linux 系统依赖

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

bash 复制代码

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

快速上手示例

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

bash 复制代码

# 1. 打开网页
agent-browser open https://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-browser wait --text "欢迎"

# 6. 截图保存
agent-browser screenshot login-success.png

# 7. 关闭浏览器
agent-browser close

高级功能

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

多会话管理

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

bash 复制代码

agent-browser --session agent1 open site-a.com
agent-browser --session agent2 open site-b.com

# 查看活动会话
agent-browser session list

网络拦截和 Mock

bash 复制代码

# 拦截特定请求
agent-browser network route "**/api/**" --abort

# Mock API 响应
agent-browser network route "**/api/user" --body '{"name":"测试用户"}'

认证头管理

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

bash 复制代码

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

Serverless 部署

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

typescript 复制代码

import chromium from '@sparticuz/chromium';
import { BrowserManager } from 'agent-browser';

export async function handler() {
  const browser = new BrowserManager();
  await browser.launch({
    executablePath: await chromium.executablePath(),
    headless: true,
  });
}

总结

agent-browser 是一个很聪明的产品。它没有重新发明轮子，而是站在 Playwright 的肩膀上，针对 AI Agent 的使用场景做了专门的优化。稳定的引用系统、精简的上下文输出、友好的 JSON 接口，这些都让 AI 操作浏览器变得更加可靠和高效。

如果你在做 AI Agent 相关的开发，或者想让 Claude/GPT 帮你自动化操作网页，这个工具绝对值得一试。毕竟减少 93% 的上下文不是开玩笑的，这意味着更快的响应速度、更低的成本、更稳定的运行。

项目现在还在活跃开发中（才发布几天就已经快 5000 star 了），虽然还有一些 bug，但潜力巨大。感兴趣的兄弟伙可以去 GitHub 上看看，顺便点个 star 支持一下！

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

好啦，今天的分享就到这里。有什么问题欢迎在评论区交流，咱们一起摆摆技术龙门阵！🚀