Rendervid MCP Skill

Generate professional videos and images from JSON templates using natural language. Rendervid provides a declarative, AI-friendly way to create animated content for social media, marketing, data visualization, and more.

Overview

Rendervid is a Model Context Protocol (MCP) server that enables AI agents to:

• Generate videos in multiple formats (MP4, WebM, MOV, GIF)
• Create static images (PNG, JPEG, WebP)
• Access 50+ ready-to-use templates
• Validate templates before rendering
• Discover all available capabilities

Key Features:

• Declarative JSON Templates - Define videos/images as simple JSON structures
• 40+ Animation Presets - Entrance, exit, and emphasis animations with easing functions
• Rich Layer Types - Text, images, video, shapes, audio, Lottie, custom React components
• 50+ Examples - Ready-to-use templates across 10+ categories
• Type-Safe - Full TypeScript with Zod validation
• Cross-Platform - Works in Node.js and browsers

When to Use This Skill

Use Rendervid when you need to:

Content Creation

• Generate social media content (Instagram stories, TikTok videos, YouTube thumbnails)
• Create marketing videos (product showcases, sale announcements, testimonials)
• Build data visualizations (animated charts, graphs, dashboards)
• Produce educational content (course intros, lesson titles)

Automation

• Batch generate videos from data
• Create personalized video content
• Generate thumbnails for video content
• Build video generation workflows

Prototyping

• Quickly test video concepts
• Create animated mockups
• Generate placeholder content
• Explore animation styles

AI-Driven Content

• Let AI agents create videos from text descriptions
• Generate videos based on user input
• Create dynamic content based on data
• Build video generation chatbots

Available Tools

The Rendervid MCP server provides 6 tools:

1. render_video

Generate video files from JSON templates.

Common uses:

• Social media videos
• Marketing content
• Animated explainers
• Data visualizations

Example prompt:

"Create a 5-second Instagram story with text 'Summer Sale' and a blue gradient background"

2. render_image

Generate static images or single frames.

Common uses:

• Thumbnails
• Social media images
• Preview frames
• Static graphics

Example prompt:

"Generate a YouTube thumbnail with title 'Best Practices 2024'"

3. validate_template

Validate template JSON before rendering.

Common uses:

• Check template syntax
• Catch errors early
• Verify AI-generated templates
• Debug template issues

Example prompt:

"Validate this template: [paste JSON]"

4. get_capabilities

Discover all available features.

Common uses:

• Learn what's possible
• Find available animations
• Check supported formats
• Understand layer types

Example prompt:

"What animation presets are available?"

5. list_examples

Browse 50+ example templates.

Common uses:

• Find templates by category
• Discover use cases
• Get inspiration
• Learn template structure

Example prompt:

"Show me all social media templates"

6. get_example

Load a specific example template.

Common uses:

• Use ready-made templates
• Start from examples
• Learn template patterns
• Customize existing templates

Example prompt:

"Load the Instagram story template"

Template Structure

Rendervid templates are JSON objects with three main sections:

{
  "name": "My Video",
  "output": {
    "type": "video",
    "width": 1920,
    "height": 1080,
    "fps": 30,
    "duration": 5
  },
  "inputs": [
    {
      "key": "title",
      "type": "string",
      "label": "Title",
      "default": "Hello"
    }
  ],
  "composition": {
    "scenes": [
      {
        "id": "main",
        "startFrame": 0,
        "endFrame": 150,
        "backgroundColor": "#1a1a2e",
        "layers": [
          {
            "id": "title",
            "type": "text",
            "position": { "x": 960, "y": 540 },
            "size": { "width": 1600, "height": 200 },
            "inputKey": "title",
            "props": {
              "fontSize": 120,
              "color": "#ffffff",
              "textAlign": "center"
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "fadeInUp",
                "duration": 30,
                "easing": "easeOut"
              }
            ]
          }
        ]
      }
    ]
  }
}

Key Concepts

Output Configuration:

• Defines video/image dimensions, FPS, duration
• Supports multiple formats and codecs

Dynamic Inputs:

• Variables that can be customized per render
• Support strings, numbers, booleans, colors, images, videos

Composition:

• Scenes with frame ranges
• Layers with types, positions, props
• Animations with presets and easing

Common Patterns

Pattern 1: Text Animation

User: "Create a video with animated text"

AI flow:
1. get_capabilities() to understand animations
2. render_video() with fadeIn animation

Pattern 2: Social Media Content

