Adding ScreenshotMCP

[upnorthmedia]

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

Features

• Full-page screenshot capture with automatic scrolling
• Element-specific screenshots using CSS selectors
• Multiple device presets (mobile, tablet, desktop)
• Custom viewport configurations
• Advanced wait conditions (CSS selectors, network idle, custom delays)
• Error handling and validation for secure operation
• Rate limiting to prevent resource exhaustion

Installation

1. Clone or download this project
2. Move to the directory: cd /path/to/ScreenshotMCP
3. rename .env.example to .env
4. Install dependencies: npm install
5. Start Server: npm start

Using with Claude Code

You can use Screenshot MCP directly within the Claude Code CLI or Claude Desktop to capture screenshots as part of your development workflow.

For Claude Code CLI:
Add to your ~/.config/claude/mcp_servers.json:

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

or

claude mcp add screenshot-full-page-mcp node ./index.js

For Claude Desktop:
Add to your claude_desktop_config.json:

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

Using with Cursor

You can use Screenshot MCP directly within the Cursor IDE to capture screenshots as part of your development workflow.

1. Open Cursor.
2. Go to Settings > MCP Servers.
3. Add a new MCP server entry for Screenshot MCP:

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

5. Save your settings.

Usage

Once configured, you can use natural language commands with Claude Code:

Basic Screenshot

"Take a screenshot of https://example.com"

Mobile Screenshot

"Capture a mobile screenshot of https://myapp.com"

Custom Viewport

"Screenshot https://myapp.com at 1024x768 resolution"

Wait for Element

"Take a screenshot of https://example.com after the loading spinner disappears"

Element Screenshot

"Capture just the navigation bar from https://example.com"

Available Tools

capture_screenshot

Captures a full-page screenshot with advanced configuration options.

Parameters:

• url (required): The webpage URL to screenshot
• viewport: Viewport configuration
  • preset: Device preset (mobile, tablet, desktop)
  • width: Custom width in pixels (100-5000)
  • height: Custom height in pixels (100-5000)
  • deviceScaleFactor: Scale factor (0.1-3)
  • isMobile: Mobile device emulation
  • hasTouch: Touch support emulation
• waitFor: Wait conditions
  • type: selector, function, timeout, or networkidle
  • value: CSS selector, function, or timeout value
  • timeout: Wait timeout in milliseconds
• delay: Additional delay before screenshot
• waitUntil: Navigation completion condition

capture_element

Captures a screenshot of a specific page element.

Parameters:

• url (required): The webpage URL
• selector (required): CSS selector for the target element
• viewport: Viewport configuration (same as above)

Description

Server Details

New Server

Motivation and Context

Many screenshot MCP servers are over engineered or require API access.

How Has This Been Tested?

I have tested with Claude Code CLI & Cursor. Tested all image sizes and insured LLM understanding of image.

Breaking Changes

no

Types of changes

New

Checklist

• I have read the MCP Protocol Documentation
• My changes follows MCP security best practices
• I have updated the server's README accordingly
• I have tested this with an LLM client
• My code follows the repository's style guidelines
• New and existing tests pass locally
• I have added appropriate error handling
• I have documented all environment variables and configuration options

Additional context

None

[olaservo]

Thanks for your contribution to the servers list. This has been merged in this combined PR: #2374

This is a new process we're trying out, so if you see any issues feel free to re-open the PR and tag me.