Puppeteer+MCP Server：首个支持视觉模式的轻量级浏览器自动化方案，已接入钉钉AI工作流

想让AI帮你自动操作网页，却卡在"看不懂页面"这一步？

传统浏览器自动化工具要么太重，要么只给LLM返回一堆HTML标签——模型根本分不清哪个是按钮、哪个是广告。今天介绍一个刚开源的方案：Puppeteer MCP Server，它是首个同时支持结构化可访问性数据和视觉模式的轻量级MCP Server，已经跑在钉钉AI工作流里了。

核心问题：LLM操控浏览器为什么难？

LLM擅长理解自然语言，但面对网页时会遇到两个硬伤：

1. 信息过载：一个普通网页的DOM树动辄几千行，直接塞给LLM，token成本爆炸不说，模型还容易"迷路"。
2. 视觉盲区：很多交互依赖视觉布局（比如拖拽、Canvas图表、弹窗遮罩），纯DOM数据根本描述不了。

Puppeteer MCP Server的解法很直接：用可访问性树替代原始DOM，用截图补充视觉信息。

技术架构：三层数据流

┌─────────────────────────────────────────┐
│              LLM (Claude/GPT等)          │
└──────────────┬──────────────────────────┘
               │ MCP Protocol (JSON-RPC)
               ▼
┌─────────────────────────────────────────┐
│        Puppeteer MCP Server             │
│  ┌─────────┐  ┌──────────┐  ┌────────┐ │
│  │可访问性树│  │ 截图引擎  │  │操作执行│ │
│  └─────────┘  └──────────┘  └────────┘ │
└──────────────┬──────────────────────────┘
               │ DevTools Protocol
               ▼
┌─────────────────────────────────────────┐
│           Chromium Browser              │
└─────────────────────────────────────────┘

关键设计点：

• 可访问性数据（Accessibility Tree）：不是返回原始HTML，而是提取页面的语义结构——按钮、输入框、链接、文本各自归类，附带ARIA标签和可见性状态。LLM拿到的是"人类视角"的页面描述，token消耗降低60%以上。
• 视觉模式（Vision Mode）：开启后，每次操作前自动截图，将图片作为多模态输入传给LLM。适合处理Canvas绘制的图表、验证码、拖拽排序等纯DOM无法表达的场景。
• 轻量部署：整个Server不到50MB，基于Node.js，单进程可管理多个浏览器标签页。

代码实战：5分钟跑起来

1. 安装

# 克隆项目
git clone https://github.com/nicepkg/puppeteer-mcp-server.git
cd puppeteer-mcp-server

# 安装依赖
npm install

# 安装Chromium（如果没有）
npx puppeteer browsers install chrome

2. 配置MCP Client

在你的MCP客户端配置文件（如Claude Desktop的claude_desktop_config.json）中添加：

{
  "mcpServers": {
    "puppeteer": {
      "command": "node",
      "args": ["path/to/puppeteer-mcp-server/dist/index.js"],
      "env": {
        "VISION_MODE": "true",
        "HEADLESS": "true"
      }
    }
  }
}

VISION_MODE=true 开启视觉模式，LLM每次交互都会收到截图+可访问性树的双重输入。

3. 调用示例

配置完成后，直接用自然语言让LLM操作浏览器：

用户：打开淘宝，搜索"机械键盘"，把前3个商品的标题和价格整理成表格。

LLM会自动调用以下MCP工具链：

// 1. 导航到目标页面
await mcp.call("puppeteer_navigate", { url: "https://www.taobao.com" });

// 2. 获取可访问性数据，定位搜索框
const snapshot = await mcp.call("puppeteer_get_snapshot");
// snapshot返回结构化数据：
// {
//   "role": "searchbox",
//   "name": "搜索",
//   "ref": "input-1",
//   "visible": true
// }

// 3. 输入关键词并点击搜索
await mcp.call("puppeteer_type", { ref: "input-1", text: "机械键盘" });
await mcp.call("puppeteer_click", { ref: "search-button" });

// 4. 视觉模式下自动截图，辅助识别动态加载的商品卡片
const screenshot = await mcp.call("puppeteer_screenshot");
// 截图以base64返回，LLM结合视觉信息提取商品数据

整个过程LLM不需要解析HTML，只需要理解可访问性树的语义描述+截图。

实际落地：已接入钉钉AI工作流

这个方案已经在钉钉AI助理平台跑通了真实场景。举个例子：

场景：竞品价格监控

某电商运营团队用钉钉AI工作流+Puppeteer MCP Server搭建了一个自动化流程：

1. 每天早上9点，Agent自动打开5个竞品网站
2. 通过可访问性树定位商品列表区域，视觉模式辅助识别"限时折扣"标签（这类标签通常是Canvas渲染，DOM里没有）
3. 提取价格、库存、促销信息，生成对比表格
4. 自动发送到钉钉群，并@相关负责人

实际效果：

• 之前人工操作：2人×2小时/天 = 4工时
• 现在Agent执行：全程8分钟，失败率<5%（遇到验证码时自动暂停并通知人工介入）
• 月节省人力成本约 4000-5000元

接入钉钉工作流的配置很简单，只需要在钉钉AI助理的MCP Server列表中添加上述JSON配置即可，无需额外适配。

视觉模式 vs 纯可访问性树：怎么选？

建议开发时默认关闭视觉模式，只在特定任务节点开启，兼顾速度和能力。

技术亮点总结

1. 首个双模式MCP Server：可访问性数据+视觉截图，覆盖95%以上的网页操作场景
2. token效率高：结构化可访问性树比原始HTML节省60%+token
3. 部署轻量：单Node.js进程，无需Docker，50MB以内
4. 已验证落地：钉钉AI工作流真实场景跑通，不是Demo级产品
5. MCP标准协议：兼容所有支持MCP的客户端（Claude Desktop、Cursor、自研Agent等）

下一步行动

1. 今天就能试：git clone项目，用Claude Desktop连接，让AI帮你自动化一个重复性网页操作（比如每天查快递）
2. 接入你的Agent：如果你在做AI Agent开发，把这个MCP Server作为"浏览器手脚"接入，比自己写Puppeteer脚本省80%工作量
3. 钉钉用户直接用：在钉钉AI助理平台搜索MCP Server配置，把浏览器自动化能力嵌入现有工作流

浏览器是互联网的最大入口，谁能让AI"看懂"并"操作"网页，谁就掌握了自动化的最后一公里。这个方案已经把路铺好了，剩下的就是你的想象力。