Beautiful diff visualization for Claude Desktop. Transform code diffs into stunning visual comparisons with GitHub Gist integration and local file output. - 🎨 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) - ⚡
Add this skill
npx mdskills install gorosun/unified-diff-mcpWell-documented MCP server for beautiful diff visualization with GitHub Gist sharing and local file output
1# Unified Diff MCP Server23[](https://smithery.ai/server/@gorosun/unified-diff-mcp)45Beautiful diff visualization for Claude Desktop. Transform code diffs into stunning visual comparisons with GitHub Gist integration and local file output.67<img src="examples/screenshot.png" alt="Unified Diff Visualization Screenshot" width="800" style="max-width: 100%; height: auto;">89## ✨ Features1011- 🎨 **Beautiful HTML diff visualization** using diff2html12- 🌐 **GitHub Gist integration** for instant sharing13- 📁 **Local file output** (PNG/HTML)14- 🔄 **Auto-delete functionality** for temporary diffs15- 🖥️ **Cross-platform support** (Windows, macOS, Linux)16- ⚡ **High-performance** with Bun runtime17- 🛡️ **Enhanced Security** with multi-level protection for shared diffs18- 🔒 **Multi-level security** (Low/Medium/High) for different use cases1920## 🚀 Quick Start2122### Installing via Smithery2324```bash25bunx @smithery/cli install @gorosun/unified-diff-mcp --client claude --config '{26 "defaultAutoOpen": true,27 "defaultOutputMode": "html",28 "githubUsername": "your_actual_github_username",29 "githubToken": "ghp_your_actual_token_here"30}'31```3233### Manual Installation34351. **Install [Claude Desktop](https://claude.ai/download)** and **[Bun](https://bun.sh)**362. **Clone and build:**37 ```bash38 git clone https://github.com/gorosun/unified-diff-mcp.git39 cd unified-diff-mcp40 bun install41 ```423. **Configure Claude Desktop** - see [Configuration](#configuration) below4344## 🛠️ Tools Overview4546| Tool | Purpose | Output | Best For |47|------|---------|--------|----------|48| **`visualize_diff_html_content`** | Browser display & sharing | GitHub Gist + HTML preview URL | Quick sharing, instant viewing |49| **`visualize_diff_output_file`** | Local file storage | PNG/HTML files | Local storage, presentations |5051## 📖 Usage Examples5253### 🎯 Optimal Prompts by Purpose5455| Purpose | Recommended Prompt | Tool Used | Output |56|---------|-------------------|-----------|--------|57| **Quick Preview** | `Please visualize and preview the following diff:`<br>`以下のdiffを可視化してプレビューしてください` | `visualize_diff_html_content` | GitHub Gist + HTML preview URL |58| **Local Storage** | `Please visualize and save the following diff to a file:`<br>`以下のdiffを可視化してファイルに保存してください` | `visualize_diff_output_file` | Local HTML/PNG file |59| **Share with Others** | `Please visualize the following diff and create a shareable link:`<br>`以下のdiffを可視化して共有リンクを作成してください` | `visualize_diff_html_content` | GitHub Gist with shareable URL |60| **Image Export** | `Please visualize and save the following diff as a PNG image:`<br>`以下のdiffを可視化してPNG画像で保存してください` | `visualize_diff_output_file` | Local PNG image |61| **Code Review** | `Please visualize the following diff in side-by-side format:`<br>`以下のdiffをside-by-side形式で可視化してください` | Either tool | Side-by-side comparison |62| **Documentation** | `Please visualize and save the following diff as an HTML file:`<br>`以下のdiffを可視化してHTMLファイルで保存してください` | `visualize_diff_output_file` | Local HTML file |63| **🔒 Secure Sharing** | `Please visualize this diff with high security:`<br>`以下のdiffを高セキュリティで可視化してください` | `visualize_diff_html_content` | Secret Gist with auto-delete |6465### Share diff instantly (GitHub Gist)66```67visualize_diff_html_content:68- Creates temporary GitHub Gist69- Auto-deletes after 30 minutes70- Instant browser-ready URLs71- Perfect for code reviews72```7374### Save diff locally75```76visualize_diff_output_file:77- Saves PNG or HTML to local disk78- Auto-opens in browser (optional)79- Perfect for documentation80```8182## 🎛️ Configuration8384### Environment Variables8586| Variable | Description | Default |87|----------|-------------|---------|88| `GITHUB_TOKEN` | GitHub Personal Access Token (for Gist integration) | Required for `visualize_diff_html_content` |89| `DEFAULT_AUTO_OPEN` | Auto-open generated files | `false` |90| `DEFAULT_OUTPUT_MODE` | Default output format (`html` or `image`) | `html` |9192### GitHub Token Setup93941. Go to [GitHub Settings > Personal Access Tokens](https://github.com/settings/tokens)952. Generate new token with `gist` scope963. Add to your environment:97 ```bash98 export GITHUB_TOKEN="your_token_here"99 ```100101### Claude Desktop Configuration102103**macOS:**104```bash105code ~/Library/Application\ Support/Claude/claude_desktop_config.json106```107108**Windows:**109```bash110code %APPDATA%\Claude\claude_desktop_config.json111```112113**Configuration template:**114```json115{116 "mcpServers": {117 "unified-diff-mcp": {118 "command": "bun",119 "args": ["run", "/path/to/unified-diff-mcp/src/index.ts"],120 "env": {121 "GITHUB_TOKEN": "your_github_token_here",122 "DEFAULT_AUTO_OPEN": "true",123 "DEFAULT_OUTPUT_MODE": "html"124 }125 }126 }127}128```129130## 📋 Parameters Reference131132### Common Parameters133134| Parameter | Type | Default | Description |135|-----------|------|---------|-------------|136| `diff` | string | *(required)* | Unified diff text |137| `format` | string | `side-by-side` | Display format (`line-by-line` or `side-by-side`) |138| `showFileList` | boolean | `true` | Show file list summary |139| `highlight` | boolean | `true` | Enable syntax highlighting |140| `oldPath` | string | `file.txt` | Original file path |141| `newPath` | string | `file.txt` | Modified file path |142| `autoOpen` | boolean | `false` | Auto-open in browser |143144### GitHub Gist Specific145146| Parameter | Type | Default | Description |147|-----------|------|---------|-------------|148| `expiryMinutes` | number | `30` | Auto-delete time (1-1440 minutes) |149| `public` | boolean | `false` | Public vs secret gist |150151### Local File Specific152153| Parameter | Type | Default | Description |154|-----------|------|---------|-------------|155| `outputType` | string | `html` | Output format (`html` or `image`) |156157## 🌍 Platform Support158159| Platform | Auto-Open | Commands |160|----------|-----------|----------|161| **Windows** | ✅ | `start` (primary), `explorer` (fallback) |162| **macOS** | ✅ | `open` (primary), AppleScript (fallback) |163| **Linux** | ✅ | `xdg-open` |164165## 🔧 Development166167**Development mode (with hot reload):**168```json169{170 "command": "bun",171 "args": ["--watch", "/path/to/unified-diff-mcp/src/index.ts"]172}173```174175**Production mode:**176```json177{178 "command": "bun",179 "args": ["run", "/path/to/unified-diff-mcp/src/index.ts"]180}181```182183## 📚 Advanced Usage184185### 🔒 Enhanced Security Levels186187When GitHub Token isn't available or for secure sharing, you can choose from multiple security levels:188189| Security Level | Configuration | Features | Use Cases |190|---------|---------|--------|--------|191| **🟢 Low** | Secret Gist + 60min auto-delete | URL-only access | Code examples, learning |192| **🟡 Medium** | Secret Gist + Password + 30min auto-delete | URL + Access code required | Team reviews |193| **🔴 High** | Secret Gist + Password + 15min auto-delete | URL + Access code + Short duration | Sensitive code |194195### Usage Example196```197Please visualize this diff with high security:198--- a/config.js199+++ b/config.js200@@ -1,3 +1,4 @@201 const config = {202- apiKey: 'old-key'203+ apiKey: 'new-secure-key',204+ timeout: 5000205 };206```207208**Response Example**:209```210🔒 **Secure Diff Visualization**211212🔴 **Security Level**: High Security - Secret Gist + Password (15min auto-delete)213📋 **Preview Link**: https://htmlpreview.github.io/?...214🔑 **Access Code**: `a7x9k2`215⏰ **Auto-delete**: 15 minutes216```217218### 🔄 Fallback Functionality219220When GitHub Token is unavailable, the system falls back to local files:221- HTML saved as temporary file222- Automatic browser opening223- Security-based file management224225For detailed setup and integration guides:226227- 🇺🇸 **English**: [CLAUDE_CODE_INTEGRATION.md](CLAUDE_CODE_INTEGRATION.md)228- 🇯🇵 **日本語**: [CLAUDE_CODE_INTEGRATION_JP.md](CLAUDE_CODE_INTEGRATION_JP.md)229230## 🤝 Supported Clients231232- **Claude Desktop** (Primary)233- **Claude Code** (CLI)234- **VS Code + MCP Extension**235- **Cline** and other MCP clients236237## 📄 License238239MIT License - see [LICENSE](LICENSE) file for details.240241### Dependencies242243| Library | License | Purpose |244|---------|---------|---------|245| **diff2html** | MIT | HTML diff generation |246| **playwright-core** | Apache 2.0 | Browser automation |247| **@modelcontextprotocol/sdk** | MIT | MCP integration |248249---250251**Made with ❤️ for the Claude Desktop community**252
Full transparency — inspect the skill content before installing.