snapdiff

@corralimited/snapdiff-mcp

SnapDiff 用のスタンドアロン MCP サーバーです。ローカルエージェント向けに 4 つのツールを提供します。

• 2 つのウェブページを視覚的に比較 — 差分率と、差分を強調表示した画像を返します
• 任意の URL のスクリーンショットを撮影
• 前回のキャプチャと比較して、ページが変更されたかどうかを確認
• HTML/CSS を画像にレンダリング（OG カード、ソーシャル画像、メールヘッダー）

公開されている SnapDiff REST API に接続します。ご自身の API キーをご用意ください。

---

クイックスタート

https://snapdiff.ai/dashboard で API キーを取得し、以下のエージェント用スニペットを設定してください。

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	視覚的な変更がエージェントの説明した意図に沿っているかを確認します。verdict（pass / expected_change_detected / unexpected_regression / no_change_detected / needs_human_review）と next_action を返します。プロジェクトとベースラインが必要です。検証ループで使用してください。
snapdiff_compare_pages	2 つの URL 間、または URL と保存済みのプロジェクトベースライン間の視覚的な差分をそのまま返します。verify-ui-change の verdict の形式に合わない、臨時の差分確認に使用します。
snapdiff_capture_screenshot	URL のスクリーンショットを 1 枚撮影します。
snapdiff_html_to_image	HTML/CSS を画像にレンダリングします（OG カード、ソーシャル画像、メールヘッダー）。

スキーマは src/tools/ にあり、@corralimited/snapdiff-mcp/tools からエクスポートされます。 ホスト型の SnapDiff バックエンドも同じスキーマをインポートするため、インプロセスの /mcp エンドポイントとこの スタンドアロン stdio サーバーは、同一のインターフェースを提供します。つまり、エージェントから見えるツール名、説明、 パラメーターは、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 を参照してください。