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 許可證。