agent-browser 自動化工作流：用 AI 操控瀏覽器完成重複任務

想讓 AI 幫你自動填表單、爬取網頁數據、批次處理終端機指令嗎？agent-browser 自動化工作流能用 AI 直接操作瀏覽器，只需要 200-400 Tokens 就能讀懂整個網頁結構（傳統方式要 3000-5000 Tokens）。本文將完整教學如何整合 Vercel Labs 出品的 agent-browser、wterm 終端機模擬器與 Firecrawl 爬蟲服務，打造「便宜模型管流程、昂貴模型做決策」的兩層 AI 架構，實現 省下 90% 重複操作時間 的自動化工作流。

💡 核心名詞解釋

a11y tree（無障礙樹）：瀏覽器為視障輔助工具提供的簡化網頁結構，agent-browser 用此讀懂網頁只需原本 1/10 的 Token。

wterm（Web Terminal）：Vercel Labs 用 Zig 語言 + WebAssembly 打造的終端機模擬器，渲染成 DOM 元素而非 Canvas，讓 AI 能直接讀懂終端機輸出。

agent-browser：Vercel Labs 的瀏覽器自動化 CLI 工具（GitHub 29.8k Stars），專為 AI Agent 設計，與 Claude Code 原生相容。

什麼是 agent-browser？為什麼能省 90% Token？

agent-browser 是由 Vercel Labs 開發的瀏覽器自動化 CLI 工具，在 GitHub 已獲得 29.8k Stars。傳統的瀏覽器自動化工具（如 Selenium、Puppeteer）會把整個網頁的 HTML/CSS/JavaScript 全部丟給 AI，導致單次請求消耗 3000-5000 Tokens。

agent-browser 的核心突破在於使用 a11y tree（Accessibility Tree，無障礙樹），這是瀏覽器為視障輔助工具（如螢幕閱讀器）提供的簡化網頁結構。a11y tree 只保留「可互動元素」和「語意結構」，過濾掉所有裝飾性 CSS 和無用標籤。

實測對比（來源：agent-browser GitHub 文件）：

• 完整 DOM → AI 閱讀：3000-5000 Tokens
• a11y tree → AI 閱讀：200-400 Tokens
• Token 節省率：約 87-93%

agent-browser 回傳的網頁結構採用 ref 格式（如 @e1、@e2），AI 只需要說「點擊 @e2」就能操作網頁，不需要寫複雜的 CSS Selector 或 XPath。

agent-browser 安裝與基礎使用（3 分鐘上手）

agent-browser 需要 Node.js 18+，支援 macOS、Linux、Windows（WSL）。安裝過程只需兩行指令：

步驟一：安裝 agent-browser CLI

npm install -g agent-browser

步驟二：安裝瀏覽器驅動程式

agent-browser install

這個指令會自動下載 Chromium 驅動（約 150MB），安裝在 ~/.cache/agent-browser/ 目錄。

步驟三：測試網頁快照功能

agent-browser snapshot https://example.com

實測輸出範例（來源：agent-browser 官方文件）：

✓ Example Domain
heading "Example Domain" [level=1, ref=e1]
link "More information..." [ref=e2]
paragraph "This domain is for use in illustrative examples..." [ref=e3]

你會發現輸出非常精簡，只有 標題、連結、段落 這些核心元素，而且每個元素都有 ref 編號（e1、e2、e3），這讓 AI 可以直接說「點擊 @e2」來操作。

與 Claude Code 整合（零設定）

agent-browser 原生支援 Claude Code 的 MCP（Model Context Protocol），安裝完成後直接在 Claude Code 中輸入：

請用 agent-browser 幫我抓取 https://news.ycombinator.com 的頭條標題

Claude Code 會自動呼叫 agent-browser CLI，回傳 a11y tree 結構，完全不需要手動配置。

wterm 終端機模擬器：讓 AI 能讀懂終端機輸出

wterm（Web Terminal）是 Vercel Labs 另一個開源專案（GitHub 2.1k Stars），核心特色是用 Zig 語言 + WebAssembly 打造，渲染終端機畫面時不用 Canvas，而是直接轉成 DOM 元素。

為什麼 DOM 渲染對 AI 很重要？

傳統終端機模擬器（如 xterm.js）用 Canvas 渲染，對人類視覺友善，但 AI 只能看到「一張圖片」，無法理解文字內容。wterm 把每一行終端機輸出都轉成 <div> 元素，天然支援 a11y tree，讓 AI 能用 agent-browser 直接讀取終端機內容。

