Webpage Screenshot MCP Server

Name: Webpage Screenshot MCP Server
Author: ananddtyagi

@ananddtyagi

About Webpage Screenshot MCP Server

An MCP that gives your agent the ability to snap a screenshot of webpages. Useful when you want your agent to check its progress during development.

Basic information

Config

Add this server to your MCP-compatible client using the configuration below.

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

Tools

No tools detected

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

Overview

What is Webpage Screenshot MCP Server?

Webpage Screenshot MCP Server is an MCP server that captures screenshots of web pages using Puppeteer. It allows AI agents to visually verify web applications and see their progress when generating web apps.

How to use Webpage Screenshot MCP Server?

Install dependencies with npm install, build with npm run build, then add the server configuration (command node with path to dist/index.js) to Claude Desktop or Cursor settings. Use the provided tools: login-and-wait, screenshot-page, screenshot-element, and clear-auth-cookies.

Key features of Webpage Screenshot MCP Server

Full page or viewport screenshots
Element-specific screenshots via CSS selectors
Supports PNG, JPEG, and WebP formats
Base64 encoded image output
Manual login with cookie persistence
Default browser integration for existing sessions
Session persistence for multi-step workflows

Use cases of Webpage Screenshot MCP Server

Visually verify a web application during development
Take screenshots of protected pages after manual login
Capture specific UI elements for testing or documentation
Automate multi-step workflows that require authentication
Inspect a website’s appearance with your default browser

FAQ from Webpage Screenshot MCP Server

What does this server do?

It provides MCP tools to capture screenshots of web pages (full page, viewport, or specific elements) and return them as base64 encoded images, with support for authentication and session persistence.

How does authentication work?

Use the login-and-wait tool to manually log in through a visible browser window; cookies are saved automatically and reused in subsequent screenshot-page or screenshot-element calls when useSavedAuth is true.

What are the runtime requirements?

Node.js is required. The server uses Puppeteer (bundled Chromium) by default, but can also connect to your system’s default browser (Chrome, Edge, or Safari) with useDefaultBrowser: true.

What is the difference between headless and visible mode?

Headless mode (visibleBrowser: false) is faster for automation; visible mode (visibleBrowser: true) shows the browser window, required for useDefaultBrowser and manual interactions.

Where are authentication cookies stored?

Cookies are saved to the .mcp-screenshot-cookies directory in your home folder. They can be cleared per domain or globally using the clear-auth-cookies tool.