开源 AI Agent 浏览器，赋能网页自动化任务

开源 AI Agent 浏览器，赋能网页自动化任务 | 前端进阶之旅

Full translation

完整中文译文

Web 浏览是连续且异步的，而 Agent 以工具和步骤为单位思考。ABP 将 Web 导航重新组织成 Agent 熟悉且喜爱的离散式、多模态聊天格式。

Online Mind2Web 得分 90.53%——结果可复现

自动化运行速度提升 2 倍

*与 Playwright MCP 相比

ABP 是 Chromium 的一个 fork，将 MCP 和 REST 直接内置到了浏览器引擎中。

一次请求 = 一个完整步骤：稳定状态 + 截图 + 事件日志

无需 WebSocket，也无需管理 CDP session，只需使用 HTTP。

每个操作的额外开销约为 100ms（包括截图）。真正的瓶颈是 LLM，而不是浏览器。

60 秒上手体验（Claude Code）

# 1) Add ABP as an MCP server to Claude Code
claude mcp add browser -- npx -y agent-browser-protocol --mcp

# 2) Sanity check the server is up (optional)
curl -s http://localhost:8222/api/v1/tabs

等待浏览器启动，然后向 Claude 提问：

“在 DoorDash 上帮我找找旧金山 415 Mission St 附近的宫保鸡丁。”

你应该注意到：每次工具调用都会返回一个已经稳定下来的页面状态（截图 + 事件），而且页面会在两个步骤之间冻结，因此 Claude 永远不会与浏览器抢时序。

每个操作会得到什么

AI Agent                                 ABP Chromium
    │                                         │
    │  POST /click (x=450, y=320)             │
    │────────────────────────────────────────>│
    │                                         │  Inject real input event
    │                                         │  Wait for page to settle
    │                                         │  Capture compositor screenshot
    │                                         │  Collect events (tab_created, dialog, file_chooser…)
    │                                         │  Pause JavaScript + virtual time
    │  200 OK: screenshot + events            │
    │<────────────────────────────────────────│
    │
    ·  (agent inspects screenshot, decides)   ·
    │
    │  POST /type (text="Show HN")            │
    │────────────────────────────────────────>│
    │                                         │  Unpause JS + time
    │                                         │  Inject real keyboard events
    │                                         │  Wait for settle → screenshot → events → pause
    │  200 OK: screenshot + events            │
    │<────────────────────────────────────────│

注意：如果你已经配置了 Playwright MCP server，请先将其禁用，再使用 ABP，以免工具名称发生冲突。

claude mcp add browser -- npx -y agent-browser-protocol --mcp

然后向 Claude 提问：“打开 news.ycombinator.com，找到排名最高的 AI 相关文章。”

codex mcp add browser -- npx -y agent-browser-protocol --mcp

配置一个支持视觉能力的模型，并添加 MCP server。

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "browser": {
      "type": "local",
      "command": ["npx", "-y", "agent-browser-protocol", "--mcp"],
      "enabled": true,
      "environment": {
      }
    }
  }
}

让 Claude Desktop 通过 stdio 启动 server——无需协调端口。将以下内容添加到 claude_desktop_config.json：

{
  "mcpServers": {
    "browser": {
      "command": "npx",
      "args": ["-y", "agent-browser-protocol", "--mcp"]
    }
  }
}

编辑配置后，重启 Claude Desktop。

macOS：从 Finder 启动的 Claude Desktop 不会继承 shell 的 PATH，因此直接使用 "npx" 可能会出现 spawn npx ENOENT。请改用绝对路径——可以通过 which npx 查找（例如在 Apple Silicon 上可能是 /opt/homebrew/bin/npx）。

任意 MCP Client（HTTP）

ABP 会从 15678 开始自动选择端口，并且端口可能在不同运行之间发生变化。如果需要静态 Client 配置，请使用 --port 固定端口：

npx -y agent-browser-protocol --port 8222

然后将 MCP Client 指向 http://localhost:8222/mcp（streamable HTTP）。

使用固定端口启动 ABP（下方的 curl 示例假设端口为 8222）：

npx -y agent-browser-protocol --port 8222

然后使用 curl 操作它：

# List tabs
curl -s http://localhost:8222/api/v1/tabs

# Navigate (returns screenshot + events)
# Make sure you replace <TAB_ID> with an actual tab_id from above
curl -s -X POST http://localhost:8222/api/v1/tabs/<TAB_ID>/navigate \
  -H 'content-type: application/json' \
  -d '{"url":"https://example.com","screenshot":{"format":"webp"}}'

有关 curl 示例和完整 API 参考，请参阅 docs/REST-API.md。

需要了解 npm package 的详细信息？请参阅 theredsix/abp-npm，其中包含 TypeScript SDK、plugin 配置和 debug server。

想手动下载二进制文件？请参阅 MANUAL_INSTALL.md，获取直接下载和启动说明。

想从源代码构建？请参阅 COMPILE.md，其中包含 macOS、Linux 和 Windows 的构建说明。

想卸载？请参阅 Uninstall。

