> ## Documentation Index
> Fetch the complete documentation index at: https://docs.varg.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get up and running with varg in 2 minutes

## The fastest path: AI agent + skill

The recommended way to use varg is through an AI coding agent (Claude Code, Cursor, Windsurf, etc.) with the varg skill installed. The skill gives your agent full context on components, models, prompting, and rendering.

<Steps>
  <Step title="Get your API key">
    Sign up at [app.varg.ai](https://app.varg.ai) and copy your API key.
  </Step>

  <Step title="Install the varg skill">
    ```bash theme={null}
    npx -y skills add vargHQ/skills --all --copy -y
    ```

    This installs the varg skill into Claude Code, Cursor, Windsurf, and 40+ other agents automatically.
  </Step>

  <Step title="Set your API key">
    ```bash theme={null}
    export VARG_API_KEY=varg_live_xxx
    ```
  </Step>

  <Step title="Create your first video">
    ```bash theme={null}
    claude "create a 10-second product video for white sneakers, 9:16, UGC style, with captions and background music"
    ```

    Or with Cursor, Windsurf, or any other agent — just prompt it the same way:

    *"Create a 10-second TikTok video of a cute robot waving hello with upbeat music and captions"*
  </Step>
</Steps>

That's it. The agent handles all the TSX code, rendering, and file management for you.

<Info>
  First render takes 1-2 minutes (AI generation). Subsequent runs with the same prompts are instant (cached at \$0).
</Info>

## Pricing

1 credit = 1 cent. Typical costs:

| Action     | Model              | Credits | Cost   |
| ---------- | ------------------ | ------- | ------ |
| Image      | nano-banana-pro    | 5       | \$0.05 |
| Image      | flux-pro           | 10      | \$0.10 |
| Video (5s) | kling-v3           | 150     | \$1.50 |
| Video (5s) | wan-2.5            | 80      | \$0.80 |
| Video (5s) | seedance-2-preview | 250     | \$2.50 |
| Speech     | eleven\_v3         | 25      | \$0.25 |
| Music      | music\_v1          | 30      | \$0.30 |
| Cache hit  | any                | 0       | \$0.00 |

A typical 3-clip video costs \$2-5. Cache hits are always free.

***

## Alternative: Cloud Render (curl only)

No installation needed. Submit TSX code to the [Cloud Render API](/render-api) via curl:

```bash theme={null}
# Submit a render job
JOB=$(curl -s -X POST https://render.varg.ai/api/render \
  -H "Authorization: Bearer $VARG_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "code": "const img = Image({ model: fal.imageModel(\"nano-banana-pro\"), prompt: \"a cabin in mountains at sunset\", aspectRatio: \"16:9\" });\nexport default (<Render width={1920} height={1080}><Clip duration={3}>{img}</Clip></Render>);"
  }')

JOB_ID=$(echo $JOB | jq -r '.job_id')

# Poll for result
curl -s "https://render.varg.ai/api/render/jobs/$JOB_ID" \
  -H "Authorization: Bearer $VARG_API_KEY"
```

<Info>
  Cloud render uses `fal.*Model()` syntax — provider globals are auto-injected server-side. See the [Cloud Render API](/render-api) reference for full details.
</Info>

***

## Alternative: Local Render (bun + ffmpeg)

For full control, render videos locally. Requires [Bun](https://bun.sh) and ffmpeg.

### Installation

<Tabs>
  <Tab title="Bun (recommended)">
    ```bash theme={null}
    bun install vargai ai
    ```
  </Tab>

  <Tab title="npm">
    ```bash theme={null}
    npm install vargai ai
    ```
  </Tab>
</Tabs>

### Set your API key

Create a `.env` file in your project root:

```bash theme={null}
VARG_API_KEY=varg_xxx
```

<Tip>
  Bun auto-loads `.env` files — no `dotenv` needed.
</Tip>

### Your first video

Create `hello.tsx`:

```tsx theme={null}
/** @jsxImportSource vargai */
import { Render, Clip, Image, Video } from "vargai/react"
import { createVarg } from "vargai/ai"

const varg = createVarg({ apiKey: process.env.VARG_API_KEY! })

const character = Image({
  model: varg.imageModel("nano-banana-pro"),
  prompt: "cute kawaii fluffy orange cat character, round body, big eyes, Pixar style",
  aspectRatio: "9:16",
})

export default (
  <Render width={1080} height={1920}>
    <Clip duration={5}>
      <Video
        prompt={{
          text: "character waves hello enthusiastically, bounces up and down",
          images: [character],
        }}
        model={varg.videoModel("kling-v3")}
      />
    </Clip>
  </Render>
)
```

Render it:

```bash theme={null}
bunx vargai render hello.tsx --preview   # free preview (placeholders)
bunx vargai render hello.tsx --verbose   # full render (costs credits)
```

### Add music

```tsx theme={null}
/** @jsxImportSource vargai */
import { Render, Clip, Image, Video, Music } from "vargai/react"
import { createVarg } from "vargai/ai"

const varg = createVarg({ apiKey: process.env.VARG_API_KEY! })

const character = Image({
  model: varg.imageModel("nano-banana-pro"),
  prompt: "cute kawaii cat character, Pixar style",
  aspectRatio: "9:16",
})

export default (
  <Render width={1080} height={1920}>
    <Music
      prompt="upbeat happy electronic music, cheerful vibes"
      model={varg.musicModel()}
      volume={0.3}
      duration={5}
    />
    <Clip duration={5}>
      <Video
        prompt={{ text: "cat dancing happily", images: [character] }}
        model={varg.videoModel("kling-v3")}
      />
    </Clip>
  </Render>
)
```

### Add voiceover with captions

```tsx theme={null}
/** @jsxImportSource vargai */
import { Render, Clip, Image, Video, Speech, Captions } from "vargai/react"
import { createVarg } from "vargai/ai"

const varg = createVarg({ apiKey: process.env.VARG_API_KEY! })

const character = Image({
  model: varg.imageModel("nano-banana-pro"),
  prompt: "friendly robot character, 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}>
    <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>
)
```

### Project structure

Recommended layout:

```
my-video-project/
├── .env              # VARG_API_KEY=varg_xxx
├── package.json
├── output/           # Generated videos
├── .cache/ai/        # Cached AI generations
└── videos/
    ├── intro.tsx
    ├── episode-1.tsx
    └── outro.tsx
```

***

## Next steps

<CardGroup cols={2}>
  <Card title="Components Reference" icon="puzzle-piece" href="/sdk/components">
    All JSX components and their props
  </Card>

  <Card title="AI Models" icon="microchip" href="/sdk/models">
    All supported models with pricing
  </Card>

  <Card title="Templates" icon="clone" href="/templates">
    Copy-paste examples for common video types
  </Card>

  <Card title="Cloud Render API" icon="cloud" href="/render-api">
    Submit TSX via API — zero local dependencies
  </Card>
</CardGroup>