upnorthmedia/ScreenshotMCP

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
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:
or
claude mcp add screenshot-full-page-mcp node ./index.js
**For Claude Desktop:**
Add to your claude_desktop_config.json:
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:
4. Save your settings.
Usage
Once configured, you can use natural language commands with Claude Code:
Basic Screenshot
Mobile Screenshot
Custom Viewport
Wait for Element
Element Screenshot
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 |
Configuration
Environment variables can be set in the .env file:
Security Features
- URL validation (HTTP/HTTPS only)