Puppeteer MCP Server 視覺模式上線：首個支持復雜網(wǎng)頁交互+OCR+截圖理解的生產級 MCP 工具

想讓你的 AI Agent 真正“看懂”網(wǎng)頁，而不只是解析代碼？

傳統(tǒng) MCP Server 調用瀏覽器，本質上是在讀取 DOM 結構——就像盲人摸象，只能通過 HTML 標簽推斷頁面內容。遇到動態(tài)加載、Canvas 繪圖、驗證碼或者復雜圖表，Agent 就徹底無能為力了。

現(xiàn)在，Puppeteer MCP Server 的視覺模式正式上線，直接打破了這層限制。這是首個在生產環(huán)境中實現(xiàn)瀏覽器自動化 + OCR 識別 + 截圖語義理解三合一的 MCP 工具，讓 AI Agent 第一次具備了“視覺能力”。

核心突破：從“讀代碼”到“看畫面”

視覺模式的核心在于，它不再僅僅依賴網(wǎng)頁的 DOM 樹，而是結合了計算機視覺與多模態(tài)大模型的能力。當你在 MCP 配置中啟用 vision: true 后，整個工作流會發(fā)生質變：

1. 智能截圖與區(qū)域識別：Agent 可以指定對整個頁面、特定元素甚至自定義坐標區(qū)域進行高清截圖。
2. 內置 OCR 引擎：對截圖直接進行文字識別，準確提取圖片、PDF、Canvas 中的文本信息。
3. 語義理解：將截圖（或 OCR 結果）與用戶指令一同發(fā)送給 Claude 等視覺語言模型（VLM），由模型“看圖說話”，理解按鈕位置、圖表趨勢、表單狀態(tài)等視覺信息。

這相當于給你的 Agent 裝上了一雙眼睛，讓它能像人類一樣感知網(wǎng)頁的最終呈現(xiàn)效果。

實戰(zhàn)代碼：如何集成與調用

集成過程非常簡單。首先，確保你的 MCP 客戶端（如 Claude Desktop、OpenClaw）已安裝最新版 Puppeteer MCP Server。

1. 安裝與配置

npm install -g @anthropic-ai/puppeteer-mcp-server

在你的 MCP 配置文件（如 claude_desktop_config.json）中，添加 Server 配置并啟用視覺模式：

{
  "mcpServers": {
    "puppeteer-vision": {
      "command": "npx",
      "args": ["@anthropic-ai/puppeteer-mcp-server"],
      "env": {
        "PUPPETEER_VISION_MODE": "true",
        "PUPPETEER_OCR_ENGINE": "tesseract" // 可選內置或云端 OCR
      }
    }
  }
}

2. 調用示例：自動識別并填寫驗證碼表單
下面是一個 Agent 自動處理登錄頁面驗證碼的 Python 偽代碼示例，展示了視覺模式的威力：

import mcp

# 初始化 MCP 客戶端
client = mcp.Client()
client.connect("puppeteer-vision")


![配圖](http://m.gsdl.org.cn/usr/uploads/covers/cover_mcp_20260531_081651.jpg)

# 1. 導航到目標頁面
client.call_tool("puppeteer_navigate", {"url": "https://example.com/login"})

# 2. 截取驗證碼區(qū)域（通過 CSS 選擇器定位）
screenshot = client.call_tool("puppeteer_screenshot", {
    "selector": "#captcha-image",
    "vision": True  # 關鍵：啟用視覺處理
})

# 3. 將截圖發(fā)送給 VLM 進行識別
captcha_text = client.call_tool("vision_understand", {
    "image": screenshot,
    "prompt": "這是一個登錄驗證碼圖片，請識別其中的字母和數(shù)字，只返回文本結果。"
})

# 4. 填寫表單并登錄
client.call_tool("puppeteer_type", {
    "selector": "#captcha-input",
    "text": captcha_text
})
client.call_tool("puppeteer_click", {"selector": "#login-button"})

部署步驟：將上述邏輯封裝為一個 Python 腳本，即可作為一個獨立的自動化 Agent 運行。你也可以將其作為子程序，集成到更復雜的 RPA 工作流中。

商業(yè)價值：三個立刻能賺錢的應用場景

技術的終極檢驗是商業(yè)價值。視覺模式 MCP Server 在以下場景中具有直接變現(xiàn)潛力：

場景一：競品價格監(jiān)控與數(shù)據(jù)抓?。⊿aaS 服務）

• 痛點：許多電商網(wǎng)站（尤其使用 React/Vue 動態(tài)渲染的）價格數(shù)據(jù)無法通過簡單爬蟲獲取，且反爬嚴格。
• 方案：使用視覺模式 Agent 定時截圖商品頁面，通過 OCR 提取價格、銷量、促銷標簽，結合 DOM 數(shù)據(jù)交叉驗證，生成競品報告。
• 賺錢路徑：為跨境電商賣家提供“實時競品監(jiān)控儀表盤”訂閱服務，每月收費 $99-$499。已有案例：某團隊用此方案監(jiān)控亞馬遜 1000+ 個 SKU，月收入穩(wěn)定在 $3000 以上。

場景二：自動化表單提交與申請（效率工具）

• 痛點：政府、銀行網(wǎng)站的申請表單結構復雜，字段動態(tài)變化，傳統(tǒng) RPA 腳本維護成本極高。
• 方案：視覺 Agent “看懂”表單，自動識別必填項、下拉菜單選項，并與用戶檔案數(shù)據(jù)進行語義匹配后填寫。
• 賺錢路徑：開發(fā)為“簽證申請助手”、“稅務申報機器人”等垂直領域工具，按次收費（如 $5/次）或打包成年費套餐。

場景三：社交媒體內容審核與歸檔（企業(yè)服務）

• 痛點：品牌方需要監(jiān)控社交媒體上關于自己的圖文內容，尤其是用戶生成的圖片和視頻截圖中的文字。
• 方案：視覺模式 Agent 自動滾動瀏覽指定話題頁，對每一張圖片進行 OCR，識別負面評價或侵權內容，并自動歸檔截圖。
• 賺錢路徑：作為品牌聲譽管理服務的一部分，向中大型企業(yè)銷售，年費 $5000 起。

下一步行動：三步快速上手

1. 立即體驗：訪問龍蝦官網(wǎng) (m.gsdl.org.cn) 的 MCP 工具庫，找到 Puppeteer MCP Server，按照文檔在本地啟用視覺模式。用上面的驗證碼示例跑通第一個 Demo。
2. 構思場景：盤點你手頭需要“看網(wǎng)頁”的重復性工作。是每天要查的十幾個數(shù)據(jù)網(wǎng)站？還是需要人工核對的報表？把它定義成一個具體的 Agent 任務。
3. 構建最小可行產品（MVP）：選擇一個最痛的點，用視覺模式 MCP Server 搭建一個能自動完成該任務的 Agent 原型。先解決自己的問題，再考慮將其產品化。

視覺模式不是未來，它已經(jīng)是現(xiàn)在。誰能率先讓 Agent “看見”，誰就能在自動化浪潮中搶占先機。