snapdiff-mcp
@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-mcpOr 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_...Related MCP server: websight
Tools
Name | Purpose |
| Checks whether a visual change matches the agent's stated intent. Returns |
| 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. |
| Single screenshot of a URL. |
| 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 |
| yes | Get one at https://snapdiff.ai/dashboard |
| no | Override the API base. Defaults to |
There are no CLI flags beyond --help.
License
MIT — see LICENSE.
Available Tools
6 toolssnapdiff_capture_baselineA
Capture the current state of a page as the visual baseline for a SnapDiff project. Call this once per page before using snapdiff_verify_ui_change — the baseline is the reference screenshot that all future verifications diff against.
For localhost URLs, the page is captured locally with a headless browser (no tunnel needed). For public URLs, the SnapDiff backend captures it. Returns when the baseline is confirmed in place.
Inputs: project (required), page_name (required), url (required), branch.
snapdiff_capture_screenshotA
Take a screenshot of a web page. Use this when you need to see what a webpage looks like right now — to inspect layout, verify rendering, or capture a baseline for later comparison.
Inputs: url (required), full_page, dark_mode, selector, +1 more.
snapdiff_check_buildA
Capture every page in the list and diff them all against their baselines in one build. Use this after editing a shared component or design token to check whether the change affected pages you did not directly modify.
Returns a per-page summary of changed vs unchanged. If any page changed, a review URL is included so a human can approve or reject before the baseline moves.
Inputs: project (required), pages (required), branch.
snapdiff_compare_pagesA
Visually compare two web pages to detect differences. Use this to verify that a code change didn't break the UI, compare staging vs production, or check if a page changed. Captures both pages as screenshots, runs pixel-level comparison, and returns a diff percentage plus a highlighted diff image showing exactly what changed. This is the primary tool — use it whenever you need to verify visual output.
Two modes:
Ad-hoc compare: pass
before+afterURLs.Baseline compare: pass
afterURL +project(slug or ID) +page_name. Compares against the last-accepted baseline for that page on the project's default branch. Use this when the user has set up a SnapDiff project and you want to verify a page still matches its approved state.
Inputs: after (required), before, project, page_name, +4 more.
snapdiff_html_to_imageA
Render HTML/CSS directly to an image. Use this to generate social cards, OG images, email headers, or any visual from code without needing a hosted URL.
Inputs: html (required), css, width, height.
snapdiff_verify_ui_changeA
Verify a UI change you just made matches what you intended. Use this whenever you modify a route, page, or component and need to confirm the visual result.
Returns a verdict (pass, expected_change_detected, unexpected_regression, no_change_detected, or needs_human_review), a next_action, and a review_url. Always surface review_url to the user — it is the human-reviewable dashboard page showing the before/after/diff. Do not share raw image URLs (diff_url, before_url, after_url) — those are internal references.
Requires a SnapDiff project + page baseline. Pass intent to describe in one sentence what you meant to change. For sharper verdicts, pass intent_regions with either a CSS selector (recommended for code-editing agents — SnapDiff resolves it to a bbox during capture) or a bbox directly (when your agent drives a browser and already knows pixel coordinates).
Inputs: project (required), page_name (required), after (required), intent (required), +6 more.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 6 tools
There is overlap between snapdiff_compare_pages (baseline compare mode) and snapdiff_verify_ui_change, both comparing against a baseline. Also snapdiff_capture_screenshot and snapdiff_capture_baseline both capture screenshots, but baseline is project-specific. Descriptions help disambiguate but some tools have similar functionality.
All tools share the 'snapdiff_' prefix and follow a verb_noun pattern (capture_baseline, capture_screenshot, check_build, compare_pages, verify_ui_change). 'html_to_image' deviates slightly but remains clear. Overall consistent.
With 6 tools, the set covers core visual testing workflows (baseline capture, ad-hoc screenshots, page comparison, build checks, HTML rendering, and verification with intent) without being bloated. Appropriate for the domain.
Covers main visual testing operations. Missing explicit baseline management (list, delete) or approval tools, but the review_url in verify_ui_change suggests human approval is external. Minor gap but workflow is functional.
Maintenance
Related MCP Connectors
Visual testing for coding agents: your agent sees every UI change it makes and triages each diff.
Browser-based QA for AI-built software. Test pages with real browsers via agents.
Browser-backed QA with evidence and fix-ready reports for coding agents.
Change-aware CI validation and affected-test guidance for coding agents.
Related MCP Servers
- AlicenseAqualityDmaintenanceA server that provides browser automation capabilities using Playwright, enabling LLMs to interact with web pages through structured accessibility snapshots without requiring screenshots or vision models.2210,095,150 npm1Apache 2.0
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to see, analyze, and visually verify web page changes through pixel-perfect diffing, theme extraction, layout analysis, and interactive element detection.8 npmMIT
- AlicenseNot gradedqualityDmaintenanceEnables AI coding agents to visually interact with frontend apps by taking screenshots, clicking elements, reading console logs, and performing visual diffs.7 npm3MIT
- AlicenseNot gradedqualityDmaintenanceDeterministic screenshot diffing for AI coding agents. Extract design tokens, diff implementations vs reference, get CSS fix suggestions.90 npm6MIT