execute_code,讓 agent 寫 Python 控制瀏覽器,自己決定要回傳什麼。結果:Token 用量少 877 倍、Response payload 小 144 倍、每千次工作流成本從 $744 降到 $0.85(Claude Sonnet 4.6)。MIT 開源。
問題:為什麼 Browser MCP 這麼燒錢?
當你的 AI agent 需要瀏覽網頁時,目前主流有兩個 MCP server:
- Playwright MCP(Microsoft)— 22 個核心工具,34 個總工具
- Chrome DevTools MCP(Google)— 26 個工具
它們的共同設計:每次操作,都把整個頁面的 accessibility tree 塞進 context window。
聽起來合理——AI 需要「看到」頁面才能操作。問題是代價太大了:
| 操作 | Playwright MCP | Chrome DevTools MCP | OpenBrowser MCP |
|---|---|---|---|
| Navigate | ~124K tokens(自動附帶整頁快照) | ~60 tokens(只回 URL) | ~34 tokens(只回 URL) |
| 取得頁面狀態 | ~124K tokens(又一次完整快照) | ~135K tokens(完整快照) | ~105 tokens(精簡摘要) |
| Click | ~85 tokens | ~55 tokens | ~20 tokens |
| Go back | ~50 tokens | ~37 tokens | ~19 tokens |
Playwright MCP 最慘——每次 navigate 就自動 dump 一次,不管你需不需要。一個 5 步的 Wikipedia 工作流(導航 → 取得狀態 → 點連結 → 返回 → 再取得狀態),三者的 token 消耗:
| 指標 | Playwright MCP | Chrome DevTools MCP | OpenBrowser MCP |
|---|---|---|---|
| 預估 tokens | 248,016 | 134,802 | 283 |
| Token 比率 | 877x | 476x | 1x(基準) |
877 倍。不是 8.7 倍,是八百七十七倍。
OpenBrowser 的核心思路:CodeAgent 架構
OpenBrowser 的解法很直覺:不給 AI 一堆工具,只給它一支筆。
整個 MCP server 只暴露一個工具 execute_code。AI agent 寫 Python 程式碼,OpenBrowser 在一個 persistent runtime(類似 Jupyter notebook)裡執行,agent 自己控制要回傳什麼。
傳統模式 vs CodeAgent 模式:
| 場景 | 傳統 MCP(Playwright / Chrome DevTools) | OpenBrowser(CodeAgent) |
|---|---|---|
| Navigate | 呼叫 navigate 工具 → 回傳整頁 a11y tree |
寫 Python await browser.navigate("url") → 回傳 URL 確認 |
| 找特定元素 | dump 整頁快照,LLM 自己在 538K 字元中搜尋 | 寫 Python regex/string matching → 只回傳匹配結果(~900 字元) |
| 抓取資料 | dump 整頁,LLM 自己解析 | await evaluate('document.querySelector(".infobox")?.innerText') |
| 填表單 | 多次呼叫 type/click/select 工具 | 一段 Python 批次完成所有欄位 |
關鍵差異:AI 決定要看什麼,而不是系統把所有東西都倒給 AI。
真實成本對比
以 5 步 Wikipedia 工作流為例,每 1,000 次工作流的 token 成本:
| 模型 | Playwright MCP | Chrome DevTools MCP | OpenBrowser MCP |
|---|---|---|---|
| Claude Sonnet 4.6($3/M input) | $744 | $404 | $0.85 |
| Claude Opus 4.6($5/M input) | $1,240 | $674 | $1.42 |
| GPT-5.2($1.75/M input) | $434 | $236 | $0.50 |
用 Claude Opus 跑 Playwright MCP,一千次工作流要 $1,240。換 OpenBrowser,$1.42。差了三個數量級。
技術架構
OpenBrowser 底層直接用 CDP(Chrome DevTools Protocol)與瀏覽器溝通,不經過 Playwright 或 Puppeteer 中間層:
- CodeAgent — LLM 寫 Python,在 persistent namespace 中執行(類似 Jupyter kernel)
- Raw CDP — 直接 Chrome DevTools Protocol,最大控制權和速度
- Vision 支援 — 可截圖分析頁面的視覺內容
- 影片錄製 — 錄下瀏覽器操作過程
支援的 LLM 供應商
| 供應商 | 模型範例 |
|---|---|
| Gemini 3 Flash / Pro | |
| OpenAI | GPT-5.2, o4-mini, o3 |
| Anthropic | Claude Sonnet 4.6, Opus 4.6 |
| Groq | Llama 4 Scout, Qwen3-32B |
| AWS Bedrock | Claude, Amazon Nova Pro |
| Azure OpenAI | 任何 Azure 部署的模型 |
| OpenRouter | openrouter.ai 上的任何模型 |
| DeepSeek | DeepSeek Chat, R1 |
| Cerebras | Llama 4 Scout, Qwen 3 235B |
| Ollama | 本地模型(Llama、DeepSeek 等) |
安裝與使用
作為 Python 套件
pip install openbrowser-ai
# 安裝瀏覽器
uvx openbrowser-ai install
作為 MCP Server(Claude Code)
在專案的 .mcp.json 中加入:
{
"mcpServers": {
"openbrowser": {
"command": "uvx",
"args": ["openbrowser-ai[mcp]", "--mcp"]
}
}
}
作為 Claude Code Plugin
# 加入 marketplace(一次性)
claude plugin marketplace add billy-enrizky/openbrowser-ai
# 安裝
claude plugin install openbrowser@openbrowser-ai
Plugin 附帶 5 個 built-in skills:
| Skill | 用途 |
|---|---|
| web-scraping | 結構化資料提取、分頁處理 |
| form-filling | 表單填寫、登入流程、多步驟精靈 |
| e2e-testing | 模擬使用者互動測試 Web app |
| page-analysis | 分析頁面內容、結構、metadata |
| accessibility-audit | WCAG 無障礙合規性審計 |
三大 Browser MCP 完整比較
| 項目 | Playwright MCP | Chrome DevTools MCP | OpenBrowser MCP |
|---|---|---|---|
| 維護者 | Microsoft | Chrome DevTools(Google) | OpenBrowser(社群) |
| GitHub Stars | 27,400+ | 26,200+ | 新專案 |
| 引擎 | Playwright(Chromium/Firefox/WebKit) | Puppeteer(CDP) | Raw CDP(直接) |
| 工具數量 | 22 核心(34 總計) | 26 | 1(execute_code) |
| 架構 | 每次操作附帶 A11y 快照 | 按需取得 A11y 快照 | CodeAgent — Python 執行 |
| 語言 | TypeScript(Node.js) | TypeScript(Node.js) | Python |
| 多瀏覽器 | Chromium / Firefox / WebKit | 僅 Chromium | 僅 Chromium |
| 授權 | Apache 2.0 | Apache 2.0 | MIT |
| 5 步 Wikipedia 流程 | ~248K tokens | ~135K tokens | ~283 tokens |
注意事項與限制
- 新專案 — 相比 Microsoft 和 Google 的成熟專案,OpenBrowser 還很年輕,社群和文件持續建設中
- 僅支援 Chromium — 不像 Playwright 支援 Firefox 和 WebKit
- 需要 Python 環境 — 如果你的工具鏈全是 Node.js,需要額外安裝 Python
- 安全性考量 — agent 在 persistent runtime 中執行 Python 程式碼,代碼注入的風險需要注意
- Benchmark 由作者自行提供 — 雖然方法論和程式碼都公開,但尚未有獨立第三方驗證
誰適合用?
- 高頻率 Web scraping — 每次省 877 倍 token,量大時差異巨大
- CI/CD 中的 E2E 測試 — token 成本低到可以每次 commit 都跑
- 成本敏感的場景 — 從 $744/千次降到 $0.85/千次,預算規劃完全不同
- 需要精準資料提取 — Python 比 dump 整頁再靠 LLM 挑更精確
結語
OpenBrowser MCP 的核心洞察很簡單:與其把整個網頁倒給 AI 看,不如讓 AI 自己決定要看什麼。
這就像是從「把整本百科全書印出來給你翻」變成「給你一台電腦讓你 Ctrl+F」。結果是 877 倍的效率差距。
當然,作為新專案,它的穩定性、社群支援、邊緣案例處理都還需要時間驗證。但它提出的問題是正確的——Browser MCP 不應該每次操作都把整頁塞進 context window——這個觀點很可能影響 Playwright MCP 和 Chrome DevTools MCP 的未來設計方向。
- GitHub:billy-enrizky/openbrowser-ai
- 文件:docs.openbrowser.me
- Benchmark 方法論:docs.openbrowser.me/comparison