# mcp

Catches visual UI drift, captures screenshots, and converts HTML with CSS into images using the SnapDiff API.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 5
- Author: corralimited
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/corralimited/snapdiff-mcp
- Updated: 2026-09-11
- HTML: https://affpapa.org/en/nevibecode/mcp/corralimited-mcp

## What it does

The package equips coding assistants with four UI inspection tools. It handles regression verification against baselines, compares pairs of pages, captures full screenshots, and exports HTML snippets to graphic files. Verification calls return concrete verdicts such as unexpected regressions or confirmed changes.

Everything communicates over stdio on your machine. The editor launches the utility as a subprocess, while Playwright handles local tasks. Without a valid `SNAPDIFF_API_KEY`, requests will fail immediately, so grab a token from your SnapDiff account first.

## Requirements
- Needs: Node.js (commands run via npx)
- Environment variables: `SNAPDIFF_API_KEY`, `SNAPDIFF_API_URL` — keys and tokens: ask the human for the values, never commit them or put them in shared files.

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add --env SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> --env SNAPDIFF_API_URL=<SNAPDIFF_API_URL> --transport stdio corralimited-mcp -- npx -y @corralimited/snapdiff-mcp
```
Replace <…> with your own values

### Codex

**Platform CLI**
```bash
codex mcp add corralimited-mcp --env SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> --env SNAPDIFF_API_URL=<SNAPDIFF_API_URL> -- npx -y @corralimited/snapdiff-mcp
```
Replace <…> with your own values

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "corralimited-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "@corralimited/snapdiff-mcp"
            ],
            "env": {
                "SNAPDIFF_API_KEY": "<SNAPDIFF_API_KEY>",
                "SNAPDIFF_API_URL": "<SNAPDIFF_API_URL>"
            }
        }
    }
}
```
Replace <…> with your own values

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "corralimited-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@corralimited/snapdiff-mcp"
            ],
            "env": {
                "SNAPDIFF_API_KEY": "<SNAPDIFF_API_KEY>",
                "SNAPDIFF_API_URL": "<SNAPDIFF_API_URL>"
            }
        }
    }
}
```
Replace <…> with your own values

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add -e SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> -e SNAPDIFF_API_URL=<SNAPDIFF_API_URL> corralimited-mcp npx -y @corralimited/snapdiff-mcp
```
Replace <…> with your own values

## When to use it
- catch visual UI regressions after automated code edits
- calculate diff percentages between two page layouts
- capture clean screenshots from target URLs
- render HTML and CSS blocks into standalone images

## Example prompts
- Capture a screenshot of the page and check for visual drift.
- Compare this URL against our stored project baseline using `snapdiff_compare_pages`.
- Generate a social card image from this HTML and CSS snippet with `snapdiff_html_to_image`.

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74569
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51104
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16073
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4406
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3851
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3451

## Other versions with the same name
- [mcp · kubeshark](https://affpapa.org/en/nevibecode/mcp/kubeshark-mcp.md) — ★ 12110
- [mcp · butterbase-ai](https://affpapa.org/en/nevibecode/mcp/butterbase-ai-mcp.md) — ★ 3031
- [mcp · medplum](https://affpapa.org/en/nevibecode/mcp/mcp.md) — ★ 2766
- [mcp · sceneview](https://affpapa.org/en/nevibecode/mcp/sceneview-mcp.md) — ★ 1349
- [mcp · buoy-gg](https://affpapa.org/en/nevibecode/mcp/buoy-gg-mcp.md) — ★ 691

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md