Unified Diff MCP Server

Beautiful diff visualization for Claude Desktop. Transform code diffs into stunning visual comparisons with GitHub Gist integration and local file output.

✨ Features

• 🎨 Beautiful HTML diff visualization using diff2html
• 🌐 GitHub Gist integration for instant sharing
• 📁 Local file output (PNG/HTML)
• 🔄 Auto-delete functionality for temporary diffs
• 🖥️ Cross-platform support (Windows, macOS, Linux)
• ⚡ High-performance with Bun runtime
• 🛡️ Enhanced Security with multi-level protection for shared diffs
• 🔒 Multi-level security (Low/Medium/High) for different use cases

🛠️ Tools Overview

📋 Parameters Reference

Common Parameters

GitHub Gist Specific

Local File Specific

🌍 Platform Support

🔧 Development

Development mode (with hot reload):

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

Production mode:

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

🤝 Supported Clients

• Claude Desktop (Primary)
• Claude Code (CLI)
• VS Code + MCP Extension
• Cline and other MCP clients

📄 License

MIT License - see LICENSE file for details.

Dependencies

Made with ❤️ for the Claude Desktop community

🚀 Quick Start

Installing via 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"
}'

Manual Installation

1. Install Claude Desktop and Bun
2. Clone and build:
   Copy

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

3. Configure Claude Desktop - see Configuration below

📖 Usage Examples

🎯 Optimal Prompts by Purpose

Share diff instantly (GitHub Gist)

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

Save diff locally

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

🎛️ Configuration

Environment Variables

GitHub Token Setup

1. Go to GitHub Settings > Personal Access Tokens
2. Generate new token with gist scope
3. Add to your environment:
   Copy

   export GITHUB_TOKEN="your_token_here"

Claude Desktop Configuration

macOS:

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

Windows:

code %APPDATA%\Claude\claude_desktop_config.json

Configuration template:

{
  "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"
      }
    }
  }
}

📚 Advanced Usage

🔒 Enhanced Security Levels

When GitHub Token isn't available or for secure sharing, you can choose from multiple security levels:

Usage Example

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
 };

Response Example:

🔒 **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

🔄 Fallback Functionality

When GitHub Token is unavailable, the system falls back to local files:

• HTML saved as temporary file
• Automatic browser opening
• Security-based file management

For detailed setup and integration guides:

• 🇺🇸 English: CLAUDE_CODE_INTEGRATION.md
• 🇯🇵 日本語: CLAUDE_CODE_INTEGRATION_JP.md