mcp

Name: mcp
Author: corralimited

Unexplored

Visual-diff & change-detection tools that catch agentic UI drift for coding agents.

corralimited5 stars0 forksDesign & UX

View source

Install

Terminal

$npx -y @corralimited/snapdiff-mcp

mcp_config.json

{
  "mcpServers": {
    "ai-snapdiff-mcp": {
      "env": {
        "SNAPDIFF_API_KEY": "${SNAPDIFF_API_KEY}",
        "SNAPDIFF_API_URL": "${SNAPDIFF_API_URL}"
      },
      "args": [
        "-y",
        "@corralimited/snapdiff-mcp"
      ],
      "command": "npx"
    }
  }
}

Documentation

@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.

HTTP transport (advanced)

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 8787

Then point clients at http://localhost:8787/mcp with the standard MCP HTTP transport.

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`.

CLI flags (HTTP mode only):

Flag	Default	Notes
`--http`	off	Run as a streamable HTTP server instead of stdio.
`--port <n>`	`8787`	Port for `--http` mode.
`--host <h>`	`127.0.0.1`	Bind address for `--http` mode.

License

MIT — see LICENSE.

Sourced from the repository README.

Search DevTools