About snapdiff
snapdiff is an MCP server for coding agents to capture web pages and verify visual changes. It exposes SnapDiff’s REST-backed comparison tools through a local stdio process.
Key features
- 01Compare page screenshots
- 02Verify UI changes against intent
- 03Capture URL screenshots
- 04Render HTML/CSS as images
Use cases
- 01Check whether a UI edit introduced a regression
- 02Compare a page with a saved baseline
- 03Create image assets from HTML/CSS
MCP support
Exposes four visual testing tools to MCP clients, including comparison, screenshot capture, UI-change verification, and HTML/CSS rendering. The standalone server uses stdio and requires a SnapDiff API key.
Configuration
Local server config is the same for every client. Copy it into your client’s MCP config file.
npx -y @corralimited/snapdiff-mcpSNAPDIFF_API_KEYSecretSnapDiff API key. Get one at https://snapdiff.ai/dashboard.SNAPDIFF_API_URLOverride the API base URL. Defaults to https://api.snapdiff.ai/v1.Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.
Tools
6Saved tool list · updated 2w ago
| Parameter | Type | Required | Description |
|---|---|---|---|
| after | string | Yes | URL of the "after" page (e.g. staging URL or localhost) — the page to check |
| before | string | No | URL of the "before" page to compare against. Omit when using baseline mode. |
| branch | string | No | Branch name for baseline lookup. Defaults to the project's default branch. |
| project | string | No | Project slug or ID for baseline mode. When set with page_name, diffs against the stored baseline. |
| full_page | boolean | No | Compare full scrollable pages. Default false |
| page_name | string | No | Page name within the project (e.g. "homepage", "pricing"). Required for baseline mode. |
| threshold | number | No | Pixel sensitivity 0.0-1.0. Lower = more sensitive. Default 0.1 |
| ignore_selectors | array | No | CSS selectors to exclude from comparison (e.g. timestamps, ads) |
Details
From the project README@corralimited/snapdiff-mcp
Standalone MCP server for SnapDiff. Exposes four tools to local agents:
- Compare two web pages visually — diff percentage plus a highlighted diff image
- Capture a screenshot of any URL
- Check whether a page changed vs. a previous capture
- Render HTML/CSS to an image (OG cards, social images, email headers)
Hits the public SnapDiff REST API. Bring your own API key.
Quickstart
Get an API key at https://snapdiff.ai/dashboard, then drop the snippet for your agent below.
Claude Code
claude mcp add snapdiff -e SNAPDIFF_API_KEY=sk_live_... -- npx -y @corralimited/snapdiff-mcp
Or edit ~/.claude/settings.json:
{
"mcpServers": {
"snapdiff": {
"command": "npx",
"args": ["-y", "@corralimited/snapdiff-mcp"],
"env": { "SNAPDIFF_API_KEY": "sk_live_..." }
}
}
}
Cursor
~/.cursor/mcp.json (or project-level .cursor/mcp.json):
{
"mcpServers": {
"snapdiff": {
"command": "npx",
"args": ["-y", "@corralimited/snapdiff-mcp"],
"env": { "SNAPDIFF_API_KEY": "sk_live_..." }
}
}
}
Cline (VS Code)
Cline > MCP Servers > Edit Config:
{
"mcpServers": {
"snapdiff": {
"command": "npx",
"args": ["-y", "@corralimited/snapdiff-mcp"],
"env": { "SNAPDIFF_API_KEY": "sk_live_..." }
}
}
}
Zed
~/.config/zed/settings.json:
{
"context_servers": {
"snapdiff": {
"command": {
"path": "npx",
"args": ["-y", "@corralimited/snapdiff-mcp"],
"env": { "SNAPDIFF_API_KEY": "sk_live_..." }
}
}
}
}
Continue
~/.continue/config.yaml:
mcpServers:
- name: snapdiff
command: npx
args: ["-y", "@corralimited/snapdiff-mcp"]
env:
SNAPDIFF_API_KEY: sk_live_...
Anything else with a generic stdio MCP slot
command: npx
args: -y @corralimited/snapdiff-mcp
env: SNAPDIFF_API_KEY=sk_live_...
Tools
| Name | Purpose |
|---|---|
snapdiff_verify_ui_change | Checks whether a visual change matches the agent's stated intent. Returns verdict (pass / expected_change_detected / unexpected_regression / no_change_detected / needs_human_review) and a next_action. Requires a project + baseline. Use this in the verification loop. |
snapdiff_compare_pages | Raw visual diff between two URLs, or a URL vs. a stored project baseline. Use for ad-hoc diffs that don't fit the verify-ui-change verdict shape. |
snapdiff_capture_screenshot | Single screenshot of a URL. |
snapdiff_html_to_image | Render HTML/CSS to an image (OG cards, social images, email headers). |
Schemas live in src/tools/ and are exported from @corralimited/snapdiff-mcp/tools.
The hosted SnapDiff backend imports the same schemas so its in-process /mcp endpoint and this
standalone stdio server expose an identical surface — agents see the same tool names, descriptions,
and parameters whether they connect to https://api.snapdiff.ai/mcp or run this server locally.
Remote HTTP access
This package speaks stdio only — your editor spawns it as a subprocess, and the Playwright-backed localhost tools run on your machine, where your dev server actually is. It does not open a port.
If you need an HTTP endpoint, use the hosted one at https://mcp.snapdiff.ai/mcp,
which authenticates every request with your API key and exposes the same tool surface.
Configuration
| Env var | Required | Notes |
|---|---|---|
SNAPDIFF_API_KEY | yes | Get one at https://snapdiff.ai/dashboard |
SNAPDIFF_API_URL | no | Override the API base. Defaults to https://api.snapdiff.ai/v1. |
There are no CLI flags beyond --help.
License
MIT — see LICENSE.
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.