🔍 WebScout MCP

WebScout MCP is a powerful Model Context Protocol (MCP) server designed for reverse engineering web applications, particularly chat interfaces and streaming APIs. It provides comprehensive browser automation tools to discover, analyze, and capture network traffic from complex web applications.

✨ Key Features

🤖 Automated Reverse Engineering

• One-Click Analysis: Automatically navigate to web applications and capture streaming endpoints
• Smart Pattern Detection: Advanced detection of SSE, WebSocket, chunked transfers, and custom streaming formats
• Network Traffic Capture: Comprehensive CDP-level monitoring of all HTTP requests, responses, and WebSocket frames
• Structured Data Output: Clean, parsed data with URLs, request payloads, and response patterns

🔐 Interactive Browser Automation

• Session Management: Persistent browser sessions with cookie and authentication state management
• Authentication Support: Handle login forms, OAuth flows, and multi-factor authentication
• Step-by-Step Navigation: Click buttons, fill forms, and navigate through complex multi-page interfaces
• Visual Feedback: Take screenshots at any point to understand page state and UI elements

🎯 Advanced Network Monitoring

• Real-Time Capture: Monitor streaming responses as they occur with configurable capture windows
• Flexible Filtering: Capture all traffic or filter by POST requests, streaming responses, or URL patterns
• WebSocket Support: Full capture of WebSocket frames, messages, and connection details
• Memory Management: Configurable capture limits to prevent memory issues during long sessions

🛠️ Developer-Friendly Tools

• 14 Specialized Tools: Comprehensive toolkit for web scraping, testing, and API discovery
• Headless or Visible: Run in headless mode for automation or visible mode for debugging
• Error Handling: Robust error handling with detailed error messages and recovery options
• Cross-Platform: Works on macOS, Linux, and Windows with consistent behavior

📋 Available Tools

Core Reverse Engineering

• reverse_engineer_chat - Automated analysis of chat interfaces with streaming endpoint discovery
• start_network_capture - Begin comprehensive network traffic monitoring
• stop_network_capture - End capture and retrieve all collected data
• get_network_capture_status - Check capture session status and statistics
• clear_network_capture - Clear captured data without stopping the capture session

Interactive Browser Control

• initialize_session - Create a new browser session for interactive operations
• close_session - Clean up browser resources and end session
• navigate_to_url - Navigate to different URLs within a session
• switch_tab - Switch between open browser tabs

User Interaction Simulation

• click_element - Click buttons, links, or any interactive elements
• fill_form - Fill out form fields with automatic submission options
• wait_for_element - Wait for dynamic elements to appear before continuing

Visual Inspection

• take_screenshot - Capture screenshots of viewport, full page, or specific elements
• get_current_page_info - Retrieve comprehensive page information and tab details

🚀 Installation

Prerequisites

• Node.js 18+ - Required for ES modules and modern JavaScript features
• npm - Package manager for dependency installation

Quick Setup

# Clone the repository
git clone https://github.com/pyscout/webscout-mcp
cd webscout-mcp

# Install dependencies
npm install

# Install Playwright browsers for automation
npx playwright install

📖 Usage

Method 1: MCP Server (Recommended)

Add WebScout MCP to your MCP client configuration:

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

Method 2: Direct CLI Usage

# Start the MCP server directly
npm start

# Or run with node
node src/index.js

Method 3: Development Mode

# Run with visible browser for debugging
node src/index.js  # Set headless: false in session initialization

🛠️ API Examples

Basic Chat Interface Analysis

// Initialize session and analyze a chat interface
const session = await initializeSession("https://chat.example.com");
const analysis = await reverseEngineerChat("https://chat.example.com", "Hello", 8000);

console.log("Found endpoints:", analysis.length);
await closeSession(session.sessionId);

Interactive Login Flow

// Handle login and navigate to protected content
const session = await initializeSession("https://app.example.com/login");

await fillForm(session.sessionId, [
  { selector: 'input[name="email"]', value: "[email protected]" },
  { 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);

Network Traffic Capture

// Monitor all network activity on a page
const session = await initializeSession("https://api.example.com");

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

// Perform actions that generate network traffic
await navigateToUrl(session.sessionId, "https://api.example.com/data");

const captureData = await stopNetworkCapture(session.sessionId);
console.log("Captured requests:", captureData.data.requests.length);

await closeSession(session.sessionId);

🏗️ Architecture Overview

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│ 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)  │
                                            └─────────────────┘

Workflow

1. Browser Launch: Opens target URL in headless Playwright browser
2. Network Setup: Establishes Chrome DevTools Protocol (CDP) session and route interception
3. Interface Detection: Automatically locates chat input elements (textarea, contenteditable, etc.)
4. Message Injection: Sends test message to trigger streaming responses
5. Traffic Capture: Monitors network requests/responses for specified time window
6. Pattern Analysis: Identifies streaming patterns in captured data
7. Data Processing: Structures captured data into clean JSON format

Streaming Detection Patterns

The system detects multiple streaming response formats:

• Server-Sent Events (SSE): data: {"content": "..."}
• OpenAI-style chunks: data: {"choices": [{"delta": {"content": "..."}}]}
• Event streams: event: message data: {...}
• JSON streaming: Objects with token, delta, content fields
• Custom formats: f:{...}, 0:"...", e:{...} patterns
• WebSocket messages: Binary/text frames with streaming data
• Chunked responses: Transfer-encoding: chunked with streaming content

📁 Project Structure

webscout-mcp/
├── src/
│   ├── index.js                 # Main MCP server implementation
│   └── tools/                   # Specialized tool modules
│       ├── reverseEngineer.js   # Tool exports and coordination
│       ├── reverseEngineerChat.js # Automated chat analysis
│       ├── sessionManagement.js # Browser session lifecycle
│       ├── visualInspection.js  # Screenshots and page info
│       ├── interaction.js       # Clicking and form filling
│       ├── navigation.js        # URL navigation and tab switching
│       └── networkCapture.js    # Network traffic monitoring
│   └── utilities/               # Shared utility functions
│       ├── browser.js           # Browser automation utilities
│       └── network.js           # Network pattern detection
├── package.json                 # Dependencies and scripts
├── mcp-config.json              # MCP client configuration example
└── README.md                    # This documentation

🔧 Configuration

Environment Variables

MCP Configuration

Update your MCP client's configuration file:

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

Or for VS Code MCP configuration (mcp.json):

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

Contributing

1. Fork the rep

---