Claude Code Plugin: Record & Narrate Tutorials (2026)

Vorec Team · 2026-03-20 · About 5 min read

Tutorial Videos, the Developer Way

Developers do not want to open a browser, upload a file, click through a UI, and wait. They want to describe what they need and get a result.

That is what the Vorec plugin for Claude Code delivers. Install it from the plugin marketplace, describe your tutorial in plain English, and the agent drives the Vorec Recorder to capture the workflow on your own machine. You review the take. Only then does anything upload.

How It Works

Install in 30 Seconds

Open Claude Code and type `/plugin`
Go to Marketplaces → Add Marketplace
Enter: `MustaphaSteph/vorec-plugins`
Install the record-tutorial plugin
Enable auto-updates

That is it. No config files to write.

Just Ask

Once installed, describe the tutorial you want in natural language:

"Record a tutorial showing how to create a new project in our app"

The agent takes over:

Scans your codebase to find the right UI selectors
Writes a manifest describing each action to perform
Drives the Vorec Recorder to capture your screen, clicks, keystrokes and cursor path
Writes an MP4 and an action sidecar to your local disk — nothing uploads at this stage
Waits for you to review the take
Uploads and narrates only when you run the analyze step
Returns an editor URL where you can preview, polish and export

You describe what to show. The agent figures out how. You keep the final say on whether the take is good enough to use.

Nothing Uploads Until You Approve It

This is the part most automated recording tools get wrong, so it is worth stating plainly.

`vorec run` records locally. It writes an MP4 and a sidecar file of tracked actions to your disk, spends no credits, and sends nothing to any server. If the recording caught a bad state, a stray notification, or the wrong account, you delete it and run it again. Nothing left your machine.

`vorec analyze <mp4>` is the separate, deliberate step that uploads the take you approved and generates narration from it.

A retake costs you nothing but time.

What Makes This Different

Codebase-Aware Recording

The agent reads your actual source code — components, routes, selectors — before recording. It does not guess at CSS selectors or hardcode element paths. It uses real selectors from your codebase.

Native Screen Capture

Recording runs through the Vorec Recorder for macOS, which captures the screen with ScreenCaptureKit and tracks clicks, keystrokes and the cursor path natively. Because the actions are tracked during capture, narration is written from a known action timeline rather than inferred from an unfamiliar video.

Authentication Stays Yours

If your tutorial requires a logged-in user, you sign in yourself in the browser the agent drives. No passwords in code, no credentials in config files. For flows that need a persistent session, `vorec run --profile <dir>` reuses a Chrome profile across takes.

Narration Style and Language

The manifest takes a `narrationStyle` field, and `vorec analyze --narration-style <style>` overrides it per run. Language works the same way: set `language` in the manifest or pass `--language <code>` to analyze. Narration is generated in supported languages on the plans that include translation — check your plan before promising a localized version to anyone.

The Full Pipeline

1. Codebase Analysis

The agent scans your project to understand structure — routes, components, UI elements and their selectors — so the recording interacts with real elements rather than brittle XPath queries.

2. Local Screen Recording

The Vorec Recorder captures the screen while the agent injects each action in sequence — clicking buttons, typing in fields, navigating between pages — tracking every interaction with precise coordinates. Output is an MP4 plus an action sidecar, on your disk.

3. Your Review

You watch the take. Good ones go forward. Bad ones get deleted and re-recorded for free.

4. Upload and Analysis

`vorec analyze` uploads the approved recording. Because the agent already tracked click coordinates during capture, analysis works from that action timeline instead of re-deriving it from the video.

5. Narration and Voice

The engine writes narration for each action segment — the agent supplied what is happening, Vorec's AI supplies why it matters — then generates the voice-over. Freeze-Sync can hold a frame when an explanation needs more room than the gap between two actions.

6. Editor URL

You get a link to the Vorec editor where the tutorial is ready to preview. Add cursor-follow zoom, callouts or captions, then export as MP4 or share the link. The same capture can also produce a written step-by-step guide.

Use Cases

Product Documentation

Your product ships a new feature. Instead of scheduling a recording session:

"Record a tutorial showing how to use the new bulk import feature"

Documentation ships with the feature, not weeks later.

Developer Onboarding

New team member joins. Instead of a senior engineer spending 30 minutes on a screen share:

"Record a tutorial showing how to set up the development environment and run the app locally"

The tutorial is reusable for every new hire.

Customer Tutorials

A customer asks how to configure a specific integration:

"Record a tutorial showing how to connect the Slack integration and set up notifications"

Send them a video instead of a wall of text.

QA-to-Tutorial Pipeline

The workflows that need testing are the workflows that need tutorials:

"Record a tutorial showing the checkout flow including coupon code entry"

Test coverage becomes documentation coverage.

What You Need

The plugin records on macOS. Before the first run:

Vorec Recorder for macOS — download from vorec.ai/download, sign in, and grant Screen Recording and Accessibility permissions
cliclick — `brew install cliclick`, used to inject actions during recording
Node.js 18+
CLI authentication — `npx @vorec/cli@latest login`

Then `npx @vorec/cli@latest check` verifies the recorder is ready before you record anything.

Because capture happens at the screen level rather than inside a browser engine, the recorder is not limited to one framework — React, Vue, Svelte, Angular or plain HTML all record the same way.

Getting Started

Open Claude Code → `/plugin` → Add marketplace → `MustaphaSteph/vorec-plugins`
Install record-tutorial and enable auto-updates
Install the Recorder and cliclick, then run `npx @vorec/cli@latest login`
Run `npx @vorec/cli@latest check`
Ask: "Record a tutorial showing [any feature in your app]"

Review the take. Approve it. The narration writes itself.

← Back to blog