Dopplio MCPを使ってAIでウェブサイトのスクリーンショットを自動取得する方法

AIにURLと、表示したい範囲（ビューポート）や特定の要素の指示を与えます。AIはcapture_screenshotツールを使用して画像を撮影し、結果を表示します。具体的な活用例は以下の通りです。

1. 01

   ターゲットの特定

   エージェントはURLと、モバイルビューポートや特定のCSSセレクターといった、あなたが指定したパラメータを受け取ります。

   capture_screenshot
2. 02

   ナビゲーション

   AIは指定されたURLへ移動し、撮影を開始する前にページが完全に読み込まれていることを確認します。

   capture_screenshot
3. 03

   キャプチャ実行

   ツールがスナップショットを実行します。指定された正確なエリアやデバイスのサイズに焦点を当てて撮影します。

   capture_screenshot
4. 04

   データの提供

   AIは生成された画像、またはサイトの表示状態を検証するために必要なデータを提供します。

   capture_screenshot

Dopplio Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_2CWS99T34VhK36XB5b3DAzUAs3Gbf4QOeku6lFvy/mcpコピー

Claude Desktop

以下の手順で数秒で接続できます。

1. 1In Claude Desktop, open Settings → Connectors.
2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3. 3Click Add and start a new chat — Dopplio capabilities are ready to use.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "dopplio-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_2CWS99T34VhK36XB5b3DAzUAs3Gbf4QOeku6lFvy/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

リンクをクリックして接続するだけです。認証情報は暗号化されて安全に保持されます。接続後は、お使いのAIクライアントですぐにこれらのツールを利用できます。

• 01

  スクリーンショットを撮る前に、AIがボタンをクリックすることはできますか？

  いいえ。現在のツールは、ページが読み込まれた時点の視覚的な状態をキャプチャすることに特化しています。

• 02

  スクリーンショットで見つけたCSSのエラーを、AIが自動で修正することはできますか？

  いいえ。AIは問題を検知して報告することはできますが、ウェブサイトのコード自体を書き換えることはできません。

• 03

  デバイスの種類を指定することはできますか？

  はい。特定のビューポートのサイズを指定することで、モバイルやタブレットでの見え方をシミュレートして撮影するよう指示できます。

• 04

  撮影した画像はローカルドライブに保存されますか？

  いいえ。画像はチャットインターフェース内、またはクライアントに返されるデータとして提供されます。

• 05

  スクロールしないと表示されない要素も撮影できますか？

  はい。特定の要素を指定して撮影するか、ページ全体のキャプチャを行うよう指示することが可能です。

• Dopplioについて他に質問がありますか？ Dopplio Connectorの全機能を見る