gorosun/unified-diff-mcp

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
🚀 Quick Start
Installing via Smithery
Manual Installation
1. **Install Claude Desktop** and **Bun**
2. **Clone and build:**
3. **Configure Claude Desktop** - see Configuration below
🛠️ Tools Overview
| Tool | Purpose | Output | Best For |
|------|---------|--------|----------|
| **visualize_diff_html_content** | Browser display & sharing | GitHub Gist + HTML preview URL | Quick sharing, instant viewing |
| **visualize_diff_output_file** | Local file storage | PNG/HTML files | Local storage, presentations |
📖 Usage Examples
🎯 Optimal Prompts by Purpose
| Purpose | Recommended Prompt | Tool Used | Output |
|---------|-------------------|-----------|--------|
| **Quick Preview** | Please visualize and preview the following diff: 以下のdiffを可視化してプレビューしてください | visualize_diff_html_content | GitHub Gist + HTML preview URL |
| **Local Storage** | Please visualize and save the following diff to a file: 以下のdiffを可視化してファイルに保存してください | visualize_diff_output_file | Local HTML/PNG file |
| **Share with Others** | Please visualize the following diff and create a shareable link: 以下のdiffを可視化して共有リンクを作成してください | visualize_diff_html_content | GitHub Gist with shareable URL |
| **Image Export** | Please visualize and save the following diff as a PNG image: 以下のdiffを可視化してPNG画像で保存してください | visualize_diff_output_file | Local PNG image |
| **Code Review** | Please visualize the following diff in side-by-side format: 以下のdiffをside-by-side形式で可視化してください | Either tool | Side-by-side comparison |
| **Documentation** | Please visualize and save the following diff as an HTML file: 以下のdiffを可視化してHTMLファイルで保存してください | visualize_diff_output_file | Local HTML file |
| **🔒 Secure Sharing** | Please visualize this diff with high security: 以下のdiffを高セキュリティで可視化してください | visualize_diff_html_content | Secret Gist with auto-delete |
Share diff instantly (GitHub Gist)
Save diff locally
🎛️ Configuration
Environment Variables
| Variable | Description | Default |
|----------|-------------|---------|
| GITHUB_TOKEN | GitHub Personal Access Token (for Gist integration) | Required for visualize_diff_html_content |
| DEFAULT_AUTO_OPEN | Auto-open generated files | false |
| DEFAULT_OUTPUT_MODE | Default output format (html or image) | html |
GitHub Token Setup
1. Go to GitHub Settings > Personal Access Tokens
2. Generate new token with gist scope
3. Add to your environment:
Claude Desktop Configuration
**macOS:**
**Windows:**
**Configuration template:**
📋 Parameters Reference
Common Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|