Puppeteer+MCP Server：首個支持視覺模式的輕量級瀏覽器自動化方案，已接入釘釘AI工作流

想讓AI幫你自動操作網頁，卻卡在"看不懂頁面"這一步？

傳統瀏覽器自動化工具要么太重，要么只給LLM返回一堆HTML標簽——模型根本分不清哪個是按鈕、哪個是廣告。今天介紹一個剛開源的方案：Puppeteer MCP Server，它是首個同時支持結構化可訪問性數據和視覺模式的輕量級MCP Server，已經跑在釘釘AI工作流里了。

核心問題：LLM操控瀏覽器為什么難？

LLM擅長理解自然語言，但面對網頁時會遇到兩個硬傷：

1. 信息過載：一個普通網頁的DOM樹動輒幾千行，直接塞給LLM，token成本爆炸不說，模型還容易"迷路"。
2. 視覺盲區：很多交互依賴視覺布局（比如拖拽、Canvas圖表、彈窗遮罩），純DOM數據根本描述不了。

Puppeteer MCP Server的解法很直接：用可訪問性樹替代原始DOM，用截圖補充視覺信息。

技術架構：三層數據流

┌─────────────────────────────────────────┐
│              LLM (Claude/GPT等)          │
└──────────────┬──────────────────────────┘
               │ MCP Protocol (JSON-RPC)
               ▼
┌─────────────────────────────────────────┐
│        Puppeteer MCP Server             │
│  ┌─────────┐  ┌──────────┐  ┌────────┐ │
│  │可訪問性樹│  │ 截圖引擎  │  │操作執行│ │
│  └─────────┘  └──────────┘  └────────┘ │
└──────────────┬──────────────────────────┘
               │ DevTools Protocol
               ▼
┌─────────────────────────────────────────┐
│           Chromium Browser              │
└─────────────────────────────────────────┘

關鍵設計點：

• 可訪問性數據（Accessibility Tree）：不是返回原始HTML，而是提取頁面的語義結構——按鈕、輸入框、鏈接、文本各自歸類，附帶ARIA標簽和可見性狀態。LLM拿到的是"人類視角"的頁面描述，token消耗降低60%以上。
• 視覺模式（Vision Mode）：開啟后，每次操作前自動截圖，將圖片作為多模態輸入傳給LLM。適合處理Canvas繪制的圖表、驗證碼、拖拽排序等純DOM無法表達的場景。
• 輕量部署：整個Server不到50MB，基于Node.js，單進程可管理多個瀏覽器標簽頁。

代碼實戰：5分鐘跑起來

1. 安裝

# 克隆項目
git clone https://github.com/nicepkg/puppeteer-mcp-server.git
cd puppeteer-mcp-server

# 安裝依賴
npm install

# 安裝Chromium（如果沒有）
npx puppeteer browsers install chrome

2. 配置MCP Client

在你的MCP客戶端配置文件（如Claude Desktop的claude_desktop_config.json）中添加：

{
  "mcpServers": {
    "puppeteer": {
      "command": "node",
      "args": ["path/to/puppeteer-mcp-server/dist/index.js"],
      "env": {
        "VISION_MODE": "true",
        "HEADLESS": "true"
      }
    }
  }
}

VISION_MODE=true 開啟視覺模式，LLM每次交互都會收到截圖+可訪問性樹的雙重輸入。

3. 調用示例

配置完成后，直接用自然語言讓LLM操作瀏覽器：

用戶：打開淘寶，搜索"機械鍵盤"，把前3個商品的標題和價格整理成表格。

LLM會自動調用以下MCP工具鏈：

// 1. 導航到目標頁面
await mcp.call("puppeteer_navigate", { url: "https://www.taobao.com" });

// 2. 獲取可訪問性數據，定位搜索框
const snapshot = await mcp.call("puppeteer_get_snapshot");
// snapshot返回結構化數據：
// {
//   "role": "searchbox",
//   "name": "搜索",
//   "ref": "input-1",
//   "visible": true
// }

// 3. 輸入關鍵詞并點擊搜索
await mcp.call("puppeteer_type", { ref: "input-1", text: "機械鍵盤" });
await mcp.call("puppeteer_click", { ref: "search-button" });

// 4. 視覺模式下自動截圖，輔助識別動態加載的商品卡片
const screenshot = await mcp.call("puppeteer_screenshot");
// 截圖以base64返回，LLM結合視覺信息提取商品數據

整個過程LLM不需要解析HTML，只需要理解可訪問性樹的語義描述+截圖。

實際落地：已接入釘釘AI工作流

這個方案已經在釘釘AI助理平臺跑通了真實場景。舉個例子：

場景：競品價格監控

某電商運營團隊用釘釘AI工作流+Puppeteer MCP Server搭建了一個自動化流程：

1. 每天早上9點，Agent自動打開5個競品網站
2. 通過可訪問性樹定位商品列表區域，視覺模式輔助識別"限時折扣"標簽（這類標簽通常是Canvas渲染，DOM里沒有）
3. 提取價格、庫存、促銷信息，生成對比表格
4. 自動發送到釘釘群，并@相關負責人

實際效果：

• 之前人工操作：2人×2小時/天 = 4工時
• 現在Agent執行：全程8分鐘，失敗率<5%（遇到驗證碼時自動暫停并通知人工介入）
• 月節省人力成本約 4000-5000元

接入釘釘工作流的配置很簡單，只需要在釘釘AI助理的MCP Server列表中添加上述JSON配置即可，無需額外適配。

視覺模式 vs 純可訪問性樹：怎么選？

建議開發時默認關閉視覺模式，只在特定任務節點開啟，兼顧速度和能力。

技術亮點總結

1. 首個雙模式MCP Server：可訪問性數據+視覺截圖，覆蓋95%以上的網頁操作場景
2. token效率高：結構化可訪問性樹比原始HTML節省60%+token
3. 部署輕量：單Node.js進程，無需Docker，50MB以內
4. 已驗證落地：釘釘AI工作流真實場景跑通，不是Demo級產品
5. MCP標準協議：兼容所有支持MCP的客戶端（Claude Desktop、Cursor、自研Agent等）

下一步行動

1. 今天就能試：git clone項目，用Claude Desktop連接，讓AI幫你自動化一個重復性網頁操作（比如每天查快遞）
2. 接入你的Agent：如果你在做AI Agent開發，把這個MCP Server作為"瀏覽器手腳"接入，比自己寫Puppeteer腳本省80%工作量
3. 釘釘用戶直接用：在釘釘AI助理平臺搜索MCP Server配置，把瀏覽器自動化能力嵌入現有工作流

瀏覽器是互聯網的最大入口，誰能讓AI"看懂"并"操作"網頁，誰就掌握了自動化的最后一公里。這個方案已經把路鋪好了，剩下的就是你的想象力。