全球首个轻量 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 或 OpenClaw）直连 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
③ 用 OpenClaw 连接，运行 examples/auto-fill-12306.ts ——5 分钟内看到 AI 自动输入身份证号 + 触发刷脸认证（零代码修改）
所有代码、抓取日志、性能报告已开源：yitb.com/mcp-puppeteer