# vargHQ/sdk: AI video generation as JSX components

> vargHQ/sdk is a TypeScript SDK that renders AI video as JSX components, fanning out to Kling, Flux, and ElevenLabs through one key. It covers the component tree, per-clip credit costs, caching, and the two install paths.

**vargHQ/sdk** — AI video generation SDK — JSX for videos. One API for Kling, Flux, ElevenLabs, Veed. Built on Vercel AI SDK.

- Repository: https://github.com/vargHQ/sdk
- Website: https://varg.ai/sdk
- Stars: 341 · Forks: 23
- Language: TypeScript
- License: Apache-2.0
- Published: 2026-09-10 · Updated: 2026-09-10 · Language: en
- Canonical page: https://hysenlabs.com/projects/varghq-sdk

## One VARG_API_KEY fronts a wall of per-provider keys

The headline is that a single `VARG_API_KEY` routes every model through `api.varg.ai/v2`, so Kling, Flux, and ElevenLabs all sit behind one credential, with keys issued from the dashboard at `app.varg.ai`. Behind that endpoint a render engine fans out to Kling, Flux, ElevenLabs, and Wan before writing an `output.mp4`. The credential file tells a different story. `.env.example` enumerates eleven vendor keys: `FAL_API_KEY`, `HIGGSFIELD_API_KEY` paired with `HIGGSFIELD_SECRET`, `ELEVENLABS_API_KEY`, `GROQ_API_KEY` for whisper transcription, `FIREWORKS_API_KEY` for word-level timestamps, `HEYGEN_API_KEY` for avatar video, `REPLICATE_API_TOKEN`, `APIFY_TOKEN` for scraping actors, `DECART_API_KEY`, and `TOGETHER_API_KEY` for fast flux-schnell. It also carries Cloudflare R2 storage fields for the output bucket. The single-key path is a convenience layer over that fan-out; a team wiring its own CI should expect to populate provider keys directly whenever it bypasses the hosted API. Reference material beyond the code lives at `docs.varg.ai`, with a quickstart and a model catalog.

## Video is a tree of fifteen render components

varg models a video as a component tree. The root is `<Render>`, sized by `width`, `height`, and `fps`. Time lives in `<Clip>`, which takes `duration`, a `transition`, and `cutFrom`/`cutTo` trims. Media nodes split by kind: `<Image>` for a generated or static still with `zoom` and `resize` controls, `<Video>` for generated or sourced footage carrying its own `volume`, `<Speech>` for text to speech, and `<Music>` for a bed with `volume`, `loop`, and `ducking`. Overlays layer on top through `<Title>` with `position`, `color`, `start`, and `end`, `<Subtitle>`, `<Captions>` accepting `srt`, `style`, `color`, `activeColor`, and `withAudio`, and `<Overlay>` positioned by `left` and `top` with a `keepAudio` flag. Layout primitives such as `<Split>`, `<Slider>`, and `<Swipe>` with an `interval` handle common edits. `<TalkingHead>` drives an animated character with a `lipsyncModel`, and `<Packshot>` closes the sequence with a background, logo, `cta`, and a blinking call to action. Here is a minimal image to video scene:

```tsx
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>
);
```

## Identical props hit a cache instead of the provider

Generation cost is what varg tries to hide. When the props on a node are unchanged, the render engine returns a cache hit at no credit cost, so a scene can be re-rendered without paying the providers again. That makes the tree diffable: change only a caption color, re-run, and the expensive video node replays from cache. Rendering happens in one of two places. Locally the CLI drives the render engine on your machine:

```bash
bunx vargai render hello.tsx
```

The same composition can instead be submitted to the cloud render endpoint with a POST to `https://api.varg.ai/v2/render`. Because one render engine serves both paths, a composition authored on a laptop can move to hosted rendering without rewriting the JSX. The trade-off is that caching keys on props, so editing a single prompt string invalidates that node on the next run.

## Model choice is a credit budget decision

Models are addressed through helper calls, and the catalog prices each clip by five second units. The video table lists `kling-v3` as the best quality and latest option at 150 credits per five seconds, while `kling-v3-standard`, the previous generation `kling-v2.5`, `wan-2.5`, and the `minimax` alternative each cost 50. `wan-2.5` is flagged as good for characters, and `sync-v2-pro` is the lipsync entry. The flagship model therefore runs three times the per-clip credit of the standard tier for the same duration. Image, speech, and music follow the same pattern: `varg.imageModel` selects the image backend (the examples use `nano-banana-pro`), `varg.speechModel` with voices such as `adam` and `josh` handles narration, and `varg.musicModel` produces a background bed. One documented composition pairs a `Speech` voiceover with a `Music` bed so the narration and soundtrack render together. Because the credit unit is fixed per five seconds, a longer video multiplies the cost and the chosen model dominates the bill.

