snapdiff

@corralimited/snapdiff-mcp

适用于 SnapDiff 的独立 MCP 服务。向本地 Agent 提供四种工具：

• 以可视化方式比较两个网页 — 返回差异百分比和突出显示差异的图片
• 截取网页截图，适用于任意 URL
• 检查页面是否相较于之前的截图发生变化
• 将 HTML/CSS 渲染为图片（OG 卡片、社交媒体图片、电子邮件页眉）

调用 SnapDiff 公共 REST API。请自备 API 密钥。

---

快速开始

在 https://snapdiff.ai/dashboard 获取 API 密钥，然后将下方对应的代码片段添加到你的 Agent 配置中。

Claude Code

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

或者编辑 ~/.claude/settings.json：

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

Cursor

~/.cursor/mcp.json（或项目级 .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_...

其他支持通用 stdio MCP 接入的客户端

command: npx
args:    -y @corralimited/snapdiff-mcp
env:     SNAPDIFF_API_KEY=sk_live_...

---

工具

名称	用途
snapdiff_verify_ui_change	检查视觉变化是否符合 Agent 声明的意图。返回 verdict（pass / expected_change_detected / unexpected_regression / no_change_detected / needs_human_review）和 next_action。需要项目和基线。请在验证循环中使用此工具。
snapdiff_compare_pages	对两个 URL 进行原始视觉差异比较，或将某个 URL 与存储的项目基线进行比较。适用于不符合 verify-ui-change 判定格式的临时差异比较。
snapdiff_capture_screenshot	截取单个 URL 的截图。
snapdiff_html_to_image	将 HTML/CSS 渲染为图片（OG 卡片、社交媒体图片、电子邮件页眉）。

Schema 位于 src/tools/，并从 @corralimited/snapdiff-mcp/tools 导出。 托管的 SnapDiff 后端会导入相同的 Schema，因此其进程内的 /mcp 端点与此独立 stdio 服务提供完全一致的接口——无论 Agent 连接 https://api.snapdiff.ai/mcp 还是在本地运行此服务，看到的工具名称、描述和参数都相同。

---

远程 HTTP 访问

此软件包仅支持 stdio——编辑器会将其作为子进程启动，而基于 Playwright 的本地主机工具会在你的机器上运行，也就是开发服务器所在的位置。它不会开放端口。

如果需要 HTTP 端点，请使用托管端点 https://mcp.snapdiff.ai/mcp，它会使用你的 API 密钥验证每个请求，并提供相同的工具接口。

---

配置

环境变量	必需	说明
SNAPDIFF_API_KEY	是	在 https://snapdiff.ai/dashboard 获取
SNAPDIFF_API_URL	否	覆盖 API 基础 URL。默认为 https://api.snapdiff.ai/v1。

除 --help 外，没有其他 CLI 标志。

---

许可证

MIT — 请参阅 LICENSE。