Webscout MCP

🚀 🔍 WebScout MCP

WebScout MCP は、Webアプリケーション、特にチャットインターフェイスやストリーミングAPIのリバースエンジニアリングを行うために設計された強力なモデルコンテキストプロトコル（MCP）サーバーです。複雑なWebアプリケーションからネットワークトラフィックを発見、分析、キャプチャするための包括的なブラウザ自動化ツールを提供します。

✨ 主な機能

🤖 自動リバースエンジニアリング

• ワンクリック分析：Webアプリケーションに自動的にアクセスし、ストリーミングエンドポイントをキャプチャします。
• スマートパターン検出：SSE、WebSocket、チャンク転送、およびカスタムストリーミング形式の高度な検出機能を備えています。
• ネットワークトラフィックキャプチャ：すべてのHTTPリクエスト、レスポンス、およびWebSocketフレームをCDPレベルで包括的に監視します。
• 構造化データ出力：URL、リクエストペイロード、およびレスポンスパターンを含むクリーンな解析済みデータを提供します。

🔐 インタラクティブなブラウザ自動化

• セッション管理：クッキーと認証状態を管理する永続的なブラウザセッションを提供します。
• 認証サポート：ログインフォーム、OAuthフロー、および多要素認証を処理できます。
• ステップバイステップナビゲーション：ボタンをクリック、フォームを入力、複雑なマルチページインターフェイスをナビゲートできます。
• 視覚的フィードバック：任意の時点でスクリーンショットを撮影し、ページの状態とUI要素を把握できます。

🎯 高度なネットワーク監視

• リアルタイムキャプチャ：構成可能なキャプチャウィンドウで、ストリーミングレスポンスをリアルタイムに監視します。
• 柔軟なフィルタリング：すべてのトラフィックをキャプチャするか、POSTリクエスト、ストリーミングレスポンス、またはURLパターンでフィルタリングできます。
• WebSocketサポート：WebSocketフレーム、メッセージ、および接続詳細を完全にキャプチャします。
• メモリ管理：長時間のセッション中のメモリ問題を防ぐために、キャプチャ制限を構成できます。

🛠️ 開発者フレンドリーなツール

• 14の専用ツール：Webスクレイピング、テスト、およびAPI発見のための包括的なツールキットを提供します。
• ヘッドレスまたは可視モード：自動化のためのヘッドレスモードまたはデバッグのための可視モードで実行できます。
• エラーハンドリング：詳細なエラーメッセージと回復オプションを備えた堅牢なエラーハンドリング機能を持っています。
• クロスプラットフォーム：macOS、Linux、およびWindowsで一貫した動作を提供します。

📋 利用可能なツール

コアリバースエンジニアリング

• reverse_engineer_chat - ストリーミングエンドポイントの発見を伴うチャットインターフェイスの自動分析
• start_network_capture - 包括的なネットワークトラフィック監視を開始します。
• stop_network_capture - キャプチャを終了し、収集したすべてのデータを取得します。
• get_network_capture_status - キャプチャセッションの状態と統計情報を確認します。
• clear_network_capture - キャプチャセッションを停止せずに、キャプチャしたデータをクリアします。

インタラクティブなブラウザ制御

• initialize_session - インタラクティブな操作のための新しいブラウザセッションを作成します。
• close_session - ブラウザリソースをクリーンアップし、セッションを終了します。
• navigate_to_url - セッション内で異なるURLにナビゲートします。
• switch_tab - 開いているブラウザタブを切り替えます。

ユーザーインタラクションシミュレーション

• click_element - ボタン、リンク、または任意のインタラクティブな要素をクリックします。
• fill_form - 自動送信オプションを持つフォームフィールドを入力します。
• wait_for_element - 動的な要素が表示されるまで待機し、続行します。

視覚的検査

• take_screenshot - ビューポート、全ページ、または特定の要素のスクリーンショットを撮影します。
• get_current_page_info - 包括的なページ情報とタブ詳細を取得します。

📦 インストール

前提条件

• Node.js 18+ - ESモジュールと最新のJavaScript機能を使用するために必要です。
• npm - 依存関係のインストールのためのパッケージマネージャーです。

クイックセットアップ

