想象一下：你让 AI 帮你发微博、抓取网页数据….但 AI 只能“看”网页源码，无法像人一样“点击按钮”、“输入文字”。这个痛点，Agent Browser 来解决。
Agent Browser: github.com/vercel-labs…
这是 Vercel Labs 开源的一个浏览器自动化 CLI 工具，专门为 AI Agent 设计。让 AI 能够像人一样操作浏览器：点击、输入、滚动、截图……一句话指令就能搞定。
本篇将深入拆解这个工具的应用场景，使用方法和核心原理。
一、Agent Browser 是什么？
一句话总结：
让 AI Agent 能够像人一样操作浏览器的命令行工具。
安装之后，AI 可以通过简单的命令完成这些事情：
- 浏览器操作自动化 - 打开新标签页，输入网址，输入内容，点击按钮，并可以直接利用现有登录态
- 网页内容抓取 - 提取动态加载的数据
- UI 自动化测试 - 模拟用户操作流程
- 网页截图记录 - 捕获页面状态
- 多会话管理 - 同时操作多个浏览器实例
与传统工具不同，Agent Browser 的设计理念是：让 AI 理解并执行浏览器操作，而不是让开发者写复杂的自动化脚本。
二、效果展示
接下来直接看下，AI Agent 下实现的常用操作效果。
场景 1：打开微博（利用已有登录态），给指定微博点赞
场景 2：打开 X (Twitter)，利用已有登录态发推文
场景 3：打开小红书指定页面，自动截图保存
三、快速上手
3.1 安装
PS：如嫌麻烦，下载 agent-browser Skill 后，可以直接让 AI Agent 进行安装。
以我 Mac 系统为例，使用 npm 全局安装：
npm install -g agent-browser
agent-browser install
3.2 Chrome 浏览器配置与授权
Agent Browser 最强大的地方在于：可以直接连接你正在使用的 Chrome 浏览器，利用现有的登录状态，无需重复登录。
启动 Chrome 调试模式
在 Chrome 地址栏输入 chrome://inspect/#remote-debugging，勾选 “Allow remote debugging”。
3.3 让 AI Agent 使用它
绝大部分情况下，直接在 Agent 中使用就好，如之前举的例子。
直接告诉你的 AI Agent：
“利用 agent-browser，在已经打开的 chrome 浏览器中，打开微博，去到央视新闻，将第一个微博点个赞。”
通过 Agent 实际操作浏览器时，首次需要授权，点击 “允许” 即可。
四、核心功能详解
虽然可以直接在 Agent 中使用，但进一步了解这些能力，有助于在 Agent 中更好地使用它。
4.1 基础操作
Agent Browser 支持所有常见的浏览器操作：
| 命令 | 说明 | 示例 |
|---|---|---|
goto | 访问 URL | goto "https://example.com" |
click | 点击元素 | click “提交按钮” |
fill | 填写输入框 | fill “搜索框” “关键词” |
check | 勾选复选框 | check “同意条款” |
hover | 鼠标悬停 | hover “菜单项” |
text | 获取文本 | text “标题” |
这些命令都支持自然语言描述，AI 不需要知道精确的 CSS 选择器。
4.2 页面快照（Snapshot）
snapshot 命令是 Agent Browser 的重要功能，它能生成页面的结构化表示：
agent-browser snapshot --interactive
输出示例：
[1] button "登录"
[2] input "用户名" (text)
[3] input "密码" (password)
[4] link "忘记密码"
这让 AI 能够“看懂”页面结构，决定下一步操作。
4.3 多会话管理
支持同时运行多个独立的浏览器实例：
# 会话 A：登录账号 1
agent-browser --session user1 goto "https://example.com"
agent-browser --session user1 fill "用户名" "user1"
# 会话 B：登录账号 2
agent-browser --session user2 goto "https://example.com"
agent-browser --session user2 fill "用户名" "user2"
每个会话有独立的：
- Cookie 和存储
- 浏览历史
- 登录状态
4.4 等待策略
控制页面加载的等待时机：
# 等待页面完全加载
goto "https://example.com" --wait load
# 等待 DOM 内容加载
goto "https://example.com" --wait domcontentloaded
# 等待网络空闲
goto "https://example.com" --wait networkidle
对于复杂的单页应用（SPA），networkidle 特别有用。
4.5 运行模式
Agent Browser 支持三种运行模式：
1. 无头模式（默认）
agent-browser goto "https://example.com"
后台运行，不显示浏览器窗口，适合自动化任务。
2. 有头模式
agent-browser --headed goto "https://example.com"
显示浏览器窗口，方便调试和观察执行过程。
3. 连接现有浏览器
agent-browser --connect-to-browser goto "https://example.com"
连接到你正在使用的 Chrome，利用现有登录态，这是最实用的模式。
其他调试选项：
# 输出调试信息
agent-browser --debug snapshot
# JSON 格式输出（方便程序处理）
agent-browser --json snapshot
五、技术原理
5.1 整体架构
Agent Browser 的核心设计思想是：用轻量的 CLI 前端 + 常驻的浏览器控制后端，实现快速响应和灵活控制。
架构全景图：
AI Agent / 用户
│
│ 发出命令：agent-browser click "登录"
▼
┌─────────────────────────────────────────────────────────────────────┐
│ Rust CLI（命令行客户端） │
│ • 解析命令参数 • 参数验证 • IPC 通信 • 格式化输出 │
└────────────────────────────┬────────────────────────────────────────┘
│
│ IPC 进程间通信
▼
┌─────────────────────────────────────────────────────────────────────┐
│ Node.js 守护进程（常驻后台） │
│ • 管理 Playwright • 维护多会话 • 智能元素定位 • 页面快照 │
└────────────────────────────┬────────────────────────────────────────┘
│
│ CDP 协议（Chrome DevTools Protocol）
▼
┌──────────────────────────────────┬──────────────────────────────────┐
│ 独立 Chromium 实例 │ 连接现有 Chrome 浏览器 │
│ • 无头/有头模式 │ • 复用登录态 │
│ • 独立会话隔离 │ • 人机协同处理验证码 │
└──────────────────────────────────┴──────────────────────────────────┘
工作流程：
- 命令发起 → AI 或用户发出指令（如
click “登录”） - 快速解析 → Rust CLI 解析命令，验证参数（< 10ms）
- 进程通信 → CLI 通过 IPC 将指令发给守护进程
- 浏览器控制 → 守护进程调用 Playwright 操作浏览器
- 结果返回 → 操作结果原路返回，CLI 格式化输出
两种运行模式对比：
| 模式 | 适用场景 | 优势 | 劣势 |
|---|---|---|---|
| 独立 Chromium | 自动化任务、批量操作 | 完全隔离，可并行多会话 | 需要重新登录 |
| 连接现有 Chrome | 需要登录态的操作 | 复用登录态，人机协同 | 依赖现有浏览器 |
5.2 三个核心技术点
1. CDP 协议：如何与浏览器对话？
CDP（Chrome DevTools Protocol）是整个系统的通信基础。它是 Chrome 提供的调试协议，本来是给开发者工具用的，Agent Browser 巧妙地利用它来控制浏览器。
通过 CDP, Agent Browser 可以：
- 发送指令（点击、输入、导航）
- 监听事件（页面加载、网络请求）
- 获取页面信息（DOM 结构、元素属性）
这就像给浏览器装了一个“遥控器”，所有操作都通过这个协议传递。无论是独立启动的 Chromium，还是连接现有的 Chrome，都是通过 CDP 来通信的。
2. 守护进程架构：为什么这么快？
传统工具每次执行都要启动浏览器（2-3 秒），Agent Browser 的守护进程首次启动后常驻内存，浏览器实例保持运行，后续命令响应时间 < 100ms。这就是“秒级响应”的秘密。
3. 智能元素定位：为什么不需要写选择器？
传统方式：page.click('#login-button')（需要知道精确的 CSS 选择器
）
Agent Browser: click “登录按钮”（自然语言描述即可）
实现原理：读取页面的可访问性树（Accessibility Tree），通过模糊匹配算法找到最符合描述的元素。如果有歧义，用 snapshot 命令查看页面结构，直接使用编号引用：click [1]。
六、与其他方案的对比
| 方案 | 优势 | 劣势 |
|---|---|---|
| Playwright/Puppeteer | 功能强大，文档完善 | 需要编写代码，AI 难以直接调用 |
| Selenium | 支持多浏览器，跨语言 | 配置复杂，性能较慢 |
| 录制工具 | 可视化操作，无需编程 | 脚本脆弱，无法适应页面变化 |
Agent Browser 的差异化：
- 命令行接口，自然语言元素定位
- 零配置，守护进程架构更快
- 智能元素匹配，原生 AI 集成
核心区别： Agent Browser 是为 AI Agent 设计的，传统工具是为程序员设计的。当你想让 AI 帮你操作浏览器时，Agent Browser 是最直接的选择。
七、需要注意的几个问题
1. 遇到验证码怎么办？
连接真实浏览器，复用登录态。遇到验证码等无法自动处理的场景时，人工介入完成关键步骤就行，这就是人机协同的优势。
2. 复杂动态页面
对于无限滚动、实时更新的页面，可能需要多次执行 snapshot 确认状态，或手动添加等待时间。
3. 内存占用
守护进程会持续占用内存，长时间运行建议定期重启会话。并行会话过多也会影响性能。
八、结语
以前，浏览器自动化是程序员的专属技能——学 API、写脚本、调选择器。现在，Agent Browser 让这件事变简单了：告诉 AI 想做什么，它就能帮你完成。
更关键的是，它能直接连接你正在使用的浏览器，复用现有的登录状态。发微博、发推特、操作各种网站，都不需要重复登录。人负责想法，AI 负责执行，工具提供能力。
如果你也想让 AI 帮你自动化浏览器操作，试试 Agent Browser。
