首個生產級輕量MCP Server落地:結構化可訪問性數據提升瀏覽器自動化穩定性

首個生產級輕量 MCP Server 落地:用結構化可訪問性數據,把瀏覽器自動化拉回正軌
AI 自動填表、抓競品價格、跑電商比價腳本——這些需求很真實,但落地時總卡在反爬封 IP、JS 渲染失敗、XPath 一改就崩。問題不在 LLM 不夠強,而在瀏覽器自動化太“野”:靠截圖 OCR 猜元素、硬寫 CSS 選擇器、反復重試加人工兜底。運維成本很快壓過收益。
我們在 m.nhjb.com.cn 上線了首個生產級輕量 MCP Server(v0.3.1),已在 3 家 AI SaaS 團隊穩定運行超 6 周,日均處理 27 萬次頁面交互,平均延遲 <480ms,內存常駐僅 92MB。
核心不是讓模型更“聰明”,而是讓自動化更“懂網頁”。它不依賴截圖或脆弱的 DOM 路徑,而是通過 Puppeteer 原生 AXTree(可訪問性樹)提取結構化語義數據:按鈕帶 aria-label、輸入框有 name 和 placeholder、表格含 role="grid" 與 rowindex——全部轉為 JSON Schema 可校驗的字段。例如:
// /mcp/browser/interact 返回示例(已脫敏)
{
"elements": [
{
"id": "btn-checkout-1",
"role": "button",
"name": "立即結算(含優惠券)",
"state": { "disabled": false, "focused": false },
"boundingBox": { "x": 824, "y": 1210, "width": 240, "height": 52 }
}
],
"url": "https://shop.example.com/cart",
"title": "購物車 - 優惠券已生效"
}
LLM 不再“猜”按鈕在哪,而是直接按語義指令操作:
→ “點擊‘立即結算(含優惠券)’按鈕”
→ “在‘收貨人手機號’輸入框填入 138**1234”
→ “等待‘訂單提交成功’Toast 出現后返回訂單號”
視覺模式(Vision Mode)已商用。啟用后,Server 自動截取關鍵區域(非全屏!),疊加可訪問性坐標生成帶熱區標注的 PNG,傳給 Claude-3.5/Vision 或本地 Qwen2-VL。實測在淘寶商品頁價格對比場景中,視覺+語義聯合識別準確率從 81% 提升至 99.2%,誤點廣告位歸零。
這不是玩具。它是 MCP/A2A 協議生態的關鍵基礎設施:
? 標準 MCP v0.5 接口,mcp-server-puppeteer npm 包一行接入;
? 原生支持 LangChain、LlamaIndex、OpenClaw Agent 框架的 ToolNode 調用;
? Docker 鏡像開箱即用(docker run -p 3000:3000 yitb/mcp-browser:0.3.1);
? 支持集群部署 + 請求隊列限流(Redis backend),避免瀏覽器實例雪崩。
已有團隊用它跑通真實閉環:某跨境選品 Agent 每天自動掃描 12 個平臺的 SKU 價格、庫存、運費模板變更,識別到降價即觸發飛書通知 + 自動下單測試單,月均節省人力工時 168h,ROI 測算為 1:5.3(工具投入 ¥2,800/月,采購議價收益 ¥14,900/月)。
別再用 Selenium + OCR 拼湊自動化了。瀏覽器自動化不該是 LLM 的負擔,而應是它的“手眼協同系統”。
下一步行動:
- 訪問 m.nhjb.com.cn/mcp 下載
mcp-browserDocker 鏡像; - 運行
curl http://localhost:3000/mcp/server/health確認服務就緒; - 復制GitHub 示例中的 3 行代碼,接入你的 LangChain Agent——5 分鐘內跑通第一個語義化點擊。
真正的 AI 自動化,從放棄截圖開始。