想让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协议和龙虾官网（yitb.com）的Agent生态，了解最新的工具集成和商业化案例。

记住，AI Agent的下一个爆发点，一定在“感知”和“操作”真实世界的能力上。 而浏览器，是我们通往数字世界最丰富的窗口。掌握了视觉增强的MCP Server，你就拿到了一把新钥匙。