ScreenshotAPI

ScreenshotAPI MCP サーバー

ScreenshotAPI の公式 MCP サーバーです。ウェブサイトのスクリーンショット、URL や HTML の PDF 化、スクロール動画、JavaScript に対応したウェブスクレイピング（Markdown、テキスト、HTML）、一括キャプチャのための 8 つのツールを AI アシスタントに提供します。自然な英語で依頼すると、サーバーが API を呼び出します。アシスタントにはスクリーンショットも画像として返されるため、キャプチャしたページを確認できます。

Claude Desktop、Claude Code、Cursor、Windsurf、VS Code、Cline、Codex など、MCP 対応のあらゆるクライアントで利用できます。

項目	値
パッケージ	@screenshotapinet/mcp
トランスポート	stdio
Node.js	>=18

クイックスタート

1. ScreenshotAPI に登録し、ダッシュボードから API キーをコピーします。

2. Cursor ユーザーはワンクリックでインストールできます。

   

3. その他のユーザーは、MCP クライアントの設定に以下を追加します（正確なファイルパスについては、クライアント別のインストールを参照してください）。

{
  "mcpServers": {
    "screenshotapi": {
      "command": "npx",
      "args": ["-y", "@screenshotapinet/mcp"],
      "env": {
        "SCREENSHOTAPI_TOKEN": "<YOUR_API_KEY>"
      }
    }
  }
}

4. クライアントを再起動します。

5. 動作を確認します。**「https://example.com のスクリーンショットを撮って」**と依頼してください。

目次

• クイックスタート
• クライアント別のインストール
• 動作確認
• ツールリファレンス
• プロンプト例
• エラーコード
• 仕組み
• 環境変数
• ソースからのビルド
• トラブルシューティング
• リンク
• ライセンス

クライアント別のインストール

必要条件

• Node.js 18 以降
• ターミナルで npx を利用できること
• ScreenshotAPI の API キー（登録）

Claude Desktop

claude_desktop_config.json に追加します（Settings → Developer → Edit Config）。

{
  "mcpServers": {
    "screenshotapi": {
      "command": "npx",
      "args": ["-y", "@screenshotapinet/mcp"],
      "env": {
        "SCREENSHOTAPI_TOKEN": "<YOUR_API_KEY>"
      }
    }
  }
}

保存後、Claude Desktop を再起動します。

Claude Code

claude mcp add screenshotapi --env SCREENSHOTAPI_TOKEN=<YOUR_API_KEY> -- npx -y @screenshotapinet/mcp

サーバーを追加したら、新しい Claude Code セッションを開始します。

Cursor

ワンクリックでインストールします。

または、手動で .cursor/mcp.json に追加します。

{
  "mcpServers": {
    "screenshotapi": {
      "command": "npx",
      "args": ["-y", "@screenshotapinet/mcp"],
      "env": {
        "SCREENSHOTAPI_TOKEN": "<YOUR_API_KEY>"
      }
    }
  }
}

保存後、Cursor を再起動します。

Windsurf

~/.codeium/windsurf/mcp_config.json に追加します。

{
  "mcpServers": {
    "screenshotapi": {
      "command": "npx",
      "args": ["-y", "@screenshotapinet/mcp"],
      "env": {
        "SCREENSHOTAPI_TOKEN": "<YOUR_API_KEY>"
      }
    }
  }
}

保存後、Windsurf を再起動します。

VS Code / GitHub Copilot

VS Code の settings.json に追加します。

{
  "mcp": {
    "servers": {
      "screenshotapi": {
        "command": "npx",
        "args": ["-y", "@screenshotapinet/mcp"],
        "env": {
          "SCREENSHOTAPI_TOKEN": "<YOUR_API_KEY>"
        }
      }
    }
  }
}

保存後、VS Code を再起動します。

Cline

MCP Servers パネルを開き、Configure → Advanced MCP Settings を選択します。cline_mcp_settings.json に追加します。

{
  "mcpServers": {
    "screenshotapi": {
      "command": "npx",
      "args": ["-y", "@screenshotapinet/mcp"],
      "env": {
        "SCREENSHOTAPI_TOKEN": "<YOUR_API_KEY>"
      }
    }
  }
}

保存後、Cline を再起動します。

Codex CLI

codex mcp add screenshotapi --env SCREENSHOTAPI_TOKEN=<YOUR_API_KEY> -- npx -y @screenshotapinet/mcp
codex mcp list

サーバーを追加したら、新しい Codex セッションを開始します。

その他の MCP クライアント

以下の設定を使用します。

{
  "command": "npx",
  "args": ["-y", "@screenshotapinet/mcp"],
  "env": {
    "SCREENSHOTAPI_TOKEN": "<YOUR_API_KEY>"
  }
}

動作確認

