我在我的 API 中添加了一个第一方 MCP 服务器。以下是 AI 编码助手现在可以做的事情。

Source: Dev.to

请提供您希望翻译的完整文本内容（除代码块和 URL 之外的部分），我将为您翻译成简体中文并保留原有的格式。

介绍

大多数使用 AI 编码助手的开发者都遇到过一个常见的限制：助手可以生成截图的代码，但实际上无法真正捕获截图。这种来回的额外操作——运行代码、查看结果、向助手描述——为本应只需几秒钟的任务增加了不必要的摩擦。

Model Context Protocol (MCP)

Model Context Protocol 是 Anthropic 发布的开放标准，用于将 AI 助手连接到外部工具。兼容 MCP 的助手（例如 Claude Desktop、Cursor、Windsurf）可以在对话中原生调用工具，无需您进行任何自定义集成。可以把它想象成 AI 工具的 USB‑C：只要某项功能有 MCP 服务器存在，任何兼容的助手都能使用它。

PageBolt MCP 服务器

一个第一方 MCP 服务器让助手直接调用 PageBolt 的功能，接收结果，并在同一上下文中进行推理——无需复制粘贴，无需手动步骤。

服务器可以做的事情

• 对任意 URL 或渲染后的 HTML 截图
• 生成 PDF
• 创建 Open Graph（OG）图片
• 录制浏览器流程的视频
• 运行多步骤浏览器序列（登录、导航、点击、捕获）
• 检查页面的元素结构并返回 CSS 选择器

配置

光标

将以下内容添加到您的 mcp 配置文件中：

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

Claude Desktop

将相同的代码片段放入 claude_desktop_config.json 中。

配置完成后，助手即可立即访问所有 PageBolt 工具——无需额外的代码、端点或身份验证流程。

实际使用案例

对话中的视觉 QA

您推送了一个 CSS 更改，并询问助手：“现在在 iPhone 14 Pro 上首页是什么样的？”
助手使用 viewportDevice: "iphone_14_pro" 调用截图工具，获取图像后描述所见内容。您可以在聊天中反复迭代，无需离开对话。

用于调试的页面检查

描述布局问题；助手在该 URL 上调用 inspect_page，得到带有 CSS 选择器的结构化元素映射，并利用这些数据定位问题——不再需要猜测类似 .header-nav > ul > li 的选择器。

自动化演示内容

生成落地页后，要求助手创建 OG 图片。它使用您的标题和描述调用 OG‑image 工具并返回图片文件，省去使用 Figma 或手动步骤的需求。

来自 PR 的配音视频演示

CI 步骤可以触发一个 AI 代理，对预发布环境执行浏览器序列，记录带有步骤说明和 AI 生成旁白的视频，并将 MP4 作为 PR 评论发布。审阅者只需观看 30 秒的配音演示，而不是阅读文字描述。

CI 步骤示例

助手可以生成以下配置并调用 record_video 工具：

{
  "tool": "record_video",
  "arguments": {
    "steps": [
      { "action": "navigate", "url": "https://staging.yourapp.com", "note": "Landing page" },
      { "action": "click", "selector": "#get-started", "note": "Start the signup flow" },
      { "action": "fill", "selector": "#email", "value": "demo@example.com", "note": "Enter email" },
      { "action": "click", "selector": "#continue", "note": "Proceed to checkout" }
    ],
    "audioGuide": {
      "enabled": true,
      "voice": "nova",
      "script": "Welcome. {{1}} Click Get Started to begin. {{2}} Enter your email. {{3}} Click Continue."
    },
    "frame": { "enabled": true, "style": "macos" },
    "background": { "enabled": true, "type": "gradient", "gradient": "ocean" }
  }
}

助手将此负载发送到 MCP 服务器，收到一个包含浏览器界面、渐变背景、动画光标和 AI 语音旁白的 MP4 文件。

反思

我构建了 MCP 服务器，因为我一直在 Cursor 中手动调用 PageBolt API。该服务器消除了这种摩擦。其他人是否像我一样觉得它有用还有待观察；有些人可能更喜欢用于自动化流水线的原始 HTTP API，而另一些人会欣赏在 AI 编码助手中更低摩擦的集成。两种方法都是有效的。

入门

• 免费层：PageBolt 每月提供 100 次请求；MCP 服务器在任何层级都可使用。
• 设置时间：如果你已经配置好 Cursor 或 Claude Desktop，大约两分钟即可完成。

MCP 规范可在 modelcontextprotocol.io 查看，供对底层机制感兴趣的用户参考。生态系统发展迅速，MCP 正在成为 AI 工具连接外部世界的标准方式。

如果你配置了服务器并发现有趣的用例，欢迎告诉我。