ananddtyagi/webpage-screenshot-mcp

An MCP (Model Context Protocol) server that captures screenshots of web pages using Puppeteer. This server allows AI agents to visually verify web applications and see their progress when generating web apps.
Features
- **Full page screenshots**: Capture entire web pages or just the viewport
- **Element screenshots**: Target specific elements using CSS selectors
- **Multiple formats**: Support for PNG, JPEG, and WebP formats
- **Customizable options**: Set viewport size, image quality, wait conditions, and delays
- **Base64 encoding**: Returns screenshots as base64 encoded images for easy integration
- **Authentication support**: Manual login and cookie persistence
- **Default browser integration**: Use your system's default browser for a more natural experience
- **Session persistence**: Keep browser sessions open for multi-step workflows
Installation
Quick Start (Claude Desktop Extension)
Drag and drop the generated screenshot-webpage-mcp.dxt file into Claude Desktop for automatic installation!
Manual Installation
To install and build the MCP from source:
The MCP server is built using TypeScript and compiled to JavaScript. The dist folder contains the compiled JavaScript files.
Adding to Claude or Cursor
To add this MCP to Claude Desktop or Cursor:
1. **Claude Desktop**:
- Go to Settings > Developer
- Click "Edit Config"
- Add the following:
- Save and reload Claude
2. **Cursor**:
- Open Cursor and go to Cursor Settings > MCP
- Click "Add new global MCP server"
- Add the following:
- Save and reload Cursor
Usage
Tools
This MCP server provides several tools:
1. login-and-wait
Opens a webpage in a visible browser window for manual login, waits for user to complete login, then saves cookies.
- url (required): The URL of the login page
- waitMinutes (optional): Maximum minutes to wait for login (default: 5)
- successIndicator (optional): CSS selector or URL pattern that indicates successful login
- useDefaultBrowser (optional): Whether to use the system's default browser (default: true)
2. screenshot-page
Captures a screenshot of a given URL and returns it as base64 encoded image.
- url (required): The URL of the webpage to screenshot
- fullPage (optional): Whether to capture the full page or just the viewport (default: true)
- width (optional): Viewport width in pixels (default: 1920)
- height (optional): Viewport height in pixels (default: 1080)
- format (optional): Image format - "png", "jpeg", or "webp" (default: "png")
- quality (optional): Quality of the image (0-100), only applicable for jpeg and webp
- waitFor (optional): When to consider page loaded - "load", "domcontentloaded", "networkidle0", or "networkidle2" (default: "networkidle2")
- delay (optional): Additional delay in milliseconds after page load (default: 0)
- useSavedAuth (optional): Whether to use saved cookies from previous login (default: true)
- reuseAuthPage (optional): Whether to use the existing authenticated page (default: false)
- useDefaultBrowser (optional): Whether to use the system's default browser (default: false)
- visibleBrowser (optional): Whether to show the browser window (default: false)
3. screenshot-element
Captures a screenshot of a specific element on a webpage using a CSS selector.
- url (required): The URL of the webpage
- selector (required): CSS selector for the element to screenshot
- waitForSelector (optional): Whether to wait for the selector to appear (default: true)
- format (optional): Image format - "png", "jpeg", or "webp" (default: "png")