セットアップ後に、以下を試してください。

プロンプト	想定されるツール
https://example.com のスクリーンショットを撮影してください	take_screenshot
iPhone サイズの画面、ダークモードで stripe.com のスクリーンショットを撮影してください	width、dark_modeを指定したtake_screenshot
広告をブロックして https://news.ycombinator.com のページ全体をキャプチャしてください	full_page、blockを指定したtake_screenshot
https://example.com/invoice を A4 PDF として ./invoice.pdf に保存してください	format、save_pathを指定したgenerate_pdf
https://react.dev/learn を読み、要約してください	scrape_page
https://apple.com のスクロール動画を10秒のGIFで作成してください	record_scrolling_video
競合他社5社のホームページのスクリーンショットを撮影してください	bulk_screenshots
一括ジョブ1f2e...はもう完了しましたか？	get_bulk_status

ツールリファレンス

8つのツールはすべて ScreenshotAPI REST API をラップしています。レンダリングツール（take_screenshot、generate_pdf、scrape_page、record_scrolling_video）は、output=jsonを指定してGET https://shot.screenshotapi.net/v3/screenshotを呼び出し、以下のページ準備オプションを共有します。各ツールではurlまたはcustom_htmlのいずれかを指定します。

共通のレンダリングオプション

グループ	パラメーター
ビューポート	width（デフォルト1680、最大7680）、height（デフォルト876、最大4320）
タイミング	delay、wait_for_event（load / domcontentloaded / networkidle）、lazy_load、scroll_delay、timeout
ページ操作	css、css_url、js、js_url、remove_selector、blur_selector、selector_to_click、click_recursion、scroll_to_element、adjust_top
ブロック	block（リスト：ads、tracking、cookie_banners、chat_widgets、javascript、stylesheets、images、media、fonts、text_tracks、xhr、fetch、event_source、websockets、manifest）、block_specific_requests
エミュレーション	dark_mode、grayscale（0～100）、enable_incognito、user_agent、accept_languages、headers、cookies、template_id、proxy、latitude、longitude、timezone
キャッシュ	fresh、enable_caching、ttl（スクリーンショットとPDFのみ）
ストレージ	result_file_name、byob、storage_service、bucket_name（スクリーンショットとPDFのみ）

take_screenshot

ページを画像としてキャプチャし、ホストされた画像の URL を返します。画像はインラインでも返されるため、アシスタントが確認できます。通常、全ページのキャプチャは長すぎて表示できないため例外となります。インラインでも取得するには、include_image=true を指定してください。

パラメーター	必須	説明
url	いずれか	キャプチャする URL
custom_html	いずれか	URL の代わりにレンダリングする生の HTML
file_type	いいえ	png（デフォルト）、jpg、webp
full_page	いいえ	スクロール可能なページ全体をキャプチャします。デフォルトは false
retina	いいえ	ピクセル密度を 2 倍にします。デフォルトは false
image_quality	いいえ	JPEG の画質（0～100）。デフォルトは 80
omit_background	いいえ	背景が単色のページで背景を透明にします（PNG のみ）
thumbnail_width	いいえ	アスペクト比を維持して、出力をこの幅にリサイズします
selector	いいえ	CSS セレクターで単一の要素をキャプチャします
clip	いいえ	矩形領域をキャプチャします：{ x, y, width, height }
sizes	いいえ	1 回のリクエストで複数のビューポートサイズでキャプチャします：[{ width, height }, ...]
include_image	いいえ	画像をインラインで返します。デフォルトは true、full_page が設定されている場合は false
save_path	いいえ	ファイルをローカルにも保存します

すべての共通レンダリングオプションも使用できます。

generate_pdf

URL または生の HTML を PDF に変換し、ホストされた PDF の URL を返します。format（および width／height）を指定しない場合、ページ全体が 1 ページの連続した PDF になります。

パラメーター	必須	説明
url	いずれか	変換する URL
custom_html	いずれか	変換する生の HTML
format	いいえ	A0～A6、Letter、Legal、Tabloid、Ledger
landscape	いいえ	横向きにします。デフォルトは false
page_range	いいえ	指定したページのみを保持します（例：1-3）
print_background	いいえ	背景色と画像を含めます
media	いいえ	CSS の print または screen
save_path	いいえ	PDF をローカルにも保存します

すべての共通レンダリングオプションも使用できます。

scrape_page

実際のブラウザーでページをレンダリングするため、JavaScript が最初に実行され、その後コンテンツを抽出します。サーバーは抽出されたファイルをダウンロードし、その内容をインラインで返します。同じリクエスト内でスクリーンショットも撮影されます。

