Claude Code Plugin: Record & Narrate Tutorials (2026)

Vorec Team · 2026-03-20 · 7 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 exactly what the Vorec plugin for Claude Code delivers. Install it from the plugin marketplace, describe your tutorial in plain English, and the AI agent records, narrates, and exports a polished tutorial video — all without leaving your IDE.

How It Works

Install in 30 Seconds

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

That is it. No npm packages to manage, 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 AI agent takes over:

You describe what to show. The agent figures out how.

What Makes This Different

Codebase-Aware Recording

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

Smart Authentication

If your tutorial requires a logged-in user, the agent opens a browser window for you to log in manually. No passwords in code, no credentials in config files. It saves the session and uses it for recording. Secure by design.

Six Narration Styles

Choose how your tutorial sounds:

StyleBest For
TutorialEducational walkthroughs for new users
ProfessionalEnterprise product demos and sales enablement
ConversationalInternal team training and knowledge sharing
StorytellingMarketing videos and feature announcements
ConciseQuick-reference guides and tooltips
ExactTechnical documentation and API guides

The agent asks your preference before recording.

Multi-Language Support

When the agent asks about language, pick any supported language. The AI generates narration natively in that language — not translated, but written and spoken as a native speaker would.

The Full Pipeline

Here is what happens behind the scenes when you ask for a tutorial:

1. Codebase Analysis

The agent scans your project to understand the application structure — routes, components, UI elements, and their selectors. This ensures the recording interacts with real elements, not brittle XPath queries.

2. Screen Recording

Playwright launches a Chromium browser at 1080p resolution. The agent performs each action in sequence — clicking buttons, typing in fields, navigating between pages — while recording the screen and tracking every interaction with precise coordinates.

3. Cloud Processing

The recording is uploaded to Vorec's platform where the intelligence engine analyzes the workflow. Because the agent already tracked click coordinates during recording, the analysis is faster and more accurate than processing an unknown video.

4. AI Narration

The engine writes narration for each action segment. The agent provides what is happening (the actions). Vorec's AI provides why it matters (the explanations). This separation produces narration that is both technically accurate and instructionally clear.

5. Voice Generation

Natural-sounding AI voice is generated for each narration segment. Adaptive timing synchronizes the voice with video playback — pausing when explanations need more time, flowing naturally when actions are well-spaced.

6. Editor URL

You get a link to the Vorec editor where the finished tutorial is ready to preview. Make any final adjustments, then export as MP4 or share the link directly.

Use Cases

Product Documentation

Your product ships a new feature. Instead of scheduling a screen recording session, just ask:

"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 polished video in minutes, not a wall of text.

Release Announcements

Every release includes what changed. Instead of writing release notes:

"Record a tutorial showing the three new features we shipped this sprint"

Release notes with video, automatically.

QA-to-Tutorial Pipeline

Your QA team already knows the workflows that need testing. The same 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.

Works with Any Web Framework

The plugin works with any web application that runs in a browser:

If your app runs in a browser, the plugin can record it.

Prerequisites

Before first use, you need three things:

  1. Playwright — `npm install playwright && npx playwright install chromium`
  2. FFmpeg — `brew install ffmpeg` (Mac) or `apt install ffmpeg` (Linux)
  3. Vorec API key — `npx @vorec/cli@latest init` (get your key from Settings → API Keys in the Vorec dashboard)

The plugin checks for these automatically and guides you through any missing prerequisites.

Getting Started

Install the plugin and create your first tutorial in under 5 minutes:

  1. Open Claude Code → `/plugin` → Add marketplace → `MustaphaSteph/vorec-plugins`
  2. Install record-tutorial and enable auto-updates
  3. Run `npx @vorec/cli@latest init` to set up your API key
  4. Ask: "Record a tutorial showing [any feature in your app]"

The AI handles the rest. Your tutorial is ready to share.

← Back to blog