## The agent-first install skips the npm dependency

varg offers two ways in, and the first does not install the package. It recommends handing the work to a coding agent: add a skill, set the key, then prompt.

```bash
# 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 and varg handles generation, caching, and rendering. For developers who want the package in their own tree, the npm route installs `vargai` alongside the Vercel `ai` package, then runs an initializer that signs you in, installs the agent skill, writes a starter template, and creates the cache directories.

```bash
# 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
```

The difference is who authors the JSX. The agent path hands you a starting file you edit afterward; the developer path gives you a local project you drive directly. Both converge on the same `render` command.

## Captions and transitions come as fixed preset libraries

Two of the most requested video effects ship as presets rather than primitives you compose. Captions take a `style` prop with four named looks: `tiktok` highlights word by word, `karaoke` fills left to right, `bounce` pops each word in, and `typewriter` types it out.

```tsx
<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
```

Transitions work the same way. There are 67 GL transitions, and a `<Clip>` picks one by name with a duration:

```tsx
<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 }}>
```

Because these are fixed menus, you cannot hand-author the underlying motion through the JSX. You choose from the shipped set and tune the timing, which keeps the render engine predictable and the cache stable, at the cost of a ceiling on how unusual a caption or wipe can look.

## The CLI surface is init and render, backed by bun scripts

The published package is `vargai`, and its `bin` maps the `vargai` command to `./src/cli/index.ts`. Development is wired to bun: `check` runs `biome check .` and then `tsc --noEmit`, `lint` and `format` hand off to biome, `type-check` runs `tsc --noEmit` on its own, `size` runs size-limit against a `.size-limit.json` budget, and `studio` boots a local studio from `src/studio/index.ts`. A long `test:ci` script targets the renderers, layouts, cache, and speech modules by path. The package declares peer dependencies on `typescript`, `ai`, and `zod`, and pulls in provider adapters such as `@ai-sdk/openai`, `@ai-sdk/google`, `@ai-sdk/fal`, `@ai-sdk/groq`, `@ai-sdk/fireworks`, and `@ai-sdk/replicate`, alongside `@aws-sdk/client-s3` for storage. Guardrails come from `biome.json`, `commitlint.config.js`, a `.husky/` hook installed on prepare, and separate `tsconfig.json` and `tsconfig.cli.json` builds. The tree also ships `examples/` for `grok-imagine` and `heygen` avatar work, plus `.claude/` and `.cursor/` directories. Licensing is Apache-2.0, and the last recorded push to `main` was 2026-09-09 with no tagged releases.

## Conclusion

varg fits developers who already compose layouts in JSX and want video renders driven by code, since each scene is a component tree that can be cached and re-rendered without new credits. It is a weaker choice when generation has to run on your own provider credentials alone, because the fastest path still routes through a single VARG_API_KEY and a hosted render endpoint. Before committing, confirm which provider keys your chosen models require and what each five second clip costs in credits.

## FAQ

### How many render components does varg expose?

Fifteen: Render, Clip, Image, Video, Speech, Music, Title, Subtitle, Captions, Overlay, Split, Slider, Swipe, TalkingHead, and Packshot.

### Which varg video model costs the most credits per clip?

The `kling-v3` entry is listed at 150 credits per five seconds, against 50 for the standard, kling-v2.5, wan-2.5, and minimax entries.

### How does the varg SDK avoid regenerating the same video?

The render engine caches by props. When the props on a node are unchanged, a re-render replays the cached result at no credit cost instead of calling the provider again.

### Does varg support cloud rendering?

Yes. Besides the local CLI render, a composition can be submitted to the cloud render endpoint at `https://api.varg.ai/v2/render`.

### What environment variable holds the varg API key?

`VARG_API_KEY`. It is set in your shell and routes every model through the varg API at `api.varg.ai/v2`.

## Sources

- [Issues](https://github.com/vargHQ/sdk/issues)
- [License: Apache-2.0](https://github.com/vargHQ/sdk/blob/main/LICENSE)
- [Project website](https://varg.ai/sdk)
- [README](https://github.com/vargHQ/sdk/blob/main/README.md)
- [vargHQ/sdk on GitHub](https://github.com/vargHQ/sdk)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/varghq-sdk