SnapDiff — визуальное сравнение страниц
Скриншоты и визуальное сравнение веб-страниц для проверки изменений интерфейса
npx -y @corralimited/snapdiff-mcp
Запускается на вашем компьютере. RusMcp не запускает и не проверяет код пакета — посмотрите исходный код перед установкой.
Установка
Пакет @corralimited/snapdiff-mcp из npm, последняя версия. Выберите ассистент и добавьте сервер в его настройки.
Настройки → Developer → Edit Config: файл claude_desktop_config.json
{
"mcpServers": {
"snapdiff-vizualnoe-sravnenie-stranits": {
"command": "npx",
"args": [
"-y",
"@corralimited/snapdiff-mcp"
],
"env": {
"SNAPDIFF_API_KEY": "YOUR_SNAPDIFF_API_KEY"
}
}
}
}{
"mcpServers": {
"snapdiff-vizualnoe-sravnenie-stranits": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"@corralimited/snapdiff-mcp"
],
"env": {
"SNAPDIFF_API_KEY": "YOUR_SNAPDIFF_API_KEY"
}
}
}
}Выполните в терминале
claude mcp add --env SNAPDIFF_API_KEY=YOUR_SNAPDIFF_API_KEY --transport stdio snapdiff-vizualnoe-sravnenie-stranits -- npx -y @corralimited/snapdiff-mcpclaude mcp add --env SNAPDIFF_API_KEY=YOUR_SNAPDIFF_API_KEY --transport stdio snapdiff-vizualnoe-sravnenie-stranits -- cmd /c npx -y @corralimited/snapdiff-mcpФайл .cursor/mcp.json в проекте или ~/.cursor/mcp.json — для всех проектов
{
"mcpServers": {
"snapdiff-vizualnoe-sravnenie-stranits": {
"command": "npx",
"args": [
"-y",
"@corralimited/snapdiff-mcp"
],
"env": {
"SNAPDIFF_API_KEY": "YOUR_SNAPDIFF_API_KEY"
}
}
}
}{
"mcpServers": {
"snapdiff-vizualnoe-sravnenie-stranits": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"@corralimited/snapdiff-mcp"
],
"env": {
"SNAPDIFF_API_KEY": "YOUR_SNAPDIFF_API_KEY"
}
}
}
}Файл .vscode/mcp.json в проекте
{
"inputs": [
{
"type": "promptString",
"id": "snapdiff-api-key",
"description": "SnapDiff API key. Get one at https://snapdiff.ai/dashboard.",
"password": true
}
],
"servers": {
"snapdiff-vizualnoe-sravnenie-stranits": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@corralimited/snapdiff-mcp"
],
"env": {
"SNAPDIFF_API_KEY": "${input:snapdiff-api-key}"
}
}
}
}{
"inputs": [
{
"type": "promptString",
"id": "snapdiff-api-key",
"description": "SnapDiff API key. Get one at https://snapdiff.ai/dashboard.",
"password": true
}
],
"servers": {
"snapdiff-vizualnoe-sravnenie-stranits": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@corralimited/snapdiff-mcp"
],
"env": {
"SNAPDIFF_API_KEY": "${input:snapdiff-api-key}"
}
}
}
}На Windows npx запускается через cmd /c — иначе ассистент его не найдёт.
Переменные окружения
Замените значения вида YOUR_… своими. Необязательные в конфиг не добавлены — допишите их в env, если нужны.
SNAPDIFF_API_KEYобязательная · секрет- SnapDiff API key. Get one at https://snapdiff.ai/dashboard.
SNAPDIFF_API_URLнеобязательная- Override the API base URL. Defaults to https://api.snapdiff.ai/v1.
Описание
SnapDiff помогает ловить незаметные поломки интерфейса, когда код меняет ИИ-агент или разработчик. Сервер делает снимки страниц и сравнивает их, чтобы было видно, что именно изменилось на экране. Можно сделать скриншот любой страницы, сравнить две страницы между собой, сохранить эталонный снимок страницы для проекта и потом прогнать весь список страниц против эталонов одной сборкой. Отдельный инструмент проверяет, совпадает ли сделанное изменение интерфейса с задуманным. Есть и рендер HTML/CSS в картинку — для социальных карточек, OG-изображений и шапок писем. Сервер запускается на компьютере пользователя как пакет. Для работы нужен свой API-ключ SnapDiff.
Инструменты
Список инструментов появится после проверки. Пакет запускается у вас — посмотрите README в исходном коде.
Вопросы, новые серверы, обсуждение MCP
t.me/rusmcp · t.me/RusMcp_bot