ScreenshotOne MCPサーバー

FlowHuntとAIエージェントをScreenshotOneに接続して、シームレスかつ自動化されたウェブサイトのスクリーンショット取得を実現—QA、ドキュメント、レポート、アーカイブ用途に最適です。

AI MCP Server Screenshots Automation
FlowHuntで試す デモを予約

FlowHuntでMCPサーバーをホスティングするために私たちにお問い合わせください

support@flowhunt.io

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

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

プロンプト一覧

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

FlowHuntロゴ

ビジネスを成長させる準備はできましたか？

今日から無料トライアルを開始し、数日で結果を確認しましょう。

デモをリクエスト ログイン

リソース一覧

リポジトリには明示的な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エージェントと接続します。

FlowHunt MCPフロー

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

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

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

概要

セクション利用可否詳細・備考
概要✅
プロンプト一覧⛔プロンプトテンプレートの記載なし
リソース一覧⛔明示的なリソースの記載なし
ツール一覧✅render-website-screenshot
APIキーの安全な保管✅APIキーは環境変数で管理
サンプリングサポート（評価上重要度低）⛔記載なし

私たちの見解

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

MCPスコア

ライセンス有無✅ (MIT)
ツールが1つ以上あるか✅
フォーク数11
スター数23

よくある質問

ScreenshotOne MCPでウェブサイトのスクリーンショットを自動化

リアルタイムのウェブサイトスクリーンショットでAIワークフローを強化。ScreenshotOne MCPサーバーをFlowHuntに統合して、QA・レポート・ドキュメント作成の効率を高めましょう。

FlowHuntで試す デモを予約