简短演示：使用 Google Maps 查找一条从西雅图到洛杉矶的火车路线。

请注意，当 LLM 思考时，加载动画会被冻结。ABP 会在操作之间暂停 JavaScript 和虚拟时间，让页面等待 Agent。

为什么选择 ABP（以及为什么要构建 Chromium）

核心问题在于二者并不匹配：

Web 浏览是连续且异步的

LLM Agent 采用逐步推理

大多数自动化技术栈都会迫使 Agent 与实时运行的浏览器抢时序，然后再用等待和重试来弥补这种不匹配。

ABP 将浏览变成了一台步骤机。每次请求都会注入原生输入，等待达到由引擎定义的“稳定”边界，捕获 compositor 输出（包括光标），返回事件日志，然后冻结 JavaScript 和虚拟时间，直至下一个步骤开始。

ABP 将浏览重新组织成一台步骤机：通过请求/响应契约，确保 Agent 始终只对一个稳定、冻结的世界状态采取行动。

每次 API 调用都是一个原子步骤。ABP 通过 Chromium 的输入系统注入真实输入，等待达到由引擎定义的“稳定”边界，捕获 compositor 输出（包括光标），并返回期间发生的事件。JavaScript 和虚拟时间会在步骤之间冻结。Agent 永远不需要与浏览器抢时序——它在一个愿意等待它的世界中观察、决策、行动，然后重复这一过程。

TypeScript SDK + npm 详情：README

REST API 参考 + curl 示例：REST-API.md

手动下载并启动二进制文件：MANUAL_INSTALL.md

从源代码构建：COMPILE.md

训练 / SQLite session schema：TRAINING.md

ABP 设计为在你的本地计算机上运行。

API 默认通过 localhost 提供服务（从 15678 开始自动选择端口；可使用 --port 固定端口）。

ABP 默认会阻止真实的系统输入；如需覆盖此行为，请使用 --allow-system-inputs。

ABP 有何不同

1. 引擎级控制

ABP 将 HTTP server 直接嵌入浏览器进程。请求在 IO thread 上进行路由，并被分派到 UI thread，因此可以直接访问 Browser、TabStripModel 和 DevTools agent。

+---------------------------------------------------------+
|                  AI Agent (curl / Python / Go)          |
+----------------------------+----------------------------+
                             | REST API
                             v
