Webpage Screenshot MCP Server
About
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.
Details
- Author
- ananddtyagi
- GitHub stars
- 58
- Downloads
- 528
- Categories
- Automation
Jump to
- 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
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
Webpage Screenshot MCP ServerCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
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.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"webpage screenshot mcp server": {
"webpage-screenshot": {
"command": "node",
"args": [
"~/path/to/webpage-screenshot-mcp/dist/index.js"
]
}
}
}
}McpServers
{
"webpage-screenshot": {
"command": "node",
"args": [
"~/path/to/webpage-screenshot-mcp/dist/index.js"
]
}
}Webpage Screenshot MCP Server
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:
```bash
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
