ウェブページのスクリーンショット MCP サーバー

Puppeteerを使用してWebページのスクリーンショットをキャプチャするMCP（Model Context Protocol）サーバー。このサーバーにより、AIエージェントはWebアプリケーションを視覚的に検証し、Webアプリケーション生成の進行状況を確認できます。

スクリーンレコーディング 2025年5月27日 (2)

特徴

フルページスクリーンショット: Webページ全体またはビューポートのみをキャプチャします
要素のスクリーンショット: CSSセレクターを使用して特定の要素をターゲットにする
複数のフォーマット: PNG、JPEG、WebP フォーマットをサポート
カスタマイズ可能なオプション: ビューポートのサイズ、画質、待機条件、遅延を設定します
Base64 エンコード: スクリーンショットを Base64 エンコードされた画像として返して簡単に統合できるようにします。
認証サポート: 手動ログインとCookieの永続化
デフォルトのブラウザ統合: システムのデフォルトのブラウザを使用して、より自然なエクスペリエンスを実現します
セッションの永続性: 複数ステップのワークフローのためにブラウザセッションを開いたままにします

Related MCP server: Puppeteer MCP Server

インストール

# Install globally npm install -g screenshot-webpage-mcp # Or use locally in a project npm install screenshot-webpage-mcp

使用法

ツール

この MCP サーバーはいくつかのツールを提供します。

1. ログインして待機する

手動ログイン用に表示されているブラウザウィンドウで Web ページを開き、ユーザーがログインを完了するまで待機してから、Cookie を保存します。

{ "url": "https://example.com/login", "waitMinutes": 5, "successIndicator": ".dashboard-welcome", "useDefaultBrowser": true }

url (必須): ログインページのURL
waitMinutes （オプション）：ログインを待つ最大時間（デフォルト：5）
successIndicator （オプション）: ログイン成功を示す CSS セレクターまたは URL パターン
useDefaultBrowser (オプション): システムのデフォルトのブラウザを使用するかどうか (デフォルト: true)

2. スクリーンショットページ

指定された URL のスクリーンショットをキャプチャし、base64 でエンコードされた画像として返します。

{ "url": "https://example.com/dashboard", "fullPage": true, "width": 1920, "height": 1080, "format": "png", "quality": 80, "waitFor": "networkidle2", "delay": 500, "useSavedAuth": true, "reuseAuthPage": true, "useDefaultBrowser": true, "visibleBrowser": true }

url (必須): スクリーンショットを撮るウェブページのURL
fullPage （オプション）：ページ全体をキャプチャするか、ビューポートのみをキャプチャするか（デフォルト：true）
width （オプション）：ピクセル単位のビューポートの幅（デフォルト：1920）
height （オプション）：ピクセル単位のビューポートの高さ（デフォルト：1080）
format （オプション）：画像形式 - 「png」、「jpeg」、または「webp」（デフォルト：「png」）
quality （オプション）：画像の品質（0〜100）。jpegとwebpにのみ適用されます。
waitFor (オプション): ページが読み込まれたとみなすタイミング - 「load」、「domcontentloaded」、「networkidle0」、または「networkidle2」(デフォルト: 「networkidle2」)
delay （オプション）：ページ読み込み後の追加遅延（ミリ秒）（デフォルト：0）
useSavedAuth (オプション): 前回のログインから保存されたCookieを使用するかどうか (デフォルト: true)
reuseAuthPage (オプション): 既存の認証済みページを使用するかどうか (デフォルト: false)
useDefaultBrowser (オプション): システムのデフォルトのブラウザを使用するかどうか (デフォルト: false)
visibleBrowser (オプション): ブラウザウィンドウを表示するかどうか (デフォルト: false)

3. スクリーンショット要素

CSS セレクターを使用して、Web ページ上の特定の要素のスクリーンショットをキャプチャします。

{ "url": "https://example.com/dashboard", "selector": ".user-profile", "waitForSelector": true, "format": "png", "quality": 80, "padding": 10, "useSavedAuth": true, "useDefaultBrowser": true, "visibleBrowser": true }

url (必須): ウェブページのURL
selector （必須）: スクリーンショットを撮る要素の CSS セレクター
waitForSelector (オプション): セレクターが表示されるまで待機するかどうか (デフォルト: true)
format （オプション）：画像形式 - 「png」、「jpeg」、または「webp」（デフォルト：「png」）
quality （オプション）：画像の品質（0〜100）。jpegとwebpにのみ適用されます。
padding （オプション）：要素の周囲のパディング（ピクセル単位）（デフォルト：0）
useSavedAuth (オプション): 前回のログインから保存されたCookieを使用するかどうか (デフォルト: true)
useDefaultBrowser (オプション): システムのデフォルトのブラウザを使用するかどうか (デフォルト: false)
visibleBrowser (オプション): ブラウザウィンドウを表示するかどうか (デフォルト: false)

4. 認証クッキーをクリアする

特定のドメインまたはすべてのドメインの保存された認証 Cookie をクリアします。

