Screenshotmcp

Name: Screenshotmcp
Author: upnorthmedia

@upnorthmedia

About Screenshotmcp

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

#screenshots #ux-design #website-screenshot

Basic information

Config

Add this server to your MCP-compatible client using the configuration below.

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

Tools

No tools detected

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

Overview

What is Screenshotmcp?

Screenshotmcp is an MCP server that captures screenshots of webpages using Puppeteer. It integrates with Claude Code CLI/Desktop, Cursor, and other MCP-compatible tools, allowing developers to automate screenshots through natural language commands.

How to use Screenshotmcp?

Install by cloning the repository, running npm install, then npm start. Configure Claude Code by adding the server to ~/.config/claude/mcp_servers.json or using claude mcp add. In Cursor, add it under Settings > MCP Servers. Once connected, issue commands like "Take a screenshot of https://example.com" or "Capture just the navigation bar from https://example.com".

Key features of Screenshotmcp

Full-page screenshots with custom viewports and device presets
Capture specific elements using CSS selectors
Wait for selectors, functions, timeouts, or network idle
Configurable via environment variables (.env file)
URL validation, rate limiting, and sandboxed browser execution
Three built-in device presets: mobile, tablet, desktop

Use cases of Screenshotmcp

Automate visual regression testing for web pages
Document UI states for bug reports or onboarding guides
Capture responsive views across mobile, tablet, and desktop
Integrate screenshot generation into CI/CD workflows
Debug specific elements by isolating them in a screenshot

FAQ from Screenshotmcp

What are the system requirements?

Node.js 18+, Chrome/Chromium (installed automatically via Puppeteer), minimum 2GB RAM, and 500MB disk space.

How do I configure Screenshotmcp?

Set environment variables in the .env file, such as BROWSER_HEADLESS, MAX_CONCURRENT_SCREENSHOTS, and DEFAULT_VIEWPORT_WIDTH. Rename .env.example to .env to get started.

Can I take a mobile screenshot?

Yes, use the viewport preset "mobile" in the capture_screenshot tool, or specify custom width, height, and deviceScaleFactor.

What security measures are included?

Screenshotmcp validates URLs (HTTP/HTTPS only), sanitizes CSS selectors, enforces per‑window rate limiting, and runs the browser in a sandboxed environment.