How to add a screenshot tool to Claude Code

Claude Code can't see a web page until a tool hands it an image. One command adds Shotkiln's remote MCP server, and the agent can capture any public URL, full page or phone-sized, then look at the result. Here's the setup we tested, prompts to try, and the errors you might hit.

Updated 19 Oct 2026 · Tested with Claude Code 2.1.303 · 6 min read

Setup in one command

Run claude mcp add with --transport http, a name and https://shotkiln.com/mcp. Claude Code then has three tools: take_screenshot, render_pdf and generate_og_image. It works without a key on small anonymous limits. Add an x-api-key header to use your plan, then check the connection with claude mcp list.

# No key: anonymous limits, watermarked
claude mcp add --transport http shotkiln https://shotkiln.com/mcp

# With your key
claude mcp add --transport http shotkiln https://shotkiln.com/mcp --header "x-api-key: $SHOTKILN_KEY"

Checking MCP server health…

shotkiln: https://shotkiln.com/mcp (HTTP) - ✔ Connected

Your shell fills in $SHOTKILN_KEY when you run the command, and Claude Code stores the value in ~/.claude.json. Restart a running session to pick up the new tools.

This project, every project, or your team

claude mcp add takes a --scope. The default, local, adds the server for you in the current project only.

For a team, commit an .mcp.json that reads the key from each person's environment, so no key lands in git:

{
  "mcpServers": {
    "shotkiln": {
      "type": "http",
      "url": "https://shotkiln.com/mcp",
      "headers": { "x-api-key": "${SHOTKILN_KEY}" }
    }
  }
}

Claude Code asks each person to approve a project server the first time; until then claude mcp list shows it as pending. If the variable isn't set, Claude Code warns Missing environment variables: SHOTKILN_KEY.

Prompts to try

You don't name the tool. Ask for what you want and Claude Code picks the tool and the arguments:

Each screenshot comes back as an image plus one line of status. A phone-width capture of example.com returned a 78 KB PNG and this text:

screenshot rendered (77751 bytes, cache HIT, quota remaining 60, free-plan watermark).

The model reads the picture, not the page's HTML. Instructions hidden in the page text don't reach it as text, which matters when the agent visits sites you don't control.

Tool arguments

These come from the server's own tools/list response. All three tools are marked read-only.

Full pages stop at 16,384 px. Before a full-page capture the server scrolls through the page so lazy images load, and the scroll argument turns that off. The Puppeteer guide explains why it's needed.

Remote screenshot server or a local browser

Local browser servers such as Microsoft's Playwright MCP drive a browser on your machine. They can open localhost, use your logins, click and read page text. The price is a browser to install and keep running, and an agent that can reach anything your machine can.

Shotkiln runs remotely, so there's nothing to install and nothing on your network it can reach: private, loopback and cloud metadata addresses are refused on every request and redirect. That also means it can't capture your dev server on localhost:3000. Use a local browser server for that, and Shotkiln for public pages, deploy previews on public URLs, PDFs and OG cards. Many setups use both.

When it doesn't connect

We hit the first one in testing by passing a placeholder instead of a real key. With the real key, and with no header at all, claude mcp list showed ✔ Connected.