Pagebolt MCP

PageBolt MCP服务器

](https://www.npmjs.com/package/pagebolt-mcp)  

直接从您的AI编码助手中截取屏幕截图、生成PDF、创建OG图像、检查页面和录制演示视频。

适用于Claude Desktop、Cursor、Windsurf、Cline和任何兼容MCP的客户端。

______________________________________________________________________

它的作用

PageBolt MCP服务器将您的AI助手连接到 PageBolt的网页截图API，使其能够：

• 截图 任何URL、HTML或Markdown（30多个参数）
• 生成PDF 来自URL或HTML（发票、报告、文档）
• 创建OG图像 用于使用模板或自定义HTML的社交卡
• 运行浏览器序列 --多步自动化（导航、点击、填充、截图）
• 录制演示视频 --浏览器自动化，如MP4/WebM/GIF，带有光标效果、点击动画和自动缩放
• 检查页面 --使用CSS选择器获取交互式元素的结构化映射（在序列之前使用）
• 列出设备预设 --25+台设备（iPhone、iPad、MacBook、Galaxy等）
• 检查使用情况 -实时监控您的API配额

所有结果都是内联返回的——截图直接出现在您的聊天中。

______________________________________________________________________

快速开始

1.获得免费的API密钥

注册地址： pagebolt.dev --免费套餐包括每月100次请求，无需信用卡。

2.安装和配置

克劳德桌面版

添加 ~/.claude/claude_desktop_config.json:

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

光标

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

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

帆板运动

添加到您的Windsurf MCP设置中：

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

临床/其他MCP客户

相同的配置模式--set command 到 npx, args 到 ["-y", "pagebolt-mcp"]，并在中提供您的API密钥 env.

3.试试看

问你的AI助手：

“截图https://github.com在1920x1080“的暗模式下

屏幕截图将在线显示在您的聊天中。

______________________________________________________________________

工具

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+以上

示例提示：

• “屏幕截图https://example.com在iPhone 14 Pro上”
• “截取以下内容的完整页面截图https://news.ycombinator.com广告屏蔽”
• “在暗模式下捕获此HTML： `

Hello World `"

generate_pdf

从任何URL或HTML内容生成PDF。

参数： url/html, format （A4纸/信纸/法律版）， landscape, margin, scale, pageRanges, delay, saveTo

示例提示：

• “生成PDFhttps://example.com并保存到。/report.pdf”
• 根据此发票HTML以信纸格式横向创建PDF

create_og_image

创建开放图形/社交预览图像。

参数： template （默认/最小/梯度）， html （定制）， title, subtitle, logo, bgColor, textColor, accentColor, width, height, format

示例提示：

• “使用渐变模板创建标题为“如何构建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告诉我页面上有哪些按钮和表单”
• “登录页面上有哪些交互元素？我需要序列选择器”

提示： 使用 inspect_page 之前 run_sequence 发现可靠的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 --浏览器chrome： { 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”
• “录制演示https://example.com带有macOS框架和午夜背景”

______________________________________________________________________

抛光视频演示的最佳实践

1.始终先检查页面

永远不要猜测CSS选择器。呼叫 inspect_page 在构建步骤之前，它会在目标URL上返回每个按钮、输入和链接的精确选择器。猜测选择器，如 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.在每个有意义的步骤上添加注释

在播放过程中，注释呈现为样式化的工具提示覆盖。添加一个 "note" 每个动作步骤上的字段，除了 wait/wait_for。保持简短（不超过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 终点。

______________________________________________________________________

配置

______________________________________________________________________

定价

免费计划不需要信用卡。Starter和Growth提供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：
• 问题：

______________________________________________________________________

许可证

麻省理工学院