| name | rendervid |
| description | Generate videos and images from JSON templates using AI-powered video rendering |
| version | 0.1.0 |
| tags | ["video","rendering","animation","templates","social-media","mcp"] |
| category | content-creation |
| author | QualityUnit |
| repository | https://github.com/QualityUnit/rendervid |
| license | FlowHunt Attribution License |
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
-
Keep it Simple
- Start with examples
- Build complexity gradually
- Test frequently
-
Use Dynamic Inputs
- Make values customizable
- Provide sensible defaults
- Document input purposes
-
Optimize Frame Ranges
- Minimize total frames for faster rendering
- Use appropriate FPS (24-30 for most content)
- Consider file size vs quality tradeoffs
-
Test Animations
- Preview before full render
- Check timing and easing
- Verify layer stacking
Performance
-
Draft Quality for Iteration
- Use draft quality during development
- Switch to high quality for finals
- Consider file size requirements
-
Batch Rendering
- Reuse templates when possible
- Queue multiple renders
- Monitor resource usage
-
Asset Optimization
- Compress images before use
- Use appropriate video codecs
- Optimize Lottie animations
AI Integration
-
Clear Descriptions
- Describe intent clearly
- Specify dimensions and duration
- Mention animation preferences
-
Validate Templates
- Always validate AI-generated templates
- Check for common errors
- Test with sample data
-
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
brew install ffmpeg
sudo apt install ffmpeg
choco install ffmpeg
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
Resources
Documentation
Templates
External Links
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