wterm 技術架構（來源：wterm GitHub）

• 核心引擎：Zig 0.16.0+（編譯成 WebAssembly）
• 前端套件：@wterm/core、@wterm/dom、@wterm/react
• 渲染方式：每行終端機輸出 = 一個 DOM 節點（不用 Canvas）
• AI 整合：agent-browser 可直接讀 wterm 輸出的 DOM 結構

安裝 wterm（需要 Zig 環境）

# 1. 安裝 Zig 0.16.0+（macOS 使用 Homebrew）
brew install zig

# 2. 安裝 Node.js 20+
brew install node@20

# 3. 安裝 pnpm（wterm 使用的套件管理工具）
npm install -g pnpm

# 4. 複製 wterm 專案並安裝
git clone https://github.com/vercel-labs/wterm.git
cd wterm
pnpm install

實際應用場景：在瀏覽器中嵌入終端機，讓 AI 能即時讀取指令執行結果。例如在 Claude Code 的網頁版中，用 wterm 渲染終端機，AI 就能直接讀懂 git status 或 npm install 的輸出，不需要人工複製貼上。

wterm 與 agent-browser 的協作範例

// 在網頁中嵌入 wterm 終端機
import { Terminal } from '@wterm/react';

// AI 用 agent-browser 讀取終端機輸出
agent-browser snapshot http://localhost:3000/terminal
// 回傳：heading "Terminal Output" [ref=e1]
//       text "npm install completed successfully" [ref=e2]

Firecrawl 爬蟲服務：把混亂網頁轉成 AI 能讀的 Markdown

Firecrawl（由 mendableai 開發）是專為 AI 設計的爬蟲服務，核心功能是把「充滿廣告、彈窗、複雜 JavaScript 的網頁」轉換成 乾淨的 Markdown 格式，讓 Claude、OpenAI、本地模型能直接閱讀。

Firecrawl 三大核心功能

• 搜尋（Search）：用關鍵字搜尋網頁，回傳 Markdown 格式結果
• 擷取（Scrape）：抓取單一網頁內容，過濾廣告與無用元素
• 互動（Interact）：點擊、填表單、多步驟操作（類似 Selenium）

雲端版 vs 自架版（費用對比）

資料來源：Firecrawl 官方文件（2026年4月）

安裝 Firecrawl Python SDK

pip install firecrawl-py

目前最新版本：v4.22.1

Python 程式碼範例（擷取網頁）

from firecrawl import FirecrawlApp

# 初始化（雲端版需要 API Key）
app = FirecrawlApp(api_key="你的API金鑰")

# 擷取網頁並轉成 Markdown
result = app.scrape_url(
    url="https://example.com/article",
    formats=["markdown"]
)

print(result["markdown"])
# 輸出乾淨的 Markdown，沒有廣告和彈窗

自架 Firecrawl（Docker 方式）

# 1. 複製專案
git clone https://github.com/mendableai/firecrawl.git
cd firecrawl

# 2. 啟動 Docker 容器
docker-compose up -d

# 3. API 位址（本地）
http://localhost:3002

注意：自架版沒有 Fire-engine（防封鎖功能），遇到有 Cloudflare 或 reCAPTCHA 的網站可能會失敗。若需要爬取防護嚴格的網站，建議使用雲端版。

兩層 AI 架構：便宜模型管流程，昂貴模型做決策

在提供的來源中提到一個非常重要的成本優化概念：不要讓昂貴的 AI 模型做簡單的重複操作。實務上可以用「兩層 AI 架構」來降低成本：

架構設計

• 左側瀏覽器（Manager 派工者）：OpenCode 或其他免費 AI 模型
• 右側瀏覽器（Worker 執行者）：Claude Code 或其他付費高階模型
• 連接橋樑：agent-browser 透過 a11y tree 傳遞網頁狀態

分工邏輯（實際案例）

實作範例：自動監控 Hacker News 頭條

// Manager（免費模型）的任務
每 5 分鐘執行一次：
  1. agent-browser snapshot https://news.ycombinator.com
  2. 提取頭條標題（ref=e1）
  3. 比對上次記錄，如有變化 → 通知 Worker

