MCP Walkthrough
Provides code walkthroughs for Windsurf (by Codeium), enabling step-by-step code explanations with highlighting and voice narration.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@MCP WalkthroughWalk me through the main function in src/index.ts"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP Walkthrough
An MCP server for interactive code walkthroughs with voice narration. Opens files, highlights code, shows inline explanations with a teleprompter-style bubble, and reads each step aloud using neural text-to-speech.
Works with any MCP client: Claude Code, Cursor, VS Code Copilot, Gemini CLI, Codex CLI, Windsurf.
Install
All clients at once
npx add-mcp walkthrough -- npx -y mcp-walkthroughAuto-detects which AI coding tools you have and configures all of them.
Manual (any client)
Add to your MCP config (mcpServers key):
{
"walkthrough": {
"command": "npx",
"args": ["-y", "mcp-walkthrough"]
}
}Client | Config file |
Claude Code |
|
Cursor |
|
VS Code Copilot |
|
Windsurf |
|
Skill (Claude Code)
npx skills add stefan-nitu/mcp-walkthroughInstalls the walkthrough skill so Claude auto-loads the tools when you ask it to explain code.
Note: Requires VS Code, VS Code Insiders, or Cursor. A companion VS Code extension is automatically installed on
npm install.
Related MCP server: Git Commit Video Walkthrough Generator
What It Does
Text in a terminal isn't enough when an AI explains a solution. MCP Walkthrough opens files in VS Code, highlights specific lines, shows rich markdown explanations, and narrates each step with a natural-sounding voice.
Teleprompter pattern: The explanation bubble builds up as the agent narrates — each highlight's text appends in bold, then unbolds when done. Selection moves through the code in sync with the voice.
Tools
Tool | Description |
walkthrough | One tool for all code presentation — 1 step with |
show_code | Open a file and highlight specific lines — ergonomic shortcut for the no-commentary case |
settings | Global config: voice, bubbles, autoplay, autoplayDelay |
walkthrough_voice_selection | Change narrator voice, audition voices, list available |
get_selection | Read the currently highlighted code in VS Code |
walkthrough
The single entry point for code presentation — dispatches by arguments.
Multi-step narrated tour (N steps):
{
"steps": [
{
"file": "/absolute/path/to/file.ts",
"line": 33,
"endLine": 48,
"title": "Text Preparation",
"explanation": "Intro context — narrated first, shown in bubble.",
"highlights": [
{ "line": 35, "endLine": 36, "narration": "First section explained." },
{ "line": 37, "endLine": 40, "narration": "Second section explained." }
]
}
]
}With highlights (teleprompter):
Bubble shows
explanation— TTS narrates itEach highlight appends
narrationin bold — selection moves to the highlight's linesAfter the last highlight, all text unbolds and navigation controls appear
Without highlights: Simple bubble + full narration of the explanation.
Single-step explain (1 step with explanation): same shape, one entry in steps. Renders one bubble, no tour state.
Highlight only (1 step without explanation): { "steps": [{ "file": "…", "line": 10, "endLine": 15 }] }. Equivalent to show_code.
Navigation: { "action": "next" | "prev" | "goto" | "stop" | "pause" | "resume" }. For goto, pass step (0-based index).
Clear bubbles: { "action": "clear" }.
Status: call with no arguments — returns { active, currentStep, totalSteps, … }.
show_code
Ergonomic single-shot highlight — same as a walkthrough with one step that has no explanation.
{ "file": "/absolute/path/to/file.ts", "line": 10, "endLine": 15 }settings
View or update global config. Changes persist across sessions.
{ "voice": true, "autoplay": false, "autoplayDelay": 2000 }voice — Toggle voice narration on/off
showBubbles — Toggle explanation bubbles on/off
autoplay — Auto-advance to next step after narration finishes
autoplayDelay — Extra delay in ms after narration (additive)
Keyboard Shortcuts
Shown in the explanation bubble after the last highlight:
Shortcut | Action |
| Next step |
| Previous step |
| Stop walkthrough |
How It Works
AI Agent → MCP Server (stdio) → Unix socket → VS Code Extension → Editor API + TTSAgent calls walkthrough tools via MCP
MCP server sends steps to VS Code extension via workspace-specific Unix socket
Extension shows bubbles, moves selection, narrates with TTS (Edge TTS + native fallback)
Each VS Code window gets its own socket — multiple windows work independently
Focus stays in your terminal — code appears in the editor beside it
TTS runs in the VS Code extension, not the MCP server. Keyboard shortcuts trigger the same narration path as MCP tool calls.
Development
bun install
bun test # 88 tests
bun run build # Builds MCP server + VS Code extension
bun run typecheck # Type checking
bun run lint # Biome lintingLocal Testing
MCP server (npm global):
npm run build && npm install -g .VS Code extension:
cd vscode-extension && node esbuild.js
npx @vscode/vsce package --allow-missing-repository -o walkthrough-bridge.vsix
code --install-extension walkthrough-bridge.vsix --forceThen restart VS Code (not just reload — extension code is cached).
License
MIT
Related Projects
Model Context Protocol — MCP specification
MCP TypeScript SDK — SDK used by this server
add-mcp — Install MCP servers across all clients
Available Tools
5 toolsget_selectionA
Get the code the user has selected or highlighted in VS Code — returns file path, line range, and selected text. Use when the user refers to 'this code', 'what I've selected', 'the highlighted block', or before calling walkthrough/show_code when the user has already selected the code they want to discuss. Returns an empty selection object when nothing is highlighted.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the burden of behavioral disclosure. It covers the key edge case by stating it 'returns an empty selection object when nothing is highlighted' and names the return fields. It does not explicitly say the tool has no side effects or describe error behavior, but for a simple getter this is adequate.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is three sentences with the core action first, then user-facing trigger phrases, then the empty-selection edge case. Each sentence adds distinct value, and there is no fluff or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no annotations and no output schema, the description supplies the essential return shape (file path, line range, selected text), the empty case, and clear guidance on when to call it. For a zero-parameter, low-complexity tool, this is complete enough for an agent to invoke and interpret results.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has zero parameters, giving this dimension a baseline of 4. The description correctly focuses on output and usage rather than parameters, and there is no parameter information left undocumented.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb ('Get'), a precise resource ('the code the user has selected or highlighted in VS Code'), and the return payload (file path, line range, selected text). It also positions itself relative to walkthrough/show_code as a prerequisite step, making the tool's function clear even alongside siblings.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives explicit trigger phrases ('this code', 'what I've selected', 'the highlighted block') and a workflow rule ('before calling walkthrough/show_code when the user has already selected the code'). It does not explicitly state when not to use the tool or list alternative conditions, so it falls just short of full guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
settingsA
View or update global walkthrough settings — voice narration on/off, explanation bubbles on/off, autoplay on/off, and autoplay delay. Use when the user asks to enable, disable, or configure any of those, mute/unmute narration, toggle bubbles, or check current settings. Do NOT use to change the narration voice name — use walkthrough_voice_selection for that. Call with no arguments to read current settings. Changes persist across sessions.
| Name | Required | Description | Default |
|---|---|---|---|
| voice | No | Toggle voice narration on/off (true=on, false=off) | |
| autoplay | No | Toggle autoplay on/off | |
| showBubbles | No | Toggle explanation bubbles on/off | |
| autoplayDelay | No | Additive delay in ms on top of reading/TTS time (0 = no extra delay) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the burden of behavioral disclosure. It clearly states the tool both reads and mutates settings, and it adds that 'Changes persist across sessions,' which is valuable side-effect information. It could go further by describing whether omitted parameters are preserved, but it is transparent about the core read/write behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is three focused sentences with the primary action front-loaded. Every clause adds useful information: scope, triggering user intents, the sibling exclusion, the no-argument read behavior, and persistence. There is no repetition of schema details or filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple settings tool with four optional parameters, the description covers purpose, usage, parameter intent, and persistence, and it routes the one overlapping case to the correct sibling. There is no output schema and no mention of the return shape, but an agent can reasonably infer that a read call returns current settings; the remaining ambiguity is minor.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the schema already documents each parameter clearly. The description adds value by mapping user-facing concepts (muting narration, toggling bubbles, autoplay delay) to the settings and by clarifying that invoking with no arguments is a read operation, which the schema alone does not express.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a specific verb and resource: 'View or update global walkthrough settings' and explicitly enumerates the settings involved. It also distinguishes itself from the sibling walkthrough_voice_selection by saying exactly what it is not for, so an agent can select it correctly.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives explicit when-to-use guidance ('Use when the user asks to enable, disable, or configure any of those'), an explicit exclusion ('Do NOT use to change the narration voice name'), and names the alternative tool to use instead. It also states that calling with no arguments reads current settings, giving clear decision rules.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
show_codeA
Open a file in VS Code and highlight specific lines without any explanation bubble. Use when the user asks to show, open, jump to, or point at specific code with no commentary needed. Do NOT use when you need to explain what the code does — use the walkthrough tool with a step that includes an explanation. Do NOT use for multi-step tours — use walkthrough with multiple steps. Line numbers are 1-based; character offsets are 0-based.
| Name | Required | Description | Default |
|---|---|---|---|
| file | Yes | Absolute path to the file | |
| line | Yes | Start line (1-based) | |
| endChar | No | End character (0-based) | |
| endLine | No | End line (1-based) | |
| startChar | No | Start character (0-based) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It clearly states the core behavior: opening a file, highlighting specific lines, and suppressing explanation bubbles. It also discloses the coordinate conventions. It doesn't mention edge cases like missing files or return behavior, but for a read-only editor-open action the disclosed behavior is sufficient.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is compact and front-loaded: the core behavior appears in the first sentence, followed by usage rules, explicit don'ts, and coordinate semantics. Every sentence earns its place and none are redundant with the schema or annotations.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with five parameters, no output schema, and sibling tools that could be confused with it, the description is complete. It explains when to use it, when not to use it, what behavior to expect, and how to interpret the coordinate parameters. There is no significant missing information an agent would need to call it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3. The description adds meaningful value beyond the schema by specifying that line numbers are 1-based and character offsets are 0-based. This clarifies the relationship between start/end lines and start/end chars, which is essential for correct invocation.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb and resource: 'Open a file in VS Code and highlight specific lines.' It clearly differentiates itself from the walkthrough sibling by noting it performs the action 'without any explanation bubble.' An agent can immediately understand what this tool does and how it differs from related tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives explicit when-to-use guidance: 'Use when the user asks to show, open, jump to, or point at specific code with no commentary needed.' It also provides clear exclusions: use walkthrough for explanations and multi-step tours. This leaves no ambiguity about selecting this tool versus siblings.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
walkthroughA
Show, explain, and tour code in VS Code — the one tool for all code presentation with commentary, from single inline explanations to multi-step narrated tours. Use when the user asks to explain code, walk through code, tour a codebase, ask 'how does this work', navigate an active tour, clear bubbles, or check walkthrough state. Do NOT use for jumping to code without commentary — use show_code instead. Dispatches by arguments: one step with explanation shows an inline markdown bubble (single-step explain); one step WITHOUT explanation highlights only (same as show_code); multiple steps start a narrated tour; action: 'clear' removes all bubbles; action in {'next','prev','goto','stop','pause','resume'} navigates an active tour (pass step index for goto); no arguments returns current status. Proper usage for multi-point steps: keep explanation to 1–2 intro sentences and put each point in its own highlights[] entry with its own line range and narration — the teleprompter UX (selection moving with the voice, bubble text building up) depends on this pattern. Cramming multiple points into one long explanation breaks both the audio flow and the visual sync. Never use numbered lists (1. 2.) in explanations or narrations — TTS reads them as 'one dot… two dot' and it's painful. Markdown: real newlines for paragraphs, NOT literal backslash-n; avoid ## headers — use bold instead. Uses global voice/bubble/autoplay settings from the settings tool.
| Name | Required | Description | Default |
|---|---|---|---|
| step | No | Step index (0-based) for action='goto' | |
| steps | No | Steps to show. One step with explanation = inline explain. One step without explanation = highlight only. Multiple steps = narrated tour. Precedence: when provided with a non-empty array, takes priority over `action`. | |
| action | No | Control an active walkthrough or clear bubbles. 'clear' removes all explanation bubbles; 'goto' requires `step`; others navigate the current tour. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full behavioral burden and delivers: arg-dispatch side effects (single-step explain vs highlight-only vs narrated tour vs clear vs navigation), the teleprompter UX dependency on the highlights[] pattern, and the TTS quirk where numbered lists are read as 'one dot… two dot'. It also discloses formatting constraints (real newlines not literal backslash-n, avoid ## headers, use **bold**) and coupling to global voice/bubble/autoplay settings — all beyond what structured fields could express.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Long, but every sentence earns its place — the density reflects six behavioral modes plus critical formatting rules. Front-loaded with purpose, triggers, and the exclusion before diving into dispatch details; the sectioned guidance (multi-point steps, TTS no-numbered-lists, markdown rules) is compact and directly actionable with zero filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool this complex — three params, six action modes, a nested highlights structure, no output schema, no annotations — nothing needed for correct invocation is missing: entry conditions, exclusions, formatting rules, settings coupling, and status-on-no-args are all present. The only minor gap, explicit return-format details beyond the no-args status, is low-risk since the tool's effects are primarily visual/audible UI state.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with unusually detailed per-property descriptions, so baseline is 3. The description adds meaning by synthesizing parameters into a behavior matrix (one step with explanation = explain; one without = highlight; multiple = tour) and by prescribing usage patterns ('keep explanation to 1–2 intro sentences… put each point in its own highlights[] entry'). It supplements `step` with 'pass step index for goto' and maps the full action enum to behaviors, though the schema already documents individual properties.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Opens with a specific verb+resource+scope ('Show, explain, and tour code in VS Code') and frames itself as the one tool for code presentation with commentary. Explicitly names its sibling as the alternative for commentary-free jumps: 'Do NOT use for jumping to code without commentary — use show_code instead.' An agent can distinguish it from show_code without opening the schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Lists concrete trigger phrases ('explain code, walk through code, tour a codebase, ask how does this work, navigate an active tour, clear bubbles, or check walkthrough state') so an agent knows exactly when to fire it. Provides an explicit exclusion and names the sibling alternative (show_code). The dispatch matrix further tells the agent which argument shape to choose per intent.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
walkthrough_voice_selectionA
Change the narration voice, preview how it sounds, list available voices, or audition voices back-to-back. Use when the user asks to change the voice, try a different voice, hear voice options, compare voices, or asks 'what voices are available'. Do NOT use to toggle voice on/off — use the settings tool for that. Pass voice to switch to a specific voice and hear a sample. Pass list: true to list voices without playing audio. Pass audition: true to play voices back-to-back for comparison. Filter with locale (e.g. 'en-US', 'en', 'de') and gender. Voice selection persists across sessions.
| Name | Required | Description | Default |
|---|---|---|---|
| list | No | List available voices without playing them | |
| voice | No | Voice name to switch to. Examples: 'en-US-GuyNeural', 'en-US-MichelleNeural' | |
| gender | No | Filter by gender | |
| locale | No | Filter by locale prefix (e.g. 'en-US', 'en', 'de') | |
| audition | No | Play voices back-to-back so the user can compare |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the behavioral burden. It discloses that passing `voice` switches to a specific voice and plays a sample, `list: true` avoids playing audio, `audition: true` plays voices back-to-back, and that voice selection persists across sessions. It does not mention side effects like requiring an active walkthrough or network usage, but covers the main state-changing and persistence behaviors well.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is appropriately sized and front-loaded with the core actions, then the usage triggers and exclusions, then parameter guidance. Every sentence carries useful signal without redundancy or irrelevant detail. The structure flows from high-level purpose to specific parameter behavior.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with 5 parameters and no output schema, the description covers the key decision points: what each parameter does, when to use the tool, and a critical exclusion (toggle vs. settings). The only minor gap is not describing the shape of the response (e.g., what the list output contains), but the parameter list and examples make it largely inferable.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the schema already documents each parameter. The description adds value by linking parameters to high-level intents (e.g., 'Pass `list: true` to list voices without playing audio') and by giving examples of locale prefixes and voice names. It reinforces and clarifies, though it does not introduce entirely new parameter meaning beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific operations: change the narration voice, preview it, list available voices, and audition voices back-to-back. It names the resource (narration voice) and distinct actions. It also differentiates from the settings tool by explicitly saying 'Do NOT use to toggle voice on/off'.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit usage conditions: use when the user asks to change the voice, try a different voice, hear voice options, compare voices, or asks 'what voices are available'. It also states a clear exclusion (use settings tool for toggling) and explains when to pass `voice`, `list: true`, `audition: true`, `locale`, and `gender`. This is outstanding guidance for an agent.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
5 tool updates
v0.4.0- First observed
get_selection - First observed
settings - First observed
show_code - First observed
walkthrough - First observed
walkthrough_voice_selection
TDQS
Scored across 5 tools
Most tools have clearly separated roles: get_selection feeds input, show_code handles no-commentary jumps, settings manages toggles, and walkthrough_voice_selection handles voices. The only real overlap is between show_code and walkthrough's one-step no-explanation mode, but the descriptions give explicit do-not-use rules that resolve it.
show_code and get_selection follow verb_noun style, while walkthrough and settings are bare nouns, and walkthrough_voice_selection is an awkward noun phrase rather than a verb action. The mixed conventions make it harder to predict tool names.
Five tools is a well-scoped count for this focused VS Code walkthrough server. Each tool covers a distinct functional area without unnecessary bulk or missing core capabilities.
The set covers the full workflow: get user selection, show code, explain/walk through code, run multi-step tours, navigate/clear tours, configure settings, and change voices. There are no obvious dead ends or missing operations for the apparent domain.
Maintenance
Related MCP Connectors
Comment on AI-generated webpages; feedback flows back to your coding agent. Free, MIT, local-first.
Coding agents build full-stack apps in persistent workspaces and share them by link.
AI-powered spec-to-task decomposition and execution orchestration for coding agents.
Codebase graphs, caller impact analysis, and recorded project context for AI coding agents.
Related MCP Servers
- FlicenseNot gradedqualityAmaintenanceEnables coding agents to speak aloud using text-to-speech functionality. Works with agents running inside devcontainers and provides configurable voice settings for creating chatty AI companions.5-
- FlicenseNot gradedqualityDmaintenanceGenerates narrated video walkthroughs of git commits, staged/unstaged changes, or entire codebases with AI-powered analysis, syntax-highlighted code visualization, and text-to-speech narration.-
- AlicenseNot gradedqualityBmaintenanceEnables AI coding agents to capture screen and voice recordings, extract timestamped frames, and receive structured Markdown reports with context for bug fixing and UI feedback.17 npm18MIT

Flowcastofficial
FlicenseNot gradedqualityCmaintenanceTurn your AI coding agent into a producer of interactive, narrated walkthroughs — code, whiteboard, and 3D casts, each a single self-contained HTML file that opens in any browser. Runs locally over npx.1-