screenshotrun-mcp

screenshotrun-mcp

AI エージェントがあらゆるウェブページを見られるようにします。ScreenshotRun Screenshot API 用の MCP サーバーです。

特長

• 公開されているあらゆるウェブページを、PNG、JPEG、WebP、または PDF でスクリーンショットとして取得
• デバイスエミュレーション — デスクトップ、モバイル、タブレットのビューポート
• prefers-color-scheme: dark によるダークモードでのレンダリング
• 自動スクロールによるページ全体の取得
• 広告と Cookie 同意バナーをブロック
• 取得前にカスタム CSS／JavaScript を挿入
• CSS セレクターで特定の要素を指定
• Retina（2x）解像度に対応
• API の使用状況と残りのクォータを確認

クイックスタート

1. API キーを取得する

screenshotrun.com で無料の API キーに登録します。

2. AI クライアントを設定する

Claude Desktop

Claude Desktop の設定ファイルに追加します（macOS では ~/Library/Application Support/Claude/claude_desktop_config.json、Windows では %APPDATA%\Claude\claude_desktop_config.json）：

{
  "mcpServers": {
    "screenshotrun": {
      "command": "npx",
      "args": ["-y", "screenshotrun-mcp"],
      "env": {
        "SCREENSHOTRUN_API_KEY": "sr_live_your_key_here"
      }
    }
  }
}

Claude Code

claude mcp add screenshotrun \
  npx -y screenshotrun-mcp \
  -e SCREENSHOTRUN_API_KEY=sr_live_your_key_here

Cursor

プロジェクト内の .cursor/mcp.json に追加します：

{
  "mcpServers": {
    "screenshotrun": {
      "command": "npx",
      "args": ["-y", "screenshotrun-mcp"],
      "env": {
        "SCREENSHOTRUN_API_KEY": "sr_live_your_key_here"
      }
    }
  }
}

Windsurf

同じ npx -y screenshotrun-mcp コマンドを使用して、Windsurf の MCP 設定に追加し、SCREENSHOTRUN_API_KEY 環境変数を設定します。

利用可能なツール

take_screenshot

あらゆるウェブページのスクリーンショットを取得します。AI エージェントが分析・説明できるよう、画像を Base64 エンコードされたデータとして返します。

パラメーター	型	デフォルト	説明
url	string	必須	スクリーンショットを取得する URL（http:// または https:// を含める必要があります）
format	png | jpeg | webp | pdf	png	出力画像形式
width	number	1280	ビューポートの幅（ピクセル、320–3840）
height	number	800	ビューポートの高さ（ピクセル、200–2160）
full_page	boolean	false	スクロール可能なページ全体を取得
quality	number	80	JPEG／WebP の画像品質（1–100）
device	desktop | mobile | tablet	—	デバイスのプリセット（デバイスのデフォルト値で幅と高さを上書き）
dark_mode	boolean	false	ダークモードでのレンダリングを有効化
block_ads	boolean	false	取得時に広告をブロック
block_cookies	boolean	true	Cookie 同意ダイアログをブロック
delay	number	0	ページ読み込み後、取得までの待機時間（秒、0–10）
retina	boolean	false	2x 解像度で取得
css	string	—	ページに挿入するカスタム CSS（最大 10KB）
js	string	—	取得前に実行するカスタム JavaScript（最大 10KB）
selector	string	—	特定の要素を取得するための CSS セレクター
hide_selectors	string[]	—	取得前に非表示にする要素の CSS セレクター
click_selector	string	—	取得前にクリックする要素の CSS セレクター
scroll_to	string	—	表示範囲内にスクロールする要素の CSS セレクター

check_usage

現在の請求期間における ScreenshotRun API の使用状況を確認します。使用したスクリーンショット数、残りのクォータ、使用率、残り日数を返します。

パラメーターは不要です。

プロンプト例

• 「screenshotrun.com のスクリーンショットを撮って」
• 「snapshotarchive.com をモバイルのダークモードでスクリーンショットにして」
• 「自分のウェブサイトのページ全体のスクリーンショットを撮って、何が見えるか説明して」
• 「screenshotrun.com を JPEG 形式で Retina スクリーンショットにして」
• 「広告ブロックを有効にして、タブレットで snapshotarchive.com のスクリーンショットを撮って」
• 「hide_selectors を使って、Cookie バナーを非表示にした状態で自分のサイトのスクリーンショットを撮って」
• 「ScreenshotRun API の使用状況を確認して」

仕組み

1. AI エージェントが、Web ページのスクリーンショットに関するユーザーのリクエストを受け取ります
2. エージェントが URL とオプションを指定して take_screenshot ツールを呼び出します
3. MCP サーバーがリクエストを ScreenshotRun API に送信します
4. API が実際のブラウザーでページをレンダリングし、スクリーンショットを返します
5. 画像が base64 形式で AI エージェントに返され、分析や説明に利用できます

要件

• Node.js 18+
• ScreenshotRun API キー（無料で取得）

ScreenshotRun のその他のプロジェクト

• SnapshotArchive — 視覚的な差分検出機能を備えた Web サイトの自動監視
• WatchCron — 開発者向けの cron ジョブおよびハートビート監視

ライセンス

MIT