Pagebolt MCP

🚀 PageBolt MCP Server

PageBolt MCP Server 可让你通过 AI 编码助手直接进行网页截图、生成 PDF、创建 OG 图像、检查页面以及录制演示视频。它能与 Claude Desktop、Cursor、Windsurf、Cline 以及任何支持 MCP 的客户端兼容。

🚀 快速开始

1. 获取免费 API 密钥

在 pagebolt.dev 上注册，免费套餐每月包含 100 次请求，无需信用卡。

2. 安装与配置

Claude Desktop

在 ~/.claude/claude_desktop_config.json 中添加以下内容：

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

Cursor

在项目的 .cursor/mcp.json（或全局配置）中添加以下内容：

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

Windsurf

在 Windsurf MCP 设置中添加以下内容：

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

Cline / 其他 MCP 客户端

采用相同的配置模式，将 command 设置为 npx，args 设置为 ["-y", "pagebolt-mcp"]，并在 env 中提供你的 API 密钥。

3. 尝试使用

向你的 AI 助手提问：

"以 1920x1080 的分辨率在暗模式下截取 https://github.com 的屏幕截图"

截图将直接显示在你的聊天窗口中。

✨ 主要特性

PageBolt MCP Server 可将你的 AI 助手连接到 PageBolt 的网页捕获 API，使其具备以下能力：

• 截图：可对任何 URL、HTML 或 Markdown 进行截图（支持 30 多个参数）
• 生成 PDF：从 URL 或 HTML 生成 PDF（如发票、报告、文档）
• 创建 OG 图像：使用模板或自定义 HTML 为社交卡片创建 OG 图像
• 运行浏览器序列：多步骤自动化操作（导航、点击、填充、截图）
• 录制演示视频：将浏览器自动化操作录制为 MP4、WebM 或 GIF 视频，支持光标效果、点击动画和自动缩放
• 检查页面：获取包含 CSS 选择器的交互式元素结构化地图（可在序列操作前使用）
• 列出设备预设：提供 25 多种设备预设（如 iPhone、iPad、MacBook、Galaxy 等）
• 检查使用情况：实时监控你的 API 配额

所有结果都将内联返回，截图会直接显示在你的聊天窗口中。

💻 使用示例

基础用法

以下是一个使用 PageBolt MCP Server 进行截图的示例：

# 向 AI 助手提问以截取网页截图
# 提示 AI 助手以 1920x1080 的分辨率在暗模式下截取 https://github.com 的屏幕截图
"Take a screenshot of https://github.com in dark mode at 1920x1080"

高级用法

以下是一个录制演示视频的示例：

{
  "steps": [
    { "action": "navigate", "url": "https://app.example.com", "note": "Opening the app" },
    { "action": "wait", "ms": 1500, "live": true },
    { "action": "click", "selector": "#tab-reports", "note": "Switch to the Reports tab" },
    { "action": "wait", "ms": 1200, "live": true },
    { "action": "click", "selector": "#btn-export", "note": "Export the current report" },
    { "action": "wait", "ms": 2000, "live": true },
    { "action": "scroll", "y": 400, "note": "Scroll to see the full results" }
  ],
  "pace": "slow",
  "format": "mp4",
  "darkMode": true,
  "blockBanners": true,
  "frame": { "enabled": true, "style": "macos", "theme": "dark" },
  "background": { "enabled": true, "type": "gradient", "gradient": "midnight", "padding": 40, "borderRadius": 12 },
  "cursor": { "style": "classic", "visible": true, "persist": true },
  "clickEffect": { "style": "ripple" },
  "audioGuide": {
    "enabled": true,
    "script": "Here's how the export flow works. {{1}} Open the app and navigate to the dashboard. {{2}} Switch to the Reports tab. {{3}} Click Export. {{4}} Your report is ready in seconds. Try it free at example.com."
  }
}

📚 详细文档

工具

take_screenshot

可对任何 URL、HTML 或 Markdown 进行像素级完美截图。 关键参数：

• url / html / markdown：内容来源
• width, height：视口大小（默认：1280x720）
• viewportDevice：设备预设（如 "iphone_14_pro"、"macbook_pro_14"）
• fullPage：捕获整个可滚动页面
• darkMode：模拟暗色调方案
• format：png、jpeg 或 webp
• blockBanners：隐藏 cookie 同意横幅
• blockAds：阻止广告
• blockChats：移除实时聊天小部件
• blockTrackers：阻止跟踪脚本
• extractMetadata：在截图的同时获取页面标题、描述、OG 标签
• selector：捕获特定的 DOM 元素
• delay：捕获前等待（用于动画）
• cookies、headers、authorization：认证捕获
• geolocation、timeZone：位置模拟
• 还有 15 个以上的参数

示例提示：

