2周11K star:让 AI 编程助手自动操作浏览器的神器

Agent Browser 是 Vercel Labs 推出的一款专为 AI 智能体设计的浏览器自动化 CLI 工具。它能让 Claude Code、Cursor、Copilot 等 AI 编程助手直接控制浏览器，自动完成网页测试、数据抓取、表单填写等任务。

核心特性

93% 的上下文节省

传统的 Playwright MCP 方案会将完整的可访问性树（包含数千个节点）发送给 AI，导致：

• • Token 消耗巨大：复杂页面可能消耗数万 tokens
• • 上下文溢出：容易触发模型的上下文长度限制
• • 响应变慢：AI 需要处理大量冗余信息

Agent Browser 通过 "Snapshot + Refs" 机制，只返回精简的元素引用列表，将上下文消耗降低 93%。这意味着：

• • 更低的 API 成本
• • 更快的响应速度
• • 不会触发上下文警告

零配置，开箱即用

不需要配置 MCP Server，不需要复杂的设置文件，只需两行命令：

npm install -g agent-browser
agent-browser install  # 下载 Chromium

安装完成后，AI 助手就可以直接通过 Bash 命令调用，无需任何额外配置。

Rust 性能 + Node.js 生态

Agent Browser 采用客户端-守护进程架构：

• • Rust CLI：快速的命令解析和通信
• • Node.js Daemon：管理 Playwright 浏览器实例
• • 自动降级：如果没有原生二进制文件，自动使用 Node.js

这种设计既享受了 Rust 的性能优势，又保持了与 Node.js 生态的兼容性。

Snapshot + Refs：确定性元素选择

这是 Agent Browser 最创新的功能。传统方案需要反复查询 DOM，CSS 选择器还可能失效。Agent Browser 通过快照和引用机制，实现了确定性的元素操作：

1. 1. 获取快照：一次性获取页面的交互元素列表
2. 2. 使用引用：通过 @e# 语法直接操作元素
3. 3. 稳定可靠：只要页面不变，引用就始终有效

[配图占位符：Snapshot + Refs 工作流程图]

主要功能

页面导航

• • 打开网页、前进、后退、刷新•
• • 支持多标签页管理
• • 支持 iframe 操作

元素交互

• • 点击：单击、双击、右键
• • 输入：填充表单、逐字输入
• • 选择：下拉菜单、复选框
• • 拖拽：拖放元素
• • 上传：文件上传
• • 滚动：页面滚动、元素滚动

信息提取

• • 获取文本、HTML、属性值
• • 获取页面标题、URL
• • 检查元素可见性、启用状态
• • 获取页面快照（可访问性树）

截图与快照

• • 全页截图：--full 参数
• • 交互元素快照：-i 参数只显示可交互元素
• • 紧凑模式：-c 参数移除空结构元素
• • 深度限制：-d 参数限制树深度

会话管理

• • 隔离会话：--session 参数运行多个独立浏览器实例
• • 持久化配置：--profile 参数保存 cookies、localStorage、登录状态
• • 自定义浏览器：--executable-path 使用自定义浏览器可执行文件

网络控制

• • • 设置 HTTP 头
• • • 配置代理服务器
• • • 忽略 HTTPS 错误
• • • Cookie 和存储管理

调试模式

• • Headed 模式：--headed 显示浏览器窗口
• • CDP 模式：--cdp 连接到现有浏览器
• • 流式预览：通过 WebSocket 实时查看浏览器视口
• • 调试输出：--debug 参数

使用方法

第一步：安装 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