ByteNoteByteNote
agent-browser 与 Claude Code 集成使用指南
字

字节笔记本

2026年6月8日

agent-browser 与 Claude Code 集成使用指南

#开源工具
API中转
¥120

本文介绍如何将 agent-browser 与 Claude Code 结合使用，让 AI 编程助手具备浏览器自动化能力，实现网页操作、表单填写、截图、数据抓取等任务的自动化。

什么是 agent-browser

agent-browser 是 Vercel Labs 开源的浏览器自动化 CLI 工具，专为 AI Agent 设计。它完全用 Rust 编写，采用客户端-守护进程架构，提供 140+ 命令支持页面导航、元素交互、截图、表单填写、网络拦截等操作。支持 macOS、Linux、Windows 三大平台。

核心亮点：

  • 原生 Rust 编写：1.6 倍冷启动速度、18 倍内存降低、99 倍安装包减小
  • Ref 引用系统：通过 snapshot 获取页面元素引用 @e1、@e2，精准定位交互
  • 批量执行：batch 命令一次执行多步操作，避免进程启动开销
  • AI Chat 模式：支持自然语言控制浏览器
  • 多会话隔离：独立浏览器实例、Cookie、认证状态
  • Dashboard 监控：实时查看浏览器视口和命令活动

快速安装

bash
# npm 全局安装（推荐）
npm install -g agent-browser
agent-browser install

# Homebrew（macOS）
brew install agent-browser
agent-browser install

# Cargo（Rust）
cargo install agent-browser
agent-browser install

核心工作流

agent-browser 的核心工作流非常简洁：打开页面 → 获取快照 → 通过引用交互。

bash
# 1. 打开网页
agent-browser open example.com

# 2. 获取交互元素快照
agent-browser snapshot -i
# 输出：
# - heading "Example Domain" [ref=e1]
# - button "Submit" [ref=e2]
# - textbox "Email" [ref=e3]

# 3. 用 ref 交互
agent-browser click @e2
agent-browser fill @e3 "test@example.com"
agent-browser screenshot page.png

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

snapshot -i 只显示交互元素，输出的 @eN 引用可以直接用于后续所有命令，无需重复查询 DOM。

与 Claude Code 集成的三种方式

方式一：安装为 Claude Code Skill（推荐）

通过 skills 工具一键安装：

bash
npx skills add vercel-labs/agent-browser

这会在项目的 .agents/skills/agent-browser/ 下创建一个轻量发现桩，运行时动态加载最新技能内容，不会随版本更新而过时。

安装后，Claude Code 会自动识别浏览器相关任务并调用 agent-browser。例如在对话中说：

"用 agent-browser 打开 google.com 并搜索 Claude Code"

Claude Code 会自动生成命令序列：open → snapshot → fill → click → screenshot。

方式二：写入 CLAUDE.md 配置

在项目根目录的 CLAUDE.md 或全局 ~/.claude/CLAUDE.md 中添加：

markdown
## Browser Automation

Use `agent-browser` for web automation. Run `agent-browser --help` for all commands.

Core workflow:
1. `agent-browser open <url>` - Navigate to page
2. `agent-browser snapshot -i` - Get interactive elements with refs (@e1, @e2)
3. `agent-browser click @e1` / `fill @e2 "text"` - Interact using refs
4. Re-snapshot after page changes

方式三：作为 MCP 工具补充

如果你已配置 chrome-devtools MCP，agent-browser 可以作为补充工具：

场景推荐工具
对话式交互调试chrome-devtools MCP
脚本化批量操作agent-browser CLI
自动化测试agent-browser CLI
实时页面调试chrome-devtools MCP

两者可以并存，互不冲突。

常用命令速查

页面操作

bash
agent-browser open <url>          # 打开页面
agent-browser back / forward      # 前进后退
agent-browser reload              # 刷新
agent-browser screenshot page.png # 截图
agent-browser pdf output.pdf      # 保存 PDF

元素交互

bash
agent-browser click @e1            # 点击
agent-browser fill @e2 "text"     # 填写
agent-browser type @e2 "text"     # 输入
agent-browser hover @e3            # 悬停
agent-browser select @e4 "value"   # 下拉选择
agent-browser upload @e5 file.pdf  # 上传文件

信息获取

bash
agent-browser get text @e1         # 获取文本
agent-browser get html @e1         # 获取 HTML
agent-browser get value @e1        # 获取输入值
agent-browser get title            # 获取页面标题
agent-browser get url              # 获取当前 URL
agent-browser eval "document.title" # 执行 JavaScript

批量执行

bash
# 参数模式
agent-browser batch "open https://example.com" "snapshot -i" "click @e1" "screenshot"

# JSON 管道模式
echo '[
  ["open", "https://example.com"],
  ["snapshot", "-i"],
  ["click", "@e1"],
  ["screenshot", "result.png"]
]' | agent-browser batch --json

等待与检查

bash
agent-browser wait "#element"              # 等待元素出现
agent-browser wait --text "Welcome"      # 等待文本出现
agent-browser wait --load networkidle     # 等待网络空闲
agent-browser wait --fn "window.ready"     # 等待 JS 条件

会话管理与认证

多会话隔离

bash
# 不同会话使用独立浏览器实例
agent-browser --session agent1 open site-a.com
agent-browser --session agent2 open site-b.com

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

持久化登录状态

bash
# 方式一：Chrome Profile 复用
agent-browser --profile Default open gmail.com

# 方式二：自定义持久化目录
agent-browser --profile ~/.myapp-profile open myapp.com

# 方式三：Session 自动保存
agent-browser --session-name myapp open myapp.com

HTTP Header 认证

bash
# 按 Origin 作用域设置 Header
agent-browser open api.example.com --headers '{"Authorization": "Bearer <token>"}'

高级功能

标注截图

--annotate 在截图上叠加编号标签，与 snapshot 的 ref 一一对应，方便多模态 AI 理解页面布局：

bash
agent-browser screenshot --annotate page.png
# [1] @e1 button "Submit"
# [2] @e2 link "Home"
agent-browser click @e2

网络拦截与 Mock

bash
# 拦截请求
agent-browser network route "*/api/*" --body '{"mock": true}'
# 阻止特定资源
agent-browser network route "*" --abort --resource-type script
# 查看请求日志
agent-browser network requests --type xhr

React DevTools 集成

bash
agent-browser open --enable react-devtools http://localhost:3000
agent-browser react tree           # 组件树
agent-browser react inspect @e1   # 组件详情
agent-browser vitals               # Web Vitals 指标

Dashboard 实时监控

bash
agent-browser dashboard start  # 启动 Dashboard（端口 4848）
agent-browser open example.com  # 操作自动在 Dashboard 可见

AI Chat 自然语言控制

bash
# 单次指令
agent-browser chat "open google.com and search for agent-browser"

# 交互式 REPL
agent-browser chat

云浏览器支持

agent-browser 支持多种云浏览器服务，适合无头环境部署：

提供商启用方式
Browserless-p browserless
Browserbase-p browserbase
Browser Use-p browseruse
Kernel-p kernel
AgentCore (AWS)-p agentcore
iOS Simulator-p ios

项目信息

  • GitHub：vercel-labs/agent-browser
  • Stars：35.5k+
  • 许可证：Apache-2.0
  • 语言：Rust 85%、TypeScript 12%
  • 最新版本：v0.27.1
开源工具
上一篇

零 API 费用的本地 Coding Agent：4090 + Codex + LM Studio 实战

下一篇

agent-browser 与 Claude Code 集成使用指南

分享: