Каталог MCP
corralimited/snapdiff-mcp

corralimited/snapdiff-mcp

Name: corralimited/snapdiff-mcp
Availability: InStock
Author: corralimited

MCP сервер для визуального сравнения веб-страниц через SnapDiff API. Позволяет разработчикам и QA автоматически снимать скриншоты, сравнивать UI на изменения и рендерить HTML/CSS в картинки. Подход...

Github NPM Сайт сервера

README

6 инструментов

Версии

Установить сервер

@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_..." }
    }
  }
}

Инструменты были проиндексированы: 18.10.2026

snapdiff_capture_baseline

Захватывает текущее состояние страницы в качестве визуального эталона для проекта SnapDiff. Вызывайте этот инструмент один раз на страницу перед использованием snapdiff_verify_ui_change: эталон это референсный скриншот, с которым сравниваются все будущие проверки. Для URL localhost страница захватывается локально с помощью headless-браузера (туннель не требуется). Для публичных URL её захватывает бэкенд SnapDiff. Возвращает результат, когда эталон подтверждён на месте.

Параметры

branchstring
Ветка, в которую сохраняется базовый уровень. По умолчанию используется основная ветка проекта.
page_namestringобязательный
Имя страницы в проекте (например, "account", "homepage"). Используется для сопоставления этого эталона при проверке.
projectstringобязательный
Слаг проекта или ID (prj_xxx).
urlstringобязательный
URL страницы для захвата в качестве эталона. URL-адреса localhost захватываются локально, туннель не требуется.

snapdiff_capture_screenshot

Делает снимок экрана веб-страницы. Используйте эту возможность, когда нужно увидеть, как страница выглядит прямо сейчас: чтобы проверить вёрстку, убедиться в корректности отображения или сделать эталонный снимок для последующего сравнения.

Параметры

dark_modeboolean
Принудительно включает тёмную цветовую схему. По умолчанию false.
full_pageboolean
Захватывает всю прокручиваемую страницу. По умолчанию false.
selectorstring
CSS-селектор для выбора только конкретного элемента.
urlstringобязательный
Полный URL-адрес для создания скриншота.
widthnumber
Ширина области просмотра в пикселях (по умолчанию: 1280)

snapdiff_check_build

Захватывает каждую страницу из списка и сравнивает их все с эталонными снимками в одной сборке. Используйте это после редактирования общего компонента или дизайн-токена, чтобы проверить, затронуло ли изменение страницы, которые вы не изменяли напрямую. Возвращает постраничную сводку изменённых и неизменённых страниц. Если какая-либо страница изменилась, включается ссылка на проверку, чтобы человек мог одобрить или отклонить изменения до обновления эталона.

Параметры

branchstring
Ветка для поиска базовых версий. По умолчанию это ветка проекта по умолчанию.
pagesobject[]обязательный
Страницы для захвата и сравнения. Передайте каждый маршрут из вашей карты страниц.
projectstringобязательный
Слаг проекта или ID (prj_xxx).

snapdiff_compare_pages

Визуально сравнивает две веб-страницы, чтобы выявить различия. Используется для проверки, что изменение кода не сломало интерфейс, сравнения стейджинга с продакшеном или проверки, изменилась ли страница. Делает скриншоты обеих страниц, выполняет попиксельное сравнение и возвращает процент различий плюс подсвеченное изображение диффа, показывающее, что именно изменилось. Это основной инструмент — используй его всегда, когда нужно проверить визуальный вывод. Два режима: 1. Ad-hoc сравнение: передай before + after URL. 2. Baseline сравнение: передай after URL + project (slug или ID) + page_name. Сравнивает с последним принятым baseline для этой страницы на ветке по умолчанию проекта. Используй, когда пользователь настроил проект SnapDiff и нужно убедиться, что страница всё ещё соответствует утверждённому состоянию.

Параметры

afterstringобязательный
URL страницы «after» (например, staging URL или localhost): страница для проверки.
beforestring
URL страницы «before», с которой выполняется сравнение. Не указывайте его при использовании режима baseline.
branchstring
Имя ветки для поиска базовой линии. По умолчанию используется ветка проекта по умолчанию.
full_pageboolean
Сравнивает полностью прокручиваемые страницы. По умолчанию false.
ignore_selectorsstring[]
CSS-селекторы для исключения из сравнения (например, временные метки, реклама)
page_namestring
Имя страницы в проекте (например, "homepage", "pricing"). Требуется для режима baseline.
projectstring
Slug или ID проекта для режима базовой линии. Если задано вместе с page_name, сравнивает с сохранённым базовым уровнем.
thresholdnumber
Чувствительность пикселя 0.0-1.0. Меньше = чувствительнее. По умолчанию 0.1

snapdiff_html_to_image

Рендерит HTML/CSS напрямую в изображение. Используйте это для создания социальных карточек, OG-изображений, заголовков писем или любого визуала из кода без необходимости в размещенном URL.

Параметры

cssstring
CSS для применения
heightnumber
Высота области просмотра. По умолчанию 630 (стандарт для OG-изображений).
htmlstringобязательный
HTML для рендеринга
widthnumber
Ширина viewport. По умолчанию 1200.

snapdiff_verify_ui_change

Проверяет, что внесённое вами изменение UI совпадает с задуманным. Используйте эту проверку всякий раз, когда изменяете маршрут, страницу или компонент и нужно подтвердить визуальный результат. Возвращает вердикт (pass, expected_change_detected, unexpected_regression, no_change_detected или needs_human_review), next_action и review_url. Всегда показывайте пользователю review_url — это панель для ручной проверки, где отображаются состояния «до», «после» и различия. Не передавайте ссылки на исходные изображения (diff_url, before_url, after_url) — это внутренние ссылки. Требует проект SnapDiff и базовую версию страницы. Передайте intent, чтобы описать одним предложением, что вы хотели изменить. Для более точных вердиктов передавайте intent_regions — либо через CSS-селектор (selector, рекомендуется для агентов, редактирующих код — SnapDiff преобразует его в ограничивающий прямоугольник при захвате), либо напрямую через bbox (когда ваш агент управляет браузером и уже знает координаты пикселей).

Параметры

afterstringобязательный
URL страницы после вашего изменения (preview URL, staging или localhost).
branchstring
Ветка, в которой искать базовую линию. По умолчанию используется ветка по умолчанию проекта.
full_pageboolean
Сравнивает полностью прокручиваемые страницы. По умолчанию false.
ignore_selectorsstring[]
CSS-селекторы, которые нужно исключить перед сравнением (например, временные метки, реклама, динамические счётчики).
intentstringобязательный
Одно предложение, описывающее, что вы намеревались изменить. Пример: «добавил кнопку „Отменить подписку“ внизу страницы аккаунта». Обязательно: без него вердикт не сможет отличить намеренные изменения от регрессий.
intent_regionsobject[]
Необязательно, но рекомендуется. Подсказки о том, где на странице должно появиться ваше изменение. Передайте selector (разрешается на серверной стороне) или bbox (уже в пикселях): оба варианта дают геометрическое сопоставление вердикта. Без intent_regions вердикт откатывается к консервативному needs_human_review.
match_tolerance_percentnumber
Максимальный процент расхождений, который всё ещё считается «без изменений». По умолчанию 0,01% для верификаций (в 10 раз строже общего порога шума 0,1% у механизма сравнения), чтобы тонкие регрессии стиля не проскакивали как no_change_detected. Повышайте для более шумных страниц, понижайте для ультрастрогих контролей. Почти никогда не нужно его устанавливать: значение по умолчанию откалибровано под агентный процесс верификации.
page_namestringобязательный
Имя страницы в рамках проекта (например, "account", "pricing").
projectstringобязательный
Слаг проекта или ID (prj_xxx).
thresholdnumber
Попиксельная чувствительность к цвету 0.0-1.0 (порог pixelmatch). Чем ниже значение, тем выше чувствительность. По умолчанию 0.1.

`0.5.0`основная	11.09.2026
`0.4.2`	14.06.2026
`0.4.1`	14.06.2026
`0.4.0`	14.06.2026
`0.3.2`	14.06.2026
`0.3.1`	14.06.2026
`0.3.0`	14.06.2026
`0.2.0`	13.06.2026
`0.1.1`	12.06.2026
`0.1.0`	09.05.2026

Выберите клиент, чтобы установить corralimited/snapdiff-mcp:

Любой клиент

Конфиг добавления MCP сервера стандартный, обычно он не меняется вообще, поэтому подходит практически к любому ИИ клиенту, поддерживающему MCP.

{
  "mcpServers": {
    "corralimited-snapdiff-mcp-a0tmjmv761": {
      "command": "npx",
      "args": [
        "-y",
        "@corralimited/snapdiff-mcp"
      ],
      "env": {
        "SNAPDIFF_API_KEY": "sk_live_..."
      }
    }
  }
}

Cursor

Перейдите по ссылке и сервер автоматически будет добавлен в Cursor. Либо откройте/создайте файл ~/.cursor/mcp.json(%USERPROFILE%\.cursor\mcp.json на Windows) и добавьте конфиг сервера:

{
  "mcpServers": {
    "corralimited-snapdiff-mcp-a0tmjmv761": {
      "command": "npx",
      "args": [
        "-y",
        "@corralimited/snapdiff-mcp"
      ],
      "env": {
        "SNAPDIFF_API_KEY": "sk_live_..."
      }
    }
  }
}

VS Code

Создайте .vscode/mcp.json в проекте (ключ верхнего уровня — servers):

{
  "servers": {
    "corralimited-snapdiff-mcp-a0tmjmv761": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@corralimited/snapdiff-mcp"
      ],
      "env": {
        "SNAPDIFF_API_KEY": "sk_live_..."
      }
    }
  }
}

