Screenshot MCP
An MCP server that enables capturing website screenshots with full-page, element-specific, and device-responsive capabilities through natural language commands.
What is Screenshot MCP?
Screenshot MCP is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to mcp server that enables capturing website screenshots with full-page, element-specific, and device-responsive capabilities through natural language commands.
An MCP server that enables capturing website screenshots with full-page, element-specific, and device-responsive capabilities through natural language commands.
This server falls under the Browser Automation category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- An MCP server that enables capturing website screenshots wit
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx screenshot-mcpConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Screenshot MCP
Screenshot MCP is a locally-hosted MCP server that enables AI assistants to capture website screenshots through natural language commands. It exposes three tools: capture_screenshot for full-page or viewport screenshots, capture_element for targeting specific DOM elements via CSS selectors, and list_device_presets for discovering available responsive device profiles. The server uses Playwright under the hood and is fully configurable via environment variables for headless mode, timeouts, concurrent limits, and viewport dimensions.
Prerequisites
- Node.js 16+ and npm installed
- An MCP-compatible client such as Claude Desktop
- Internet access for the server to load target URLs
- No external API keys required
Clone the repository
Clone the ScreenshotMCP repository to a local directory.
git clone https://github.com/upnorthmedia/ScreenshotMCP
cd ScreenshotMCPConfigure environment variables
Copy the example env file and adjust settings as needed. The defaults work for most use cases — set BROWSER_HEADLESS=true for background operation.
cp .env.example .envInstall dependencies
Install Node.js dependencies including Playwright and the MCP server framework.
npm installInstall Playwright browser binaries
Download the Chromium browser binary that Playwright uses for screenshot capture.
npx playwright install chromiumStart the MCP server
Start the server with npm start. It will listen for MCP connections from your configured client.
npm startConfigure Claude Desktop to connect
Add the ScreenshotMCP server to your Claude Desktop configuration. Since this server is started separately, configure it as a running process or wrap it in a script. Alternatively run it as a long-lived background service.
Screenshot MCP Examples
Client configuration
Claude Desktop configuration to launch ScreenshotMCP directly. Replace the path with your actual clone location.
{
"mcpServers": {
"screenshot-mcp": {
"command": "node",
"args": ["/absolute/path/to/ScreenshotMCP/src/index.js"],
"env": {
"BROWSER_HEADLESS": "true",
"DEFAULT_VIEWPORT_WIDTH": "1920",
"DEFAULT_VIEWPORT_HEIGHT": "1080",
"BROWSER_TIMEOUT": "30000"
}
}
}
}Prompts to try
Example natural language prompts to capture screenshots via the MCP tools.
- "Take a screenshot of https://example.com"
- "Capture a mobile screenshot of https://myapp.com"
- "Screenshot https://docs.github.com at 1024x768 resolution"
- "Capture just the navigation element on https://example.com using CSS selector nav"
- "List the available device presets for responsive screenshots"Troubleshooting Screenshot MCP
Playwright executable not found or browser launch fails
Run npx playwright install chromium inside the ScreenshotMCP directory to download the required browser binary. If on Linux, you may also need system dependencies: npx playwright install-deps
Screenshots are blank or show an error page
Increase BROWSER_TIMEOUT and DEFAULT_WAIT_TIMEOUT in your .env file for slow-loading sites. Also check that the target URL is publicly accessible from your machine — authenticated or firewall-protected sites will not render correctly.
Too many concurrent requests causing failures
Lower MAX_CONCURRENT_SCREENSHOTS in .env (default is 5). This limits how many Playwright browser instances run simultaneously, which can prevent memory exhaustion on machines with limited RAM.
Frequently Asked Questions about Screenshot MCP
What is Screenshot MCP?
Screenshot MCP is a Model Context Protocol (MCP) server that mcp server that enables capturing website screenshots with full-page, element-specific, and device-responsive capabilities through natural language commands. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Screenshot MCP?
Follow the installation instructions on the Screenshot MCP GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Screenshot MCP?
Screenshot MCP works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Screenshot MCP free to use?
Yes, Screenshot MCP is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
Screenshot MCP Alternatives — Similar Browser Automation Servers
Looking for alternatives to Screenshot MCP? Here are other popular browser automation servers you can use with Claude, Cursor, and VS Code.
Chrome DevTools MCP
★ 40.6kAI-powered Chrome automation server with natural language element detection. Control Chrome browser through MCP protocol for testing, debugging, and performance analysis. Features 91% accuracy in element location, works with free AI models, and suppo
UI TARS Desktop
★ 34.9k📇 🏠 - Browser automation capabilities using Puppeteer, both support local and remote browser connection.
Playwright
★ 32.8kA production-ready browser automation server that enables AI assistants to interact with web pages using tools for navigation, element interaction, and data extraction. It features a built-in Inspector UI and robust crash recovery for reliable automa
Page Agent
★ 18.0kJavaScript in-page GUI agent. Control web interfaces with natural language.
Chrome
★ 11.7kAn extension-based MCP server that enables AI assistants to control your browser, leveraging existing sessions and login states for automation and content analysis. It provides over 20 tools for semantic tab search, interactive element manipulation,
LAMDA
★ 7.8kThe most powerful Android RPA agent framework, next generation mobile automation.
Browse More Browser Automation MCP Servers
Explore all browser automation servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Screenshot MCP in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Screenshot MCP?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.