MCP.so
Sign In

Screenshotmcp

@upnorthmedia

Repository

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

Category

Other

Transports

stdio

Publisher

upnorthmedia

Submitted by

Up North Media

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.

Comments

More Other MCP servers

Awesome-MCP-ZH

yzfly

MCP 资源精选， MCP指南，Claude MCP，MCP Servers, MCP Clients

7.4K

Sequential Thinking

modelcontextprotocol

Model Context Protocol Servers

88.2K

🚀 Model Context Protocol (MCP) Curriculum for Beginners

microsoft

This open-source curriculum introduces the fundamentals of Model Context Protocol (MCP) through real-world, cross-language examples in .NET, Java, TypeScript, JavaScript, Rust and Python. Designed for developers, it focuses on practical techniques for building modular, scalable,

16.7K

Nginx UI

0xJacky

Yet another WebUI for Nginx

11.3K

Unity MCP ✨

justinpbarnett

Unity MCP acts as a bridge between AI assistants and your Unity Editor. Give your LLM tools to manage assets, control scenes, edit scripts, and automate tasks within Unity.

12.2K