Webpage Screenshot

You have a Webpage Screenshot MCP Server that lets AI agents visually verify web apps by capturing full-page, element-specific, or viewport screenshots from web pages. It supports multiple image formats, base64 output, and can reuse authentication sessions to streamline multi-step workflows across tasks.

How to use

You run the MCP server locally and connect to it from your MCP client. Use it to take screenshots of pages you are testing, verify visual progress during web app generation, and validate protected pages by reusing login sessions. You can capture whole pages or specific elements, choose image formats, and control viewport size and wait behavior. When you enable the default browser mode, you interact with your system browser for login and authentication, and you can persist sessions for multi-step workflows.

How to install

Prerequisites: Node.js and npm must be installed on your machine. You may also need a recent version of a shell/terminal and Git.

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

# Install dependencies
npm install

# Build the project
npm run build

Additional setup and configuration

Configuration and usage revolve around running the MCP server locally and wiring it into your MCP client.

Security and browser behavior

You can opt to use the default system browser for a more natural authentication flow. This mode shows the browser window and uses existing profiles, cookies, and extensions to simplify login and multi-step workflows. Cookies are saved to a dedicated directory and reused for subsequent authenticated requests, helping you avoid repeated logins.

Troubleshooting and tips

If you encounter issues, check that the default browser can be located, verify that the browser debugging port isn’t already in use, and consider clearing saved cookies if authentication fails. Logs from the MCP server usually provide actionable hints to identify the root cause.

Example workflow summary

A typical workflow starts with manually logging in in your default browser to establish a session, followed by taking screenshots of protected pages using the saved authentication cookies. You can then capture specific elements or full pages as needed, reusing the same session across multiple steps.

Notes on persistence and cookies

Session persistence keeps the browser open for multi-step tasks. Cookies are stored locally (in the home directory) after login and are automatically reused when visiting the same domains with saved credentials. You can clear cookies for a domain or all cookies using the provided tooling.

Known limitations

If the system cannot locate a default browser, the server falls back to Puppeteer’s bundled Chromium. In rare cases, port conflicts may occur when connecting to a browser instance; ensure there are no competing processes using the same debugging port.

Available tools

login-and-wait

Opens a login page in a visible browser, waits for manual login, and saves session cookies for reuse.

screenshot-page

Captures a full-page or viewport screenshot of a URL and returns it as a base64-encoded image with configurable output options.

screenshot-element

Screenshots a specific element on a page using a CSS selector with optional padding and formatting.

clear-auth-cookies

Clears saved authentication cookies for a domain or all domains to reset sessions.