• "在 iPhone 14 Pro 上截取 https://example.com 的屏幕截图"
• "在阻止广告的情况下截取 https://news.ycombinator.com 的全页屏幕截图"
• "在暗模式下捕获此 HTML：<h1>Hello World</h1>"

generate_pdf

从任何 URL 或 HTML 内容生成 PDF。 参数：url/html、format（A4/Letter/Legal）、landscape、margin、scale、pageRanges、delay、saveTo

示例提示：

• "生成 https://example.com 的 PDF 并保存到 ./report.pdf"
• "从这个发票 HTML 以 Letter 格式、横向模式创建 PDF"

create_og_image

创建 Open Graph / 社交预览图像。 参数：template（默认/最小/渐变）、html（自定义）、title、subtitle、logo、bgColor、textColor、accentColor、width、height、format

示例提示：

• "使用渐变模板创建标题为 'How to Build a SaaS' 的 OG 图像"
• "生成一个深蓝色背景和白色文本的社交卡片"

run_sequence

执行多步骤浏览器自动化操作。 操作：navigate、click、fill、select、hover、scroll、wait、wait_for、evaluate、screenshot、pdf

示例提示：

• "访问 https://example.com，点击定价链接，然后截取两个页面的屏幕截图"
• "导航到登录页面，填写测试凭证，提交，然后截取仪表盘的屏幕截图"

inspect_page

检查网页并获取所有交互式元素、标题、表单、链接和图像的结构化地图，每个元素都有唯一的 CSS 选择器。 关键参数：url/html、width、height、viewportDevice、darkMode、cookies、headers、authorization、blockBanners、blockAds、waitUntil、waitForSelector

示例提示：

• "检查 https://example.com 并告诉我页面上有哪些按钮和表单"
• "登录页面上有哪些交互式元素？我需要序列操作的选择器"

提示：在使用 run_sequence 之前使用 inspect_page 来发现可靠的 CSS 选择器，而不是猜测。

record_video

录制专业的演示视频，包含多步骤浏览器自动化序列，支持光标效果、点击动画、平滑移动和可选的 AI 语音旁白。 关键参数：

• steps：与 run_sequence 相同的操作（除了没有截图/ PDF — 整个序列就是视频）
• format：mp4、webm 或 gif（默认：mp4；webm/gif 需要 Starter+ 套餐）
• framerate：24、30 或 60 fps（默认：30）
• pace：速度预设："fast"、"normal"、"slow"、"dramatic"、"cinematic" 或 0.25 - 6.0 的数字
• cursor：样式（highlight/circle/spotlight/dot/classic）、颜色、大小、平滑度、持久性
• clickEffect：样式（ripple/pulse/ring）、颜色
• zoom：点击时自动缩放，可配置缩放级别和持续时间
• frame：浏览器边框：{ enabled: true, style: "macos" } 添加 macOS 标题栏
• background：样式化背景：{ enabled: true, type: "gradient", gradient: "midnight", padding: 40, borderRadius: 12 }
• audioGuide：AI 语音旁白：{ enabled: true, script: "Intro. {{1}} Step one. {{2}} Step two. Outro." }
• darkMode：在浏览器中模拟暗色调方案（建议用于浅色背景的网站）
• blockBanners：隐藏 cookie 同意弹出窗口（几乎在每次录制时都使用）
• saveTo：输出文件路径

示例提示：

• "使用聚光灯光标录制登录 https://example.com 的视频"
• "以慢速录制带有旁白的注册流程演示视频，保存为 demo.mp4"
• "录制带有 macOS 边框和午夜背景的 https://example.com 演示视频"

打磨视频演示的最佳实践

1. 始终先使用 inspect_page

不要猜测 CSS 选择器。在构建步骤之前，对目标 URL 调用 inspect_page，它会返回每个按钮、输入框和链接的确切选择器。像 button.primary 这样猜测的选择器经常会失败，而像 #radix-trigger-tab-dashboard 这样发现的选择器总是能命中。

1. inspect_page(url, { blockBanners: true })
2. record_video(steps using selectors from step 1, ...)

2. 在点击和导航后的等待步骤中使用 live: true

点击或导航后，内容会异步加载。live: false（默认值）会立即冻结单帧 — 在任何内容渲染之前。在任何交互后的等待步骤中设置 live: true，以便视频捕获实际的页面加载过程。

{ "action": "click", "selector": "#submit-btn", "note": "Submitting the form" },
{ "action": "wait", "ms": 2000, "live": true }

3. 对于浅色背景的网站使用 darkMode: true

如果目标网站有白色或非常浅的背景，它会与渐变/玻璃视频背景冲突。设置 darkMode: true 以模拟 prefers-color-scheme: dark — 大多数现代网站都能很好地适应，并且结果在屏幕上看起来更加精致。

4. 使用 pace 而不是等待步骤来控制时间