// Worker（付費模型）的任務
收到通知後：
  1. 分析頭條內容是否與「AI 工具」相關
  2. 若相關 → 用 Firecrawl 爬取完整文章
  3. 生成摘要並發布到 Notion

成本對比（假設每天執行 100 次）：

• 全部用 Claude Pro（付費）：100 次 × 400 Tokens = 40,000 Tokens/天
• 兩層架構：95 次免費模型（0元）+ 5 次 Claude（2,000 Tokens）= 2,000 Tokens/天
• 節省率：95%

完整工作流實作：從爬蟲到動畫生成（含 Cavalry）

整合以上所有工具，可以打造一個「自動產生數據動畫」的工作流。流程中還用到 Cavalry（程序化動畫軟體，現已免費），它能把 CSV/JSON 數據直接驅動動畫，非常適合 AI 自動化場景。

完整流程（5步驟）

1. Firecrawl 偵察：爬取目標網站數據（如 GitHub Trending），轉成 Markdown
2. Claude Code 分析：提取關鍵數據（專案名稱、Stars、語言），輸出 JSON
3. agent-browser 執行：自動填寫 Google Sheets 或其他表單
4. wterm 回傳：終端機顯示執行結果，AI 確認成功
5. Cavalry 生成動畫：讀取 JSON，自動生成長條圖動畫（可匯出 MP4）

Python 完整腳本範例

#!/usr/bin/env python3
"""
AI 自動化工作流：GitHub Trending → JSON → Cavalry 動畫
"""
import json
from firecrawl import FirecrawlApp

# 步驟 1：用 Firecrawl 爬取 GitHub Trending
app = FirecrawlApp(api_key="你的API金鑰")
result = app.scrape_url(
    url="https://github.com/trending",
    formats=["markdown"]
)

# 步驟 2：Claude Code 分析（這裡簡化為手動提取）
# 實際應用中會用 Claude API 或 Claude Code MCP
markdown_content = result["markdown"]

# 假設提取到以下數據
trending_data = [
    {"name": "vercel-labs/agent-browser", "stars": 29800, "language": "TypeScript"},
    {"name": "vercel-labs/wterm", "stars": 2100, "language": "Zig"},
    {"name": "mendableai/firecrawl", "stars": 15000, "language": "Python"}
]

# 步驟 3：輸出 JSON 給 Cavalry
with open("trending.json", "w", encoding="utf-8") as f:
    json.dump(trending_data, f, ensure_ascii=False, indent=2)

print("✅ JSON 已生成，可匯入 Cavalry 生成動畫")

# 步驟 4：用 agent-browser 自動填寫 Google Sheets（CLI 指令）
# agent-browser fill https://docs.google.com/spreadsheets/... --data trending.json

Cavalry 動畫設定（無程式碼）

1. 下載 Cavalry（官網：cavalry.scenegroup.co，現已完全免費）
2. 匯入 trending.json
3. 建立長條圖場景，綁定 JSON 欄位（name → 標籤、stars → 高度）
4. 設定動畫時間軸（如 3 秒淡入）
5. 匯出 MP4 或 GIF

實務應用：這個流程可以每天自動執行，生成「今日 AI 工具趨勢動畫」發布到社群媒體，完全不需要手動操作。

Git 安全實驗架構：在分支上測試，不怕弄壞主線

在整合 agent-browser、wterm、Firecrawl 時，建議用 Git 分支策略來管理實驗性程式碼，避免破壞主要專案。來源中提到一個很好的實務守則：

三大 Git 安全原則

1. 實驗前開分支：每次測試新工具都先 git checkout -b feature/實驗名稱
2. AI 寫有意義的 commit：不要只寫「update code」，要寫「為什麼改」（如：整合 agent-browser 降低 Token 消耗）
3. 禁止 git add .：要指定檔案名稱，避免不小心 commit .env 或 API Key

實際操作範例

# 1. 開新分支（測試 agent-browser 整合）
git checkout -b feature/agent-browser-integration

# 2. 修改程式碼後，只 add 特定檔案
git add src/automation/browser.py
git add requirements.txt

# 3. AI 寫有意義的 commit message
git commit -m "整合 agent-browser 取代 Selenium

- 原因：降低 Token 消耗從 3000 降到 400
- 改變：browser.py 改用 a11y tree 讀取網頁
- 測試：通過 example.com 快照測試

Co-Authored-By: Claude Code"

