From 056597f41d35c0dc749ab1cb1ef9ebbbba81f84b Mon Sep 17 00:00:00 2001 From: Up North Media Date: Tue, 15 Jul 2025 14:00:44 -0500 Subject: [PATCH] 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 | --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 845b582415..15ebe488df 100644 --- a/README.md +++ b/README.md @@ -305,6 +305,7 @@ Official integrations are maintained by companies building production ready MCP - 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. - 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. - 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. +- 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. - ScreenshotOne Logo **[ScreenshotOne](https://github.com/screenshotone/mcp/)** - Render website screenshots with [ScreenshotOne](https://screenshotone.com/) - Search1API Logo **[Search1API](https://github.com/fatwang2/search1api-mcp)** - One API for Search, Crawling, and Sitemaps - Semgrep Logo **[Semgrep](https://github.com/semgrep/mcp)** - Enable AI agents to secure code with [Semgrep](https://semgrep.dev/).