メニュー
Generate videos and images from JSON templates using AI-powered video rendering
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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: