Cursor Puppeteer MCP

光标木偶MCP

基于木偶的MCP（模型控制协议）服务器，用于向光标生成视觉反馈。此工具允许Cursor执行以下操作：

1. 访问本地开发服务器URL
2. 检查错误
3. 对页面或特定元素进行截图
4. 执行单击元素等操作
5. 将截图与预期结果进行比较

安装

npm install

运作原理

MCP服务器使用特定协议与Cursor通信：

1. Cursor向MCP服务器发送URL和可选参数
2. 服务器启动Puppeteer访问URL
3. Puppeteer执行任何指定的操作并截图
4. 服务器将结果返回给Cursor，包括屏幕截图路径
5. Cursor可以分析截图，并在截图与预期输出匹配时将其删除

用法

从光标

在游标提示中，您可以在代码生成结束时要求使用此工具：

Generate a React counter component. After generating the code, use the Puppeteer tool to take a screenshot of the component.

从命令行

您还可以直接从命令行使用该工具：

node src/cursor-integration.js http://localhost:3000 '{"waitTime": 1000}'

选项：

{
  // Wait time in milliseconds before taking screenshot
  "waitTime": 1000,

  // Perform an action before taking screenshot
  "action": {
    "element": { "id": "buttonId" }, // Can also use "class" or "selector"
    "action": "click" // click, hover, focus, type
  },

  // Take screenshot of specific element instead of full page
  "elementToCapture": { "id": "elementId" }
}

API

拍摄屏幕截图

import { takeScreenshot } from "./src/cursor-client.js";

// Take a full page screenshot
const result = await takeScreenshot("http://localhost:3000", {
  waitTime: 1000,
});

// Take a screenshot after clicking a button
const result = await takeScreenshot("http://localhost:3000", {
  action: {
    element: { id: "exampleButton" },
    action: "click",
  },
});

// Take a screenshot of a specific element
const result = await takeScreenshot("http://localhost:3000", {
  elementToCapture: { id: "content" },
});

删除屏幕截图

import { deleteScreenshot } from "./src/cursor-client.js";

const deleteResult = await deleteScreenshot("/path/to/screenshot.png");

与Cursor集成

此工具旨在与Cursor无缝集成：

1. 游标为项目生成代码
2. Cursor启动本地开发服务器
3. Cursor使用本地服务器URL调用此工具
4. 该工具访问URL、执行操作并截图
5. Cursor分析屏幕截图以检查它们是否与提示匹配
6. Cursor可以根据视觉反馈迭代改进代码

例子

请参阅 examples 使用示例目录。