User: "Make an Instagram story for a product launch"

AI flow:
1. list_examples({ category: "social-media" })
2. get_example({ examplePath: "social-media/instagram-story" })
3. render_video() with custom inputs

Pattern 3: Data Visualization

User: "Create an animated bar chart showing Q1 sales"

AI flow:
1. get_example({ examplePath: "data-visualization/animated-bar-chart" })
2. Modify template with data
3. render_video()

Pattern 4: Batch Generation

User: "Create 10 videos with different titles"

AI flow:
1. Load template once
2. Call render_video() 10 times with different inputs

Pattern 5: Template Validation

User: "Check if my custom template is valid"

AI flow:
1. validate_template() to check structure
2. Fix any errors
3. render_video() to generate

Special Topics

Animations

Rendervid supports 40+ animation presets organized by category:

Entrance Animations:

• fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight
• slideInUp, slideInDown, slideInLeft, slideInRight
• scaleIn, zoomIn, rotateIn, bounceIn, flipInX, flipInY

Exit Animations:

• fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight
• slideOutUp, slideOutDown, slideOutLeft, slideOutRight
• scaleOut, zoomOut, rotateOut, bounceOut

Emphasis Animations:

• pulse, shake, bounce, swing, wobble, flash, rubberBand
• heartbeat, float, spin, tada, jello, flip

Easing Functions (30+):

• Linear: linear
• Ease: ease, easeIn, easeOut, easeInOut
• Cubic: easeInQuad, easeOutQuad, easeInOutQuad
• And more: Cubic, Quart, Quint, Sine, Expo, Circ, Back, Elastic, Bounce

Layer Types

Text Layers:

• Typography controls (font, size, weight, style)
• Alignment and spacing
• Color and effects
• Google Fonts support

Image Layers:

• Fit options (cover, contain, fill)
• Scaling and positioning
• Filters and blend modes

Video Layers:

• Playback controls
• Timing and trimming
• Audio control

Shape Layers:

• Rectangles, ellipses, polygons, stars, paths
• Fill and stroke
• Border radius and effects

Audio Layers:

• Background music
• Sound effects
• Volume and fade controls

Lottie Layers:

• Animated vector graphics
• JSON animation files

Custom Layers:

• React components
• Full CSS/Tailwind support
• Advanced use cases

Output Formats

Video Formats:

• MP4 (H.264, H.265)
• WebM (VP8, VP9, AV1)
• MOV (ProRes, H.264)
• GIF

Image Formats:

• PNG (lossless)
• JPEG (lossy, quality control)
• WebP (modern, efficient)

Quality Presets:

• draft: Fast rendering, lower quality
• standard: Balanced quality/speed
• high: High quality, slower rendering
• lossless: Maximum quality, large files

Template Categories

Getting Started:

• Hello World
• First Video
• First Image

Social Media:

• Instagram Story (1080x1920)
• Instagram Post (1080x1080)
• TikTok Video (1080x1920)
• YouTube Thumbnail (1280x720)
• Twitter Card (1200x630)
• LinkedIn Banner (1584x396)

Marketing:

• Product Showcase
• Sale Announcement
• Testimonial Video
• Before & After
• Logo Reveal

Data Visualization:

• Animated Bar Chart
• Line Graph
• Pie Chart
• Counter Animation
• Progress Dashboard

Business:

• Quote Card
• Stat Highlight
• Feature Announcement
• Team Introduction
• Company Update

Education:

• Lesson Title
• Quiz Question
• Course Intro
• Study Tip
• Progress Tracker

Celebrations:

• Birthday Card
• Holiday Greeting
• Congratulations
• Thank You
• Milestone

E-commerce:

• Product Launch
• Flash Sale
• New Arrival
• Customer Review
• Price Drop

Event:

• Event Announcement
• Countdown Timer
• Registration
• Thank You (Attendees)
• Highlight Reel

Podcast:

• Episode Intro
• Quote Card
• Guest Introduction
• Coming Soon
• Subscribe Reminder

Real Estate:

• Property Showcase
• Open House
• Sold Announcement
• Agent Introduction
• Virtual Tour Intro

Best Practices

Template Design

1. Keep it Simple

   • Start with examples
   • Build complexity gradually
   • Test frequently

2. Use Dynamic Inputs

   • Make values customizable
   • Provide sensible defaults
   • Document input purposes