{ "url": "https://example.com" }

url (オプション): Cookieを消去するドメインのURL。指定しない場合は、すべてのCookieが消去されます。

デフォルトのブラウザモード

デフォルトのブラウザモードでは、PuppeteerにバンドルされているChromiumの代わりに、システムの通常のブラウザ（Chrome、Edgeなど）を使用できます。これは以下の場合に便利です。

既存のブラウザセッションと拡張機能を使用する
保存した資格情報を使用してウェブサイトに手動でログインする
複数ステップのワークフローでより自然なブラウジング体験を実現
ユーザーと同じブラウザ環境でテストする

デフォルトのブラウザモードを有効にするには、ツールパラメータでuseDefaultBrowser: trueとvisibleBrowser: trueを設定します。

デフォルトのブラウザモードの仕組み

デフォルトのブラウザモードを有効にすると、次のようになります。

このツールは、システムのデフォルトのブラウザ (Chrome、Edge など) を見つけようとします。
ランダムなポートでリモートデバッグを有効にしてブラウザを起動します
Puppeteerは独自のブラウザインスタンスを起動する代わりに、このブラウザインスタンスに接続します。
既存のプロファイル、拡張機能、Cookieはセッション中に利用できます
ブラウザウィンドウは表示されたままなので、手動で操作できます。

このモードは、認証や複雑なユーザー操作を必要とするワークフローに特に役立ちます。

ブラウザの永続性

MCP サーバーは、複数のツール呼び出しにわたって永続的なブラウザセッションを維持できます。

login-and-waitを使用すると、ブラウザセッションは開いたままになります
以降のscreenshot-pageまたはscreenshot-elementへのreuseAuthPage: true呼び出しでは同じページが使用されます。
これにより、再認証せずに複数ステップのワークフローが可能になります。

クッキー管理

アクセスしたドメインごとに Cookie が自動的に保存されます。

login-and-waitを使用した後、クッキーはホームフォルダの.mcp-screenshot-cookiesディレクトリに保存されます。
これらのCookieはuseSavedAuth: trueで同じドメインに再度アクセスしたときに自動的に読み込まれます。
clear-auth-cookiesツールを使用してCookieを消去できます。

ワークフローの例: 保護されたページのスクリーンショット

認証が必要なページのスクリーンショットを撮るワークフローの例を次に示します。

手動ログインフェーズ

{ "name": "login-and-wait", "parameters": { "url": "https://example.com/login", "waitMinutes": 3, "successIndicator": ".dashboard-welcome", "useDefaultBrowser": true } }

デフォルトのブラウザが開き、ログインページが表示されます。手動でログインすることもできます。ログインが完了すると（成功インジケーターが表示されるか、ログインページから移動した後）、セッションCookieが保存されます。

保存したセッションを使用してスクリーンショットを撮る

{ "name": "screenshot-page", "parameters": { "url": "https://example.com/account", "fullPage": true, "useSavedAuth": true, "reuseAuthPage": true, "useDefaultBrowser": true, "visibleBrowser": true } }

これにより、同じブラウザウィンドウに保存されている認証 Cookie を使用して、アカウントページのスクリーンショットが撮影されます。

特定の要素のスクリーンショットを撮る

{ "name": "screenshot-element", "parameters": { "url": "https://example.com/dashboard", "selector": ".user-profile-section", "useSavedAuth": true, "useDefaultBrowser": true, "visibleBrowser": true } }

完了したらCookieを消去する

{ "name": "clear-auth-cookies", "parameters": { "url": "https://example.com" } }

このワークフローにより、通常のユーザーと同じように保護されたページを操作でき、デフォルトのブラウザで完全な認証フローを完了できます。

ヘッドレスモードと可視モード

ヘッドレスモード( visibleBrowser: false ): より高速で、ユーザーの操作が不要な自動ワークフローに適しています。
表示モード（ visibleBrowser: true ）：ブラウザウィンドウを表示し、ユーザーによる操作と手動検証を可能にします。useDefaultBrowser useDefaultBrowser: trueの場合に必須です。

プラットフォームサポート

デフォルトのブラウザ検出は次のブラウザで機能します:

macOS : Chrome、Edge、Safariを検出します
Windows : レジストリまたは一般的なインストールパスを介してChromeとEdgeを検出します
Linux : システムコマンド経由でChromeとChromiumを検出します

トラブルシューティング

よくある問題

デフォルトのブラウザが見つかりません: システムがデフォルトのブラウザを見つけられない場合は、Puppeteer にバンドルされている Chromium にフォールバックします。
接続の問題: ブラウザのデバッグポートへの接続に問題がある場合は、別のインスタンスがすでにそのポートを使用しているかどうかを確認してください。
Cookie の問題: 認証が機能しない場合は、 clear-auth-cookiesツールを使用して Cookie をクリアしてみてください。

デバッグ

MCPサーバーは、問題が発生すると、コンソールに役立つエラーメッセージを記録します。これらのメッセージでトラブルシューティング情報を確認してください。

Webpage Screenshot MCP Server