pace 会自动在每个步骤之间插入暂停。仅在页面确实需要加载时间时（导航后、点击触发获取数据后）使用 wait 步骤。不要在每个过渡中都添加等待步骤，这会产生停顿。

5. 在旁白脚本中编写结束语

音频是主时钟 — 视频会根据 TTS 持续时间进行裁剪或扩展。始终在 audioGuide.script 的最后一个 {{N}} 标记后添加一个句子。这可以防止突然结束，并为观众提供行动呼吁。

"audioGuide": {
  "enabled": true,
  "script": "Welcome to PageBolt. {{1}} First, navigate to the dashboard. {{2}} Click on the export button. {{3}} Your report downloads instantly. Try it free at pagebolt.dev."
}

{{3}} 之后的文本会在最后几帧播放，作为干净的结束语。没有它，音频会在序列中间结束，剩余的视频会静音播放。

6. 在每个有意义的步骤上添加注释

注释在播放时会以样式化的工具提示覆盖形式显示。除了 wait/wait_for 步骤外，在每个操作步骤上添加 "note" 字段。保持注释简短（少于 80 个字符）。它们可以将原始的浏览器录制变成引导式游览。

{ "action": "navigate", "url": "https://example.com", "note": "Opening the dashboard" },
{ "action": "click", "selector": "#export-btn", "note": "Click to export as PDF" }

7. 完整的精致视频示例

{
  "steps": [
    { "action": "navigate", "url": "https://app.example.com", "note": "Opening the app" },
    { "action": "wait", "ms": 1500, "live": true },
    { "action": "click", "selector": "#tab-reports", "note": "Switch to the Reports tab" },
    { "action": "wait", "ms": 1200, "live": true },
    { "action": "click", "selector": "#btn-export", "note": "Export the current report" },
    { "action": "wait", "ms": 2000, "live": true },
    { "action": "scroll", "y": 400, "note": "Scroll to see the full results" }
  ],
  "pace": "slow",
  "format": "mp4",
  "darkMode": true,
  "blockBanners": true,
  "frame": { "enabled": true, "style": "macos", "theme": "dark" },
  "background": { "enabled": true, "type": "gradient", "gradient": "midnight", "padding": 40, "borderRadius": 12 },
  "cursor": { "style": "classic", "visible": true, "persist": true },
  "clickEffect": { "style": "ripple" },
  "audioGuide": {
    "enabled": true,
    "script": "Here's how the export flow works. {{1}} Open the app and navigate to the dashboard. {{2}} Switch to the Reports tab. {{3}} Click Export. {{4}} Your report is ready in seconds. Try it free at example.com."
  }
}

list_devices

列出所有 25 多种可用的设备预设及其视口尺寸。 示例提示：

• "有哪些设备预设可用于截图？"

check_usage

检查你当前的 API 使用情况和计划限制。 示例提示：

• "我这个月还剩下多少 API 请求？"

提示

为常见工作流程预建的提示模板。在支持 MCP 提示的客户端中，这些会以斜杠命令的形式出现。

/capture-page

使用合理的默认设置（阻止横幅、广告、聊天、跟踪器）捕获任何 URL 的干净截图。 参数：url（必需）、device、dark_mode、full_page

/record-demo

录制专业的演示视频。代理会先检查页面以发现选择器，然后构建视频录制序列。 参数：url（必需）、description（必需 — 演示应展示的内容）、pace、format

/audit-page

检查页面并获取其元素、表单、链接、标题和潜在问题的结构化分析。 参数：url（必需）

资源

pagebolt://api-docs

完整的 PageBolt API 参考作为文本资源。支持 MCP 资源的 AI 代理可以读取此资源，以获取超出工具描述范围的详细参数文档。内容从实时的 llms-full.txt 端点获取。

配置

定价

免费套餐无需信用卡。入门版和成长版包含 14 天免费试用。

为什么选择 PageBolt？

• 6 种 API，一个密钥：支持截图、PDF 生成、OG 图像创建、浏览器自动化、视频录制和页面检查。无需为不同工具付费。
• 干净的捕获：自动阻止广告、移除 cookie 横幅、抑制聊天小部件和阻止跟踪器。
• 25 多种设备预设：从 iPhone SE 到 Galaxy S24 Ultra、iPad Pro、MacBook、4K 桌面设备。
• 5 分钟即可上线：使用普通 HTTP，无需 SDK，支持任何语言。
• 内联结果：截图和 OG 图像直接显示在你的 AI 聊天窗口中。

链接

• 网站：pagebolt.dev
• API 文档：pagebolt.dev/docs.html
• npm：npmjs.com/package/pagebolt-mcp
• 问题反馈：github.com/Custodia-Admin/pagebolt-mcp/issues

📄 许可证

本项目采用 MIT 许可证。