ScreenshotMCP is a server based on the Model Context Protocol (MCP) for capturing website screenshots, mainly aimed at scenarios that require automatically obtaining web page screenshots in development workflows. The project is published on GitHub by upnorthmedia and uses the MIT license.
-
Purpose It provides web page screenshot capabilities and can be connected as an MCP server to clients that support MCP, such as Claude Code CLI, Claude Desktop, and Cursor IDE, thereby completing screenshots through natural language commands during development.
-
Main capabilities Features include: full-page screenshot capture (automatic scrolling), element-level screenshots via CSS selectors, multiple device presets (mobile, tablet, desktop), custom viewport configuration, advanced wait conditions (CSS selector, network idle, custom delay), error handling and validation for secure operation, and rate limiting to prevent resource exhaustion. Available tools include capture_screenshot (full-page screenshot with advanced configuration), capture_element (screenshot of a specific element on the page), and list_device_presets (list all available device presets and their configurations).
capture_screenshot parameters: url (required, the web page URL to screenshot); viewport includes preset (mobile, tablet, desktop), custom width (pixels, 100-5000), height (pixels, 100-5000), deviceScaleFactor (0.1-3), isMobile (mobile device emulation), hasTouch (touch support emulation); waitFor includes type (selector, function, timeout, or networkidle) and value (CSS selector, function, or timeout value) as well as timeout (wait timeout in milliseconds); delay (extra delay before screenshot); waitUntil (navigation completion condition).
capture_element parameters: url (required), selector (required, CSS selector of the target element), viewport (configured as above).
- Usage Installation steps: clone or download the project; enter the directory cd /path/to/ScreenshotMCP; rename .env.example to .env; install dependencies npm install; start the server npm start.
With Claude Code: it can be used directly in Claude Code CLI or Claude Desktop to take screenshots in development workflows. Claude Code CLI can be added to ~/.config/claude/mcp_servers.json, with the command claude mcp add screenshot-full-page-mcp node ./index.js. Claude Desktop is added to claude_desktop_config.json.
With Cursor: go to Settings > MCP Servers, add a new MCP server entry, with example configuration { "mcpServers" : { "screenshot-full-page-mcp" : { "command" : " node " , "args" : [ " /path/to/screenshot-full-page-mcp/index.js " ] } } }, and after saving the settings it can be used. After configuration is complete, it can be used through natural language commands, such as basic screenshots, mobile screenshots, custom viewports, waiting for elements, element screenshots, etc.
Environment variables are set in the .env file. Security features include: URL validation (HTTP/HTTPS only), CSS selector sanitization, concurrent request rate limiting, sandboxed browser execution, input validation, and error handling.
- System requirements and limitations Requires a Chrome/Chromium browser (automatically installed with Puppeteer), at least 2GB of memory, and 500MB of disk space. For troubleshooting: if the browser fails to start, check system resources and whether Chrome/Chromium is correctly installed, and try setting BROWSER_HEADLESS=false for debugging; if screenshots time out, increase BROWSER_TIMEOUT in .env, check whether the target website loads normally, and use appropriate waitUntil conditions; for memory issues, reduce MAX_CONCURRENT_SCREENSHOTS and restart periodically MCP server, monitoring system memory. Detailed logging can be enabled by setting DEBUG=true in .env.
V. Other Information Contributions are welcome: Fork the repository, create a feature branch, make changes, add tests (if applicable), and submit a pull request. The license is MIT. For problems and questions, you can submit an issue via GitHub, check the troubleshooting section, or consult the MCP documentation.