パラメーター	必須	説明
url	いずれか	スクレイピングする URL
custom_html	いずれか	処理する生の HTML
extract	いいえ	markdown、text、html、image_urls のいずれか。デフォルトは markdown
include_content	いいえ	抽出した内容をインラインで返します。デフォルトは true
max_content_chars	いいえ	抽出した各ファイルを切り詰めます。デフォルトは 50000

さらに、ビューポート、タイミング、ページ操作、ブロック、エミュレーションのオプションがあります。

record_scrolling_video

ブラウザーがページを下方向にスクロールする様子を録画し、ホストされた動画 URL を返します。

パラメーター	必須	説明
url	いずれか	録画する URL
custom_html	いずれか	録画する生の HTML
file_type	いいえ	mp4（デフォルト）、webm、gif
scroll_speed	いいえ	slow、normal（デフォルト）、fast
duration	いいえ	秒数、0-60
scroll_back	いいえ	終了時にページの先頭までスクロールして戻ります
start_immediately	いいえ	ページの読み込み完了前に録画を開始します
video	いいえ	スクロールせずに、duration 秒間ビューポートを録画します
sizes	いいえ	複数のビューポートサイズで録画します：[{ width, height }, ...]、最大 10
save_path	いいえ	動画をローカルにも保存します（サイズは 1 つのみ）

さらに、ビューポート、タイミング、ページ操作、ブロック、エミュレーションのオプションがあります。

bulk_screenshots

POST https://api.screenshotapi.net/v1/bulk/json は、最大 50 件の URL を 1 つのジョブとして送信します。有料プランのみ利用できます。

パラメーター	必須	説明
screenshots	はい	[{ url, ...options }]。オプションには API の生の名前（file_type、width、full_page、block_ads など）を使用します
defaults	いいえ	各エントリーが独自の値で上書きしない限り、すべてのエントリーに適用されるオプション

bulk_screenshots_csv

POST https://api.screenshotapi.net/v1/bulk/csv は、url 列を含む CSV をアップロードします。それ以外の列は、その行のレンダリングオプションになります。有料プランのみ利用できます。

パラメーター	必須	説明
csv_path	いずれか	ローカルの CSV ファイルのパス
csv_content	いずれか	CSV テキスト

get_bulk_status

GET https://api.screenshotapi.net/v1/bulk/csv/status は、ジョブの percent_complete、successful_urls、failed_urls を返します。

パラメーター	必須	説明
uuid	はい	ジョブの UUID

download_bulk_results

GET https://api.screenshotapi.net/v1/bulk/csv/download は、各 URL につき 1 行を返し、url、status、screenshot、error_message が含まれます。

パラメーター	必須	説明
uuid	はい	ジョブの uuid

プロンプトの例

スクリーンショット

• https://linear.app のスクリーンショットを撮影してください
• ダークモードで、幅 390px のモバイルビューポートから https://github.com のスクリーンショットを撮影してください。
• 広告と Cookie バナーをブロックして、https://vercel.com/pricing のページ全体をキャプチャしてください。
• https://example.com/pricing の価格表だけを取得してください（セレクター #pricing）。
• ステージングサイトのスクリーンショットを撮影し、クラス .user-email が付いた要素をすべてぼかしてください。
• ドイツからドイツ語で https://www.bbc.com がどのように見えるか表示してください。

PDF

• https://example.com/report を A4 横向きの PDF に変換し、./report.pdf に保存してください。
• この HTML の請求書をレターサイズの PDF に変換してください。
• https://docs.example.com/guide の 2〜4 ページだけを PDF としてエクスポートしてください。

スクレイピング

• https://react.dev/learn を読み、要点を教えてください。
• JavaScript の実行後に表示される https://example.com の HTML を取得してください。
• https://unsplash.com にあるすべての画像 URL を一覧表示してください。

動画

• https://stripe.com をゆっくりスクロールし、上部に戻る MP4 を録画してください。
• ランディングページをデスクトップとモバイルのサイズでスクロールする GIF を作成してください。

一括処理

• Cookie バナーを非表示にして、これら 20 個の URL のスクリーンショットを 1440x900 で撮影してください。
• 一括処理ジョブの状況を教えてください。完了したら結果をダウンロードしてください。

エラーコード

ツール呼び出しによってサーバーがクラッシュすることはありません。上流で発生したエラーは、error、code、message、guidance フィールドを含む構造化されたツールの結果として返されるため、クライアントは問題を説明し、修正方法を提案できます。

