browsershot-mcp

Browser screenshot tool for Claude Code. Take screenshots of web pages during frontend development — see what your UI looks like without leaving the terminal.

Install

One command:

claude mcp add browsershot -- npx -y github:kjaiswal/browsershot-mcp

That's it. Puppeteer + Chromium are bundled — no system dependencies needed.

What it does

Once installed, Claude Code gets three new tools:

Tool	What it does
`screenshot`	Capture a webpage screenshot (full page or element)
`screenshot_compare`	Take mobile + tablet + desktop screenshots side by side
`page_info`	Get page metadata (fonts, colors, scroll height, resource counts)

Claude sees the screenshots directly and can analyze layout, styling, and visual regressions.

Usage

Just describe what you want in natural language:

> Take a screenshot of http://localhost:3000
> Screenshot the nav bar element on my dev server
> Compare my page at mobile, tablet, and desktop widths
> Check if dark mode looks right on localhost:8080

Tool parameters

screenshot

url — URL to capture (required)
width / height — Viewport size (default: 1440×900)
fullPage — Capture full scroll height (default: true)
selector — CSS selector to capture a specific element
device — Preset: "mobile", "tablet", "desktop", "4k", or Puppeteer device name like "iPhone 15 Pro"
darkMode — Emulate prefers-color-scheme: dark
waitFor — Ms to wait after load (default: 2000) or CSS selector to wait for
output — Custom file path

screenshot_compare

url — URL to capture (required)
widths — Array of viewport widths (default: [375, 768, 1440])

page_info

url — URL to inspect (required)

Examples

Claude can now do things like:

"Take a screenshot of my React app and tell me if the layout looks broken"
"Screenshot this page on mobile and desktop — is the nav responsive?"
"Check if the dark mode toggle works by screenshotting both themes"
"What fonts and colors is this page using?"

How it works

Runs as an MCP (Model Context Protocol) server
Puppeteer launches headless Chromium (bundled, no install needed)
Screenshots are returned as images that Claude can see and analyze
Self-signed certs are accepted (for local dev servers)
Browser instance is reused across calls for speed

Requirements

Node.js 18+
Claude Code

License

MIT

Browsershot MCP