CodeVideo MCP Server

CodeVideo MCP Server is a Model Context Protocol server that enables AI assistants to generate coding videos and tutorials automatically. Built by FullStack Craft LLC, this server transforms your code into engaging educational content with professional video output.

Installation

The CodeVideo MCP Server can be easily installed across all major MCP clients and development environments. Choose your preferred installation method below:

Core Features

Key Capabilities

Video Generation

• Code-to-Video: Transform static code into dynamic video content
• Step-by-Step Tutorials: Break down complex code into digestible video segments
• Interactive Annotations: Add explanations and callouts to code sections
• Professional Output: High-quality video generation suitable for educational content

Integration Features

• MCP Protocol: Seamless integration with Claude Desktop, Cursor, and other MCP clients
• IDE Integration: Works with popular development environments
• Real-time Processing: Generate videos on-demand during development
• Batch Processing: Process multiple code files or projects simultaneously

Use Cases

Educational Content Creation

// Example: Creating a tutorial video for a React component
function TodoList({ todos, onToggle }) {
  return (
    <ul className="todo-list">
      {todos.map(todo => (
        <li key={todo.id} onClick={() => onToggle(todo.id)}>
          <span className={todo.completed ? 'completed' : ''}>
            {todo.text}
          </span>
        </li>
      ))}
    </ul>
  );
}

Code Review Videos

# Example: Generating explanation video for algorithm implementation
def binary_search(arr, target):
    left, right = 0, len(arr) - 1
    
    while left <= right:
        mid = (left + right) // 2
        if arr[mid] == target:
            return mid
        elif arr[mid] < target:
            left = mid + 1
        else:
            right = mid - 1
    
    return -1

Documentation Enhancement

• API Documentation: Create video examples for API usage
• Feature Walkthroughs: Generate videos showing new feature implementations
• Bug Fix Explanations: Document fixes with visual code explanations
• Onboarding Content: Create developer onboarding videos

Available Tools

The CodeVideo MCP Server provides several tools for video generation:

generate_video

Create a video from code snippets with customizable options:

• code: The source code to visualize
• language: Programming language for syntax highlighting
• theme: Visual theme (dark, light, high-contrast)
• duration: Video duration in seconds
• annotations: Add explanatory text overlays

create_tutorial

Generate step-by-step tutorial videos:

• steps: Array of code changes to demonstrate
• title: Tutorial title and description
• voice_over: Enable AI narration
• interactive: Create interactive web version

record_session

Capture live coding sessions:

• project_path: Path to project directory
• filter_files: File types to include in recording
• auto_edit: Enable intelligent editing
• output_format: Video output format

Configuration

The server can be configured with various options:

{
  "video_quality": "1080p",
  "frame_rate": 30,
  "theme": "dark",
  "font_family": "Fira Code",
  "font_size": 14,
  "enable_voice": true,
  "voice_speed": 1.0,
  "output_directory": "./videos"
}

Getting Started

Basic Video Generation

1. Install the server in your preferred MCP client
2. Open your code editor and select the code you want to convert
3. Ask your AI assistant: "Generate a video tutorial for this code using CodeVideo"
4. Customize the output with themes, annotations, and narration options

Example Prompts

• "Create a video explaining this function step by step"
• "Generate a tutorial showing how this algorithm works"
• "Make a video walkthrough of this React component"
• "Record a coding session for this bug fix"

Advanced Features

Custom Themes

Create custom visual themes for your videos:

{
  "theme": "custom",
  "colors": {
    "background": "#1e1e1e",
    "foreground": "#d4d4d4",
    "keywords": "#569cd6",
    "strings": "#ce9178",
    "comments": "#6a9955"
  }
}

Batch Processing

Process multiple files or entire projects:

# Generate videos for all JavaScript files in a directory
codevideo-mcp batch --input ./src --pattern "*.js" --output ./videos

Integration with CI/CD

Automate video generation in your development workflow:

# GitHub Actions example
- name: Generate Code Videos
  run: |
    npx @fullstackcraftllc/codevideo-mcp generate \
      --input "./src" \
      --output "./docs/videos" \
      --format "mp4"

Output Formats

Video Formats

• MP4: Standard video format for sharing and embedding
• WebM: Web-optimized format for browser playback
• GIF: Animated format for quick previews
• MOV: High-quality format for professional use

Interactive Formats

• HTML: Interactive web-based tutorials
• JSON: Structured data for custom players
• SCORM: E-learning compatible packages

Performance

Optimization Features

• GPU Acceleration: Utilize hardware acceleration when available
• Parallel Processing: Generate multiple videos simultaneously
• Caching: Reuse generated assets for faster processing
• Compression: Optimize file sizes without quality loss

System Requirements

• Node.js: Version 18 or higher
• Memory: 4GB RAM minimum (8GB recommended)
• Storage: 1GB free space for temporary files
• GPU: Optional but recommended for faster processing

Community and Support

Resources

• Documentation: CodeVideo MCP Docs
• Examples: GitHub Repository
• Community: Discord Server
• Support: Email Support

Contributing

The CodeVideo MCP Server is open source and welcomes contributions:

• Bug Reports: Submit issues on GitHub
• Feature Requests: Propose new features and enhancements
• Code Contributions: Submit pull requests with improvements
• Documentation: Help improve guides and examples

Related Tools

• Cursor: AI-powered code editor with MCP support
• Claude Desktop: Desktop app for Claude with MCP integration
• Cline: VS Code extension for AI coding assistance

CodeVideo MCP Server transforms the way developers create educational content, making it easy to generate professional coding videos directly from your development workflow. Whether you're creating tutorials, documenting code, or sharing knowledge, this server provides the tools you need for engaging video content.