How to take screenshots with Claude Code

Claude Code writes your code, but it cannot see the result in a browser. The Shotbot MCP server gives it eyes: one command to install, then you ask for screenshots in plain language and Claude sees the real rendered page.

> Capture permalink.fr and tell me if the hero looks right
● I'll capture the page with Shotbot.
  capture(url: "https://www.permalink.fr/", viewport_width: 1280)
  ✓ done in 2s · https://static.shotbot.net/8/8f/8f3cA1b2….jpg
● The hero renders correctly: the headline is legible, the call-to-action
  button is visible, and no cookie banner is covering the content.
> _

The MCP server exposes four tools to Claude Code: capture (capture a URL), get_status (track a capture), batch (up to 500 URLs at once), and account_status (plan, credits, quota). Claude calls them on its own when your request needs them.

One-line install

One command. No Node.js, no npm, no local files. Replace your-key with your Shotbot API key.

claude mcp add --scope user shotbot --transport http "https://api.shotbot.net/mcp?key=your-key"

Check the server is registered:

claude mcp list

shotbot should appear in the list. That's it: open Claude Code and ask for a screenshot. The user scope makes the tool available in every project; drop --scope user to limit it to the current project.

What to ask Claude

No syntax to learn. Ask in plain language and Claude picks the tool and the right options. A few prompts that work out of the box:

Because Claude Code reads images, it does not just fire off the capture: it actually looks at the rendered result and reports back on it (readability, layout, a missing element, a banner in the way).

Example: detecting CSS bugs across screen widths

This is where Claude Code really pays off: it does not just capture, it fixes. Ask it to check a page at several widths and it captures each viewport, spots the overflow or overlap, edits your CSS, then re-captures to confirm it is solved. A genuine loop: see, fix, verify.

> My header overflows on mobile. Capture the page at 390, 768 and 1280 px
● Capturing all three widths.
  capture(url: "https://my-site.com/", viewport_width: 390)
  capture(url: "https://my-site.com/", viewport_width: 768)
  capture(url: "https://my-site.com/", viewport_width: 1280)
● At 390 px the menu drops below the logo and overflows 40 px to the right.
  Cause: .nav has min-width: 720px. Fixing it.
● Edit style.css · re-capture at 390 px · the header now fits the width.
> _

Widths 390, 768 and 1280 px are available on the free account. Shotbot Pro unlocks any width from 280 to 3840 px, to test a precise breakpoint.

Full audit: sweep an entire breakpoint range

Something breaks somewhere between 280 and 640 px but you can't pin down where? Ask Claude to test the whole range at once. It fires a batch of captures, reads every screenshot, and comes back with an exact list of what breaks, at which pixel, and why: no browser resizing, no manual clicks, no guesswork.

> Scan every viewport from 280 to 640 px in 20 px steps and find all CSS bugs
● Launching 19 captures in parallel.
  batch(19 viewports · 280 → 640 px · my-site.com/)
  ✓ 19 screenshots · 7s
● Reading 19 images…
  280-300 px  logo overflows 14 px right: .site-logo has no max-width
  380 px      CTA button wraps to 2 lines: padding-inline: 2rem too wide
  520-560 px  horizontal scroll: gap: 1.5rem pushes the 2-col grid past the edge
● 3 fixes applied to style.css. Verifying at the critical viewports.
  ✓ 280 px · ✓ 380 px · ✓ 520 px · ✓ 560 px - no overflow detected.
> _

All 19 captures fire in one request via the batch tool. Custom viewports from 280 to 3840 px require Shotbot Pro.

The four tools

Free or Shotbot Pro

Get started

Go further