MCP Screenshot Server for Claude

The screenshotrun-mcp server connects Claude to the web. Install it in Claude Desktop or Claude Code, and Claude can screenshot any URL, pull structured page data as JSON, extract forms and interactive elements, convert a page to clean markdown. No browser to manage. No wrapper code. Claude calls the tools directly through MCP.

This page covers setup for both Claude Desktop and Claude Code, what tools Claude gets, and a few real examples of what you can do once everything is connected.

# Install in Claude Code — one command
claude mcp add screenshotrun-mcp -- npx -y screenshotrun-mcp

Why Claude can't browse the web on its own

Claude has no built-in web access. It can't open a URL, can't see what a page looks like, can't read the DOM. When you ask "what's on this webpage?" Claude is guessing based on training data, not looking at the live page. That's a problem if you're building agents that need current information from the web.

MCP fixes this by letting Claude call external tools. The Model Context Protocol (Anthropic's standard for tool integration) exposes functions that Claude discovers automatically. It sees the tool list, picks the right one, fills in the parameters on its own. Our MCP server gives Claude four tools, and suddenly it can see any public web page. Screenshot it. Read the DOM. Pull out forms and buttons with exact coordinates.

Set up in Claude Desktop

Open your Claude Desktop config file. On macOS it lives at ~/Library/Application Support/Claude/claude_desktop_config.json. On Windows: %APPDATA%\Claude\claude_desktop_config.json.

Add the ScreenshotRun server to the mcpServers section:

{
  "mcpServers": {
    "screenshotrun": {
      "command": "npx",
      "args": ["-y", "screenshotrun-mcp"],
      "env": {
        "SCREENSHOTRUN_API_KEY": "your_api_key_here"
      }
    }
  }
}

Restart Claude Desktop. You'll see a hammer icon in the input area. Click it to confirm the ScreenshotRun tools are loaded. That's it. Type "take a screenshot of example.com" and Claude will call the API and show you the captured page.

If you don't have an API key yet, grab one from the dashboard. The free plan includes 200 screenshots per month.

Set up in Claude Code

Claude Code uses the claude mcp add command. One line:

claude mcp add screenshotrun-mcp -- npx -y screenshotrun-mcp

Set your API key as an environment variable:

export SCREENSHOTRUN_API_KEY="your_api_key_here"

Or pass it inline when adding the server:

claude mcp add screenshotrun-mcp -e SCREENSHOTRUN_API_KEY=your_key -- npx -y screenshotrun-mcp

Claude Code now has access to all four tools. You can verify with claude mcp list to see the server in the active connections.

Four tools Claude gets

take_screenshot captures any URL as an image. It passes through all API parameters: viewport size, format (PNG/JPEG/WebP/PDF), full-page mode, dark mode, mobile emulation, stealth mode for bot-protected sites. Tell Claude "screenshot this page in dark mode on iPhone" and it picks the right parameters.

analyze_page is where this MCP server differs from everything else out there. It renders the page in Chromium and returns structured JSON with every element on the page: headings, buttons, links, forms, images, navigation sections. Each element includes its text, attributes, ARIA roles, pixel-precise bounding box. Other MCP servers return markdown or raw HTML. This one returns data you can actually act on.

extract_content converts a rendered page to clean markdown. JavaScript-heavy SPAs, pages behind cookie consent dialogs, content loaded via lazy loading: all rendered first, then converted. The markdown is ready to drop into Claude's context for summarization or analysis.

check_usage shows how many API calls you've used this billing period. Useful when Claude is making many calls in an automated workflow and you want to keep an eye on consumption.

What you can ask Claude to do

Once the MCP server is connected, these are real requests you can type into Claude:

"Screenshot competitor.com/pricing and compare it to our pricing page." Claude captures both pages, shows them side by side. It can point out differences in layout, pricing tiers, feature lists, CTAs. Competitive analysis without opening a browser.

"Analyze the login page at app.example.com and list all form fields." Claude calls analyze_page with the forms include filter. It comes back with field names, types, placeholder text, required status, autocomplete attributes. An AI agent uses this to automate form filling. It knows exactly what to submit and where.

"Get the markdown from this blog post and summarize the key points." Claude fetches the rendered content as markdown (clean text, no HTML noise, no ads) and runs its summarization on actual page content instead of guessing from the URL.

"Check all the links on our homepage and tell me which ones go to external sites." The analyze_page tool returns every link with its href. Claude filters for external domains and gives you a list. Takes seconds, not the 20 minutes of manually clicking through navigation.

"Take a full-page screenshot of this page on mobile and flag any layout issues." Claude captures with mobile emulation, then uses vision to spot overflow, cut-off text, broken responsive elements. Visual QA without a device lab.

How this compares to other web MCP servers

The MCP ecosystem has dozens of web-related servers. Most fall into two buckets: browser automation tools and content scrapers.

Playwright MCP (by Microsoft) gives Claude a full browser session: navigate, click, type, scroll. Powerful for multi-step automation. But it runs a local browser process and eats memory. The accessibility tree data it returns is often broken on real sites (buttons without labels, forms without roles). For "look at this page and tell me what's on it," a full browser session is overkill.

Firecrawl MCP crawls pages and returns markdown. Good for content extraction at scale. But it doesn't give you screenshots or element coordinates. Can't tell Claude where a button sits on the page. If your agent needs to see a page, not just read its text, Firecrawl won't help.

Bright Data MCP routes requests through proxy infrastructure for scraping at scale. Enterprise pricing, complex setup. Built for data collection pipelines, not for giving Claude quick web access.

The ScreenshotRun MCP server sits in a different spot. One npm install, one API key, four focused tools: visual capture, structural analysis, content extraction, usage tracking. There's no browser to run locally, no proxy to configure. The analyze_page tool returns something no other MCP server offers: element-level JSON with bounding boxes. Claude doesn't just know a page has a "Sign Up" button; it knows that button is at coordinates (842, 340) and is 120 pixels wide.

Building an agent workflow with Claude and MCP

The tools work together. A research agent might combine them in sequence:

1. extract_content("https://competitor.com/pricing")
   → get clean markdown of pricing page

2. analyze_page("https://competitor.com/pricing", include: ["headings", "interactive"])
   → get page structure: what sections exist, what buttons/CTAs are on the page

3. take_screenshot("https://competitor.com/pricing", full_page: true)
   → capture visual for the report

4. Claude synthesizes all three into a competitive analysis document

Each step takes about a second. The agent gets text content for analysis, structured data for counting features and comparing layouts, a visual for the final deliverable.

Another pattern: a monitoring agent that runs daily. Screenshot a set of URLs. Compare today's capture to yesterday's. If something changed, call analyze_page to identify what exactly: new banner, removed CTA, changed pricing. A structured JSON diff tells you more than pixel-comparing two images ever could.

Page Analyze through MCP: what makes this unique

Most developers connect Claude to the web through MCP to read page content. Markdown extraction covers that. But the Page Analyze tools go further. This is where the ScreenshotRun MCP server has no equivalent.

Ask Claude to analyze a page and it returns typed, categorized elements. Not a blob of HTML, not a flattened accessibility tree. Actual structured data:

• Headings with hierarchy levels (h1 through h6), so Claude sees the content outline
• Interactive elements: every button, link, input with its text, type, disabled state, exact screen position
• Forms with field names, types, action URLs, autocomplete attributes, required flags
• Images with alt text, dimensions, source URLs
• Navigation menus with link hierarchy

Each element carries a rect with x, y, width, height in pixels. An AI agent that needs to click a button gets exact coordinates from the DOM layout engine, not a vision model's guess. This is the difference between an agent that works on demo sites and one that works on the real web.

Stealth mode for protected pages

Some of the most useful pages to analyze sit behind bot detection: Cloudflare, Akamai, DataDome. A basic headless browser gets blocked. The MCP server passes through the stealth parameter, which makes the request look like a normal browser session. Claude can screenshot and analyze pages that would otherwise return a challenge page.

Just add "use stealth mode" to your prompt, or the agent learns to enable it after getting blocked once. The API handles the fingerprint rotation, header normalization, TLS signature matching. Your agent code stays clean.

Getting started

Install the MCP server: one command for Claude Code, a JSON config block for Claude Desktop. Set your API key and start asking Claude about web pages. The free plan covers 200 requests per month, enough to build and test an agent workflow before committing to a paid plan.

Full MCP server documentation is at features/mcp-server. The MCP setup guide covers advanced configuration (custom timeouts, proxy settings, environment variable management). And the Playground lets you test any API parameter before wiring it into your agent.