ExplainWatch
Generate documentary-style videos explaining your code changes with AI narration.
Record your coding sessions, then generate technical explainer videos with:
- 🎯 3-pass explanations: Story → Change Impact → Line-level walkthrough
- 🔍 Focused code display: Shows only the function being discussed
- 🎙️ AI narration: Technical explanations with ElevenLabs voice
- 📝 Synced subtitles: Whisper-based subtitle generation
Quick Start
- Install the extension from VS Code Marketplace
- Get free API keys:
- Groq - For code analysis (free tier available)
- ElevenLabs - For voice narration (free tier: 10k chars/month)
- Add keys to VS Code settings:
Ctrl+, → search "explainwatch"
- Start recording:
Ctrl+Shift+P → "ExplainWatch: Start Recording"
- Make code changes
- Generate video:
Ctrl+Shift+P → "ExplainWatch: Generate Video"
Features
🎬 Recording & Capture
- File watching - Captures all code changes with diffs
- Agent message capture - Hooks into Cursor, Windsurf, Copilot to capture AI conversations
- Intent alignment - Links AI agent intents to actual code changes
- Tool call tracking - Records what the AI agent did and why
💬 Ask Follow-Up
- Right-click any code → "Ask About This Change"
- Get AI-powered explanations grounded in actual diffs
- Evidence-based answers with file/line references
- Works with or without OpenAI API key (fallback mode)
📊 Timeline View
- Real-time event stream in sidebar
- Color-coded event types (file changes, agent messages, commands)
- Jump to file on click
- Inline follow-up questions
🎥 Video Generation
- Generate documentary-style videos from sessions
- Integrates with ExplainWatch CLI
Installation
- Build the extension:
cd vscode-extension
npm install
npm run build
- Install in VS Code:
- Open VS Code
- Press
Ctrl+Shift+P → "Extensions: Install from VSIX..."
- Or run
code --install-extension explainwatch-2.0.0.vsix
Usage
Start Recording
- Open a workspace
- Click the ExplainWatch icon in the activity bar
- Click the record button or run "ExplainWatch: Start Recording"
Ask Follow-Up Questions
- Select code in the editor
- Right-click → "ExplainWatch: Ask About This Change"
- Type your question
- Get a grounded answer with evidence
Generate Video
- Run "ExplainWatch: Generate Video"
- Select a recorded session
- Video is generated using the CLI tool
Configuration
| Setting |
Description |
Default |
explainwatch.groqApiKey |
Required - Groq API key for code analysis |
"" |
explainwatch.elevenlabsApiKey |
ElevenLabs API key for voice narration |
"" |
explainwatch.autoRecord |
Auto-start recording on workspace open |
false |
explainwatch.captureAgentMessages |
Capture AI agent messages |
true |
explainwatch.outputDirectory |
Session data directory |
.explainwatch |
explainwatch.openaiApiKey |
OpenAI API key for follow-up questions |
"" |
explainwatch.ignorePatterns |
Additional file patterns to ignore |
[] |
Agent Integration
The extension attempts to capture messages from:
- Cursor - Hooks into Cursor's chat API if available
- Windsurf/Codeium - Hooks into Windsurf's message events
- GitHub Copilot - Detects Copilot-assisted edits
- Claude - Detects Claude-assisted edits
Even without direct API access, the extension:
- Detects large code insertions (likely AI-generated)
- Infers intent from code patterns
- Links changes to nearby agent activity
Commands
| Command |
Description |
explainwatch.startRecording |
Start recording session |
explainwatch.stopRecording |
Stop recording session |
explainwatch.showTimeline |
Show timeline view |
explainwatch.askFollowUp |
Ask about selected code |
explainwatch.generateVideo |
Generate video from session |
explainwatch.exportTimeline |
Export session as JSON |
Architecture
src/
├── extension.ts # Entry point, command registration
├── types/
│ └── events.ts # Event schemas with agent message support
├── session/
│ └── session-manager.ts # File watching, event storage
├── capture/
│ └── agent-capture.ts # AI agent message capture
├── views/
│ ├── timeline-view.ts # Webview timeline panel
│ └── sessions-tree.ts # Session list tree view
└── followup/
└── followup-provider.ts # OpenAI-powered Q&A
Requirements
- VS Code 1.85+
- Node.js 18+
- ExplainWatch CLI (for video generation)
- OpenAI API key (optional, for enhanced follow-ups)
License
MIT
| |