3. Optimize Frame Ranges

   • Minimize total frames for faster rendering
   • Use appropriate FPS (24-30 for most content)
   • Consider file size vs quality tradeoffs

4. Test Animations

   • Preview before full render
   • Check timing and easing
   • Verify layer stacking

Performance

1. Draft Quality for Iteration

   • Use draft quality during development
   • Switch to high quality for finals
   • Consider file size requirements

2. Batch Rendering

   • Reuse templates when possible
   • Queue multiple renders
   • Monitor resource usage

3. Asset Optimization

   • Compress images before use
   • Use appropriate video codecs
   • Optimize Lottie animations

AI Integration

1. Clear Descriptions

   • Describe intent clearly
   • Specify dimensions and duration
   • Mention animation preferences

2. Validate Templates

   • Always validate AI-generated templates
   • Check for common errors
   • Test with sample data

3. Iterate Progressively

   • Start simple, add complexity
   • Test each change
   • Use examples as starting points

Example Workflows

Workflow 1: Quick Social Media Post

User: "Create an Instagram story announcing a flash sale"

AI Agent:
1. list_examples({ category: "social-media" })
2. get_example({ examplePath: "social-media/instagram-story" })
3. render_video({
     template: {...},
     inputs: {
       title: "Flash Sale",
       subtitle: "50% Off Everything",
       backgroundColor: "#FF6B6B"
     },
     format: "mp4",
     quality: "high"
   })

Result: Instagram-ready 1080x1920 video

Workflow 2: Data Visualization

User: "Create an animated chart showing Q1 revenue growth"

AI Agent:
1. get_example({ examplePath: "data-visualization/animated-bar-chart" })
2. Modify template with revenue data
3. validate_template({ template })
4. render_video({
     template,
     inputs: { data: [...], title: "Q1 Revenue" },
     format: "mp4",
     quality: "high"
   })

Result: Animated bar chart video

Workflow 3: Custom Template Creation

User: "Create a custom video with my brand colors and logo"

AI Agent:
1. get_capabilities() to understand options
2. Start with example template
3. Customize colors, fonts, layout
4. validate_template() to check
5. render_video() with draft quality
6. Iterate based on preview
7. Final render with high quality

Result: Custom branded video

Workflow 4: Batch Video Generation

User: "Create welcome videos for 100 new users"

AI Agent:
1. get_example({ examplePath: "business/team-introduction" })
2. Loop through user list:
   - render_video({
       template,
       inputs: { name: user.name },
       outputPath: `welcome-${user.id}.mp4`
     })

Result: 100 personalized welcome videos

Troubleshooting

Common Issues

Issue: Server not connecting

• Check absolute path in MCP config
• Verify Node.js version (20+)
• Check server builds: pnpm build
• Review logs in AI editor

Issue: FFmpeg not found

# Install FFmpeg
brew install ffmpeg  # macOS
sudo apt install ffmpeg  # Ubuntu
choco install ffmpeg  # Windows

Issue: Template validation fails

• Check JSON syntax
• Verify required fields
• Review error messages
• Use validate_template tool

Issue: Slow rendering

• Use draft quality for iteration
• Reduce video duration/FPS
• Optimize asset sizes
• Check system resources

Issue: Node version errors

• Update to Node.js 20+
• Use full Node.js path in config
• Verify with: node --version

Getting Help

• Documentation: MCP Server README
• Examples: Browse /examples/ directory
• Issues: GitHub Issues
• Discussions: GitHub Discussions

Resources

Documentation

• MCP Server Documentation
• Installation Guide
• Quick Start Guide
• API Reference

Templates

• 50+ Example Templates
• Skills Registry
• Individual Tool Docs

External Links

• Model Context Protocol
• MCP Specification
• Rendervid Repository

Version History

0.1.0 (Initial Release)

• 6 MCP tools (render_video, render_image, validate_template, get_capabilities, list_examples, get_example)
• 50+ example templates across 10 categories
• 40+ animation presets with 30+ easing functions
• Support for MP4, WebM, MOV, GIF, PNG, JPEG, WebP
• Full TypeScript with Zod validation
• Stdio transport for maximum compatibility
• Comprehensive documentation

License

FlowHunt Attribution License - Free for commercial and personal use with attribution

Contributing

Contributions welcome! See CONTRIBUTING.md for guidelines.

Credits

Developed by QualityUnit

Built with:

• TypeScript
• Model Context Protocol SDK
• Zod for validation
• Puppeteer for rendering
• FFmpeg for video encoding