Либо добавьте сервер через терминал:

code --add-mcp "{\"name\":\"corralimited-snapdiff-mcp-a0tmjmv761\",\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"-y\",\"@corralimited/snapdiff-mcp\"],\"env\":{\"SNAPDIFF_API_KEY\":\"sk_live_...\"}}"

Claude Desktop

Откройте Settings → Developer → Edit Config — это откроет файл claude_desktop_config.json:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Впишите сервер и полностью перезапустите Claude Desktop:

{
  "mcpServers": {
    "corralimited-snapdiff-mcp-a0tmjmv761": {
      "command": "npx",
      "args": [
        "-y",
        "@corralimited/snapdiff-mcp"
      ],
      "env": {
        "SNAPDIFF_API_KEY": "sk_live_..."
      }
    }
  }
}

Claude Code

Добавьте сервер одной командой в терминале:

claude mcp add corralimited-snapdiff-mcp-a0tmjmv761 --env SNAPDIFF_API_KEY=sk_live_... -- npx -y @corralimited/snapdiff-mcp

Либо через JSON-конфиг:

claude mcp add-json corralimited-snapdiff-mcp-a0tmjmv761 "{\"command\":\"npx\",\"args\":[\"-y\",\"@corralimited/snapdiff-mcp\"],\"env\":{\"SNAPDIFF_API_KEY\":\"sk_live_...\"}}"

Codex

Добавьте сервер командой в терминале:

codex mcp add corralimited-snapdiff-mcp-a0tmjmv761 --env SNAPDIFF_API_KEY=sk_live_... -- npx -y @corralimited/snapdiff-mcp

Либо вручную в ~/.codex/config.toml(%USERPROFILE%\.codex\config.toml на Windows):

[mcp_servers.corralimited-snapdiff-mcp-a0tmjmv761]
command = "npx"
args = ["-y", "@corralimited/snapdiff-mcp"]

[mcp_servers.corralimited-snapdiff-mcp-a0tmjmv761.env]
SNAPDIFF_API_KEY = "sk_live_..."

Perplexity

MCP доступен подписчикам Perplexity Pro / Max / Enterprise. Локальные серверы — только в приложении для macOS.

Откройте Настройки аккаунта → Connectors.
Установите вспомогательное приложение PerplexityXPC (один раз).
Нажмите Add Connector → вкладка Simple.
В поле Server Name укажите corralimited/snapdiff-mcp, а в поле команды запуска — строку ниже:

npx -y @corralimited/snapdiff-mcp

Нажмите Save и дождитесь статуса Running.

Windsurf

Откройте Windsurf Settings → Cascade → MCP Servers или отредактируйте файл ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "corralimited-snapdiff-mcp-a0tmjmv761": {
      "command": "npx",
      "args": [
        "-y",
        "@corralimited/snapdiff-mcp"
      ],
      "env": {
        "SNAPDIFF_API_KEY": "sk_live_..."
      }
    }
  }
}

Cline

В панели Cline нажмите иконку MCP Servers → Configure → Configure MCP Servers (или отредактируйте ~/.cline/mcp.json) и добавьте сервер:

{
  "mcpServers": {
    "corralimited-snapdiff-mcp-a0tmjmv761": {
      "command": "npx",
      "args": [
        "-y",
        "@corralimited/snapdiff-mcp"
      ],
      "env": {
        "SNAPDIFF_API_KEY": "sk_live_..."
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

Continue

Создайте файл в .continue/mcpServers/ (например corralimited-snapdiff-mcp-a0tmjmv761.yaml) или добавьте блок в config.yaml. MCP работает только в режиме agent:

mcpServers:
  - name: corralimited-snapdiff-mcp-a0tmjmv761
    command: npx
    args:
      - "-y"
      - "@corralimited/snapdiff-mcp"
    env:
      SNAPDIFF_API_KEY: sk_live_...

Zed

Выполните agent: add context server или откройте настройки (zed: open settings file) и добавьте сервер в объект context_servers:

{
  "context_servers": {
    "corralimited-snapdiff-mcp-a0tmjmv761": {
      "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_..."
  }
}

Нужен npx

Сервер запускается через npx
Без него ничего работать не будет.

Как установить npx

Информация о сервере

Номер в рейтинге: #197
Звезд на Github: 5
Форков на Github: 0
Загрузок: 4 693
Язык реализации: TypeScript
Лицензия: MIT
Официальный сервер: Нет
Дата обновления данных: 19.10 в 09:48
Идентификатор: 3J37HgidfqnKAEGv
Категории: Инструменты для разработчиков, Тестирование и QA

corralimited/snapdiff-mcp

@corralimited/snapdiff-mcp

Quickstart

Claude Code

Cursor

Похожие MCP-сервера

Hypersequent/qasphere-mcp

callstackincubator/agent-device

ambar/simctl-mcp

hyperb1iss/droidmind

keiver/image-tiler-mcp-server

TCSoftInc/testcollab-mcp-server