我一般在 Claude Code 用 Playwright 去操作浏览器做一些自动化测试，或者帮我验证代码。注意看它的操作流程就知道了：浏览网页、截图、然后分析。
能明显感觉到用到 Playwright 的时候 token 消耗特别快，因为它要找某个按钮或者数据的话，不是一击即中，要读很长内容。
Vercel 的新工具
Vercel 发布了一个新工具 agent-browser，这是一个AI 浏览器自动化工具，适合和 Claude Code、Codex 这些 AI 编程助手配合使用。
官方一些的解释：
这是 Vercel Labs 开发的一个为 AI agents 设计的无头浏览器自动化 CLI 工具。采用 Rust CLI + Node.js Daemon 的架构，提供快速的命令解析和浏览器控制能力。
X 上看到立马装上试了一下，真的不错。
- 文档：https://agent-browser.dev/
- GitHub：https://github.com/vercel-labs/agent-browser
官方宣称 Token 消耗减少 93%
没实际计算，但从原理上确实差不多。
agent-browser 不会直接把网页代码喂给 AI，而是利用浏览器的无障碍树（这个词有点高级了），生成一个极简的快照。
传统方式（读 HTML）
<div class="login-container mx-auto max-w-md p-6 bg-white
rounded-lg shadow-md" data-testid="login-form">
<h1 class="text-2xl font-bold text-gray-800 mb-4">欢迎回来</h1>
<div class="form-group mb-4">
<label class="block text-sm font-medium text-gray-700"
for="username">账号</label>
</div>
<!-- 几百行继续... -->
</div>
→ ~5000 tokens
agent-browser 方式
@e1 [heading] 欢迎回来
@e2 [textbox] 账号
@e3 [textbox] 密码
@e4 [button] 登录
→ ~50 tokens
AI 只需要看这几行字，然后说一句："点击 @e4"。完事了。
这就是为什么它能省 93% 的 token，把那些无用的 HTML 标签、CSS 样式全都过滤掉了，只留下了真正有用的内容。
和 Playwright MCP 对比一下
agent-browser 是专门为 AI agent 场景优化的工具，而 Playwright MCP 是通用浏览器自动化方案的 MCP 封装。
前者是为 AI 量身定制，后者是把已有工具接入 AI。
| 因素 | Playwright MCP | agent-browser |
|---|---|---|
| 设计目标 | 通用浏览器自动化 | 专为 AI agent 优化 |
| 输出格式 | 结构化 JSON，完整元数据 | 单行文本，极简 |
| 默认范围 | 全部元素 | 只有可交互元素 |
| 元数据 | 包含坐标、状态、子元素等 | 只有 ref + 类型 + 文本 |
agent-browser 的架构设计亮点，采用混合架构
- Rust CLI：每次调用都要启动，所以用 Rust 保证毫秒级启动
- Node Daemon：浏览器一直开着，不用每次冷启动
官方说在 benchmark 中，这种方案的性能可以媲美 MCP，同时保持 CLI-first 的设计，避免了协议级集成的复杂性。
安装方式
有几种安装方式可选，最后一种最省事哈哈
方式一：npm 全局安装（推荐）
有个前提条件是，电脑上安装了 Node.js
npm install -g agent-browser
agent-browser install # 下载 Chromium
方式二：npx 直接运行（无需安装）
不想全局安装？用 npx 可以直接运行命令：
npx agent-browser open example.com
npx agent-browser snapshot -i
适合临时试用的场景。
方式三：Claude Code Skill 安装
如果你用 Claude Code，可以把 agent-browser 作为 Skill 安装：
mkdir -p .claude/skills/agent-browser
curl -o .claude/skills/agent-browser/SKILL.md \
https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/agent-browser/SKILL.md
方式四：从源码构建
需要 Rust 环境：
git clone https://github.com/vercel-labs/agent-browser
cd agent-browser
pnpm install
pnpm build
pnpm build:native # 需要 Rust
pnpm link --global
agent-browser install
最省事的方式
直接让 AI 安装，和 Claude Code 说：
"npm install -g agent-browser 这个是什么，安装一下我试试。"
基本使用
agent-browser 的定位是普通 CLI 工具，和 git、curl、npm 一样，它只是一个命令行程序。AI agent 通过 Bash 工具执行它：
agent-browser open https://example.com
agent-browser snapshot -i --json
agent-browser click @e2
用的时候记得和 AI 强调一下使用 agent-browser，不然它可能直接用 fetch 或者 Playwright。
比如 用 agent-browser 看下今天 hacker new 有什么比较热门的内容，并且给出对应的链接。
看了一圈大家使用之后的评价，基本都是：丝滑，还有说完爆playwright，省钱。
三种集成方式对比
顺便对比一下我们常见的 MCP、Skill 和 CLI 工具：
| 类型 | 调用方式 | 例子 |
|---|---|---|
| MCP Server | 原生工具调用 mcp__xxx__yyy |
Playwright MCP |
| Skill | /command 触发 |
/commit、/doc |
| CLI 工具 | Bash 执行命令 |
agent-browser、git、curl |
agent-browser 选择 CLI 方式是因为通用性，任何能运行 Bash 命令的 AI 工具都能用它，不管是 Claude Code、Cursor、Copilot 还是 Gemini。
一些应用场景
- 自动化测试：让 AI 帮你在网页上跑测试流程，验证功能是否正常
- 数据抓取：登录后台、导出报表
- 表单填写：批量填写重复的表单
- 截图对比：开发完功能后让 AI 截图验证 UI 是否符合预期
- 竞品分析：让 AI 浏览竞品网站，提取关键信息
总结一下
agent-browser 的核心价值：
1. 专为 AI 优化：93% 更少的 context 消耗
2. Universal：任何支持 Bash 的 AI 都能用
3. 高性能：Rust CLI + Node Daemon 的混合架构
如果你经常让 AI 操作浏览器，这个工具可以试一试。
💡 AI 工具的爆发，让普通人也能快速做出产品。
但如何做？如何变现？如何真正走向海外市场？
👇 想了解更多 AI 编程 & 出海实战信息，扫码添加好友了解更多
🔗 更多教程请访问 ipengtao.com
文章评论