JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 567
  • Score
    100M100P100Q103854F
  • License MIT

Turn screen recordings into narrated tutorials — CLI for AI coding agents

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vorec/cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    @vorec/cli

    Turn any web app into a narrated tutorial video. Record your screen, track user actions, and let AI generate professional voice-over narration automatically.

    What It Does

    • Records your web app in 1080p using Playwright
    • Tracks every click, keystroke, and navigation with precise coordinates
    • Converts to MP4 and uploads to Vorec
    • AI analyzes the video and writes natural narration
    • Generates voice-over audio in multiple languages and styles
    • Returns an editor URL to preview, adjust, and export

    Quick Start

    npx @vorec/cli@latest init
npx @vorec/cli@latest run vorec.json --auto

    Requirements

    • Node.js 18+
    • Playwright — npm install playwright && npx playwright install chromium
    • FFmpeg — brew install ffmpeg (macOS) or apt install ffmpeg (Linux)
    • Vorec API key — create one at vorec.ai → Settings → API Keys

    Manifest Format

    Create a vorec.json file describing the actions to record:

    {
  "title": "How to create a project",
  "url": "http://localhost:3000/dashboard",
  "viewport": { "width": 1920, "height": 1080 },
  "language": "en",
  "narrationStyle": "tutorial",
  "actions": [
    { "type": "click", "selector": "button.new-project", "description": "Open the create dialog" },
    { "type": "type", "selector": "#name", "text": "My Project", "description": "Enter the project name" },
    { "type": "click", "selector": "button[type=submit]", "description": "Save the project" }
  ]
}

    Commands

    Command What it does
    vorec init Save your API key
    vorec run <manifest> Record and upload
    vorec run <manifest> --auto Record, upload, and generate narration
    vorec run <manifest> --auto --skip-record Resume an existing project
    vorec upload <video> Upload a video file directly
    vorec status Check project status

    Narration Styles

    Style Tone
    tutorial Step-by-step, clear, helpful
    professional Polished, enterprise-ready
    conversational Casual, like explaining to a colleague
    storytelling Engaging, narrative-driven
    concise Minimal, just the essentials
    exact Neutral, factual, technical

    Claude Code Plugin

    For the best experience, install the Vorec plugin for Claude Code. Your AI agent will research the codebase, generate the manifest, and run the CLI automatically.

    1. In Claude Code, run /plugin
2. Go to Marketplaces → Add Marketplace
3. Enter: MustaphaSteph/vorec-plugins
4. Select record-tutorial and install it
5. Enable auto-update

    Then just say: "record a tutorial showing how to create a project"