# 4. 測試成功後合併回主線
git checkout main
git merge feature/agent-browser-integration

為什麼不用 git add . ？

在 AI 協作開發中，很容易不小心把 .env、credentials.json、API Key 等敏感檔案 commit 進去。一旦 push 到 GitHub，即使刪除 commit 也會留下歷史紀錄，造成安全風險。

最佳實務：.gitignore 設定

# .gitignore 範例（agent-browser 專案）
.env
*.key
credentials.json
firecrawl_api_key.txt
__pycache__/
node_modules/
.DS_Store

常見問題與除錯技巧（實戰經驗）

問題 1：agent-browser snapshot 回傳空白

原因：目標網頁需要 JavaScript 渲染，但 agent-browser 預設等待時間太短。

解法：加上 --wait 參數。

agent-browser snapshot https://example.com --wait 3000

等待 3 秒讓 JavaScript 執行完畢

問題 2：Firecrawl 回傳「403 Forbidden」

原因：目標網站有 Cloudflare 或 reCAPTCHA 防護，自架版 Firecrawl 無 Fire-engine。

解法：改用雲端版 Firecrawl（有防封鎖功能），或加上 User-Agent。

result = app.scrape_url(
    url="https://example.com",
    formats=["markdown"],
    headers={"User-Agent": "Mozilla/5.0"}
)

問題 3：wterm 編譯失敗（Zig 版本錯誤）

原因：wterm 需要 Zig 0.16.0+，但系統安裝的是舊版。

解法：用 Homebrew 安裝最新 Zig。

# 移除舊版
brew uninstall zig

# 安裝最新版
brew install zig

# 確認版本
zig version
# 應該顯示 0.16.0 或更高

問題 4：Claude Code 讀不到 agent-browser 輸出

原因：MCP 設定檔路徑錯誤，或 agent-browser 未安裝在全域。

解法：確認 agent-browser 可在終端機直接執行。

# 測試是否可執行
which agent-browser
# 應該顯示：/usr/local/bin/agent-browser 或類似路徑

# 若找不到，重新全域安裝
npm install -g agent-browser

常見問題 FAQ

Q1：agent-browser 可以在 Windows 上使用嗎？

可以，但需要透過 WSL（Windows Subsystem for Linux）。直接在 Windows CMD 或 PowerShell 安裝可能會遇到相容性問題。建議在 WSL Ubuntu 環境中安裝 Node.js 20+ 和 agent-browser，然後執行指令。

Q2：Firecrawl 免費額度 500 次/月夠用嗎？

對個人學習或小型專案來說足夠。若是每天爬取 10-20 個網頁，一個月約 300-600 次，剛好在免費額度範圍。如果需求更大（如每天 100+ 網頁），建議自架 Firecrawl（需要 Docker 環境），完全免費但沒有防封鎖功能。

Q3：wterm 和傳統 xterm.js 的差異在哪？

最大差異是 渲染方式。xterm.js 用 Canvas 渲染（對人類友善但 AI 無法讀取），wterm 用 DOM 渲染（每行輸出都是 HTML 元素，AI 可透過 agent-browser 直接讀取）。如果你的應用需要 AI 理解終端機輸出，wterm 是更好的選擇。

Q4：兩層 AI 架構一定要用 Claude Code 嗎？

不一定。任何支援 MCP 或 API 的 AI 都可以。例如 Manager 可以用 OpenAI GPT-4o mini（便宜），Worker 可以用 Claude Sonnet 或 GPT-4o（昂貴但強大）。重點是「便宜模型做重複操作，昂貴模型做邏輯判斷」的分工原則。

Q5：Cavalry 動畫軟體真的免費嗎？

是的，Cavalry 在 2024 年宣布完全免費（來源：Cavalry 官方公告）。過去是付費軟體，現在可免費下載使用所有功能，包括程序化動畫、CSV/JSON 數據驅動、MP4 匯出等。非常適合 AI 自動化場景，因為它能把數據直接轉成動畫，不需要手動調整關鍵幀。

關於作者 — 阿宥

雲林在地房仲，同時是 AI 工具深度使用者。每天用 Claude Code、NotebookLM、Make.com 等工具優化工作流程，並在「雲林AI房仲・阿宥的AI教室」分享實戰經驗。擅長將複雜 AI 技術轉化為新手也能上手的教學內容。

每組序號第一裝置限一用・不可轉讓或分享