+---------------------------------------------------------+
|              AbpHttpServer (IO thread)                  |
|              localhost:8222/api/v1/*                    |
+----------------------------+----------------------------+
                             | PostTask
                             v
+---------------------------------------------------------+
|              AbpController (UI thread)                  |
|   Direct access to Browser, TabStripModel, DevTools     |
+----------------------------+----------------------------+
                             |
              +--------------+--------------+
              v              v              v
         +--------+    +----------+    +--------+
         | Input  |    | Renderer |    |Network |
         | System |    |  (Blink) |    | Stack  |
         +--------+    +----------+    +--------+

2. 智能操作响应

每个操作都会返回 Agent 做出下一步决策所需的信息：

{
  "result": {"status": "clicked"},
  "screenshot_before": {
    "data": "base64-webp...",
    "width": 1920, "height": 1080
  },
  "screenshot_after": {
    "data": "base64-webp...",
    "width": 1920, "height": 1080
  },
  "scroll": {"scrollX": 0, "scrollY": 150, "pageWidth": 1280, "pageHeight": 4000, "viewportWidth": 1280, "viewportHeight": 720},
  "events": [
    {"type": "navigation", "virtual_time_ms": 0, "data": {"tab_id": "...", "url": "https://...", "frame_id": "...", "is_main_frame": true}},
    {"type": "dialog", "virtual_time_ms": 0, "data": {"tab_id": "...", "dialog_type": "confirm", "message": "Delete this item?"}},
    {"type": "file_chooser", "virtual_time_ms": 0, "data": {"id": "fc_1", "tab_id": "...", "chooser_type": "open", "multiple": false, "accepts": [".pdf", ".docx"], "pending": true}}
  ],
  "timing": {"action_started_ms": 1700000000000, "action_completed_ms": 1700000000050, "duration_ms": 50},
  "cursor": {"x": 450, "y": 320, "cursor_type": "pointer"}
}

无需在每个操作之后调用 "take screenshot"，也无需轮询 navigation events。

在 Agent 的操作之间冻结 JavaScript 执行。页面会停止，计时器会冻结，Date.now() 也会冻结。当你截图时，捕获到的是一个确定性的状态。

# Enable execution control
curl -X POST http://localhost:8222/api/v1/tabs/{id}/execution \
  -d '{"paused": true}'

该功能默认启用。可使用 --abp-disable-pause 禁用。

可以要求 ABP 在任意操作的响应截图中，为交互元素绘制边界框：

# Markup on a click action
curl -X POST http://localhost:8222/api/v1/tabs/{id}/click \
  -d '{"x": 450, "y": 320, "screenshot": {"markup": ["clickable", "typeable"]}}'

# Markup on navigation
curl -X POST http://localhost:8222/api/v1/tabs/{id}/navigate \
  -d '{"url": "https://example.com", "screenshot": {"markup": ["typeable"]}}'

Markup 选项：clickable、typeable、scrollable、grid、selected。

ABP 提供位于 compositor layer 的光标，它会随着输入操作移动，并出现在截图中。你的 Agent 所看到的内容与人类所见一致。

6. 原生事件处理

文件选择器、对话框和下载任务都会在事件流中上报：

{
  "events": [
    {"type": "dialog", "data": {"tab_id": "...", "dialog_type": "confirm", "message": "Delete this item?"}}
  ]
}

可以通过专用 endpoint 处理这些事件：

curl -X POST http://localhost:8222/api/v1/tabs/{id}/dialog/accept

7. 用于 Agent 训练的 Session 录制

每个操作都会被记录到 SQLite 数据库中，包括操作前后的截图、参数、结果、耗时以及成功或失败状态。成功的 Agent session 可以转化为 vision-language model 的 fine-tuning 数据集。

Action #1: navigate("https://example.com")
  ├── screenshot_before.webp
  ├── params: {"url": "https://example.com"}
  └── screenshot_after.webp

Action #2: click(450, 320)
  ├── screenshot_before.webp
  ├── params: {"x": 450, "y": 320}
  └── screenshot_after.webp

使用 --abp-session-dir 控制 session 的存储位置：

./abp --abp-session-dir=./datasets/session-001

有关 SQLite schema、abp-debug UI 和训练流水线示例，请参阅 TRAINING.md。

这些是 ABP 二进制文件自身的 flags。通过 npx agent-browser-protocol 启动时，请改用 npm CLI flags（例如 --port、--session-dir、--zoom）——运行 npx agent-browser-protocol --help 可查看完整列表。

chrome/browser/abp/                 # Core ABP implementation
  abp_http_server.cc/h              # HTTP server (IO thread)
  abp_controller.cc/h               # Request handling (UI thread)
  abp_action_context.cc/h           # Action lifecycle (pause/resume/screenshot)
  abp_input_dispatcher.cc/h         # Native input dispatch (click/scroll/keys)
  abp_event_observer.cc/h           # CDP event client per tab
  abp_event_collector.cc/h          # Event collection during actions
  abp_mcp_handler.cc/h              # Embedded MCP server (JSON-RPC over HTTP)
  abp_tool_builder.cc/h             # MCP tool schema builder
  abp_history_controller.cc/h       # Session/action history API
  abp_history_database.cc/h         # SQLite history storage
  abp_download_observer.cc/h        # Download tracking
  abp_config.cc/h                   # Runtime configuration
  abp_types.h                       # Shared type definitions
  abp_switches.cc/h                 # Command line flags

plans/                              # Design documents
  API.md                            # REST API specification
  agent-browser-protocol.md         # Architecture
  mcp.md                            # MCP specification

ABP 正在积极开发中。目前已实现：

Tab 管理（列出、创建、关闭、激活、停止）
导航（URL、后退、前进、重新加载）
支持元素 markup 和虚拟光标的截图
鼠标输入（点击、移动、拖拽、通过原生 wheel events 滚动）
键盘输入（输入文本、按键、带修饰键的 key down/up）
文本提取（完整页面或 CSS selector）
输入辅助功能（slider、clear-text）
时长等待和网络等待
对话框处理（alert、confirm、prompt、beforeunload）
文件选择器支持（本地文件和 base64 内容）
原生 select 弹出菜单处理
下载管理（列表、状态、取消、内容获取）
权限提示处理 + 地理位置伪装
执行控制（JS 暂停/恢复、虚拟时间）
使用 SQLite 跟踪历史记录（sessions、actions、events）
虚拟光标渲染（compositor layer）
浏览器管理（状态、关闭）
内嵌 MCP server，在 /mcp 提供 18 个工具
操作成功/失败状态跟踪
将人类浏览 session 录制为 Agent fine-tuning 的训练数据
完整的 headless 支持

ABP 包含 integration tests，用于验证导航、输入、截图、JavaScript 执行、执行控制以及 MCP 协议兼容性等核心功能。

有关完整测试矩阵、测试页面文档以及添加新测试的指南，请参阅 TESTING.md。

ABP 还公开了一套完整的 REST API，可用于直接进行 HTTP 集成。有关快速入门和完整 endpoint 参考，请参阅 docs/REST-API.md。

Han Wang（@theredsix）

从你的 Client 中移除 MCP server：

# Claude Code
claude mcp remove browser

# Codex CLI
codex mcp remove browser

对于其他 Client，请从 MCP 配置文件中删除 browser 条目。

ABP 是 Chromium 的一个大型 fork。欢迎贡献；如有意参与，请联系 maintainer。

ABP 建立在 Chromium 团队令人惊叹的工作成果之上。我们感谢他们对开源事业的长期投入。这个 fork 是在 Claude Code 的协助下创建的。我们同样非常感谢 sponsors 的慷慨支持。