Puppeteer+MCP Server：首個(gè)支持視覺(jué)模式的輕量級(jí)瀏覽器自動(dòng)化方案，已接入釘釘AI工作流

想讓AI幫你自動(dòng)操作網(wǎng)頁(yè)，卻卡在"看不懂頁(yè)面"這一步？

傳統(tǒng)瀏覽器自動(dòng)化工具要么太重，要么只給LLM返回一堆HTML標(biāo)簽——模型根本分不清哪個(gè)是按鈕、哪個(gè)是廣告。今天介紹一個(gè)剛開(kāi)源的方案：Puppeteer MCP Server，它是首個(gè)同時(shí)支持結(jié)構(gòu)化可訪問(wèn)性數(shù)據(jù)和視覺(jué)模式的輕量級(jí)MCP Server，已經(jīng)跑在釘釘AI工作流里了。

核心問(wèn)題：LLM操控瀏覽器為什么難？

LLM擅長(zhǎng)理解自然語(yǔ)言，但面對(duì)網(wǎng)頁(yè)時(shí)會(huì)遇到兩個(gè)硬傷：

1. 信息過(guò)載：一個(gè)普通網(wǎng)頁(yè)的DOM樹(shù)動(dòng)輒幾千行，直接塞給LLM，token成本爆炸不說(shuō)，模型還容易"迷路"。
2. 視覺(jué)盲區(qū)：很多交互依賴視覺(jué)布局（比如拖拽、Canvas圖表、彈窗遮罩），純DOM數(shù)據(jù)根本描述不了。

Puppeteer MCP Server的解法很直接：用可訪問(wèn)性樹(shù)替代原始DOM，用截圖補(bǔ)充視覺(jué)信息。

技術(shù)架構(gòu)：三層數(shù)據(jù)流

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

關(guān)鍵設(shè)計(jì)點(diǎn)：

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

代碼實(shí)戰(zhàn)：5分鐘跑起來(lái)

1. 安裝

# 克隆項(xiàng)目
git clone https://github.com/nicepkg/puppeteer-mcp-server.git
cd puppeteer-mcp-server

# 安裝依賴
npm install

# 安裝Chromium（如果沒(méi)有）
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 開(kāi)啟視覺(jué)模式，LLM每次交互都會(huì)收到截圖+可訪問(wèn)性樹(shù)的雙重輸入。

3. 調(diào)用示例

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

用戶：打開(kāi)淘寶，搜索"機(jī)械鍵盤"，把前3個(gè)商品的標(biāo)題和價(jià)格整理成表格。

LLM會(huì)自動(dòng)調(diào)用以下MCP工具鏈：

// 1. 導(dǎo)航到目標(biāo)頁(yè)面
await mcp.call("puppeteer_navigate", { url: "https://www.taobao.com" });

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

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

// 4. 視覺(jué)模式下自動(dòng)截圖，輔助識(shí)別動(dòng)態(tài)加載的商品卡片
const screenshot = await mcp.call("puppeteer_screenshot");
// 截圖以base64返回，LLM結(jié)合視覺(jué)信息提取商品數(shù)據(jù)

整個(gè)過(guò)程LLM不需要解析HTML，只需要理解可訪問(wèn)性樹(shù)的語(yǔ)義描述+截圖。

實(shí)際落地：已接入釘釘AI工作流

這個(gè)方案已經(jīng)在釘釘AI助理平臺(tái)跑通了真實(shí)場(chǎng)景。舉個(gè)例子：

場(chǎng)景：競(jìng)品價(jià)格監(jiān)控

某電商運(yùn)營(yíng)團(tuán)隊(duì)用釘釘AI工作流+Puppeteer MCP Server搭建了一個(gè)自動(dòng)化流程：

1. 每天早上9點(diǎn)，Agent自動(dòng)打開(kāi)5個(gè)競(jìng)品網(wǎng)站
2. 通過(guò)可訪問(wèn)性樹(shù)定位商品列表區(qū)域，視覺(jué)模式輔助識(shí)別"限時(shí)折扣"標(biāo)簽（這類標(biāo)簽通常是Canvas渲染，DOM里沒(méi)有）
3. 提取價(jià)格、庫(kù)存、促銷信息，生成對(duì)比表格
4. 自動(dòng)發(fā)送到釘釘群，并@相關(guān)負(fù)責(zé)人

實(shí)際效果：

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

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

視覺(jué)模式 vs 純可訪問(wèn)性樹(shù)：怎么選？

建議開(kāi)發(fā)時(shí)默認(rèn)關(guān)閉視覺(jué)模式，只在特定任務(wù)節(jié)點(diǎn)開(kāi)啟，兼顧速度和能力。

技術(shù)亮點(diǎn)總結(jié)

1. 首個(gè)雙模式MCP Server：可訪問(wèn)性數(shù)據(jù)+視覺(jué)截圖，覆蓋95%以上的網(wǎng)頁(yè)操作場(chǎng)景
2. token效率高：結(jié)構(gòu)化可訪問(wèn)性樹(shù)比原始HTML節(jié)省60%+token
3. 部署輕量：?jiǎn)蜰ode.js進(jìn)程，無(wú)需Docker，50MB以內(nèi)
4. 已驗(yàn)證落地：釘釘AI工作流真實(shí)場(chǎng)景跑通，不是Demo級(jí)產(chǎn)品
5. MCP標(biāo)準(zhǔn)協(xié)議：兼容所有支持MCP的客戶端（Claude Desktop、Cursor、自研Agent等）

下一步行動(dòng)

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

瀏覽器是互聯(lián)網(wǎng)的最大入口，誰(shuí)能讓AI"看懂"并"操作"網(wǎng)頁(yè)，誰(shuí)就掌握了自動(dòng)化的最后一公里。這個(gè)方案已經(jīng)把路鋪好了，剩下的就是你的想象力。