Agent Browser 是 Vercel Labs 推出的一款专为 AI 智能体设计的浏览器自动化 CLI 工具。它能让 Claude Code、Cursor、Copilot 等 AI 编程助手直接控制浏览器，自动完成网页测试、数据抓取、表单填写等任务。
核心特性
93% 的上下文节省
传统的 Playwright MCP 方案会将完整的可访问性树（包含数千个节点）发送给 AI，导致：
- • Token 消耗巨大：复杂页面可能消耗数万 tokens
Agent Browser 通过 "Snapshot + Refs" 机制，只返回精简的元素引用列表，将上下文消耗降低 93%。这意味着：
零配置，开箱即用
不需要配置 MCP Server，不需要复杂的设置文件，只需两行命令：
npm install -g agent-browser
agent-browser install # 下载 Chromium
安装完成后，AI 助手就可以直接通过 Bash 命令调用，无需任何额外配置。
Rust 性能 + Node.js 生态
Agent Browser 采用客户端-守护进程架构：
- • Node.js Daemon：管理 Playwright 浏览器实例
- • 自动降级：如果没有原生二进制文件，自动使用 Node.js
这种设计既享受了 Rust 的性能优势，又保持了与 Node.js 生态的兼容性。
Snapshot + Refs：确定性元素选择
这是 Agent Browser 最创新的功能。传统方案需要反复查询 DOM，CSS 选择器还可能失效。Agent Browser 通过快照和引用机制，实现了确定性的元素操作：
[配图占位符：Snapshot + Refs 工作流程图]
主要功能
页面导航
元素交互
信息提取
截图与快照
会话管理
- • 隔离会话：
--session 参数运行多个独立浏览器实例 - • 持久化配置：
--profile 参数保存 cookies、localStorage、登录状态 - • 自定义浏览器：
--executable-path 使用自定义浏览器可执行文件
网络控制
调试模式
- • Headed 模式：
--headed 显示浏览器窗口 - • 流式预览：通过 WebSocket 实时查看浏览器视口
使用方法
第一步：安装 Agent Browser
全局安装：
npm install -g agent-browser
agent-browser install
Linux 系统需要安装依赖：
agent-browser install --with-deps
从源码安装（可选）：
git clone https://github.com/vercel-labs/agent-browser.git
cd agent-browser
npm install
npm run build
npm link
第二步：基本命令使用
打开网页：
agent-browser open example.org
获取页面快照（只显示交互元素）：
agent-browser snapshot -i
输出示例：
button "Submit" [ref=e2]
input "Email" [ref=e3]
link "Learn more" [ref=e4]
使用引用操作元素：
# 点击提交按钮
agent-browser click @e2
# 填充邮箱输入框
agent-browser fill @e3 "[email protected]"
# 点击链接
agent-browser click @e4
截图：
# 可见区域截图
agent-browser screenshot output.png
# 全页截图
agent-browser screenshot --full output.png
第三步：高级功能
多标签页管理：
# 在新标签页打开
agent-browser tab new vercel.com
# 列出所有标签页
agent-browser tab list
# 切换标签页
agent-browser tab switch 1
# 关闭标签页
agent-browser tab close
会话隔离：
# 使用命名会话
agent-browser --session mytest open example.org
# 或使用环境变量
export AGENT_BROWSER_SESSION=mytest
agent-browser open example.org
持久化配置：
# 保存浏览器状态（cookies、登录信息等）
agent-browser --profile ./my-profile open example.org
# 下次使用相同配置
agent-browser --profile ./my-profile open example.org
# 之前的登录状态会被保留
设置 HTTP 头（用于认证）：
agent-browser --headers '{"Authorization":"Bearer token123"}' open api.example.com
使用代理：
agent-browser --proxy http://proxy.example.com:8080 open example.org
# 带认证的代理
agent-browser --proxy http://user:pass@proxy.example.com:8080 open example.org
Headed 模式（显示浏览器窗口）：
agent-browser --headed open example.org
JSON 输出（供 AI 解析）：
agent-browser --json snapshot -i
第四步：与 AI 编程助手集成
Claude Code：
直接在对话中告诉 Claude：
请使用 agent-browser 打开 example.org 并点击登录按钮
Claude 会自动执行：
npx agent-browser open example.org
npx agent-browser snapshot -i
# 分析快照找到登录按钮
npx agent-browser click @e5
Cursor / Copilot / Codex：
这些工具都支持执行 Bash 命令，关键是在提示中明确指定使用 agent-browser：
使用 agent-browser 工具（而不是 fetch 或 web-search）来完成这个任务
添加到项目配置：
在项目根目录创建 AGENTS.md 或 .cursorrules 文件：
# Browser Automation
Use the `agent-browser` CLI for browser automation tasks:
1. Get a snapshot first: `agent-browser snapshot -i`
2. Use refs (@e#) to interact with elements
3. Use --json for structured output
4. Use --session for isolated browser instances
Example workflow:
- agent-browser open example.org
- agent-browser snapshot -i
- agent-browser click @e2
资源链接
- • GitHub 地址：https://github.com/vercel-labs/agent-browser
