MCP Browser Screenshot Server

Provides automated MCP-driven browser testing and visual validation via multi-viewport screenshots and scripted interactions.

javascript

0

GitHub Stars

javascript

Language

4 months ago

First Indexed

3 weeks ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "seabassgonzalez-mcp-browser-screenshot": {
      "command": "node",
      "args": [
        "/path/to/mcp-browser-screenshot/dist/index.js"
      ],
      "env": {
        "HEADLESS": "true"
      }
    }
  }
}

You have a production-ready MCP Server that turns AI assistants into scalable browser automation agents. Built with TypeScript and Puppeteer, it enables enterprise-grade web testing, monitoring, and visual analysis through a simple API, making it easier to automate screenshots, validate UI consistency, and run scripted browser tasks at scale.

How to use

You interact with the MCP Browser Screenshot Server by sending commands to launch browser sessions, navigate to pages, capture screenshots, and run scripts. Typical workflows involve initializing a server-side browser, loading target pages, rendering across viewports, and extracting AI-ready outputs such as base64-encoded images for further analysis.

How to install

Prerequisites: ensure you have Node.js installed on your machine. You should also have a Git client available to clone the project repository.

# Clone and set up in minutes
git clone https://github.com/yourusername/mcp-browser-screenshot.git
cd mcp-browser-screenshot
npm install
npm run build

Configuration and usage examples

The MCP client can be configured to run the server locally using a standard IO (stdio) approach. The following example demonstrates how to start the server as a local process with Node.js and point it to the built index file. An environment variable can be used to enable headless mode for server environments.

{
  "mcpServers": {
    "browser-screenshot": {
      "command": "node",
      "args": ["/path/to/mcp-browser-screenshot/dist/index.js"],
      "env": {
        "HEADLESS": "true"
      }
    }
  }
}

Examples of basic usage

After launching, you can direct the server to navigate to pages, take screenshots, and run scripts. Use the following patterns to perform common tasks: initialize a session, navigate to a URL, capture a screenshot for a specific element or full page, and optionally run a small script within the page context.

Security & reliability notes

Operations are sandboxed to isolate browser contexts. Communications can be secured with SSL/TLS, and the system provides automatic retries, graceful degradation, thorough logging, and automatic resource cleanup to ensure stable long-running runs.

Available tools

browser_launch

Initialize a new browser session in the MCP server, returning a session handle for subsequent actions.

browser_navigate

Navigate the active browser session to a target URL and wait for specified network events to complete.

screenshot_capture

Capture a screenshot, supporting full-page, element-specific, or viewport-based captures, and output in a machine-friendly format (base64) for AI processing.

screenshot_viewport

Simulate device viewports (mobile, tablet, desktop) to validate responsive layouts.

browser_execute_script

Run a JavaScript snippet within the current page context and use the result for validation or further actions.