MCP setup guide · Claude Code ·

Connect Claude Code to SnapshotFlow MCP

Give Claude Code a screenshot tool for live pages. One claude mcp add command registers the hosted SnapshotFlow server, a browser sign-in authorizes it, and Claude Code can then capture, diff, and read pages while it works on your project.

Start free — 300 screenshots

Before you start

  • A SnapshotFlow account. Sign up free if you do not have one.
  • The server URL: https://api.snapshotflow.com/mcp
  • No API key. The server uses OAuth, so Claude Code signs you in through the browser.

Add the server

Run this in your terminal. It registers SnapshotFlow as a remote HTTP server for the current project:

claude mcp add --transport http snapshotflow https://api.snapshotflow.com/mcp

Add --scope to choose where the server is available:

ScopeAvailable inStored in
local (default)This project, only for you~/.claude.json
projectThis project, for everyone who clones it.mcp.json in the repository
userAll your projects~/.claude.json

To share SnapshotFlow with your team, commit the project-scoped config. Each teammate still signs in with their own SnapshotFlow account.

claude mcp add --transport http snapshotflow --scope project https://api.snapshotflow.com/mcp

If you edit .mcp.json by hand, keep the "type": "http" field. Without it, Claude Code treats the entry as a local stdio server and the connection fails:

{
  "mcpServers": {
    "snapshotflow": {
      "type": "http",
      "url": "https://api.snapshotflow.com/mcp"
    }
  }
}

Sign in

  1. Start claude in the project. A project-scoped server from .mcp.json asks for approval first; approve it.
  2. Run /mcp, select snapshotflow, and choose Authenticate.
  3. Complete the SnapshotFlow sign-in in the browser window that opens. Claude Code stores the token and refreshes it automatically.

You can also sign in from the shell, which is useful before running claude -p in scripts or CI:

claude mcp login snapshotflow

Check that it works

claude mcp list

SnapshotFlow should show ✔ Connected. If it shows ! Needs authentication, repeat the sign-in step. Inside a session, Claude Code exposes the tools as mcp__snapshotflow__screenshot, mcp__snapshotflow__visual_diff, and so on.

Prompts to try in Claude Code

Claude Code is strongest when screenshots close the loop on a code change. SnapshotFlow renders pages on its own servers, so give it a public or preview URL rather than localhost.

Deploy preview is at https://preview.example.com. Take a full-page screenshot with SnapshotFlow, compare it with the component I just changed in src/components/Pricing.astro, and fix any layout problem you can see.
Use SnapshotFlow visual_diff to compare https://staging.example.com with https://example.com. Summarize what changed and point me to the files that probably caused it.
Use SnapshotFlow extract_text to read https://docs.example.com/api/auth as Markdown, then update our README section on authentication to match it.

Troubleshooting

  • Needs authentication. Open /mcp, select snapshotflow, and choose Re-authenticate. In non-interactive runs, use claude mcp login snapshotflow.
  • has a "url" but no "type". Add "type": "http" to the entry in .mcp.json.
  • "snapshotflow" is from .mcp.json and awaiting approval. claude mcp login refuses project servers that have not been approved yet. Start claude in the project, approve the server, exit, and sign in again. To ask again after rejecting it, run claude mcp reset-project-choices.
  • Server already exists elsewhere. Claude Code uses the highest-precedence definition (local, then project, then user, then claude.ai connectors). If you added SnapshotFlow as a connector in Claude, it may already appear in /mcp.
  • Remove the server. Run claude mcp logout snapshotflow, then claude mcp remove snapshotflow.

What it costs

Your AI client spends its own model tokens, billed by your AI provider. SnapshotFlow only counts screenshots against your account:

ToolCounts as
screenshot1 screenshot (repeat requests served from cache are free)
batch_screenshot1 screenshot per captured URL (cache hits are free)
visual_diff2 screenshots
extract_text1 screenshot
check_jobFree

New accounts get 300 free screenshots for the lifetime of the account. No credit card required. See pricing for paid plans.

Sources

Steps checked against the official documentation on . Client menus change often; if a label differs, the linked page has the current name.

Tested with Claude Code 2.1.308: claude mcp add registered the server, claude mcp login snapshotflow completed the browser sign-in, and claude mcp get snapshotflow reported ✔ Connected.

Other MCP clients

The same server works with any client that supports remote MCP over Streamable HTTP with OAuth. Setup guides:

See SnapshotFlow MCP server for all clients, the tool list, and capture options, or the MCP reference for tool schemas. For more tasks to try, browse the MCP prompt library.