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.
Get an API key at https://snapdiff.ai/dashboard, then drop the snippet for your agent below.
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/mcp.json (or project-level .cursor/mcp.json):
{
"mcpServers": {
"snapdiff": {
"command": "npx",
"args": ["-y", "@corralimited/snapdiff-mcp"],
"env": { "SNAPDIFF_API_KEY": "sk_live_..." }
}
}
}Cline > MCP Servers > Edit Config:
{
"mcpServers": {
"snapdiff": {
"command": "npx",
"args": ["-y", "@corralimited/snapdiff-mcp"],
"env": { "SNAPDIFF_API_KEY": "sk_live_..." }
}
}
}~/.config/zed/settings.json:
{
"context_servers": {
"snapdiff": {
"command": {
"path": "npx",
"args": ["-y", "@corralimited/snapdiff-mcp"],
"env": { "SNAPDIFF_API_KEY": "sk_live_..." }
}
}
}
}~/.continue/config.yaml:
mcpServers:
- name: snapdiff
command: npx
args: ["-y", "@corralimited/snapdiff-mcp"]
env:
SNAPDIFF_API_KEY: sk_live_...command: npx
args: -y @corralimited/snapdiff-mcp
env: SNAPDIFF_API_KEY=sk_live_...Related MCP server: screenshot-feedback-hook-mcp
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.
Besides stdio, if you're hosting an MCP gateway
and need a streamable HTTP server, run with --http:
SNAPDIFF_API_KEY=sk_live_... npx @corralimited/snapdiff-mcp --http --port 8787Then point clients at http://localhost:8787/mcp with the standard MCP HTTP transport.
Env var | Required | Notes |
| yes | Get one at https://snapdiff.ai/dashboard |
| no | Override the API base. Defaults to |
CLI flags (HTTP mode only):
Flag | Default | Notes |
| off | Run as a streamable HTTP server instead of stdio. |
|
| Port for |
|
| Bind address for |
MIT — see LICENSE.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| project | Yes | Project slug or ID (prj_xxx). | |
| page_name | Yes | Page name within the project (e.g. "account", "homepage"). Used to match this baseline when verifying. | |
| url | Yes | URL of the page to capture as the baseline. Localhost URLs are captured locally — no tunnel required. | |
| branch | No | Branch to store the baseline on. Defaults to the project's default branch. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided; description carries full burden. It mentions that baseline is a reference screenshot and that the tool returns when confirmed, but does not disclose if calling multiple times overwrites the baseline or potential side effects. Adequate but not thorough.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Four concise sentences with front-loaded purpose. No redundant information; every sentence adds value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
All 4 parameters are described in schema, and description adds context for two of them. No output schema, but description mentions return behavior. Adequate for a tool with moderate complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, and description adds extra meaning: explains that 'url' parameter for localhost does not require a tunnel, and 'page_name' is used to match during verification. Exceeds baseline of 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states the tool's purpose: capture current page state as a visual baseline for SnapDiff. It distinguishes from sibling tools like snapdiff_verify_ui_change by explaining it is a prerequisite.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly says 'Call this once per page before using snapdiff_verify_ui_change' and explains difference between localhost and public URLs, giving clear guidance on when to use this tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | The full URL to screenshot | |
| full_page | No | Capture the entire scrollable page. Default false | |
| dark_mode | No | Force dark color scheme. Default false | |
| selector | No | CSS selector to capture only a specific element | |
| width | No | Viewport width in pixels. Default 1280 |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must disclose behavioral traits. It states 'Take a screenshot' which implies read-only, but does not elaborate on side effects, permissions, rate limits, or response format. For a simple screenshot operation, this is minimally acceptable but lacks depth.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, zero wasted words. First sentence states the action. Second sentence lists use cases. Information is front-loaded and efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description covers the basic purpose and usage context. However, given the presence of sibling tools with overlapping purposes, it does not hint at when to choose this tool over alternatives. No information about return values or output, which might be inferred but is not explicit.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so baseline is 3. The description adds no parameter-specific information beyond the schema; it merely states the overall action. No extra semantics are provided.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states tool takes a screenshot of a web page and lists use cases (inspect layout, verify rendering, capture baseline). It partially distinguishes from sibling 'snapdiff_capture_baseline' by emphasizing current state, but the phrase 'capture a baseline for later comparison' overlaps with that sibling's likely purpose, preventing a 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides a clear when-to-use context: 'when you need to see what a webpage looks like right now.' However, it does not mention when not to use this tool (e.g., for baseline comparison or verification) nor direct users to alternatives among siblings, leaving the agent without explicit guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| project | Yes | Project slug or ID (prj_xxx). | |
| pages | Yes | Pages to capture and diff. Pass every route in your page map. | |
| branch | No | Branch to look up baselines on. Defaults to the project's default branch. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Since no annotations are provided, the description carries the full burden of behavioral disclosure. It explains the tool captures pages, diffs against baselines, returns a per-page summary, and includes a review URL if changes are detected. It also notes that localhost URLs are captured locally without a tunnel. This adequately informs the agent about the tool's behavior without contradictions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise with no wasted words. It consists of two short paragraphs: the first defines the action and use case, the second describes the output. Every sentence adds value, and the structure is easy to parse.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has 3 parameters and no output schema, the description does a good job covering essential aspects: the batch nature, the return format (per-page summary), and the inclusion of a review URL. It also addresses the niche case of localhost. However, it does not explain what 'baselines' are or how to interpret the summary, but this is likely common knowledge in the domain.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Although schema description coverage is 100%, the description adds meaningful context beyond the schema. It advises to 'Pass every route in your page map' for the pages parameter and clarifies that localhost URLs are handled without a tunnel. This helps the agent understand the intended usage beyond the raw parameter descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states 'Capture every page in the list and diff them all against their baselines in one build.' It uses a specific verb ('capture' and 'diff') and identifies the resource (pages in a project). The phrase 'in one build' distinguishes it from sibling tools like snapdiff_compare_pages, which likely handles individual comparisons.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit guidance: 'Use this after editing a shared component or design token to check whether the change affected pages you did not directly modify.' This tells the agent when to use the tool and implies that for single-page changes, a different tool might be more appropriate. However, it does not explicitly list alternatives or situations to avoid.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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 + after URLs.
Baseline compare: pass after URL + 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.
| Name | Required | Description | Default |
|---|---|---|---|
| after | Yes | URL of the "after" page (e.g. staging URL or localhost) — the page to check | |
| before | No | URL of the "before" page to compare against. Omit when using baseline mode. | |
| project | No | Project slug or ID for baseline mode. When set with page_name, diffs against the stored baseline. | |
| page_name | No | Page name within the project (e.g. "homepage", "pricing"). Required for baseline mode. | |
| branch | No | Branch name for baseline lookup. Defaults to the project's default branch. | |
| threshold | No | Pixel sensitivity 0.0-1.0. Lower = more sensitive. Default 0.1 | |
| ignore_selectors | No | CSS selectors to exclude from comparison (e.g. timestamps, ads) | |
| full_page | No | Compare full scrollable pages. Default false |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description takes the full burden. It explains the process (captures screenshots, pixel-level comparison, returns diff percentage and highlighted image) and the two modes. It does not disclose potential side effects (e.g., storing screenshots) or return format details, but covers the main behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is efficiently structured with a clear opening sentence, bullet points for modes, and every sentence adds necessary information. It is front-loaded with the core purpose, making it easy to scan.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (8 parameters, two modes, no output schema), the description covers the essential aspects: modes, parameter usage, default behavior (branch defaults to default branch), and output (diff percentage and image). It could be more explicit about the exact return format, but overall it is complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so baseline is 3. The tool description adds value by explaining the two modes, which connects how parameters like `before`, `project`, and `page_name` are used together. This context goes beyond individual parameter descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Visually compare two web pages to detect differences.' It lists specific use cases (verify code changes, compare staging vs production) and explicitly identifies itself as 'the primary tool' for visual verification, distinguishing it from its siblings.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear usage context: 'use it whenever you need to verify visual output' and explains two modes (ad-hoc and baseline) with conditions for each. However, it does not explicitly state when not to use this tool or suggest alternatives beyond implying it is the primary one.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| html | Yes | The HTML to render | |
| css | No | CSS to apply | |
| width | No | Viewport width. Default 1200 | |
| height | No | Viewport height. Default 630 (OG image standard) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, and the description does not disclose any behavioral traits such as whether the tool is destructive, rate limits, authentication needs, or limitations on HTML/CSS support. This is a significant gap for a tool with no annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise with two clear sentences, front-loading the purpose and use cases. No unnecessary information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has no output schema, so the description should explain what is returned (e.g., image format, URL or binary). It does not. Also missing constraints on HTML content (self-contained, external resources, size limits). However, for a simple rendering tool, the core purpose is clear.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the description adds limited value over the schema. It does provide default values for width and height (1200 and 630) and context about OG image standards, which is helpful but not essential.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool renders HTML/CSS to an image with specific use cases like social cards and OG images. It distinguishes from sibling screenshot tools by noting 'without needing a hosted URL'.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly says when to use (generating images from code) and hints at alternatives (for URLs use screenshot). However, it does not name sibling tools or provide explicit exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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).
| Name | Required | Description | Default |
|---|---|---|---|
| project | Yes | Project slug or ID (prj_xxx). | |
| page_name | Yes | Page name within the project (e.g. "account", "pricing"). | |
| after | Yes | URL of the page after your change (preview URL, staging, or localhost). | |
| intent | Yes | One sentence describing what you intended to change. Example: "added a Cancel subscription button to the bottom of the account page". Required — without it, the verdict cannot distinguish intended changes from regressions. | |
| intent_regions | No | Optional but recommended. Hints about where on the page your change should appear. Pass `selector` (resolved server-side) or `bbox` (already in pixels) — both produce geometric verdict matching. Without intent_regions the verdict falls back to conservative `needs_human_review`. | |
| branch | No | Branch to look up the baseline on. Defaults to the project's default branch. | |
| threshold | No | Per-pixel color sensitivity 0.0-1.0 (pixelmatch threshold). Lower = more sensitive. Default 0.1. | |
| match_tolerance_percent | No | Maximum diff percentage that still counts as 'no change.' Defaults to 0.01% for verifications (10x stricter than the diff engine's general 0.1% noise floor) so subtle styling regressions don't slip through as no_change_detected. Raise it for noisier pages, lower it for ultra-strict gates. You almost never need to set this — the default is calibrated for the agent verification flow. | |
| ignore_selectors | No | CSS selectors to mask out before comparison (e.g. timestamps, ads, dynamic counters). | |
| full_page | No | Compare full scrollable pages. Default false. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It discloses key behaviors: requires a project and page baseline, explains the verdict values (pass, expected_change_detected, etc.), and instructs the agent to surface review_url while not sharing raw image URLs. It also describes how intent_regions affect verdict accuracy. While not exhaustive (e.g., missing error handling or rate limits), it provides substantial context.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is front-loaded with the core action and usage guideline, then provides return value info, then parameter details. It is somewhat lengthy but each sentence adds value. Minor redundancy could be trimmed, but overall it is well-organized and easy to scan.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity (10 parameters, no annotations, no output schema), the description covers the return values and gives guidance on when to use optional parameters. It assumes baseline existence, which is reasonable given sibling tools. Some missing details (e.g., how to set up a baseline) are outside the scope of this tool's description, so completeness is good.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so baseline is 3, but the description adds significant value. For 'intent', it explains why it's required ('without it, the verdict cannot distinguish intended changes from regressions'). For 'intent_regions', it details the trade-off between selector and bbox, including how selector is resolved server-side. For 'match_tolerance_percent', it explains the default and when to adjust. This goes well beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description starts with 'Verify a UI change you just made matches what you intended.' This clearly states the action and resource. It also explains when to use it: 'Use this whenever you modify a route, page, or component and need to confirm the visual result.' The purpose is specific and distinct from sibling tools like snapdiff_capture_baseline or snapdiff_check_build.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly states when to use the tool: 'Use this whenever you modify a route, page, or component and need to confirm the visual result.' It does not explicitly mention when not to use it or provide direct alternatives, but the context is clear enough for an agent to understand the primary usage scenario.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v0.4.2snapdiff_capture_baselinesnapdiff_capture_screenshotsnapdiff_check_buildsnapdiff_compare_pagessnapdiff_html_to_imagesnapdiff_verify_ui_changeThere 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.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
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.
Agentic testing: HyperExecute jobs, test failure triage, SmartUI visual diffs, a11y audits
Capture screenshots, detect visual regressions between page versions, and analyze with AI.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/corralimited/snapdiff-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
