| name | varg-video-generation |
| description | Generate AI videos using varg SDK React engine. Use when creating videos, animations, talking characters, slideshows, or social media content. Always run onboarding first to check API keys. |
| license | MIT |
| metadata | {"author":"vargHQ","version":"1.0.0"} |
| compatibility | Requires bun runtime. FAL_KEY required. Optional ELEVENLABS_API_KEY, REPLICATE_API_TOKEN, GROQ_API_KEY |
| allowed-tools | Bash(bun:*) Bash(cat:*) Read Write Edit |
Video Generation with varg React Engine
Overview
This rule helps you generate AI videos using the varg SDK's React engine. It provides:
- Declarative JSX syntax for video composition
- Automatic caching (same props = instant cache hit)
- Parallel generation where possible
- Support for images, video, music, voice, and captions
Step 1: Onboarding (REQUIRED for new users)
Before generating videos, ensure the user has the required API keys configured.
Check Current Setup
Run this command to check existing configuration:
cat .env 2>/dev/null | grep -E "^(FAL_KEY|ELEVENLABS_API_KEY|REPLICATE_API_TOKEN|GROQ_API_KEY)=" || echo "No API keys found in .env"
Required: FAL_KEY
This is the minimum requirement for video generation.
| Detail | Value |
|---|
| Provider | Fal.ai |
| Get it | https://fal.ai/dashboard/keys |
| Free tier | Yes (limited credits) |
| Used for | Image generation (Flux), Video generation (Wan 2.5, Kling) |
If user doesn't have FAL_KEY:
- Direct them to https://fal.ai/dashboard/keys
- They need to create an account and generate an API key
- Add to
.env file in project root
Optional Keys (warn if missing, but continue)
When keys are missing, inform user what features are unavailable.
Step 2: Running Videos
bunx vargai render video.tsx
Key Components
| Component | Purpose | Required Key |
|---|
<Render> | Root container | - |
<Clip> | Sequential segment | - |
<Image> | AI image | FAL |
<Video> | AI video | FAL |
<Music> | Background music | ElevenLabs |
<Speech> | Text-to-speech | ElevenLabs |
Common Patterns
Character Consistency
const character = Image({ prompt: "blue robot" });
<Video prompt={{ text: "waving", images: [character] }} />
<Video prompt={{ text: "dancing", images: [character] }} />
Transitions
<Clip transition={{ name: "fade", duration: 0.5 }}>
Aspect Ratios
9:16 - TikTok, Reels, Shorts (vertical)16:9 - YouTube (horizontal)1:1 - Instagram (square)
