Beautiful HTML and PNG diff visualization using diff2html, designed for filesystem edit_file dry-run output with high-performance Bun runtime.
Beautiful diff visualization for Claude Desktop. Transform code diffs into stunning visual comparisons with GitHub Gist integration and local file output.
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"
}'
git clone https://github.com/gorosun/unified-diff-mcp.git
cd unified-diff-mcp
bun install
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 |
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 |
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
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 |
gist
scopeexport GITHUB_TOKEN="your_token_here"
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"
}
}
}
}
Parameter | Type | Default | Description |
---|---|---|---|
diff | string | (required) | Unified diff text |
format | string | side-by-side | Display format (line-by-line or side-by-side ) |
showFileList | boolean | true | Show file list summary |
highlight | boolean | true | Enable syntax highlighting |
oldPath | string | file.txt | Original file path |
newPath | string | file.txt | Modified file path |
autoOpen | boolean | false | Auto-open in browser |
Parameter | Type | Default | Description |
---|---|---|---|
expiryMinutes | number | 30 | Auto-delete time (1-1440 minutes) |
public | boolean | false | Public vs secret gist |
Parameter | Type | Default | Description |
---|---|---|---|
outputType | string | html | Output format (html or image ) |
Platform | Auto-Open | Commands |
---|---|---|
Windows | ✅ | start (primary), explorer (fallback) |
macOS | ✅ | open (primary), AppleScript (fallback) |
Linux | ✅ | xdg-open |
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"]
}
When GitHub Token isn't available or for secure sharing, you can choose from multiple security levels:
Security Level | Configuration | Features | Use Cases |
---|---|---|---|
🟢 Low | Secret Gist + 60min auto-delete | URL-only access | Code examples, learning |
🟡 Medium | Secret Gist + Password + 30min auto-delete | URL + Access code required | Team reviews |
🔴 High | Secret Gist + Password + 15min auto-delete | URL + Access code + Short duration | Sensitive code |
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
When GitHub Token is unavailable, the system falls back to local files:
For detailed setup and integration guides:
MIT License - see LICENSE file for details.
Library | License | Purpose |
---|---|---|
diff2html | MIT | HTML diff generation |
playwright-core | Apache 2.0 | Browser automation |
@modelcontextprotocol/sdk | MIT | MCP integration |
Made with ❤️ for the Claude Desktop community
Create crafted UI components inspired by the best 21st.dev design engineers.
Connect to any function, any language, across network boundaries using AgentRPC.
ALAPI MCP Tools,Call hundreds of API interfaces via MCP
APIMatic MCP Server is used to validate OpenAPI specifications using APIMatic. The server processes OpenAPI files and returns validation summaries by leveraging APIMatic’s API.
Enable AI agents to interact with the Atla API for state-of-the-art LLMJ evaluation.
Get prescriptive CDK advice, explain CDK Nag rules, check suppressions, generate Bedrock Agent schemas, and discover AWS Solutions Constructs patterns.
Bring the full power of BrowserStack’s Test Platform to your AI tools, making testing faster and easier for every developer and tester on your team.
Flag features, manage company data, and control feature access using Bucket.
Manage Buildkite pipelines and builds.
A Model Context Protocol server for generating visual charts using AntV.