如何通过 MCP 为 Cursor 和 Windsurf 添加截图和 PDF 工具

请提供您希望翻译的正文内容，我将为您翻译成简体中文。

介绍

Cursor 和 Windsurf 是支持 MCP（模型上下文协议）插件的 AI 代码编辑器，这些插件为 AI 提供了新工具。PageBolt MCP 服务器添加了网页捕获功能：截图、PDF、视频录制以及页面检查。安装后，你可以让编辑器的 AI：

• “对 localhost:3000 进行截图，并告诉我布局是否正确。”
• “检查 staging 环境的登录页面，找出编写 E2E 测试所需的选择器。”
• “对我的 PR 预览进行全页截图，并将其附加到 PR 描述中。”
• “生成此发票 HTML 的 PDF 并保存到 ./output/invoice.pdf。”

设置（≈ 2 分钟）

Cursor 配置

在项目根目录创建或编辑 .cursor/mcp.json：

{
  "mcpServers": {
    "pagebolt": {
      "command": "npx",
      "args": ["-y", "pagebolt-mcp"],
      "env": {
        "PAGEBOLT_API_KEY": "pf_live_your_key_here"
      }
    }
  }
}

或者，将相同的块添加到全局 Cursor MCP 配置（~/.cursor/mcp.json），以在所有项目中使用。

重新启动 Cursor。PageBolt 工具将出现在工具面板中。

Windsurf 配置

将相同的块添加到你的 Windsurf MCP 设置中：

{
  "mcpServers": {
    "pagebolt": {
      "command": "npx",
      "args": ["-y", "pagebolt-mcp"],
      "env": {
        "PAGEBOLT_API_KEY": "pf_live_your_key_here"
      }
    }
  }
}

重新启动 Windsurf。

使用工具

截图

Screenshot http://localhost:3000 — does the hero section look right?
Take a mobile screenshot of localhost:3000/pricing — check if the table is responsive
Full‑page screenshot of localhost:3000/dashboard

AI 会在页面内直接看到截图，并能够给出具体的视觉反馈。

检查

Inspect https://staging.myapp.com/login — give me the selectors for the email field, password field, and submit button. I need to write a Playwright test.
Inspect https://staging.myapp.com/checkout and give me all the interactive element selectors. I'm writing a Playwright test for the checkout flow.

检查工具会返回每个交互元素的结构化映射及唯一 CSS 选择器，省去猜测的过程。

PDF 生成

Here's my invoice template. Generate a PDF and save it to ./test-output/invoice.pdf
Generate a PDF of https://staging.myapp.com/invoices/1 and tell me if the page breaks look right

视频录制

Record a demo video of the signup flow on localhost:3000 — use a spotlight cursor, dramatic pace, save as demo.mp4

可用的 PageBolt 工具

为什么 PageBolt 脱颖而出

• Localhost 支持 – 在不公开的情况下，对运行在开发服务器上的页面进行截图。
• 快速视觉调试 – 在提交前预览更改。
• 响应式布局检查 – 直接在编辑器中捕获移动端、平板或桌面视口。
• 测试夹具生成 – 为自动化测试创建 PDF 或截图。

可复用的配置模式

相同的 JSON 块适用于任何兼容 MCP 的客户端：

{
  "mcpServers": {
    "pagebolt": {
      "command": "npx",
      "args": ["-y", "pagebolt-mcp"],
      "env": {
        "PAGEBOLT_API_KEY": "pf_live_your_key_here"
      }
    }
  }
}

npx -y 命令确保无需全局安装；该包在首次使用时会下载并自动缓存。

免费试用

PageBolt 提供 每月 100 次免费请求，无需信用卡。
2 分钟内开始使用 →