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.
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:
| Scope | Available in | Stored in |
|---|---|---|
local (default) | This project, only for you | ~/.claude.json |
project | This project, for everyone who clones it | .mcp.json in the repository |
user | All 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
- Start
claudein the project. A project-scoped server from.mcp.jsonasks for approval first; approve it. - Run
/mcp, select snapshotflow, and choose Authenticate. - 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, useclaude 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 loginrefuses project servers that have not been approved yet. Startclaudein the project, approve the server, exit, and sign in again. To ask again after rejecting it, runclaude 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, thenclaude 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:
| Tool | Counts as |
|---|---|
screenshot | 1 screenshot (repeat requests served from cache are free) |
batch_screenshot | 1 screenshot per captured URL (cache hits are free) |
visual_diff | 2 screenshots |
extract_text | 1 screenshot |
check_job | Free |
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.