agent-browser 完全指南：AI Agents 專屬的命令行瀏覽器自動化工具

ByAPIYI - Stable and affordable AI API

作者注：深度解析 Vercel 推出的 agent-browser 瀏覽器自動化 CLI 工具，上下文佔用比 Playwright MCP 減少 93%，零配置即用，兼容 Claude Code、Cursor、Codex 等主流 AI 編程助手

AI 編程助手需要操作瀏覽器時，傳統的 Playwright MCP 方案往往會消耗大量上下文。Vercel 團隊推出的 agent-browser 徹底解決了這個問題——上下文佔用減少高達 93%，零配置即可使用，是 AI Agents 進行瀏覽器自動化的理想選擇。

核心價值: 讀完本文，你將掌握 agent-browser 的安裝配置和使用方法，能夠讓你的 AI 助手高效地執行網頁操作任務。

agent-browser-ai-browser-automation-cli-guide-zh-hant 图示

agent-browser 核心要點

特性 說明 優勢
93% 更少上下文 相比 Playwright MCP 大幅減少 token 消耗 節省成本，避免上下文溢出
Rust CLI 原生 Rust 實現，Node.js 降級方案 極速響應，跨平臺支持
零配置 無需安裝 MCP，npm 安裝即用 降低使用門檻
Snapshot + Refs 可訪問性樹快照 + 元素引用 確定性元素選擇

什麼是 agent-browser

agent-browser 是 Vercel Labs 推出的開源瀏覽器自動化 CLI 工具，專爲 AI Agents 設計。它採用創新的三層架構：

  1. Rust CLI – 快速的命令解析和守護進程通信
  2. Node.js Daemon – Playwright 瀏覽器生命週期管理
  3. Fallback – 當原生二進制不可用時的 Node.js 執行方案

這種設計使得 agent-browser 既有 Rust 的性能優勢，又保持了 Node.js 生態的兼容性。

爲什麼比 Playwright MCP 更省上下文

傳統的 Playwright MCP 方案存在幾個問題：

  • 工具氾濫: Playwright MCP 暴露了 26+ 個工具方法
  • 上下文膨脹: 複雜網頁的可訪問性樹可能非常龐大
  • 決策遲緩: 給 AI 太多工具選擇反而降低效率

agent-browser 通過精簡的命令集和 "Snapshot + Refs" 工作流解決了這些問題，實現了上下文佔用減少 93%。

agent-browser-ai-browser-automation-cli-guide-zh-hant 图示

agent-browser 快速上手

安裝配置

只需兩行命令即可完成安裝：

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

Linux 系統如需安裝系統依賴：

agent-browser install --with-deps

基本使用

以下是最常用的命令示例：

# 打開網頁
npx agent-browser open example.org

# 獲取頁面快照 （可交互元素）
npx agent-browser snapshot -i

# 點擊元素 （使用 ref 引用）
npx agent-browser click @e2

# 在新標籤頁打開
npx agent-browser tab new vercel.com

# 填充表單
npx agent-browser fill @e3 "[email protected]"

# 截圖
npx agent-browser screenshot output.png

查看完整命令列表 
# 導航操作
agent-browser open <url>          # 打開網頁
agent-browser back                # 後退
agent-browser forward             # 前進
agent-browser reload              # 刷新

# 元素交互
agent-browser click <selector>    # 點擊
agent-browser dblclick <selector> # 雙擊
agent-browser fill <sel> <text>   # 填充輸入框
agent-browser type <sel> <text>   # 逐字輸入
agent-browser press <key>         # 按鍵
agent-browser hover <selector>    # 懸停
agent-browser select <sel> <val>  # 下拉選擇
agent-browser check <selector>    # 勾選
agent-browser scroll <direction>  # 滾動
agent-browser drag <from> <to>    # 拖拽
agent-browser upload <sel> <file> # 上傳文件

# 信息獲取
agent-browser get text <selector>   # 獲取文本
agent-browser get html <selector>   # 獲取 HTML
agent-browser get value <selector>  # 獲取值
agent-browser get attr <sel> <attr> # 獲取屬性
agent-browser get title             # 獲取標題
agent-browser get url               # 獲取 URL
agent-browser is visible <selector> # 是否可見
agent-browser is enabled <selector> # 是否啓用

# 快照與截圖
agent-browser snapshot         # 完整快照
agent-browser snapshot -i      # 僅可交互元素
agent-browser snapshot --json  # JSON 格式輸出
agent-browser screenshot       # 截圖

# 會話管理
agent-browser --session mytest open url  # 命名會話
agent-browser close                      # 關閉會話

