Explain Changes Extension

VS Code / Cursor extension that displays AI-generated code explanations with inline annotations.

Features

• Diff visualization — Side-by-side or unified view powered by diff2html
• Inline annotations — AI explanations appear directly in the diff
• Action buttons — Click to send improvement prompts to Cursor chat
• Workspace-aware — Only activates in the correct project window
• Auto-install MCP — Configures the MCP server automatically on first run

Installation

From VSIX

1. Download .vsix from releases
2. In VS Code/Cursor: Extensions → ... → "Install from VSIX..."
3. Reload the window

The extension automatically adds the MCP server to your Cursor/Windsurf configuration.

From Source

cd packages/extension
npm install
npm run build
npm run package

Then install the generated .vsix file.

Usage

Once installed, the extension:

1. Watches ~/.explain-changes/pending.json for new explanations
2. Opens a webview panel when the MCP server writes new data
3. Displays the diff with syntax highlighting and annotations

Commands

• Explain Changes: Show Panel — Manually open the panel with the last explanation

Deep Links

The extension registers a URI handler:

• cursor://explain-changes.explain-changes-extension/show
• vscode://explain-changes.explain-changes-extension/show

How It Works

MCP Server                    Extension
     │                            │
     │ writes to                  │ watches
     │ ~/.explain-changes/        │ ~/.explain-changes/
     │ pending.json               │ pending.json
     └────────────────────────────┘
                                  │
                                  ▼
                            Webview Panel
                            (diff + annotations)

The MCP server writes a JSON file with:

• title — Panel title
• summary — Overview of changes
• diff — Git diff content
• annotations — Array of explanations with optional actions
• workspacePath — Project path (for workspace filtering)
• editor — "cursor" or "vscode"

The extension watches this file and opens a webview when it changes.

Development

# Build
npm run build

# Watch mode
npm run watch

# Package as .vsix
npm run package

Configuration

The extension auto-configures MCP servers in:

• Cursor: ~/.cursor/mcp.json
• Windsurf: ~/.codeium/windsurf/mcp_config.json

VS Code native MCP support (1.101+) doesn't use file-based config.

License

MIT