title: agent-browser - AI 专用浏览器自动化工具 date: 2026-01-24 tags:
- 技术学习
- 浏览器自动化
- Vercel
- Rust
- AI工具
- Agent status: learning source: 归档/Clippings/完爆 Playwright？Vercel 开源 agent-browser，Context 节省 93%.md github: https://github.com/vercel-labs/agent-browser author: Chris Tate (Vercel Labs)
agent-browser - AI 专用浏览器自动化工具
Vercel Labs 开源的浏览器自动化 CLI，专为 AI Agent 设计。核心思路是返回可访问性树（Accessibility Tree） 代替完整 HTML，大幅降低 Token 消耗。
核心优势
- 节省 93% Context：相比 Playwright MCP
- 语义化交互：返回可访问性树而非 HTML，AI 更好理解
- Ref 引用系统：自动为元素打标签（@e1、@e2），AI 可直接引用
- Rust CLI + Node 守护进程：首次启动 ~2s，后续命令 <100ms
核心工作流
# 1. 打开网页
agent-browser open example.com
# 2. 获取 Snapshot（可访问性树 + 引用）
agent-browser snapshot -i
# - heading "Welcome" [ref=e1]
# - button "Sign In" [ref=e4]
# 3. 用 Ref 操作（不需要 CSS 选择器）
agent-browser fill @e2 "user@example.com"
agent-browser click @e4
安装
npm install -g agent-browser
agent-browser install # 下载 Chromium
与 Claude Code 集成
已安装到 ~/.claude/skills/agent-browser/，Claude 会自动在需要的场景加载。也可手动调用使用。
对比
| 特性 | agent-browser | Playwright MCP |
|---|---|---|
| 输出 | 可访问性树（~7% Tokens） | 完整 HTML（100%） |
| 选择器 | Ref + 语义 + CSS | CSS/Text/XPath |
| 性能 | Rust CLI + Node 守护进程 | 纯 Node |
| AI 友好度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
原理
传统方式：返回完整 HTML（几千行）→ AI 自行解析 DOM
agent-browser：返回可访问性树 → "这里有个按钮叫 Submit"
AI 不需要在装饰性 HTML 中找关键信息，语义化输出让 Context 更聚焦。
场景
- AI Agent 控制浏览器
- 表单自动填写 / 数据抓取 / 自动化测试
- Electron 桌面应用自动化（VS Code、Slack 等）
学习总结
核心理念：不给 AI 看代码，给 AI 看"语义"。93% 的 Context 节省来自这个思路转变。
适用：AI Agent 场景强烈推荐；传统自动化测试 Playwright 生态更成熟，按需选择。
相关资源
- GitHub：https://github.com/vercel-labs/agent-browser
- 本地 Skill 位置：
~/.claude/skills/agent-browser/