全球首個輕量 MCP Server 實測：三招搞定 AI 瀏覽器自動化

想用 AI 自動填表單、搶優惠券、抓動態價格？別再手寫 Puppeteer 腳本 + 硬塞提示詞了。我們搭起 @yitb/mcp-puppeteer，30 分鐘跑通京東秒殺頁和 12306 登錄頁——不是 Demo，是能進生產環境的瀏覽器 Agent。

它解決三個核心問題：

? 結構化瀏覽器控制
不依賴截圖 + OCR。直接暴露 Puppeteer 的 DOM 樹和 A11y Tree 雙通道。LLM 能精準定位「立即支付」按鈕：{role: "button", name: "立即支付"}，而不是靠坐標猜。

? 語義精度翻倍
A11y Tree 把 UI 映射成帶語義的對象：<input aria-label="手機號"> → {type: "textbox", name: "手機號", value: ""}。實測 100 次表單提交，LLM 理解準確率從 62% 提升到 94%。

? 視覺模式按需啟用
默認純語義驅動；遇到驗證碼、圖表等復雜 UI，開一個 flag 切 Vision Mode：本地加載 CLIP + SAM，做區域級識別。不走云端 API，端到端延遲 <800ms。

這不是玩具。我們用它落地兩個真實業務：

?? 電商比價 Agent
監控拼多多 / 淘寶 / 京東同款 SKU，每小時抓取價格、庫存、券后價，自動發飛書預警。單賬號測試期 30 天，省出 ￥2,300 采購成本。

?? SaaS 注冊轉化提效
為某 CRM 客戶部署表單填寫 Agent：自動完成企業信息核驗 + 營業執照上傳。A11y Tree 精準定位文件輸入框，OCR 校驗上傳結果。人工注冊耗時從 7.2 分鐘壓到 23 秒，客戶復購率提升 18%。

代碼極簡——5 行啟動 Server：

npm install @yitb/mcp-puppeteer

// server.ts
import { createMcpServer } from '@yitb/mcp-puppeteer';
createMcpServer({
  port: 3001,
  headless: true,
  visionMode: true // 可選
}).listen();

前端 Agent（Claude 或 AI Agent平臺）直連 http://localhost:3001，調標準 MCP browse 工具，傳 {url: "https://xxx.com", action: "fill_form", target: "手機號"} 即可。

MCP/A2A 協議第一次真正變成工程模塊：Server 開發不用重寫瀏覽器 IPC，插件不用反復調 XPath，創業者直接復用語義層能力——你只管寫業務邏輯。

下一步：
① git clone https://github.com/yitb/mcp-puppeteer-demo
② npm run dev 啟動 Server
③ 用 AI Agent平臺 連接，運行 examples/auto-fill-12306.ts ——5 分鐘內看到 AI 自動輸入身份證號 + 觸發刷臉認證（零代碼修改）
所有代碼、抓取日志、性能報告已開源：m.nhjb.com.cn/mcp-puppeteer