Pagebolt MCP

🚀 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アシスタントに以下のように問いかけてみましょう。

"https://github.com をダークモードで1920x1080のサイズでスクリーンショットを撮って"

スクリーンショットがチャット内に表示されます。

✨ 主な機能

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のクォータをリアルタイムで監視できます。

すべての結果はインラインで返され、スクリーンショットはチャット内に直接表示されます。

💻 使用例

基本的な使用法

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 — クッキー同意バナーを非表示にする
• 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をダークモードでキャプチャして: <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 (default/minimal/gradient), 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 — クッキー同意ポップアップを非表示にする（ほとんどの録画で使用）
• saveTo — 出力ファイルのパス

例のプロンプト:

• "https://example.com にログインするビデオをスポットライトカーソルで録画して"
• "サインアップフローのナレーション付きデモビデオをゆっくりと録画し、demo.mp4 として保存して"
• "https://example.com のデモをmacOSフレームと真夜中の背景で録画して"

高度な使用法

洗練されたビデオデモのベストプラクティス

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 は各ステップの間に自動的に一時停止を挿入します。ページが本当に読み込み時間を必要とする場合（ナビゲート後、フェッチをトリガーするクリック後）にのみ、待機ステップを使用してください。すべての遷移に待機を追加しないでください — これは無駄な時間を作り出します。

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 エンドポイントから取得されます。

🔧 技術詳細

設定

価格

無料プランではクレジットカードの登録は不要です。StarterとGrowthプランには14日間の無料トライアルがあります。

なぜPageBoltを選ぶべきか

• 6つのAPI、1つのキー — スクリーンショット、PDF、OG画像、ブラウザ自動化、ビデオ録画、ページ検査。別々のツールにお金を払う必要がなくなります。
• クリーンなキャプチャ — 自動的な広告ブロック、クッキーバナーの削除、チャットウィジェットの抑制、トラッカーのブロック。
• 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