MCP server for capturing screenshots and reading console logs from web pages using Playwright. Supports high-quality image capture with customizable formats, viewport sizes, cookie-based authentication, and screenshots of both full pages and individual elements.

Installation

NPX (Recommended)

# Install Chromium browser (one-time setup)
npx playwright install chromium

# Verify that BrowserLoop works
npx browserloop@latest --version

Docker

# Download and run with Docker
docker run --rm --network host browserloop

# Or use docker-compose for development
git clone <repository-url>
cd browserloop
docker-compose -f docker/docker-compose.yml up

Development Installation

# Clone the repository
git clone <repository-url>
cd browserloop

# Install dependencies
npm install

# Install Playwright browsers (required for screenshots)
npx playwright install chromium

# Build the project
npm run build

Configuration

NPX Configuration

{
  "mcpServers": {
    "browserloop": {
      "command": "npx",
      "args": ["-y", "browserloop@latest"],
      "description": "Screenshot and console log capture server for web pages using Playwright"
    }
  }
}

Development Configuration

{
  "mcpServers": {
    "browserloop": {
      "command": "node",
      "args": [
        "/absolute/path/to/browserloop/dist/src/index.js"
      ],
      "description": "Screenshot and console log capture server for web pages using Playwright"
    }
  }
}

Configuration with Environment Variables

{
  "mcpServers": {
    "browserloop": {
      "command": "node",
      "args": ["dist/src/mcp-server.js"],
      "env": {
        "BROWSERLOOP_DEFAULT_COOKIES": "/home/username/.config/browserloop/cookies.json",
        "BROWSERLOOP_DEFAULT_FORMAT": "webp",
        "BROWSERLOOP_DEFAULT_QUALITY": "85"
      }
    }
  }
}

Features

• High-quality screenshot capture using Playwright
• Console log monitoring and collection from web pages
• Support for localhost and remote URLs
• Cookie-based authentication for protected pages
• Docker containerization for consistent environments
• Support for PNG, JPEG, and WebP formats with customizable quality
• Secure execution in non-root containers
• Full integration with MCP protocol for AI development tools
• Customizable viewport sizes and capture options
• Full page and individual element screenshots

Environment Variables

Optional

• BROWSERLOOP_DEFAULT_WIDTH - Default viewport width (200-4000)
• BROWSERLOOP_DEFAULT_HEIGHT - Default viewport height (200-4000)
• BROWSERLOOP_DEFAULT_FORMAT - Default image format (webp, png, jpeg)
• BROWSERLOOP_DEFAULT_QUALITY - Default image quality (0-100)
• BROWSERLOOP_DEFAULT_TIMEOUT - Default timeout in milliseconds
• BROWSERLOOP_USER_AGENT - Custom user agent string
• BROWSERLOOP_DEFAULT_COOKIES - Default cookies as file path or JSON string
• BROWSERLOOP_CONSOLE_LOG_LEVELS - Comma-separated list of log levels to capture

Usage Examples

Take a screenshot of https://example.com

Take a screenshot of https://example.com with width 1920 and height 1080

Take a screenshot of https://example.com in JPEG format with 95% quality

Take a full page screenshot of https://example.com

Take a screenshot of http://localhost:3000 to verify the UI changes

Notes

⚠️ ARCHIVED: This project is archived and will no longer receive updates. With the release of Chrome DevTools MCP, a dedicated MCP server for browser automation is no longer needed. Nearly all code in this repository was automatically generated. BrowserLoop requires Chromium installation via Playwright before capturing screenshots. Cookie-based authentication is supported for capturing screenshots of password-protected pages during development.