Unified Diff MCP Server

Unified Diff MCP Server

Claude Desktop 向けの美しい差分表示です。コードの差分を、GitHub Gist 連携とローカルファイル出力で、見事なビジュアル比較に変換します。

✨ 機能

• 🎨 diff2html を使用した美しい HTML 差分表示
• 🌐 GitHub Gist 連携による即時共有
• 📁 ローカルファイル出力（PNG／HTML）
• 🔄 一時的な差分の自動削除機能
• 🖥️ クロスプラットフォーム対応（Windows、macOS、Linux）
• ⚡ Bun ランタイムによる高パフォーマンス
• 🛡️ 共有差分を複数段階で保護する強化されたセキュリティ
• 🔒 用途に応じた複数段階のセキュリティ（低／中／高）

🚀 クイックスタート

Smithery 経由でインストールする

bunx @smithery/cli install @gorosun/unified-diff-mcp --client claude --config '{
  "defaultAutoOpen": true,
  "defaultOutputMode": "html",
  "githubUsername": "your_actual_github_username",
  "githubToken": "ghp_your_actual_token_here"
}'

手動インストール

1. Claude Desktop と Bun をインストールします
2. クローンしてビルドします：

   git clone https://github.com/gorosun/unified-diff-mcp.git
   cd unified-diff-mcp
   bun install
   

3. Claude Desktop を設定します — 詳細は以下の設定を参照してください

🛠️ ツールの概要

ツール	目的	出力	最適な用途
visualize_diff_html_content	ブラウザーでの表示と共有	GitHub Gist ＋ HTML プレビュー URL	手軽な共有、即時表示
visualize_diff_output_file	ローカルファイルへの保存	PNG／HTML ファイル	ローカル保存、プレゼンテーション

📖 使用例

🎯 目的別の最適なプロンプト

目的	推奨プロンプト	使用するツール	出力
クイックプレビュー	Please visualize and preview the following diff: 以下のdiffを可視化してプレビューしてください	visualize_diff_html_content	GitHub Gist ＋ HTML プレビュー URL
ローカル保存	Please visualize and save the following diff to a file: 以下のdiffを可視化してファイルに保存してください	visualize_diff_output_file	ローカルの HTML／PNG ファイル
他の人と共有	Please visualize the following diff and create a shareable link: 以下のdiffを可視化して共有リンクを作成してください	visualize_diff_html_content	共有可能な URL を含む GitHub Gist
画像としてエクスポート	Please visualize and save the following diff as a PNG image: 以下のdiffを可視化してPNG画像で保存してください	visualize_diff_output_file	ローカルの PNG 画像
コードレビュー	Please visualize the following diff in side-by-side format: 以下のdiffをside-by-side形式で可視化してください	どちらのツールでも可	左右並列の比較
ドキュメント作成	Please visualize and save the following diff as an HTML file: 以下のdiffを可視化してHTMLファイルで保存してください	visualize_diff_output_file	ローカルの HTML ファイル
🔒 安全な共有	Please visualize this diff with high security: 以下のdiffを高セキュリティで可視化してください	visualize_diff_html_content	自動削除付きの Secret Gist

差分をすぐに共有する（GitHub Gist）

visualize_diff_html_content:
- Creates temporary GitHub Gist
- Auto-deletes after 30 minutes
- Instant browser-ready URLs
- Perfect for code reviews

差分をローカルに保存する

visualize_diff_output_file:
- Saves PNG or HTML to local disk
- Auto-opens in browser (optional)
- Perfect for documentation

🎛️ 設定

環境変数

変数	説明	デフォルト
GITHUB_TOKEN	GitHub Personal Access Token（Gist 連携用）	visualize_diff_html_content の実行に必要
DEFAULT_AUTO_OPEN	生成したファイルを自動で開くかどうか	false
DEFAULT_OUTPUT_MODE	デフォルトの出力形式（html または image）	html

GitHub トークンの設定

1. GitHub Settings > Personal Access Tokens に移動します
2. gist スコープを指定して新しいトークンを生成します
3. 環境に追加します：

   export GITHUB_TOKEN="your_token_here"
   

Claude Desktop の設定

macOS：

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

