ScreenshotOne MCPサーバー

「ScreenshotOne」MCPサーバーは何をするものですか？

ScreenshotOne MCP（Model Context Protocol）サーバーは、AIアシスタントとScreenshotOne APIの間の公式なブリッジ実装です。このサーバーに接続することで、AIエージェントやツールはウェブサイトのスクリーンショット取得を自動化でき、開発・QA・レポート・ドキュメント作成などのワークフローにビジュアルコンテキストや参照を提供できます。MCPプロトコルを通じて、開発者はAIアシスタントにリアルタイムなウェブサイトのスナップショット生成や、会話やレポートへのビジュアルアセット組み込み、ウェブコンテンツの共有・アーカイブワークフローの効率化を実現できます。このサーバーにより、大規模なAI活用や自動化パイプライン内で安全にスクリーンショットリクエストが実行可能です。

プロンプト一覧

リポジトリにはプロンプトテンプレートの記載がありません。

リソース一覧

リポジトリには明示的なMCPリソースの記載がありません。

利用可能なツール一覧

• render-website-screenshot: ウェブサイトのスクリーンショットをレンダリングし、画像として返します。

このMCPサーバーのユースケース

• ウェブサイトQAの自動化: 回帰テストやビジュアルQAのためにウェブサイトのスクリーンショットを即座に取得・比較し、開発者やテスターがUI変更やレンダリングバグを検出可能にします。
• ドキュメント生成: 技術・マーケティングドキュメントに最新のスクリーンショットを簡単に埋め込み、ガイドやマニュアルが常に現在のウェブサイトUIを反映できます。
• ビジュアルバグレポート: ユーザーやAIアシスタントがライブのウェブページスクリーンショットをバグレポートに添付でき、QAチームと開発チーム間のコミュニケーションを向上します。
• コンテンツのアーカイブ: コンプライアンス・監査・履歴参照のためにウェブサイトの状態を自動取得・アーカイブします。
• リアルタイム共有: AI搭載チャットボットが会話内でウェブページのビジュアルを取得・共有し、分かりやすさやエンゲージメントを向上します。

セットアップ方法

Windsurf

Windsurf向けの具体的なセットアップ手順は提供されていません。

Claude

1. 前提条件: Node.jsがインストールされていることを確認してください。
2. 設定ファイルを探す: ~/Library/Application Support/Claude/claude_desktop_config.json を探します。
3. ScreenshotOne MCPサーバーの設定を追加する:

   {
       "mcpServers": {
           "screenshotone": {
               "command": "node",
               "args": ["path/to/screenshotone/mcp/build/index.js"],
               "env": {
                   "SCREENSHOTONE_API_KEY": "<your api key>"
               }
           }
       }
   }
   

4. ファイルを保存します。
5. Claudeを再起動して変更を適用します。
6. Claude内でスクリーンショットツールを使って動作確認を行います。

APIキーの安全な保管

APIキーは設定ファイルのenvセクションに保存し、コードベースには記載しないでください。

例:

"env": {
    "SCREENSHOTONE_API_KEY": "<your api key>"
}

Cursor

Cursor向けの具体的なセットアップ手順は提供されていません。

Cline

Cline向けの具体的なセットアップ手順は提供されていません。

スタンドアロン

1. 前提条件: Node.jsがインストールされていることを確認してください。
2. 依存関係のインストールとビルド:

   npm install && npm run build
   

3. APIキーを設定してサーバーを実行:

   SCREENSHOTONE_API_KEY=your_api_key && node build/index.js
   

FlowHuntのフロー内でこのMCPを使うには

FlowHuntでMCPを利用する

FlowHuntのワークフローにMCPサーバーを組み込むには、まずMCPコンポーネントをフローに追加し、AIエージェントと接続します。

MCPコンポーネントをクリックして設定パネルを開き、システムMCP構成セクションに以下のJSON形式でMCPサーバー情報を入力してください。

{
  "screenshotone": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

設定が完了すると、AIエージェントはこのMCPのすべての機能にアクセスできるようになります。“screenshotone"はご自身のMCPサーバー名に、URLもご自身のMCPサーバーのURLに置き換えてください。

概要

私たちの見解

このMCPサーバーは機能が絞られ実用的ですが、コアユースケース以外のドキュメントは最小限です。Claude向けにはセットアップが簡単ですが、他プラットフォームの詳細な手順やプロンプトテンプレート・リソースの公開はありません。単一で十分に記載されたツールとAPIキーの安全な取り扱いは強みですが、幅広さには欠けます。

MCPスコア