# リポジトリをクローンする
git clone https://github.com/pyscout/webscout-mcp
cd webscout-mcp

# 依存関係をインストールする
npm install

# 自動化のためにPlaywrightブラウザをインストールする
npx playwright install

💻 使用例

方法1: MCPサーバー（推奨）

WebScout MCPをMCPクライアントの設定に追加します。

{
  "mcpServers": {
    "webscout-mcp": {
      "command": "npx",
      "args": ["-y", "webscout-mcp"]
    }
  }
}

方法2: 直接CLIを使用する

# 直接MCPサーバーを起動する
npm start

# またはnodeで実行する
node src/index.js

方法3: 開発モード

# デバッグのために可視ブラウザで実行する
node src/index.js  # セッション初期化でheadless: falseを設定する

基本的な使用法

// セッションを初期化し、チャットインターフェイスを分析する
const session = await initializeSession("https://chat.example.com");
const analysis = await reverseEngineerChat("https://chat.example.com", "Hello", 8000);

console.log("見つかったエンドポイント:", analysis.length);
await closeSession(session.sessionId);

高度な使用法

インタラクティブなログインフロー

// ログインを処理し、保護されたコンテンツにナビゲートする
const session = await initializeSession("https://app.example.com/login");

await fillForm(session.sessionId, [
  { selector: 'input[name="email"]', value: "user@example.com" },
  { selector: 'input[name="password"]', value: "password123" }
], 'button[type="submit"]');

await waitForElement(session.sessionId, ".dashboard", 10000);
const screenshot = await takeScreenshot(session.sessionId);

await closeSession(session.sessionId);

ネットワークトラフィックキャプチャ

// ページ上のすべてのネットワークアクティビティを監視する
const session = await initializeSession("https://api.example.com");

await startNetworkCapture(session.sessionId, {
  capturePostOnly: false,
  captureStreaming: true,
  maxCaptures: 100
});

// ネットワークトラフィックを生成するアクションを実行する
await navigateToUrl(session.sessionId, "https://api.example.com/data");

const captureData = await stopNetworkCapture(session.sessionId);
console.log("キャプチャされたリクエスト:", captureData.data.requests.length);

await closeSession(session.sessionId);

📚 ドキュメント

アーキテクチャの概要

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│ Chat Interface  │───▶│ Browser Automation│───▶│ Network Capture │
│  (Target URL)   │    │   (Playwright)    │    │  (CDP + Route)  │
└─────────────────┘    └──────────────────┘    └─────────────────┘
         │                       │                       │
         ▼                       ▼                       ▼
┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│  Message Input  │    │  DOM Interaction  │    │ Request/Response│
│   Detection     │    │    (Auto-fill)    │    │    Analysis     │
└─────────────────┘    └──────────────────┘    └─────────────────┘
                                                       │
                                                       ▼
                                            ┌─────────────────┐
                                            │ Structured Data │
                                            │  Output (JSON)  │
                                            └─────────────────┘

ワークフロー

1. ブラウザ起動：ヘッドレスPlaywrightブラウザでターゲットURLを開きます。
2. ネットワークセットアップ：Chrome DevTools Protocol（CDP）セッションとルートインターセプションを確立します。
3. インターフェイス検出：チャット入力要素（textarea、contenteditableなど）を自動的に検出します。
4. メッセージ注入：テストメッセージを送信し、ストリーミングレスポンスをトリガーします。
5. トラフィックキャプチャ：指定された時間ウィンドウでネットワークリクエスト/レスポンスを監視します。
6. パターン分析：キャプチャされたデータ内のストリーミングパターンを識別します。
7. データ処理：キャプチャされたデータをクリーンなJSON形式に構造化します。

ストリーミング検出パターン

システムは、複数のストリーミングレスポンス形式を検出します。

• Server-Sent Events (SSE)：data: {"content": "..."}
• OpenAIスタイルのチャンク：data: {"choices": [{"delta": {"content": "..."}}]}
• イベントストリーム：event: message\ndata: {...}
• JSONストリーミング：token、delta、contentフィールドを持つオブジェクト
• カスタム形式：f:{...}、0:"..."、e:{...}パターン
• WebSocketメッセージ：ストリーミングデータを含むバイナリ/テキストフレーム
• チャンク化レスポンス：Transfer-encoding: chunkedでストリーミングコンテンツを持つレスポンス

