Adding ScreenshotMCP

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

![Screenshot MCP](https://d2mpkaxyc7dort.cloudfront.net/blog/1752604782930-fkaj2h-cleanshot-2025-07-15-at-13-39-20-2x.png)

## 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`
2. Install dependencies: `npm install`
4. 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`:
   ```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`:
   ```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:
   ```json
   {
     "mcpServers": {
       "screenshot-full-page-mcp": {
         "command": "node",
         "args": ["/path/to/screenshot-full-page-mcp/index.js"]
       }
     }
   }
   ```

4. 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)

### `list_device_presets`
Lists all available device presets with their configurations.

## Device Presets

| Preset | Width | Height | Scale | Mobile | Touch |
|--------|-------|--------|-------|---------|-------|
| mobile | 375px | 667px | 2x | Yes | Yes |
| tablet | 768px | 1024px | 2x | Yes | Yes |
| desktop | 1920px | 1080px | 1x | No | No |

Author: upnorthmedia

README.md

@@ -304,6 +304,7 @@ Official integrations are maintained by companies building production ready MCP
 - <img height="12" width="12" src="https://raw.githubusercontent.com/safedep/.github/refs/heads/main/assets/logo/1.png" alt="SafeDep Logo" /> **[SafeDep](https://github.com/safedep/vet/blob/main/docs/mcp.md)** - SafeDep `vet-mcp` helps in  vetting open source packages for security risks—such as vulnerabilities and malicious code—before they're used in your project, especially with AI-generated code suggestions.
 - <img height="12" width="12" src="https://waf-ce.chaitin.cn/favicon.ico" alt="SafeLine Logo" /> **[SafeLine](https://github.com/chaitin/SafeLine/tree/main/mcp_server)** - [SafeLine](https://safepoint.cloud/landing/safeline) is a self-hosted WAF(Web Application Firewall) to protect your web apps from attacks and exploits.
 - <img height="12" width="12" src="https://scrapi.tech/favicon.ico" alt="ScrAPI Logo" /> **[ScrAPI](https://github.com/DevEnterpriseSoftware/scrapi-mcp)** - Web scraping using [ScrAPI](https://scrapi.tech). Extract website content that is difficult to access because of bot detection, captchas or even geolocation restrictions.
+- <img height="12" width="12" src="https://upnorthmedia.co/favicon.ico" alt="Up North Media Logo" /> **[ScreenshotMCP](https://github.com/upnorthmedia/ScreenshotMCP/)** - A Model Context Protocol MCP server for capturing website screenshots with full page, element, and device size features.
 - <img height="12" width="12" src="https://screenshotone.com/favicon.ico" alt="ScreenshotOne Logo" /> **[ScreenshotOne](https://github.com/screenshotone/mcp/)** - Render website screenshots with [ScreenshotOne](https://screenshotone.com/)
 - <img height="12" width="12" src="https://pics.fatwang2.com/56912e614b35093426c515860f9f2234.svg" alt="Search1API Logo" /> **[Search1API](https://github.com/fatwang2/search1api-mcp)** - One API for Search, Crawling, and Sitemaps
 - <img height="12" width="12" src="https://semgrep.dev/favicon.ico" alt="Semgrep Logo" /> **[Semgrep](https://github.com/semgrep/mcp)** - Enable AI agents to secure code with [Semgrep](https://semgrep.dev/).