Take Screenshots of Any Web Page with Your AI Agent

Your AI agent can now see what you're building. This MCP server gives Claude, Cursor, or any MCP-compatible tool the ability to capture full-page screenshots, element-specific captures, and even handle authenticated pages that require manual login.

Stop Context-Switching Between Your Agent and Browser

When you're building web apps with AI assistance, you constantly find yourself describing what's on screen or manually taking screenshots to show your agent what went wrong. This server eliminates that back-and-forth entirely.

Your agent can now:

• Screenshot your development server to verify layout changes
• Capture specific UI components for targeted feedback
• Document the current state of protected pages behind login walls
• Take before/after shots during iterative development

Real Authentication, Real Browser Sessions

Unlike basic screenshot tools that fail on anything requiring auth, this server handles the messy reality of modern web apps:

Manual Login Support: Opens your actual browser, lets you log in normally (2FA, OAuth, whatever), then saves those cookies for future screenshots. No more trying to reverse-engineer authentication flows.

Session Persistence: Keep the same browser tab open across multiple tool calls. Perfect for multi-step workflows where your agent needs to screenshot different pages within the same user session.

Your Actual Browser: Uses your system's default browser with all your extensions, saved passwords, and profiles intact. No more "works in Puppeteer but not in real browsers" surprises.

Four Tools That Cover Every Screenshot Need

screenshot-page

Full-page or viewport captures with extensive customization:

{
  "url": "https://your-app.dev/dashboard",
  "fullPage": true,
  "useSavedAuth": true,
  "useDefaultBrowser": true,
  "visibleBrowser": true
}

screenshot-element

Target specific components using CSS selectors:

{
  "url": "https://your-app.dev",
  "selector": ".user-profile-card",
  "padding": 10,
  "useSavedAuth": true
}

login-and-wait

Handles manual authentication flows:

{
  "url": "https://your-app.dev/login",
  "waitMinutes": 3,
  "successIndicator": ".dashboard",
  "useDefaultBrowser": true
}

clear-auth-cookies

Clean slate when you need it:

{
  "url": "https://your-app.dev"
}

Common Workflow: Building Protected Features

Here's how this typically plays out when building admin panels, user dashboards, or any authenticated features:

1. Set up auth once: Use login-and-wait to authenticate manually in your real browser
2. Iterate with visual feedback: Your agent takes screenshots after each change using screenshot-page with reuseAuthPage: true
3. Focus on specific components: Use screenshot-element to capture just the parts you're working on
4. Stay in the same session: No re-authentication needed between screenshots since the browser stays open

Perfect for Web Development Workflows

Frontend Development: "Take a screenshot of the mobile layout at 375px width, then show me how the navigation looks on desktop"

Component Documentation: "Screenshot each variation of this button component for the design system"

Bug Reproduction: "Show me what the user sees when they hit this error state on the checkout page"

Progressive Web App Testing: "Capture how this looks when installed as a PWA vs in the browser"

Installation

Clone and build:

git clone https://github.com/ananddtyagi/webpage-screenshot-mcp.git
cd webpage-screenshot-mcp
npm install && npm run build

Add to Claude Desktop or Cursor:

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

Cross-Platform Browser Detection

Works on macOS (Chrome, Edge, Safari), Windows (Chrome, Edge), and Linux (Chrome, Chromium). Falls back gracefully to Puppeteer's bundled Chromium if your default browser isn't detected.

This server transforms how you build web applications with AI assistance. Instead of describing visual problems or manually taking screenshots, your agent can see exactly what you're building and provide targeted, visual feedback throughout your development process.