コード	意味
310	対象 URL でリダイレクトが多すぎます
400	パラメーター（URL、ファイル形式、プロキシ、位置情報、CSS/JS URL、クリップ、テンプレート）が無効、または対象の SSL に問題があります
401	SCREENSHOTAPI_TOKEN がないか無効、またはサブスクリプションが無効です
402	未払い料金またはプランの割り当て量の 2 倍を超える使用により、サービスが一時停止しています
403	スクリーンショットの割り当て量を使い切った、トライアルの期限が切れた、または対象が接続を拒否しました
404	アカウントがプランまたはトライアルに登録されていません
407	プロキシトンネルへの接続に失敗しました
408	ページのレンダリングに時間がかかりすぎました
429	1 分あたりのリクエスト数が多すぎます
444	対象サイトが接続を閉じたか、何も返しませんでした
495	対象サイトの SSL/TLS バージョンまたは暗号方式が一致しません
499	このサーバーは API の応答を待つのを停止しました（SCREENSHOTAPI_REQUEST_TIMEOUT_MS を参照）
500	ScreenshotAPI の内部エラーです。安全に再試行できます
502	サーバーが ScreenshotAPI にアクセスできませんでした
503	ScreenshotAPI または対象ページが一時的に利用できません

URL が指定されていない場合のエラー結果の例：

{
  "error": "url_required",
  "code": 400,
  "message": "Provide either 'url' or 'custom_html'.",
  "guidance": "Pass a fully qualified URL including the protocol, e.g. 'https://example.com', or pass custom_html instead."
}

全一覧については、ScreenshotAPI のエラードキュメントを参照してください。

仕組み

これは、ScreenshotAPI REST API をラップする stdio MCP サーバーです。

実行時の動作は次のとおりです。

1. MCP クライアントが npx を使ってサーバープロセスを起動します。
2. クライアントがツール一覧を読み込みます。
3. プロンプトがツールに一致すると、クライアントがそのツールを呼び出します。
4. サーバーが入力を検証し、output=json を指定して ScreenshotAPI を呼び出し、ホストされたファイルの URL を含む構造化 JSON を返します。
5. スクリーンショットの場合、サーバーは画像もダウンロードし、インラインで返します。スクレイピングの場合は、抽出された Markdown、テキスト、または HTML をダウンロードして内容を返します。

API キーは呼び出しごとに環境変数から読み込まれ、token パラメーターとして送信されます。サーバーは、モデルに渡す前にすべてのレスポンスからトークンを取り除きます。大きな custom_html など、値が非常に長いリクエストは、URL の長さ制限を避けるため、JSON ボディを使った POST として送信されます。

環境変数

変数	必須	デフォルト	説明
SCREENSHOTAPI_TOKEN	はい		ScreenshotAPI API キー
SCREENSHOTAPI_REQUEST_TIMEOUT_MS	いいえ	180000	上流リクエストのタイムアウト（ミリ秒）
SCREENSHOTAPI_MAX_INLINE_IMAGE_BYTES	いいえ	3500000	モデルにインラインで返すスクリーンショットの最大サイズ

ソースからビルドする

git clone https://github.com/Screenshot-API/screenshot-mcp.git
cd screenshot-mcp
npm install
npm run build

直接実行します。

SCREENSHOTAPI_TOKEN=<YOUR_KEY> node dist/cli.js

MCP Inspector で確認します。

SCREENSHOTAPI_TOKEN=<YOUR_KEY> npx @modelcontextprotocol/inspector node dist/cli.js

トラブルシューティング

更新後もクライアントに古いツール一覧が表示される： クライアントを再起動し、最新の npm バージョンが読み込まれていることを確認してください。

401 token_required： MCP クライアント設定の env ブロックに SCREENSHOTAPI_TOKEN が設定されていません。

401 invalid_token： キーが間違っているか、ダッシュボードでローテーションされています。現在のキーをダッシュボードからコピーしてください。

スクリーンショットが画像ではなく URL として返される： 画像が SCREENSHOTAPI_MAX_INLINE_IMAGE_BYTES より大きいか、full_page キャプチャです。thumbnail_width を使用するか、image_quality を低くした jpg を使うか、include_image=true を設定してください。

ページが空白、または最後まで読み込まれない： delay（例：3000）を追加するか、wait_for_event=networkidle を使用するか、遅延読み込み画像のあるページでは lazy_load=true を設定してください。

キャプチャに Cookie バナーやポップアップが表示される： block: ["cookie_banners", "ads", "chat_widgets"] を渡すか、remove_selector で特定の要素を削除してください。

CAPTCHA またはボットによるブロック： リクエストを住宅用 proxy 経由で送信してください。プロキシのドキュメントを参照してください。

タイムアウト： ページの読み込みが遅い場合は、より長い timeout（API 側、デフォルトは 100000 ms）と、より長い SCREENSHOTAPI_REQUEST_TIMEOUT_MS（このサーバー側、デフォルトは 180000 ms）が必要になることがあります。一部の MCP クライアントには、独自のツール呼び出しタイムアウトもあります。

リンク

• ScreenshotAPI のウェブサイト
• API ドキュメント
• クエリビルダー
• 料金
• GitHub リポジトリ

ライセンス

MIT