
Write HTML. Render video. Built for agents.
varg gives you a TypeScript API for creating videos as JSX components, then rendering them through its local CLI or cloud API. It wraps multiple providers behind `varg.*` models so you can mix image, video, speech, music, captions, and lipsync in one workflow.
Builders who want to create AI videos from JSX in Claude Code, Cursor, Windsurf, or a TypeScript app.
You can generate and render videos from a single codebase instead of stitching together separate media tools.
Compose videos with `<Render>`, `<Clip>`, `<Video>`, `<Speech>`, `<Music>`, and `<Captions>`.
Access Kling, Flux, ElevenLabs, Sora, Wan, and other providers through `varg.*` model helpers.
Render videos locally with `bunx vargai render video.tsx` and inspect models with `bunx vargai list`.
Install a skill for Claude Code, Cursor, Windsurf, or any agent that supports skills with `npx -y skills add vargHQ/skills --all --copy -y`.
Reuse cached generations when props do not change, or submit renders to the cloud endpoint.
# 1. Install the varg skill npx -y skills add vargHQ/skills --all --copy -y # 2. Set your API key (get one at app.varg.ai) export VARG_API_KEY=varg_live_xxx # 3. Create your first video claude "create a 10-second product video for white sneakers, 9:16, UGC style, with captions and background music"
# Install with bun (recommended) bun install vargai ai # Or with npm npm install vargai ai # Set up project (auth, skills, hello.tsx, cache dirs) bunx vargai init
bunx vargai render hello.tsx
bunx vargai render hello.tsx
# Required — one key for everything VARG_API_KEY=varg_live_xxx
FAL_API_KEY=fal_xxx # fal.ai direct ELEVENLABS_API_KEY=xxx # ElevenLabs direct OPENAI_API_KEY=sk_xxx # OpenAI / Sora REPLICATE_API_TOKEN=r8_xxx # Replicate
Create AI videos with JSX. One SDK for Kling, Flux, ElevenLabs, Sora and more. Built on Vercel AI SDK.
Docs · Dashboard · Quickstart · Models · Discord
varg is an open-source TypeScript SDK for AI video generation. One API key, one API — generate images, video, speech, music, lipsync, and captions through varg.* providers. Write videos as JSX components (like React), render locally or in the cloud.
Install the varg skill into Claude Code, Cursor, Windsurf, or any agent that supports skills. Zero code — just prompt.
# 1. Install the varg skill
npx -y skills add vargHQ/skills --all --copy -y
# 2. Set your API key (get one at app.varg.ai)
export VARG_API_KEY=varg_live_xxx
# 3. Create your first video
claude "create a 10-second product video for white sneakers, 9:16, UGC style, with captions and background music"
The agent writes declarative JSX, varg handles AI generation + caching + rendering.
# Install with bun (recommended)
bun install vargai ai
# Or with npm
npm install vargai ai
# Set up project (auth, skills, hello.tsx, cache dirs)
bunx vargai init
vargai init handles everything: signs you in, installs the agent skill, creates a starter template, and sets up your project structure.
Then render the starter template:
bunx vargai render hello.tsx
Or ask your AI agent to create something from scratch.
Your prompt / JSX code
|
varg API (api.varg.ai/v2)
/ | \ \
Kling Flux ElevenLabs Wan ... (AI providers)
\ | / /
varg render engine
|
output.mp4
VARG_API_KEY) routes to all providers through the varg API<Clip>, <Video>, <Music>, <Captions>bunx vargai render locally, or submit via the cloud render endpoint (POST https://api.varg.ai/v2/render)import { Render, Clip, Image, Video } from "vargai/react";
import { varg } from "vargai/ai";
const character = Image({
prompt: "cute kawaii orange cat, round body, big eyes, Pixar style",
model: varg.imageModel("nano-banana-pro"),
aspectRatio: "9:16",
});
export default (
<Render width={1080} height={1920}>
<Clip duration={5}>
<Video
prompt={{ text: "cat waves hello, bounces happily", images: [character] }}
model={varg.videoModel("kling-v3")}
/>
</Clip>
</Render>
);
bunx vargai render hello.tsx
import { Render, Clip, Image, Video, Speech, Captions, Music } from "vargai/react";
import { varg } from "vargai/ai";
const character = Image({
model: varg.imageModel("nano-banana-pro"),
prompt: "friendly robot, blue metallic, expressive eyes",
aspectRatio: "9:16",
});
const voiceover = Speech({
model: varg.speechModel("eleven_v3"),
voice: "adam",
children: "Hello! I'm your AI assistant. Let me show you something cool!",
});
export default (
<Render width={1080} height={1920}>
<Music prompt="upbeat electronic, cheerful" model={varg.musicModel()} volume={0.15} />
<Clip duration={5}>
<Video
prompt={{ text: "robot talking, subtle head movements", images: [character] }}
model={varg.videoModel("kling-v3")}
/>
</Clip>
<Captions src={voiceover} style="tiktok" color="#ffffff" withAudio />
</Render>
);
import { Render, Clip, Image, Video, Speech, Captions, Music } from "vargai/react";
import { varg } from "vargai/ai";
const voiceover = Speech({
model: varg.speechModel("eleven_v3"),
voice: "josh",
children: "With varg, you can create any videos at scale!",
});
const baseCharacter = Image({
prompt: "woman, sleek black bob hair, fitted black t-shirt, natural look",
model: varg.imageModel("nano-banana-pro"),
aspectRatio: "9:16",
});
const animatedCharacter = Video({
prompt: {
text: "woman speaking naturally, subtle head movements, friendly expression",
images: [baseCharacter],
},
model: varg.videoModel("kling-v3"),
});
export default (
<Render width={1080} height={1920}>
<Music prompt="modern tech ambient, subtle electronic" model={varg.musicModel()} volume={0.1} />
<Clip duration={5}>
<Video
prompt={{ video: animatedCharacter, audio: voiceover }}
model={varg.videoModel("sync-v2-pro")}
/>
</Clip>
<Captions src={voiceover} style="tiktok" color="#ffffff" withAudio />
</Render>
);
| Component | Purpose | Key props |
|---|---|---|
<Render> | Root container | width, height, fps |
<Clip> | Time segment | duration, transition, cutFrom, cutTo |
<Image> | AI or static image | prompt, src, model, zoom, aspectRatio, resize |
<Video> | AI or source video | prompt, src, model, volume, cutFrom, cutTo |
<Speech> | Text-to-speech | voice, model, volume, children |
<Music> | Background music | prompt, src, model, volume, loop, ducking |
<Title> | Text overlay | position, color, start, end |
<Subtitle> | Subtitle text | backgroundColor |
<Captions> | Auto-generated subs | src, srt, style, color, activeColor, withAudio |
<Overlay> | Positioned layer | left, top, width, height, keepAudio |
<Split> | Side-by-side | direction |
<Slider> | Before/after reveal | direction |
<Swipe> | Tinder-style cards | direction, interval |
<TalkingHead> | Animated character | character, src, voice, model, lipsyncModel |
<Packshot> | End card with CTA | background, logo, cta, blinkCta |
<Captions src={voiceover} style="tiktok" /> // word-by-word highlight
<Captions src={voiceover} style="karaoke" /> // fill left-to-right
<Captions src={voiceover} style="bounce" /> // words bounce in
<Captions src={voiceover} style="typewriter" /> // typing effect
67 GL transitions available:
<Clip transition={{ name: "fade", duration: 0.5 }}>
<Clip transition={{ name: "crossfade", duration: 0.5 }}>
<Clip transition={{ name: "wipeleft", duration: 0.5 }}>
<Clip transition={{ name: "cube", duration: 0.8 }}>
All models are accessed through varg.* — one API key, one provider.
import { varg } from "vargai/ai";
| Model | Use case | Credits (5s) |
|---|---|---|
varg.videoModel("kling-v3") | Best quality, latest | 150 |
varg.videoModel("kling-v3-standard") | Good quality, cheaper | 50 |
varg.videoModel("kling-v2.5") | Previous gen, reliable | 50 |
varg.videoModel("wan-2.5") | Good for characters | 50 |
varg.videoModel("minimax") | Alternative | 50 |
varg.videoModel("sync-v2-pro") | Lipsync (video + audio) | 50 |
| Model | Use case | Credits |
|---|---|---|
varg.imageModel("nano-banana-pro") | Versatile, fast | 5 |
varg.imageModel("nano-banana-pro/edit") | Image-to-image editing | 5 |
varg.imageModel("flux-schnell") | Fast generation | 5 |
varg.imageModel("flux-pro") | High quality | 25 |
varg.imageModel("recraft-v3") | Alternative | 10 |
| Model | Use case | Credits |
|---|---|---|
varg.speechModel("eleven_v3") | Text-to-speech | 25 |
varg.speechModel("eleven_multilingual_v2") | Multilingual TTS | 25 |
varg.musicModel() | Music generation | 25 |
varg.transcriptionModel("whisper") | Speech-to-text | 5 |
1 credit = $0.01. Cache hits are always free.
bunx vargai login # sign in (email OTP or API key)
bunx vargai init # set up project (auth + skills + template)
bunx vargai render video.tsx # render a video
bunx vargai render video.tsx --preview # free preview with placeholders
bunx vargai render video.tsx --verbose # render with detailed output
bunx vargai balance # check credit balance
bunx vargai topup # add credits
bunx vargai run image --prompt "sunset" # generate a single image
bunx vargai run video --prompt "ocean waves" # generate a single video
bunx vargai list # list available models and actions
bunx vargai studio # open visual editor
# Required — one key for everything
VARG_API_KEY=varg_live_xxx
Get your API key at app.varg.ai. Bun auto-loads .env files.
You can use provider keys directly if you prefer:
FAL_API_KEY=fal_xxx # fal.ai direct
ELEVENLABS_API_KEY=xxx # ElevenLabs direct
OPENAI_API_KEY=sk_xxx # OpenAI / Sora
REPLICATE_API_TOKEN=r8_xxx # Replicate
See the BYOK docs for details.
| Action | Model | Credits | Cost |
|---|---|---|---|
| Image | nano-banana-pro | 5 | $0.05 |
| Image | flux-pro | 25 | $0.25 |
| Video (5s) | kling-v3 | 150 | $1.50 |
| Speech | eleven_v3 | 25 | $0.25 |
| Music | music_v1 | 25 | $0.25 |
| Cache hit | any | 0 | $0.00 |
A typical 3-clip video costs $2-5. Cache hits are always free.
https://discord.com/channels/1463766525117861922/1463766526250188824
See CONTRIBUTING.md for development setup.
Apache-2.0 — see LICENSE.md
Sign in to join the discussion.
No comments yet. Be the first to say what this is good for.

Write HTML. Render video. Built for agents.
Ultra-lightweight, open-source, self-hosted personal AI agent framework in Python with WebUI, tools, memory, MCP, multi-agent workflows, automation, and chat apps
SkillOpt is a text-space optimizer that trains reusable natural-language skills for frozen LLM agents through trajectory-driven edits, validation-gated updates, and deployable best_skill.md artifacts.

Omnigent is an open-source AI agent framework and meta-harness: orchestrate Claude Code, Codex, Cursor, Pi, and custom agents — swap harnesses without rewriting, enforce policies and sandboxing, and collaborate in real time from any device.
A theoretical reconstruction of the Claude Mythos architecture, built from first principles using the available research literature.
🕷️ An adaptive Web Scraping framework that handles everything from a single request to a full-scale crawl!