https://d2mpkaxyc7dort.cloudfront.net/blog/1752604782930-fkaj2h-cleanshot-2025-07-15-at-13-39-20-2x.png" rel="nofollow">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 |

Adding ScreenshotMCP#2351upnorthmedia wants to merge 1 commit intomodelcontextprotocol:mainmodelcontextprotocol/servers:mainfrom upnorthmedia:patch-1upnorthmedia/servers:patch-1Copy head branch name to clipboard

Commits

Commits on Jul 16, 2025

Adding ScreenshotMCP

Adding ScreenshotMCP#2351
upnorthmedia wants to merge 1 commit intomodelcontextprotocol:mainfrom
upnorthmedia:patch-1