playbooks
Learn Cursor Rules Windsurf Rules CLAUDE.md AGENTS.md
Rules Builder MCPs Modes
Log in

Webpage Screenshot MCP server

Captures visual screenshots of web pages using Puppeteer with support for authenticated workflows, manual login sessions with cookie persistence, and browser session management for monitoring protected applications and automated testing.
Back to servers
Setup instructions
Provider
Anand Tyagi
Release date
May 28, 2025
Language
JavaScript
Stats
39 stars
View Markdown
View on GitHub

This MCP server allows you to capture web page screenshots programmatically, providing AI agents with visual verification of web applications and their progress. It uses Puppeteer to take screenshots of entire pages or specific elements, with support for authentication and session persistence.

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:

# Clone the repository
git clone https://github.com/ananddtyagi/webpage-screenshot-mcp.git
cd webpage-screenshot-mcp

# Install dependencies
npm install

# Build the project
npm run build

Adding to Claude or Cursor

Claude Desktop:

  1. Go to Settings > Developer
  2. Click "Edit Config"
  3. Add the following:
"webpage-screenshot": {
  "command": "node",
  "args": [
    "~/path/to/webpage-screenshot-mcp/dist/index.js"
  ]
}

Cursor:

  1. Open Cursor and go to Cursor Settings > MCP
  2. Click "Add new global MCP server"
  3. Add the following:
"webpage-screenshot": {
  "command": "node",
  "args": ["~/path/to/webpage-screenshot-mcp/dist/index.js"]
}

Usage

Available Tools

Login and Wait

Opens a webpage for manual login and saves cookies.

{
  "name": "login-and-wait",
  "parameters": {
    "url": "https://example.com/login",
    "waitMinutes": 5,
    "successIndicator": ".dashboard-welcome",
    "useDefaultBrowser": true
  }
}

Parameters:

  • url (required): Login page URL
  • waitMinutes (optional): Maximum wait time in minutes (default: 5)
  • successIndicator (optional): CSS selector or URL pattern indicating successful login
  • useDefaultBrowser (optional): Use system's default browser (default: true)

Screenshot Page

Captures a full page screenshot.

{
  "name": "screenshot-page",
  "parameters": {
    "url": "https://example.com/dashboard",
    "fullPage": true,
    "width": 1920,
    "height": 1080,
    "format": "png",
    "quality": 80,
    "waitFor": "networkidle2",
    "delay": 500,
    "useSavedAuth": true,
    "reuseAuthPage": true,
    "useDefaultBrowser": true,
    "visibleBrowser": true
  }
}

Parameters:

  • url (required): Web page URL
  • fullPage (optional): Capture entire page or just 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): Image quality for jpeg/webp (0-100)
  • waitFor (optional): Page load condition (default: "networkidle2")
  • delay (optional): Additional delay after page load in milliseconds
  • useSavedAuth (optional): Use saved cookies (default: true)
  • reuseAuthPage (optional): Use existing authenticated page (default: false)
  • useDefaultBrowser (optional): Use system's default browser (default: false)
  • visibleBrowser (optional): Show browser window (default: false)

Screenshot Element

Captures a specific element on a webpage.

{
  "name": "screenshot-element",
  "parameters": {
    "url": "https://example.com/dashboard",
    "selector": ".user-profile",
    "waitForSelector": true,
    "format": "png",
    "quality": 80,
    "padding": 10,
    "useSavedAuth": true,
    "useDefaultBrowser": true,
    "visibleBrowser": true
  }
}

Parameters:

  • url (required): Web page URL
  • selector (required): CSS selector for the target element
  • waitForSelector (optional): Wait for selector to appear (default: true)
  • format (optional): Image format (default: "png")
  • quality (optional): Image quality for jpeg/webp (0-100)
  • padding (optional): Padding around element in pixels (default: 0)
  • useSavedAuth (optional): Use saved cookies (default: true)
  • useDefaultBrowser (optional): Use system's default browser (default: false)
  • visibleBrowser (optional): Show browser window (default: false)

Clear Auth Cookies

Clears saved authentication cookies.

{
  "name": "clear-auth-cookies",
  "parameters": {
    "url": "https://example.com"
  }
}

Parameters:

  • url (optional): Domain to clear cookies for (omit to clear all)

Example Workflow: Protected Page Screenshots

  1. Manual Login
{
  "name": "login-and-wait",
  "parameters": {
    "url": "https://example.com/login",
    "waitMinutes": 3,
    "successIndicator": ".dashboard-welcome",
    "useDefaultBrowser": true
  }
}
  1. Take Screenshots Using Saved Session
{
  "name": "screenshot-page",
  "parameters": {
    "url": "https://example.com/account",
    "fullPage": true,
    "useSavedAuth": true,
    "reuseAuthPage": true,
    "useDefaultBrowser": true,
    "visibleBrowser": true
  }
}
  1. Take Element Screenshots
{
  "name": "screenshot-element",
  "parameters": {
    "url": "https://example.com/dashboard",
    "selector": ".user-profile-section",
    "useSavedAuth": true,
    "useDefaultBrowser": true,
    "visibleBrowser": true
  }
}
  1. Clear Cookies When Done
{
  "name": "clear-auth-cookies",
  "parameters": {
    "url": "https://example.com"
  }
}

Browser Modes and Features

Default Browser Mode

Enables using your system's regular browser instead of Puppeteer's bundled Chromium, providing access to:

  • Existing browser sessions and extensions
  • Saved credentials
  • Natural browsing experience

Enable with useDefaultBrowser: true and visibleBrowser: true.

Browser Persistence

The server can maintain a persistent browser session across multiple tool calls:

  • Browser session remains open after login-and-wait
  • Use reuseAuthPage: true in subsequent calls to use the same page
  • Enables multi-step workflows without re-authentication

Cookie Management

Cookies are automatically managed:

  • Saved to .mcp-screenshot-cookies directory in your home folder
  • Automatically loaded for the same domain with useSavedAuth: true
  • Can be cleared with the clear-auth-cookies tool

Troubleshooting

Common Issues

  1. Default browser not found: Falls back to Puppeteer's Chromium
  2. Connection issues: Check if another instance is using the debugging port
  3. Authentication problems: Try clearing cookies with clear-auth-cookies

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "webpage-screenshot" '{"command":"node","args":["~/path/to/webpage-screenshot-mcp/dist/index.js"]}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "webpage-screenshot": {
            "command": "node",
            "args": [
                "~/path/to/webpage-screenshot-mcp/dist/index.js"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "webpage-screenshot": {
            "command": "node",
            "args": [
                "~/path/to/webpage-screenshot-mcp/dist/index.js"
            ]
        }
    }
}

3. Restart Claude Desktop for the changes to take effect

Want to 10x your AI skills?

Get a free account and learn to code + market your apps using AI (with or without vibes!).

Nah, maybe later