想讓AI Agent真正“看懂”網頁？Puppeteer+結構化可訪問性數據，打造首個視覺增強MCP Server

你有沒有遇到過這種場景：讓AI Agent去操作一個復雜的電商后臺、填寫一個動態表單，或者從一個設計感十足的落地頁里提取信息？結果它要么卡在登錄驗證碼，要么在層層嵌套的DOM里迷了路，要么根本“看不見”那些用Canvas或SVG渲染的關鍵圖表。

傳統的文本解析（比如抓取HTML）在動態、視覺驅動的現代Web面前，越來越力不從心。AI Agent需要的不只是文本，而是視覺和結構化理解的結合。

今天，我們來拆解一個前沿實戰案例：如何利用 Puppeteer 的瀏覽器自動化能力，結合 結構化可訪問性數據（Accessibility Tree），構建一個具備視覺增強功能的 MCP Server。這不僅僅是技術炫技，它證明了MCP協議能將AI Agent的能力從“文本工具調用”提升到“視覺場景交互”，為自動化開辟了全新維度。

為什么是“Puppeteer + 結構化可訪問性數據”？

• Puppeteer：Google開源的Node.js庫，能控制Headless Chrome，執行點擊、滾動、截圖等一切瀏覽器操作。它是構建自動化腳本的利器。
• 結構化可訪問性數據：瀏覽器內部為屏幕閱讀器等輔助技術生成的頁面結構化表示（Accessibility Tree）。它比原始DOM更干凈、語義更清晰，包含了按鈕、標題、文本框等元素的角色、名稱、狀態和關系。
• MCP (Model Context Protocol)：一個新興的開放協議，旨在標準化AI模型（Agent）與外部工具、數據源的交互方式。它讓Agent能像調用函數一樣調用外部能力。

核心突破點在于：我們不再僅僅把網頁當作一堆文本（HTML）扔給AI，而是通過Puppeteer獲取頁面的結構化可訪問性數據，并輔以視覺截圖，構建一個能同時理解“頁面是什么結構”和“頁面看起來長什么樣”的MCP Server。這解決了純文本Agent在復雜Web交互中的核心痛點。

技術實現思路：三步構建視覺增強MCP Server

我們的目標是創建一個MCP Server，它能向AI Agent暴露一組工具，例如：navigate、click、type、get_accessibility_tree、take_screenshot。

第一步：搭建MCP Server骨架

使用TypeScript和MCP SDK，快速搭建一個Server。

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import puppeteer from "puppeteer";

const server = new McpServer({
  name: "puppeteer-visual-mcp",
  version: "1.0.0"
});

// 全局瀏覽器實例
let browser: puppeteer.Browser;
let page: puppeteer.Page;

// 初始化瀏覽器
async function initBrowser() {
  browser = await puppeteer.launch({ headless: "new" });
  page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 800 });
}

第二步：定義核心工具——結合可訪問性數據與視覺

這是精髓所在。我們定義的工具，其返回值不是簡單的文本，而是結構化數據+視覺數據的混合體。

// 工具1：導航并獲取頁面初始狀態
server.tool(
  "navigate_and_inspect",
  "Navigate to a URL and return both the accessibility tree and a screenshot.",
  { url: { type: "string" } },
  async ({ url }) => {
    await page.goto(url, { waitUntil: "networkidle0" });
    
    // 獲取結構化可訪問性數據
    const accessibilityTree = await page.accessibility.snapshot();
    
    // 獲取視覺截圖 (Base64)
    const screenshot = await page.screenshot({ encoding: "base64" });
    
    return {
      content: [
        {
          type: "text",
          text: JSON.stringify(accessibilityTree, null, 2)
        },
        {
          type: "image",
          data: screenshot,
          mimeType: "image/png"
        }
      ]
    };
  }
);

// 工具2：基于可訪問性數據進行交互
server.tool(
  "click_element_by_role",
  "Click an element identified by its accessibility role and name.",
  { role: { type: "string" }, name: { type: "string" } },
  async ({ role, name }) => {
    // 使用Puppeteer的aria選擇器，這直接利用了可訪問性數據
    const selector = `aria/${name}[role="${role}"]`;
    await page.click(selector);
    
    // 交互后，再次獲取頁面狀態
    const newTree = await page.accessibility.snapshot();
    const newScreenshot = await page.screenshot({ encoding: "base64" });
    
    return {
      content: [
        { type: "text", text: `Clicked ${role} named "${name}". New state:` },
        { type: "text", text: JSON.stringify(newTree, null, 2) },
        { type: "image", data: newScreenshot, mimeType: "image/png" }
      ]
    };
  }
);

// 啟動服務器
async function main() {
  await initBrowser();
  const transport = new StdioServerTransport();
  await server.connect(transport);
}

main();

第三步：部署與連接

1. 安裝依賴：npm install puppeteer @modelcontextprotocol/sdk
2. 編譯運行：npx tsc && node build/index.js
3. 在AI Agent中配置：在支持MCP的客戶端（如Claude Desktop、或自研Agent）中，將上述Server作為工具源接入。

至此，一個具備視覺增強能力的MCP Server就搭建完成了。AI Agent現在可以通過MCP協議，像調用API一樣，獲得“導航-觀察-交互”的完整閉環能力。

實際應用場景與商業價值

這個Server的價值不在于技術本身，而在于它解鎖的新自動化場景：

1. 復雜Web應用自動化測試：傳統測試腳本脆弱，依賴CSS選擇器。基于可訪問性數據的測試更穩定、更貼近用戶真實操作（如“點擊‘提交訂單’按鈕”），且能自動生成測試報告截圖。
2. 數據采集與監控：對于需要登錄、翻頁、甚至包含圖表（通過截圖理解）的網站，Agent能更可靠地提取數據。例如，監控競品價格、抓取行業報告中的圖表數據。
3. RPA（機器人流程自動化）增強：在財務、HR等業務流程中，操作復雜的內部系統（如SAP、Oracle的Web界面）。視覺模式讓Agent能處理那些文本解析難以搞定的動態彈窗和自定義控件。
4. 無障礙訪問性審計：直接利用生成的可訪問性樹，自動檢查網站是否符合WCAG標準，生成審計報告，這是一個明確的商業服務。

商業價值：將上述能力封裝成SaaS服務，按調用次數或Agent數量收費。例如，為跨境電商賣家提供“自動商品上架Agent”，能自動登錄后臺、填寫復雜表單、上傳圖片，單次上架服務收費0.5元，日處理1000單，月收入可達1.5萬元。

下一步行動：從Demo到產品

如果你被這個思路啟發，想動手試試，這是你的路線圖：

1. 立即動手：克隆或參考上述代碼，在本地跑通一個Demo。嘗試讓Agent去操作一個你熟悉的網站（如GitHub登錄頁）。
2. 深化理解：深入研究page.accessibility.snapshot()返回的數據結構，理解每個節點的role、name、value、children。
3. 擴展工具集：為你的MCP Server增加更多工具，如scroll、wait_for_element、extract_table。
4. 尋找場景：思考你身邊哪些重復的、基于Web瀏覽器的工作可以自動化？從一個小痛點開始，構建一個最小可行產品（MVP）。
5. 加入生態：關注MCP協議和m.nhjb.com.cn（m.nhjb.com.cn）的Agent生態，了解最新的工具集成和商業化案例。

記住，AI Agent的下一個爆發點，一定在“感知”和“操作”真實世界的能力上。 而瀏覽器，是我們通往數字世界最豐富的窗口。掌握了視覺增強的MCP Server，你就拿到了一把新鑰匙。