mcp-browser-screenshot

An MCP (Model Context Protocol) server that lets AI assistants take browser screenshots using Playwright. Navigate to URLs, interact with pages, and capture screenshots — all from your AI chat.

Tools

Tool	Description
browser_screenshot	Navigate to a URL and take a screenshot. Supports custom viewport, full-page capture, element-specific screenshots, and wait options.
browser_click	Click an element by CSS selector, then capture a screenshot.
browser_type	Type text into an input field by CSS selector, then capture a screenshot.
browser_eval	Execute JavaScript in the browser and return the result.

Quick Start

VS Code / Copilot

Add to .vscode/mcp.json:

{
  "servers": {
    "browser-screenshot": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "mcp-browser-screenshot"]
    }
  }
}

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "browser-screenshot": {
      "command": "npx",
      "args": ["-y", "mcp-browser-screenshot"]
    }
  }
}

Setup

After first run, install Playwright's Chromium browser:

npx playwright install chromium

Tool Reference

browser_screenshot

Parameter	Type	Default	Description
url	string	required	URL to navigate to
width	number	1440	Viewport width in pixels
height	number	900	Viewport height in pixels
fullPage	boolean	false	Capture full scrollable page
selector	string	—	CSS selector to screenshot a specific element
waitForSelector	string	—	Wait for this selector before capturing
waitForTimeout	number	1000	Extra wait time in ms after page load

browser_click

Parameter	Type	Default	Description
selector	string	required	CSS selector of element to click
waitAfterClick	number	1000	Wait time in ms after clicking

browser_type

Parameter	Type	Default	Description
selector	string	required	CSS selector of the input element
text	string	required	Text to type (clears field first)

browser_eval

Parameter	Type	Default	Description
script	string	required	JavaScript to execute in the page

License

MIT