Menu
Generate videos and images from JSON templates using AI-powered video rendering
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| 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 |
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.
Rendervid is a Model Context Protocol (MCP) server that enables AI agents to:
Key Features:
Use Rendervid when you need to:
The Rendervid MCP server provides 6 tools:
Generate video files from JSON templates.
Common uses:
Example prompt:
"Create a 5-second Instagram story with text 'Summer Sale' and a blue gradient background"
Generate static images or single frames.
Common uses:
Example prompt:
"Generate a YouTube thumbnail with title 'Best Practices 2024'"
Validate template JSON before rendering.
Common uses:
Example prompt:
"Validate this template: [paste JSON]"
Discover all available features.
Common uses:
Example prompt:
"What animation presets are available?"
Browse 50+ example templates.
Common uses:
Example prompt:
"Show me all social media templates"
Load a specific example template.
Common uses:
Example prompt:
"Load the Instagram story template"
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"
}
]
}
]
}
]
}
}
Output Configuration:
Dynamic Inputs:
Composition:
User: "Create a video with animated text"
AI flow:
1. get_capabilities() to understand animations
2. render_video() with fadeIn animation
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
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()
User: "Create 10 videos with different titles"
AI flow:
1. Load template once
2. Call render_video() 10 times with different inputs
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
Rendervid supports 40+ animation presets organized by category:
Entrance Animations:
Exit Animations:
Emphasis Animations:
Easing Functions (30+):
Text Layers:
Image Layers:
Video Layers:
Shape Layers:
Audio Layers:
Lottie Layers:
Custom Layers:
Video Formats:
Image Formats:
Quality Presets:
Getting Started:
Social Media:
Marketing:
Data Visualization:
Business:
Education:
Celebrations:
E-commerce:
Event:
Podcast:
Real Estate:
Keep it Simple
Use Dynamic Inputs
Optimize Frame Ranges
Test Animations
Draft Quality for Iteration
Batch Rendering
Asset Optimization
Clear Descriptions
Validate Templates
Iterate Progressively
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
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
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
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
Issue: Server not connecting
pnpm buildIssue: FFmpeg not found
# Install FFmpeg
brew install ffmpeg # macOS
sudo apt install ffmpeg # Ubuntu
choco install ffmpeg # Windows
Issue: Template validation fails
Issue: Slow rendering
Issue: Node version errors
node --version/examples/ directoryFlowHunt Attribution License - Free for commercial and personal use with attribution
Contributions welcome! See CONTRIBUTING.md for guidelines.
Developed by QualityUnit
Built with: