Screenshot

ScreenshotRender MCP サーバー

Claude、Cursor、VS Code、Windsurf、またはその他のModel Context Protocolクライアントから、ウェブサイトのスクリーンショットを撮影できます。このサーバーはScreenshotRender API をラップし、AI アシスタントからのリクエストに応じて、公開されている任意のウェブページをレンダリングします。

アシスタントに「stripe.com のページ全体のスクリーンショットを撮影して」と頼むと、画像がチャットにそのまま表示されます。

ツール

ツール	説明
take_screenshot	公開 URL のスクリーンショットを撮影します。画像のインライン表示に加え、ホストされた URL とページのメタデータ（タイトル、説明）を返します。

パラメーター

• url（文字列、必須）— https:// を含む、撮影するページ。
• fullPage（ブール値、任意）— ビューポートではなく、スクロール可能なページ全体を撮影します。
• wait（数値、任意）— 撮影前に待機する時間（ミリ秒）。アニメーションや遅延読み込みコンテンツのために使用します。
• timeout（数値、任意）— 読み込みを待つ最大時間（ミリ秒）。

セットアップ

1. screenshotrender.com で API キーを取得します（sr- で始まります）。
2. MCP クライアントの設定にサーバーを追加します。

Claude Desktop

claude_desktop_config.json を編集します（設定 → 開発者 → 設定を編集）：

{
  "mcpServers": {
    "screenshotrender": {
      "command": "npx",
      "args": ["-y", "screenshotrender-mcp"],
      "env": {
        "SCREENSHOTRENDER_API_KEY": "sr-your-key-here"
      }
    }
  }
}

Cursor / VS Code / Windsurf

同じブロックを、エディターの MCP 設定（mcp.json または MCP 設定 UI）に追加します。クライアントを再起動すると、take_screenshot ツールを使用できるようになります。

環境変数

変数	必須	説明
SCREENSHOTRENDER_API_KEY	はい	ScreenshotRender のキー（sr-...）。
SCREENSHOTRENDER_BASE_URL	いいえ	API ベース URL を上書きします。デフォルトは https://screenshotrender.com です。

ローカル開発

npm install
SCREENSHOTRENDER_API_KEY=sr-your-key npm run inspect   # opens MCP Inspector

Inspector を使うと、リリース前に take_screenshot を呼び出して結果を確認できます。

ライセンス

MIT