建議: 使用 --json 參數獲取結構化輸出，便於 AI Agent 解析處理。

Snapshot + Refs 工作流詳解

這是 agent-browser 最核心的創新——通過可訪問性樹快照和元素引用實現確定性操作。

獲取快照

agent-browser snapshot -i

輸出示例：

button "Submit" [ref=e2]
input "Email" [ref=e3]
link "Learn more" [ref=e4]

使用 Refs 執行操作

# 使用 @e# 語法引用元素
agent-browser click @e2        # 點擊 Submit 按鈕
agent-browser fill @e3 "[email protected]"  # 填充郵箱

工作流優勢

傳統方式 Snapshot + Refs
每次操作重新查詢 DOM 從快照獲取 refs，無需重複查詢
CSS 選擇器可能失效 refs 在頁面不變時保持穩定
需要複雜的元素定位邏輯 直接使用 @e# 引用

agent-browser 與 Playwright MCP 對比

agent-browser-ai-browser-automation-cli-guide-zh-hant 图示

對比項 agent-browser Playwright MCP
上下文佔用 減少 93% 完整可訪問性樹
安裝配置 npm install 即用 需配置 MCP Server
執行方式 Bash 命令 MCP 協議
兼容性 任何支持 Bash 的 Agent 需 MCP 支持

在 AI 編程助手中使用

Claude Code 集成

在與 Claude Code 對話時，告訴它使用 agent-browser：

請使用 agent-browser 打開 example.org 並點擊登錄按鈕

Claude Code 會執行：

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 工具。

最佳實踐

  1. 明確指定工具: 告訴 AI 使用 agent-browser，避免它調用其他瀏覽器工具
  2. 使用 JSON 輸出: --json 參數讓 AI 更容易解析結果
  3. 善用 Snapshot: 先獲取快照，再執行操作
  4. 命名會話: 使用 --session 管理多個瀏覽器實例

常見問題

Q1: agent-browser 和 browser-use 有什麼區別？

agent-browser 是 CLI 工具，通過 Bash 命令調用；browser-use 是 Python 庫，通過 API 調用。agent-browser 更適合與 AI 編程助手集成，因爲大多數 Agent 都支持執行 Bash 命令。

Q2: 爲什麼上下文佔用能減少 93%？

Playwright MCP 會將完整的可訪問性樹發送給 AI，複雜頁面可能有數千個節點。agent-browser 通過 Snapshot + Refs 機制，只返回精簡的元素引用列表，大幅減少了需要傳遞的信息量。

Q3: Headed 和 Headless 模式如何切換？

默認是 Headless 模式。如需可視化調試，使用 --headed 參數：

agent-browser --headed open example.org

這樣可以看到瀏覽器窗口，便於調試和驗證操作。

總結

agent-browser 的核心要點：

  1. 93% 上下文節省: 相比 Playwright MCP 大幅減少 token 消耗，避免長上下文警告
  2. 零配置即用: 無需安裝 MCP，npm 全局安裝後即可使用
  3. Snapshot + Refs: 創新的工作流設計，確定性元素選擇，無需重複查詢 DOM
  4. 廣泛兼容: 支持 Claude Code、Cursor、Codex、Copilot、Gemini 等所有支持 Bash 的 AI Agent

對於需要讓 AI 助手執行瀏覽器操作的場景，agent-browser 是目前最高效的選擇。

如果你在使用 AI 編程助手進行 Web 開發或測試，推薦嘗試 agent-browser。結合 API易 apiyi.com 提供的 AI 模型服務，可以構建更高效的自動化工作流。

參考資料

⚠️ 鏈接格式說明: 所有外鏈使用 資料名: domain.com 格式，方便複製但不可點擊跳轉，避免 SEO 權重流失。

  1. agent-browser GitHub 倉庫: Vercel Labs 官方項目，包含完整文檔和示例

    • 鏈接: github.com/vercel-labs/agent-browser
    • 說明: 查看最新功能更新和使用說明

  2. Chris Tate Twitter: agent-browser 作者的 Twitter 賬號

    • 鏈接: x.com/ctatedev
    • 說明: 獲取項目最新動態和使用技巧

  3. Playwright MCP 對比文檔: Playwright MCP 工具氾濫問題分析

    • 鏈接: speakeasy.com/blog/playwright-tool-proliferation
    • 說明: 瞭解 agent-browser 解決的痛點

作者: 技術團隊
技術交流: 歡迎在評論區討論，更多資料可訪問 API易 apiyi.com 技術社區

Try AI Large Model https://api.apiyi.com for free
Stable and reliable AI LM API aggregation service, Get 300 Millions Tokens for Free~