Screenshot

A Model Context Protocol MCP server for capturing website screenshots with full page, element, and device size features.

javascript

21

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 months 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": {
    "upnorthmedia-screenshotmcp": {
      "command": "node",
      "args": [
        "/path/to/screenshot-full-page-mcp/index.js"
      ]
    }
  }
}

Screenshot MCP is a server that enables you to capture website screenshots programmatically, including full-page, element-specific, and device-presized views. It helps you automate visual checks, QA, and design reviews by delivering consistent images across pages and layouts.

How to use

You interact with Screenshot MCP through an MCP client. Start by configuring a local or remote MCP server entry that points to the Screenshot MCP runtime, then issue natural language commands or structured tool calls to capture screenshots. Common workflows include taking a full-page shot of a URL, capturing screenshots for specific elements using CSS selectors, and generating images for different device presets such as mobile, tablet, or desktop. Use wait conditions and optional delays to ensure the page is ready before capturing.

How to install

Prerequisites you need on your machine: Node.js 18+ and a modern Chrome/Chromium browser. Ensure you have sufficient RAM and disk space for running headless browser tasks.

# Install dependencies for the MCP runtime
npm install

# Start the Screenshot MCP server
npm start

Configuration and usage notes

Configure the MCP server entry in your MCP client to point to the local runtime. The following is an example entry that runs the server locally.

{ 
  "mcpServers": {
    "screenshot_mcp": {
      "command": "node",
      "args": ["/path/to/screenshot-full-page-mcp/index.js"]
    }
  }
}

Available tools

capture_screenshot

Captures a full-page screenshot with advanced configuration options, including viewport presets, wait conditions, delays, and navigation completion behavior.

capture_element

Captures a screenshot of a specific page element identified by a CSS selector, using the same viewport and wait configuration options as full-page captures.

list_device_presets

Lists available device presets such as mobile, tablet, and desktop with their corresponding dimensions and scale factors.