home / mcp / webpage screenshot mcp server
Provides page and element screenshot capabilities with optional default-browser mode and persistent sessions.
Configuration
View docs{
"mcpServers": {
"ananddtyagi-webpage-screenshot-mcp": {
"command": "node",
"args": [
"~/path/to/webpage-screenshot-mcp/dist/index.js"
]
}
}
}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.
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.
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 buildConfiguration and usage revolve around running the MCP server locally and wiring it into your MCP client.
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.
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.
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.
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.
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.
Opens a login page in a visible browser, waits for manual login, and saves session cookies for reuse.
Captures a full-page or viewport screenshot of a URL and returns it as a base64-encoded image with configurable output options.
Screenshots a specific element on a page using a CSS selector with optional padding and formatting.
Clears saved authentication cookies for a domain or all domains to reset sessions.