プロジェクト構造

webscout-mcp/
├── src/
│   ├── index.js                 # メインのMCPサーバー実装
│   └── tools/                   # 専用ツールモジュール
│       ├── reverseEngineer.js   # ツールのエクスポートと調整
│       ├── reverseEngineerChat.js # 自動チャット分析
│       ├── sessionManagement.js # ブラウザセッションのライフサイクル
│       ├── visualInspection.js  # スクリーンショットとページ情報
│       ├── interaction.js       # クリックとフォーム入力
│       ├── navigation.js        # URLナビゲーションとタブ切り替え
│       └── networkCapture.js    # ネットワークトラフィック監視
│   └── utilities/               # 共有ユーティリティ関数
│       ├── browser.js           # ブラウザ自動化ユーティリティ
│       └── network.js           # ネットワークパターン検出
├── package.json                 # 依存関係とスクリプト
├── mcp-config.json              # MCPクライアント設定例
└── README.md                    # このドキュメント

設定

環境変数

MCP設定

MCPクライアントの設定ファイルを更新します。

{
  "mcpServers": {
    "webscout-mcp": {
      "command": "npx",
      "args": ["-y", "webscout-mcp"],
      "env": {
        "NODE_ENV": "production"
      }
    }
  }
}

または、VS CodeのMCP設定（mcp.json）の場合：

{
  "servers": {
    "webscout-mcp": {
      "command": "npx",
      "args": ["-y", "webscout-mcp"],
      "type": "stdio"
    }
  }
}

🔧 技術詳細

コントリビュート方法

1. リポジトリをフォークします。
2. 機能ブランチを作成します：git checkout -b feature-name
3. 変更を加え、テストを追加します。
4. テストを実行します：npm test
5. プルリクエストを送信します。

開発ガイドライン

• ES6+構文と最新のJavaScriptの実践に従ってください。
• 新しい関数にはJSDocコメントを追加してください。
• 複数のチャットインターフェイスで変更をテストしてください。
• 新しい機能についてドキュメントを更新してください。
• コードがすべてのテストに合格することを確認してください。

📄 ライセンス

このプロジェクトはISCライセンスの下でライセンスされています。詳細については、LICENSEファイルを参照してください。

🙏 謝辞

• Model Context Protocol SDK を使用して構築されています。
• ブラウザ自動化には Playwright が使用されています。
• より良いWeb APIの発見とテストツールの必要性に触発されて開発されました。

⚠️ 重要提示

• このツールはAPI分析と統合目的のみを意図しています。常にウェブサイトの利用規約とrobots.txtファイルを尊重してください。
• 一部のチャットインターフェイスにはレート制限またはCAPTCHAがあり、分析に干渉する可能性があります。
• Playwrightは自動化のためにブラウザバイナリをインストールする必要があります。
• 結果はネットワーク速度とターゲットウェブサイトのパフォーマンスによって異なる場合があります。

🐛 トラブルシューティング

一般的な問題

"Browser not found" エラー

# Playwrightブラウザをインストールする
npx playwright install

"Connection timeout" エラー

• captureWindowMs パラメータを増やします。
• ネットワーク接続を確認します。
• ターゲットURLがアクセス可能かどうかを確認します。

"No streaming endpoints found"

• 異なるテストメッセージを試してみます。
• キャプチャウィンドウの時間を増やします。
• チャットインターフェイスが認証を必要としないことを確認します。

MCP接続問題

• mcp-config.json の絶対パスを確認します。
• Node.js 18+がインストールされていることを確認します。
• MCPクライアントのログを確認して詳細なエラーを確認します。

📞 サポート

問題に遭遇した場合や質問がある場合は、以下の手順を試してください。

1. トラブルシューティング セクションを確認します。
2. GitHub上の既存の Issues を確認します。
3. 詳細な情報を含む新しい Issue を作成します。

WebScout MCP - WebアプリケーションのリバースエンジニアリングとAPI発見のためのインテリジェントなパートナーです。

開発者、セキュリティ研究者、およびAPI愛好家のために愛情を込めて作られました