varghq 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
.envfile in project root
Optional Keys (warn if missing, but continue)
| Feature | Required Key | Provider | Get It |
|---|---|---|---|
| Music generation | ELEVENLABS_API_KEY |
ElevenLabs | https://elevenlabs.io/app/settings/api-keys |
| Voice/Speech | ELEVENLABS_API_KEY |
ElevenLabs | https://elevenlabs.io/app/settings/api-keys |
| Lipsync | REPLICATE_API_TOKEN |
Replicate | https://replicate.com/account/api-tokens |
| Transcription | GROQ_API_KEY |
Groq | https://console.groq.com/keys |
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" });
// Reuse same reference for consistent appearance
<Video prompt={{ text: "waving", images: [character] }} />
<Video prompt={{ text: "dancing", images: [character] }} />
Transitions
<Clip transition={{ name: "fade", duration: 0.5 }}>
// Options: fade, crossfade, wipeleft, cube, slideup, etc.
Aspect Ratios
9:16- TikTok, Reels, Shorts (vertical)16:9- YouTube (horizontal)1:1- Instagram (square)