Useful MCP Servers for Claude Code Browser Automation and Screenshots

For browser automation and screenshots in Claude Code, start with Microsoft Playwright MCP. Its official documentation lists Claude Code as a supported MCP client, describes interaction through structured accessibility snapshots, and documents screenshot capture. You can install it with Node.js 20 or newer using claude mcp add playwright npx @playwright/mcp@latest. This is a fit based on documented features, not a comparative performance test.

Playwright MCP is an MCP server that lets an MCP client control a browser: navigate to pages, inspect them, interact with elements, and capture screenshots. The accessibility snapshot is the primary way the model gets page structure; screenshots complement it for visual review. See the official Playwright MCP documentation and installation guide.

1. Install Playwright MCP in Claude Code

1. Install Node.js 20 or newer and make sure node, npm, and npx are available in your shell.
2. Run the documented Claude Code command:

claude mcp add playwright npx @playwright/mcp@latest

3. Restart or reopen Claude Code if needed so it discovers the new MCP server. On first use, the browser downloads automatically according to Playwright’s setup documentation.
4. Ask Claude Code to navigate to a page and take a screenshot, for example: Go to https://example.com and take a screenshot.

The equivalent generic MCP server entry, useful when configuring a compatible client manually, is:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Use the client-specific instructions if your environment requires a different configuration location or syntax. Package and client setup commands can change; check the official installation page when publishing or troubleshooting.

2. Automate pages and capture screenshots

Give Claude Code a concrete task with a URL, the action to perform, and the screenshot scope or destination you want. For example:

Navigate to https://example.com, inspect the page, and take a full-page PNG screenshot named example.png.

The server exposes browser tools through MCP. Playwright documents prompts such as navigating to a site and taking a screenshot; the client selects and calls the relevant tools. You can use plain language for the task rather than writing a separate browser script.

How the model reads the page

Playwright MCP uses structured accessibility snapshots to represent page content and interactive controls. That gives the model roles, names, and structure to reason about when locating elements. A screenshot shows visual appearance; it is not the only means of understanding or interacting with the page. Use snapshots for locating and operating controls, then capture a screenshot when the rendered result itself matters.

Screenshot scope and output options

The documented screenshot tool supports a viewport capture, a single element selected by a reference or selector, and a full-page capture. Relevant documented parameters include:

Option	Purpose	Considerations
target	Capture a specific element using its reference or selector.	Do not combine with fullPage.
fullPage	Capture the full scrollable page.	Cannot be combined with target; very long pages can produce large images.
type	Choose png, jpeg, or webp.	If unset, type is inferred from the filename extension, otherwise PNG is used.
filename	Choose where the screenshot is saved.	Relative names resolve against the workspace root. If omitted, a timestamped file is created in the output directory and the image is also returned inline.
scale	Choose css or device scale.	CSS is the default; device uses device pixel ratio for a higher-resolution image.

These are options of the Playwright screenshot tool, not guarantees that every client presents them as manual fields. You can state the desired scope and format in your instruction to Claude Code.

3. Choose an alternative when you need a screenshot API

Playwright MCP is a good starting point when Claude Code needs to operate a browser session interactively. If your job is simply to request a screenshot or PDF from application code, a screenshot API can avoid maintaining browser setup and automation in your own runtime. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media: one GET request accepts a URL and returns PNG, JPEG, WebP, or PDF. It also offers MCP tools for Claude, Cursor, and other MCP clients.

ScreenshotNeo accepts and removes cookie and consent banners from 60+ known platforms, newsletter popups, and chat widgets before capture; each cleanup step can be disabled. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. The response includes X-Page-Verdict and X-Billed headers describing the result. Its other options include full-page and selector captures, device presets and custom viewports, PDF settings, custom CSS and JavaScript, wait conditions, request blocking, custom headers and cookies, geolocation, caching, signed image links, asynchronous jobs, bulk capture, and a usage API. See the ScreenshotNeo API documentation.

Or skip the browser setup

Make one GET request with the URL and your API key. This cURL example saves a WebP screenshot of Stripe:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

Equivalent Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Equivalent Node.js:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', new Uint8Array(await res.arrayBuffer()));

Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up free for 1,000 screenshots a month, no card required.

4. Security and trust boundaries

Browser automation can access pages and sessions available to its browser process, so treat an MCP server as capable of taking actions with that access. Playwright’s documentation specifically warns that its arbitrary JavaScript execution tool is “RCE-equivalent” and says to enable it only for trusted MCP clients. Do not enable or use that capability with an untrusted client or workflow. Review the current Playwright MCP tool list and your client’s permissions before connecting it to authenticated or sensitive browser sessions.

Prefer constrained tasks, use a separate browser profile for automation where practical, avoid exposing secrets in prompts or page content, and require human review before consequential actions such as submitting transactions or changing account settings. These are general precautions for any agent-driven browser automation; they are not a claim that a particular configuration makes a server safe.

5. Troubleshooting

Symptom	Likely cause	What to do
Claude Code does not show Playwright tools.	The server configuration was not loaded, or the command failed to start.	Run the documented claude mcp add command again, check Claude Code’s MCP/server output, then restart the client. Confirm npx is available in the environment Claude Code uses.
Node version or package startup error.	Node.js is below the documented minimum, or package resolution/network access failed.	Use Node.js 20 or newer; verify npm registry access and retry the server command.
First browser action stalls or cannot launch.	The browser may still be downloading, or the environment cannot fetch/install it.	Allow the initial browser download to finish and check outbound network access and the server logs.
Page content is missing or an element cannot be found.	The page may still be loading, content may be dynamically rendered, or the target is not present in the accessibility structure.	Ask Claude to inspect a fresh snapshot, wait for the relevant page state, and identify the element by its accessible role/name or a specific selector.
Screenshot is clipped or unexpectedly huge.	Viewport capture was requested when full-page was intended, or vice versa.	Specify viewport versus full page. For a single component, use an element target; do not combine it with full-page mode.
Screenshot image format differs from expectation.	The type was inferred from the filename or defaulted to PNG.	Use an explicit extension or ask for PNG, JPEG, or WebP; the tool infers from the filename when possible.
Unsafe JavaScript tool appears available.	The server exposes arbitrary JavaScript execution.	Only use that capability with trusted MCP clients and workflows, as the Playwright documentation warns. Do not feed it untrusted code or allow untrusted page instructions to dictate code execution.

6. Performance, reliability, and cost

Playwright MCP runs a browser and may download browser components on first use, so allow for setup time and browser memory use. Large, long pages take more work to inspect and can yield large full-page image files. Start with a viewport or element screenshot when that answers the question; request a full-page image when the whole document is needed. Reuse an active automation session for a sequence of related steps when your client supports it rather than repeatedly starting from scratch.

Reliability depends on the target site, network, authentication state, browser environment, and page behavior. Dynamic pages may need an explicit wait before inspection or capture. An MCP browser workflow does not by itself provide a universal retry guarantee or a screenshot cost schedule; check your runtime and package configuration for those details. If you need a request/response screenshot service, ScreenshotNeo’s billing behavior and plan prices are described above and in its docs.

7. Which option should you use?

Need	Starting choice	Why
Claude Code should navigate pages and interact with browser controls.	Microsoft Playwright MCP	Official docs list Claude Code support and document accessibility snapshots and screenshots.
You need the rendered screenshot or PDF as an API result.	ScreenshotNeo	One GET request returns an image or PDF; clean shots are billed, with failed/blank/bot-check results and cache hits not billed.
You want to evaluate a different community project.	ClaudeCodeBrowser	Its README describes Firefox extension control and headless Playwright modes. Inspect its current maintenance, permissions, and safety controls; the supplied research did not establish comparative reliability.

There is no evidence here to rank these choices by speed, accuracy, or reliability. Match the tool to whether the task is interactive browser operation or a direct screenshot response, and review the server’s trust boundary before use.

Frequently asked questions

Does Playwright MCP only understand screenshots?

No. Its standard interaction model uses structured accessibility snapshots; screenshots are available for visual inspection.

Can I use it with a browser other than Chromium?

Check the current Playwright MCP documentation and configuration for supported browser modes. The setup details here establish the default installation and screenshot workflow, not every browser configuration.

Is ClaudeCodeBrowser proven less reliable?

No comparative reliability testing is included in the research. Its README describes Firefox extension control and headless Playwright; evaluate its current repository and security model directly.

Does ScreenshotNeo replace interactive browser automation?

It is suited to requesting a screenshot or PDF for a URL. Use an interactive browser server when the task requires a sequence of page actions and inspection inside a browser session.