Windows：

code %APPDATA%\Claude\claude_desktop_config.json

設定テンプレート：

{
  "mcpServers": {
    "unified-diff-mcp": {
      "command": "bun",
      "args": ["run", "/path/to/unified-diff-mcp/src/index.ts"],
      "env": {
        "GITHUB_TOKEN": "your_github_token_here",
        "DEFAULT_AUTO_OPEN": "true",
        "DEFAULT_OUTPUT_MODE": "html"
      }
    }
  }
}

📋 パラメーターリファレンス

共通パラメーター

パラメーター	型	デフォルト	説明
diff	string	(必須)	統合形式の差分テキスト
format	string	side-by-side	表示形式（line-by-line または side-by-side）
showFileList	boolean	true	ファイル一覧の概要を表示します
highlight	boolean	true	構文のハイライトを有効にします
oldPath	string	file.txt	元のファイルパス
newPath	string	file.txt	変更後のファイルパス
autoOpen	boolean	false	ブラウザーで自動的に開きます

GitHub Gist 固有のパラメーター

パラメーター	型	デフォルト	説明
expiryMinutes	number	30	自動削除までの時間（1～1440 分）
public	boolean	false	公開 Gist とシークレット Gist の切り替え

ローカルファイル固有のパラメーター

パラメーター	型	デフォルト	説明
outputType	string	html	出力形式（html または image）

🌍 プラットフォームのサポート

プラットフォーム	自動で開く	コマンド
Windows	✅	start（優先）、explorer（フォールバック）
macOS	✅	open（優先）、AppleScript（フォールバック）
Linux	✅	xdg-open

🔧 開発

開発モード（ホットリロード有効）：

{
  "command": "bun",
  "args": ["--watch", "/path/to/unified-diff-mcp/src/index.ts"]
}

本番モード：

{
  "command": "bun",
  "args": ["run", "/path/to/unified-diff-mcp/src/index.ts"]
}

📚 高度な使い方

🔒 強化されたセキュリティレベル

GitHub Token を利用できない場合や、安全に共有したい場合は、複数のセキュリティレベルから選択できます。

セキュリティレベル	設定	機能	用途
🟢 低	シークレット Gist ＋ 60 分後に自動削除	URL のみでアクセス可能	コード例、学習
🟡 中	シークレット Gist ＋ パスワード ＋ 30 分後に自動削除	URL とアクセスコードが必要	チームレビュー
🔴 高	シークレット Gist ＋ パスワード ＋ 15 分後に自動削除	URL、アクセスコード、短い有効期間	機密性の高いコード

使用例

Please visualize this diff with high security:
--- a/config.js
+++ b/config.js
@@ -1,3 +1,4 @@
 const config = {
-  apiKey: 'old-key'
+  apiKey: 'new-secure-key',
+  timeout: 5000
 };

応答例：

🔒 **Secure Diff Visualization**

🔴 **Security Level**: High Security - Secret Gist + Password (15min auto-delete)
📋 **Preview Link**: https://htmlpreview.github.io/?...
🔑 **Access Code**: `a7x9k2`
⏰ **Auto-delete**: 15 minutes

🔄 フォールバック機能

GitHub Token を利用できない場合、システムはローカルファイルにフォールバックします。

• HTML を一時ファイルとして保存します
• ブラウザーを自動的に開きます
• セキュリティに応じてファイルを管理します

詳しいセットアップと統合ガイドについては、以下をご覧ください。

• 🇺🇸 英語：CLAUDE_CODE_INTEGRATION.md
• 🇯🇵 日本語：CLAUDE_CODE_INTEGRATION_JP.md

🤝 対応クライアント

• Claude Desktop（主要）
• Claude Code（CLI）
• VS Code + MCP Extension
• Cline およびその他の MCP クライアント

📄 ライセンス

MIT License — 詳細は LICENSE ファイルをご覧ください。

依存関係

ライブラリ	ライセンス	用途
diff2html	MIT	HTML 差分の生成
playwright-core	Apache 2.0	ブラウザーの自動化
@modelcontextprotocol/sdk	MIT	MCP 統合

---

Claude Desktop コミュニティのために ❤️ を込めて作成