🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
πŸ¦€ ClawHub

Varg Ai

by @securityqq

Generate AI videos, images, speech, and music using varg. Use when creating videos, animations, talking characters, slideshows, product showcases, social con...

Versionv2.0.6
Downloads715
Installs1
TERMINAL
clawhub install varg-ai

πŸ“– About This Skill


name: varg-ai description: >- Generate AI videos, images, speech, and music using varg. Use when creating videos, animations, talking characters, slideshows, product showcases, social content, or single-asset generation. Supports zero-install cloud rendering (just API key + curl) and full local rendering (bun + ffmpeg). Triggers: "create a video", "generate video", "make a slideshow", "talking head", "product video", "generate image", "text to speech", "varg", "vargai", "render video", "lip sync", "captions". license: MIT metadata: author: vargHQ version: "2.0.4" openclaw: requires: env: - VARG_API_KEY anyBins: - curl - bun primaryEnv: VARG_API_KEY homepage: https://varg.ai compatibility: >- Requires VARG_API_KEY (get at https://varg.ai). Cloud mode: curl only (zero dependencies). Local mode: bun runtime + ffmpeg. allowed-tools: Bash(bun:*) Bash(bunx:*) Bash(npx:*) Bash(curl:*) Bash(mkdir:*) Bash(echo:*) Bash(chmod:*) Read Write Edit

Version Check (run once per session)

This skill is version 2.0.4. Before first use each session, check for updates:

curl -sf https://raw.githubusercontent.com/vargHQ/skills/main/varg-ai/SKILL.md | grep 'version:' | head -1

If the remote version is newer than 2.0.4, update and re-read this file:

npx -y skills update

Setup (REQUIRED before first use)

Before generating anything, check authentication and determine rendering mode. Do NOT run interactive CLI tools (like bunx vargai init) -- they require stdin which agents cannot provide. Use the curl-based flow below instead.

1. Check for API key

echo "${VARG_API_KEY:-}" && cat ~/.varg/credentials 2>/dev/null

If VARG_API_KEY is set (via env or credentials file), skip to step 2.

If neither exists, authenticate the user. Try Option A first, fall back to Option B.

Option A: User already has an API key

Ask the user if they have a VARG_API_KEY. If yes, tell them to export it in their terminal:

export VARG_API_KEY=

Important: Do NOT ask the user to paste the raw key to you. Ask them to run the export command themselves. Then skip to "Save credentials" below.

Option B: Sign up / sign in via email (OTP)

1. Ask the user for their email address. 2. Send a one-time code to their email:

curl -s -X POST https://app.varg.ai/api/auth/cli/send-otp \
  -H "Content-Type: application/json" \
  -d '{"email":"USER_EMAIL"}'
3. Tell the user: "Check your inbox for a 6-digit verification code from varg.ai" 4. Ask the user for the code, then verify and capture the response in one step:
VARG_AUTH=$(curl -s -X POST https://app.varg.ai/api/auth/cli/verify-otp \
  -H "Content-Type: application/json" \
  -d '{"email":"USER_EMAIL","code":"THE_6_DIGIT_CODE"}')
export VARG_API_KEY=$(echo "$VARG_AUTH" | grep -o '"api_key":"[^"]*"' | cut -d'"' -f4)
echo "Authenticated. Balance: $(echo "$VARG_AUTH" | grep -o '"balance_cents":[0-9]*' | cut -d: -f2) credits"
The response contains {"api_key":"varg_xxx","email":"...","balance_cents":0,"access_token":"..."}. The key is now in $VARG_API_KEY -- never reference the raw value directly.

Save credentials

Once VARG_API_KEY is set (from either option), save it globally and verify. Always reference $VARG_API_KEY -- never the raw value:

mkdir -p ~/.varg && echo "{\"api_key\":\"$VARG_API_KEY\",\"email\":\"USER_EMAIL\",\"created_at\":\"$(date -u +%Y-%m-%dT%H:%M:%SZ)\"}" > ~/.varg/credentials && chmod 600 ~/.varg/credentials

Verify the key works:

curl -s -H "Authorization: Bearer $VARG_API_KEY" https://api.varg.ai/v1/balance

You should get {"balance_cents": ...}. If you get 401, the key is invalid -- ask the user to double-check it.

Also add to the project .env if one exists:

echo "VARG_API_KEY=$VARG_API_KEY" >> .env

Check balance and add credits

Check balance_cents from the verify-otp response or the balance check above. If balance is 0 (or too low for the user's task), the user needs credits before generating anything. 1 credit = 1 cent. A typical video costs $2-5 (200-500 credits).

Available packages:

| Package ID | Credits | Price | |---|---|---| | credits-2000 | 2,000 | $20 | | credits-5000 | 5,000 | $50 | | credits-10000 | 10,000 (recommended) | $100 | | credits-20000 | 20,000 | $200 | | credits-50000 | 50,000 | $500 | | credits-100000 | 100,000 | $1,000 |

Ask the user which package they'd like, then:

  • If you have the access_token (from Option B email OTP), capture it and create a Stripe checkout session:
  • VARG_ACCESS_TOKEN=$(echo "$VARG_AUTH" | grep -o '"access_token":"[^"]*"' | cut -d'"' -f4)
    curl -s -X POST https://app.varg.ai/api/billing/checkout \
      -H "Content-Type: application/json" \
      -H "Authorization: Bearer $VARG_ACCESS_TOKEN" \
      -H "Origin: https://app.varg.ai" \
      -d '{"packageId":"PACKAGE_ID"}'
    
    Response: {"url":"https://checkout.stripe.com/..."}

    Tell the user to open that URL in their browser to complete payment. Credits are added immediately after payment.

  • If you only have the API key (from Option A), direct the user to https://app.varg.ai/dashboard to purchase credits manually.
  • 2. Determine rendering mode

    | bun | ffmpeg | Mode | |-----|--------|------| | No | No | Cloud Render -- read cloud-render.md | | Yes | No | Cloud Render -- read cloud-render.md | | Yes | Yes | Local Render (recommended) -- read local-render.md |

    Critical Rules

    Everything you know about varg is likely outdated. Always verify against this skill and its references before writing code.

    1. Never guess model IDs -- consult models.md for current models, pricing, and constraints. 2. Function calls for media, JSX for composition -- Image({...}) creates media, composes timeline. Never write . 3. Cache is sacred -- identical prompt + params = instant $0 cache hit. When iterating, keep unchanged prompts EXACTLY the same. Never clear cache. 4. One image per Video -- Video({ prompt: { images: [img] } }) takes exactly one image. Multiple images cause errors. 5. Duration constraints differ by model -- kling-v3: 3-15s (integer only). kling-v2.5: ONLY 5 or 10. Check models.md. 6. Gateway namespace -- use providerOptions: { varg: {...} }, never fal, when going through the gateway (both modes). 7. Renders cost money -- 1 credit = 1 cent. A typical 3-clip video costs $2-5. Use preview mode (local) or cheap models to iterate. 8. API key hygiene -- Never write a raw API key value into a bash command. After obtaining a key (from the user or OTP response), immediately export VARG_API_KEY=... and use $VARG_API_KEY in all subsequent commands. This prevents keys from leaking into conversation context and terminal history.

    Quick Start

    Cloud Render (no bun/ffmpeg needed)

    # Submit TSX code to the render service
    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: varg.imageModel(\"nano-banana-pro\"), prompt: \"a cabin in mountains at sunset\", aspectRatio: \"16:9\" });\nexport default ({img});"}'

    Poll for result (repeat until "completed" or "failed")

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

    Full details: cloud-render.md

    Local Render (bun + ffmpeg)

    /** @jsxImportSource vargai */
    import { Render, Clip, Image } from "vargai/react"
    import { createVarg } from "vargai/ai"

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

    const img = Image({ model: varg.imageModel("nano-banana-pro"), prompt: "a cabin in mountains at sunset", aspectRatio: "16:9" })

    export default ( {img} )

    bunx vargai render video.tsx --preview   # free preview
    bunx vargai render video.tsx --verbose   # full render (costs credits)
    

    Full details: local-render.md

    Single Asset (no video composition)

    For one-off images, videos, speech, or music without building a multi-clip template:

    curl -X POST https://api.varg.ai/v1/image \
      -H "Authorization: Bearer $VARG_API_KEY" \
      -d '{"model": "nano-banana-pro", "prompt": "a sunset over mountains"}'
    

    Full API reference: gateway-api.md

    How to Write Video Code

    Video code has two layers: media generation (function calls) and composition (JSX).

    // 1. GENERATE media via function calls
    const img = Image({ model: ..., prompt: "..." })
    const vid = Video({ model: ..., prompt: { text: "...", images: [img] }, duration: 5 })
    const voice = Speech({ model: ..., voice: "rachel", children: "Hello!" })

    // 2. COMPOSE via JSX tree export default ( {vid} Welcome )

    Component Summary

    | Component | Type | Purpose | |-----------|------|---------| | Image() | Function call | Generate still image | | Video() | Function call | Generate video (text-to-video or image-to-video) | | Speech() | Function call | Text-to-speech audio | | | JSX | Root container -- sets width, height, fps | | | JSX | Timeline segment -- duration, transitions | | | JSX | Background audio (always set duration!) | | | JSX | Subtitle track from Speech | | </code> | JSX | Text overlay | | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em"><Overlay></code> | JSX | Positioned layer | | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em"><Split></code> / <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em"><Grid></code> | JSX | Layout helpers |</p><p style="margin:8px 0">Full props: <a href="references/components.md" target="_blank" rel="noopener" style="color:#6366f1">components.md</a></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Provider Differences (Cloud vs Local)</h4></p><p style="margin:8px 0">Both modes use <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">varg.*</code> for all models. The only difference is imports:</p><p style="margin:8px 0">| Cloud Render | Local Render | |---|---| | No imports needed (globals are auto-injected) | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">import { ... } from "vargai/react"</code> + <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">import { createVarg } from "vargai/ai"</code> | | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">varg.imageModel("nano-banana-pro")</code> | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">varg.imageModel("nano-banana-pro")</code> | | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">varg.videoModel("kling-v3")</code> | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">varg.videoModel("kling-v3")</code> | | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">varg.speechModel("eleven_v3")</code> | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">varg.speechModel("eleven_v3")</code> |</p><p style="margin:8px 0"><strong style="color:#e5e7eb">Always use <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">varg.*Model()</code></strong> with <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">VARG_API_KEY</code>. It handles routing, caching, billing, and works with a single key. See <a href="references/byok.md" target="_blank" rel="noopener" style="color:#6366f1">byok.md</a> for using your own provider keys.</p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Cost & Iteration</h3></p><p style="margin:8px 0"><li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">1 credit = 1 cent.</strong> nano-banana-pro = 5 credits, kling-v3 = 150 credits, speech = 20-25 credits.</li> <li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">Cache saves money.</strong> Keep unchanged prompts character-for-character identical across iterations.</li> <li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">Preview first</strong> (local mode only): <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">--preview</code> generates free placeholders to validate structure.</li> <li style="color:#94a3b8;margin:3px 0">Full pricing: <a href="references/models.md" target="_blank" rel="noopener" style="color:#6366f1">models.md</a></li></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">References</h3></p><p style="margin:8px 0">Load these on demand based on what you need:</p><p style="margin:8px 0">| Need | Reference | When to load | |------|-----------|-------------| | Render via API | <a href="references/cloud-render.md" target="_blank" rel="noopener" style="color:#6366f1">cloud-render.md</a> | No bun/ffmpeg, or user wants cloud rendering | | Render locally | <a href="references/local-render.md" target="_blank" rel="noopener" style="color:#6366f1">local-render.md</a> | bun + ffmpeg available | | Patterns & workflows | <a href="references/recipes.md" target="_blank" rel="noopener" style="color:#6366f1">recipes.md</a> | Talking head, character consistency, slideshow, lipsync | | Model selection | <a href="references/models.md" target="_blank" rel="noopener" style="color:#6366f1">models.md</a> | Choosing models, checking prices, duration constraints | | Component props | <a href="references/components.md" target="_blank" rel="noopener" style="color:#6366f1">components.md</a> | Need detailed props for any component | | Better prompts | <a href="references/prompting.md" target="_blank" rel="noopener" style="color:#6366f1">prompting.md</a> | User wants cinematic / high-quality results | | REST API | <a href="references/gateway-api.md" target="_blank" rel="noopener" style="color:#6366f1">gateway-api.md</a> | Single-asset generation or Render API details | | Debugging | <a href="references/common-errors.md" target="_blank" rel="noopener" style="color:#6366f1">common-errors.md</a> | Something failed or produced unexpected results | | Full examples | <a href="references/templates.md" target="_blank" rel="noopener" style="color:#6366f1">templates.md</a> | Need complete copy-paste-ready templates | | BYOK keys | <a href="references/byok.md" target="_blank" rel="noopener" style="color:#6366f1">byok.md</a> | Using your own provider API keys for $0 billing | </p></div></section><section class="skill-card" style="margin-bottom:20px"><h2 style="color:#f8fafc;font-size:1.2em;font-weight:800;margin:0 0 16px;display:flex;align-items:center;gap:8px">πŸ’‘ Examples</h2><div style="font-size:.92em;color:#94a3b8;line-height:1.75"><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Cloud Render (no bun/ffmpeg needed)</h4></p><p style="margin:8px 0"><pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em"># Submit TSX code to the render service 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: varg.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>);"}'</p><p style="margin:8px 0"><h2 style="color:#f3f4f6;margin:20px 0 10px;font-size:1.15em">Poll for result (repeat until "completed" or "failed")</h2> curl -s https://render.varg.ai/api/render/jobs/JOB_ID \ -H "Authorization: Bearer $VARG_API_KEY" </code></pre></p><p style="margin:8px 0">Full details: <a href="references/cloud-render.md" target="_blank" rel="noopener" style="color:#6366f1">cloud-render.md</a></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Local Render (bun + ffmpeg)</h4></p><p style="margin:8px 0"><pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">/** @jsxImportSource vargai */ import { Render, Clip, Image } from "vargai/react" import { createVarg } from "vargai/ai"</p><p style="margin:8px 0">const varg = createVarg({ apiKey: process.env.VARG_API_KEY! })</p><p style="margin:8px 0">const img = Image({ model: varg.imageModel("nano-banana-pro"), prompt: "a cabin in mountains at sunset", aspectRatio: "16:9" })</p><p style="margin:8px 0">export default ( <Render width={1920} height={1080}> <Clip duration={3}>{img}</Clip> </Render> ) </code></pre></p><p style="margin:8px 0"><pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">bunx vargai render video.tsx --preview # free preview bunx vargai render video.tsx --verbose # full render (costs credits) </code></pre></p><p style="margin:8px 0">Full details: <a href="references/local-render.md" target="_blank" rel="noopener" style="color:#6366f1">local-render.md</a></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Single Asset (no video composition)</h4></p><p style="margin:8px 0">For one-off images, videos, speech, or music without building a multi-clip template:</p><p style="margin:8px 0"><pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">curl -X POST https://api.varg.ai/v1/image \ -H "Authorization: Bearer $VARG_API_KEY" \ -d '{"model": "nano-banana-pro", "prompt": "a sunset over mountains"}' </code></pre></p><p style="margin:8px 0">Full API reference: <a href="references/gateway-api.md" target="_blank" rel="noopener" style="color:#6366f1">gateway-api.md</a></p></div></section></div><div class="two-col-side"></div></div></div><script> document.querySelectorAll('.copy-btn, .script-copy-btn').forEach(btn => { btn.addEventListener('click', () => { const cmd = btn.getAttribute('data-cmd'); if (!cmd) return; navigator.clipboard.writeText(cmd).then(() => { const orig = btn.textContent; btn.textContent = 'Copied!'; setTimeout(() => btn.textContent = orig, 1500); }).catch(() => {}); }); }); </script><!--$--><!--/$--></main><footer style="background:var(--bg-primary);border-top:1px solid var(--border-secondary);margin-top:60px"><div style="border-top:1px solid var(--border-light);max-width:1200px;margin:0 auto;padding:24px 20px"><div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:24px"><div><div style="font-weight:700;color:var(--text-muted);margin-bottom:8px">BytesAgain</div><div style="color:var(--text-muted3);font-size:.82em;max-width:200px">Discover the best AI agent skills for your workflow.</div></div><div><div style="color:var(--text-muted);font-size:.75em;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px">Explore</div><div style="margin-bottom:6px"><a href="/skills" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Skills</a></div><div style="margin-bottom:6px"><a href="/articles" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Articles</a></div><div style="margin-bottom:6px"><a href="/use-case" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Cases</a></div></div><div><div style="color:var(--text-muted);font-size:.75em;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px">Company</div><div style="margin-bottom:6px"><a href="/about" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">About</a></div><div style="margin-bottom:6px"><a href="/contact" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Contact</a></div><div style="margin-bottom:6px"><a href="/privacy-policy" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Privacy Policy</a></div><div style="margin-bottom:6px"><a href="/terms" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Terms</a></div><div style="margin-bottom:6px"><a href="/feedback" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Feedback</a></div></div></div><div style="border-top:1px solid var(--border-light);padding-top:16px"><div style="color:var(--text-muted4);font-size:.8em;margin-bottom:8px">Β© <!-- -->2026<!-- --> BytesAgain. All rights reserved.</div><div style="color:var(--text-muted5);font-size:.75em;line-height:1.6;max-width:720px">BytesAgain is an independent skill directory. We index and link to third-party content (ClawHub, GitHub, LobeHub, Dify, etc.) for informational purposes only. All trademarks, skill names, and content are the property of their respective owners. BytesAgain does not claim ownership of any indexed content.</div></div></div></footer><button style="position:fixed;bottom:28px;right:28px;z-index:1000;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,#667eea,#00d4ff);color:#fff;font-size:1.3em;box-shadow:0 4px 20px #667eea66;display:flex;align-items:center;justify-content:center;transition:transform .2s">πŸ’¬</button><script src="/_next/static/chunks/0ze4gu236oq96.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[62894,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"LangProvider\"]\n3:I[89220,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"ThemeProvider\"]\n4:I[16988,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\ne:I[68027,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\",1]\n:HL[\"/_next/static/chunks/051nc0vy_6.rl.css?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"style\"]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n5:Td5e,"])</script><script>self.__next_f.push([1,"[{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"BytesAgain\",\"url\":\"https://bytesagain.com\",\"description\":\"Search 60,000+ verified AI agent skills via MCP API or REST. Supports 7 languages. Free, no auth required.\",\"inLanguage\":[\"en\",\"zh\",\"es\",\"fr\",\"de\",\"ja\",\"ko\"],\"potentialAction\":{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://bytesagain.com/skills?q={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}},{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"BytesAgain\",\"url\":\"https://bytesagain.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://bytesagain.com/og-image.png\"},\"description\":\"AI agent skill directory. Search 60,000+ skills, 1,000+ use cases, and community requests.\",\"foundingDate\":\"2026\",\"foundingLocation\":{\"@type\":\"Place\",\"name\":\"Global\"},\"sameAs\":[\"https://x.com/bytesagain\",\"https://github.com/bytesagain/ai-skills\",\"https://clawhub.ai/profile/bytesagain\"],\"contactPoint\":{\"@type\":\"ContactPoint\",\"email\":\"hello@bytesagain.com\",\"contactType\":\"customer support\"},\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"value\":1}},{\"@context\":\"https://schema.org\",\"@type\":\"WebApplication\",\"name\":\"BytesAgain AI Skills Search\",\"url\":\"https://bytesagain.com\",\"applicationCategory\":\"DeveloperApplication\",\"operatingSystem\":\"Web\",\"description\":\"Search engine and MCP API for 60,000+ AI agent skills. Semantic search, role recommendations, and use case packs.\",\"offers\":{\"@type\":\"Offer\",\"price\":\"0\",\"priceCurrency\":\"USD\"},\"featureList\":[\"Search 60,000+ AI agent skills\",\"Role-based recommendations for developers, creators, and traders\",\"1,000+ curated use case packs\",\"Free MCP API and REST API\",\"Multi-language search (EN, ZH, ES, FR, DE, JA, KO)\"],\"potentialAction\":{\"@type\":\"SearchAction\",\"target\":\"https://bytesagain.com/skills?q={search_term_string}\",\"query-input\":\"required name=search_term_string\"},\"dateModified\":\"2026-07-18\"},{\"@context\":\"https://schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What is BytesAgain?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"BytesAgain is a curated directory of 60,000+ AI agent skills from ClawHub, GitHub, LobeHub, and Dify. Search skills by keyword in 7 languages, browse by role (developer, creator, trader, marketer) or by use case.\"}},{\"@type\":\"Question\",\"name\":\"How do I find AI skills on BytesAgain?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Use the search bar on BytesAgain.com to search by keyword in 7 languages. You can also browse by role (developer, creator, trader, marketer) or by use case. Each skill shows install instructions for Claude, Cursor, OpenClaw, Continue, and more.\"}},{\"@type\":\"Question\",\"name\":\"Is BytesAgain free?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes, BytesAgain is completely free. No registration required for searching skills. The MCP API is also free with rate limits.\"}},{\"@type\":\"Question\",\"name\":\"Does BytesAgain have an API for AI agents?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes! BytesAgain provides a free MCP SSE endpoint at /api/mcp/sse for AI agents, plus a REST API at /api/mcp?action=search\u0026q=\u003cquery\u003e. No authentication needed.\"}},{\"@type\":\"Question\",\"name\":\"Can I request a new AI skill on BytesAgain?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes! Visit the Requests page on BytesAgain.com to submit a skill request. Your request will be visible to the community and notified to the site admin.\"}}]}]"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"skill\",\"varg-ai\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"skill\",{\"children\":[[\"slug\",\"varg-ai\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/051nc0vy_6.rl.css?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"llms\",\"href\":\"/llms.txt\"}],[\"$\",\"link\",null,{\"rel\":\"llms-full\",\"href\":\"/llms-full.txt\"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-3C1MM9FWYF\"}],[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-3C1MM9FWYF');\\n \"}}]]}],[\"$\",\"body\",null,{\"className\":\"geist_9e050971-module__05dp7a__className\",\"style\":{\"margin\":0},\"children\":[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"children\":[[\"$\",\"div\",null,{\"style\":{\"width\":\"100%\",\"background\":\"var(--bg-subscribe)\",\"borderBottom\":\"1px solid var(--border-primary)\",\"padding\":\"8px 20px\",\"textAlign\":\"center\",\"fontSize\":\".82em\",\"color\":\"#818cf8\"},\"children\":[\"🎁 \",[\"$\",\"strong\",null,{\"style\":{\"color\":\"var(--text-primary)\"},\"children\":\"Get the FREE AI Skills Starter Guide\"}],\" β€” \",[\"$\",\"a\",null,{\"href\":\"/register\",\"style\":{\"color\":\"#00d4ff\",\"textDecoration\":\"underline\"},\"children\":\"Subscribe β†’\"}]]}],[\"$\",\"$L4\",null,{}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$5\"}}],\"$L6\",\"$L7\",\"$L8\"]}]}]}]]}]]}],{\"children\":[\"$L9\",{\"children\":[\"$La\",{\"children\":[\"$Lb\",{},null,false,null]},null,false,\"$@c\"]},null,false,\"$@c\"]},null,false,null],\"$Ld\",false]],\"m\":\"$undefined\",\"G\":[\"$e\",[\"$Lf\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"10:I[39756,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\n11:I[37457,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\n12:I[22016,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0ka051yepewro.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"\"]\n13:I[90940,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\n14:I[16397,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\n16:I[97367,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"OutletBoundary\"]\n17:\"$Sreact.suspense\"\n1a:I[97367,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"ViewportBoundary\"]\n1c:I[97367,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"MetadataBoundary\"]\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"main\",null,{\"children\":[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L11\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"main\",null,{\"style\":{\"minHeight\":\"100vh\",\"display\":\"flex\",\"alignItems\":\"center\",\"justifyContent\":\"center\",\"background\":\"#050611\",\"color\":\"#e5e7eb\"},\"children\":[[\"$\",\"style\",null,{\"children\":\"\\n .nf-box { text-align: center; padding: 60px 32px; }\\n .nf-code { font-size: 6rem; font-weight: 900; color: #22d3ee; line-height: 1; margin: 0; }\\n .nf-title { font-size: 1.8rem; font-weight: 800; margin: 12px 0 8px; }\\n .nf-desc { color: var(--text-muted2); font-size: 1rem; margin-bottom: 32px; max-width: 440px; }\\n .nf-link { display: inline-block; padding: 12px 28px; background: linear-gradient(135deg,#34d399,#22d3ee); color: #000; font-weight: 900; border-radius: 12px; text-decoration: none; }\\n \"}],[\"$\",\"div\",null,{\"className\":\"nf-box\",\"children\":[[\"$\",\"p\",null,{\"className\":\"nf-code\",\"children\":\"404\"}],[\"$\",\"h1\",null,{\"className\":\"nf-title\",\"children\":\"Page Not Found\"}],[\"$\",\"p\",null,{\"className\":\"nf-desc\",\"children\":\"The skill or page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"$L12\",null,{\"className\":\"nf-link\",\"href\":\"/\",\"children\":\"Back to BytesAgain\"}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]\n"])</script><script>self.__next_f.push([1,"7:[\"$\",\"$L13\",null,{}]\n8:[\"$\",\"$L14\",null,{}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L11\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\na:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L11\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\nb:[\"$\",\"$1\",\"c\",{\"children\":[\"$L15\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/12w5ognupk9fb.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@18\"}]}]]}]\n19:[]\nc:\"$W19\"\nd:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L1a\",null,{\"children\":\"$L1b\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L1c\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L1d\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\nf:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/051nc0vy_6.rl.css?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script><script>self.__next_f.push([1,"1b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"1e:I[27201,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"IconMark\"]\n18:null\n"])</script><script>self.__next_f.push([1,"1d:[[\"$\",\"title\",\"0\",{\"children\":\"Varg Ai β€” AI Agent Skill | BytesAgain | BytesAgain\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Generate AI videos, images, speech, and music using varg. Use when creating videos, animations, talking characters, slideshows, product showcases, social con...\"}],[\"$\",\"meta\",\"2\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"3\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"4\",{\"name\":\"llms-txt\",\"content\":\"https://bytesagain.com/llms.txt\"}],[\"$\",\"meta\",\"5\",{\"name\":\"llms-full-txt\",\"content\":\"https://bytesagain.com/llms-full.txt\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"https://bytesagain.com/skill/varg-ai\"}],[\"$\",\"meta\",\"7\",{\"name\":\"baidu-site-verification\",\"content\":\"codeva-0evUqX1TFs\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:title\",\"content\":\"Varg Ai β€” AI Agent Skill | BytesAgain\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:description\",\"content\":\"Generate AI videos, images, speech, and music using varg. Use when creating videos, animations, talking characters, slideshows, product showcases, social con...\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:url\",\"content\":\"https://bytesagain.com/skill/varg-ai\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:site_name\",\"content\":\"BytesAgain\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://bytesagain.com/social-preview.png\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:title\",\"content\":\"Varg Ai β€” AI Agent Skill | BytesAgain\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:description\",\"content\":\"Generate AI videos, images, speech, and music using varg. Use when creating videos, animations, talking characters, slideshows, product showcases, social con...\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:image\",\"content\":\"https://bytesagain.com/social-preview.png\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"link\",\"22\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0x3dzn~oxb6tn.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"$L1e\",\"23\",{}]]\n"])</script><script>self.__next_f.push([1,"1f:T1562,"])</script><script>self.__next_f.push([1,"\n .skill-page { max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px; }\n .two-col { display: flex; gap: 32px; align-items: flex-start; }\n .two-col-main { flex: 1; min-width: 0; }\n .two-col-side { width: 300px; flex-shrink: 0; }\n @media (max-width: 860px) {\n .two-col { flex-direction: column; }\n .two-col-side { width: 100%; }\n }\n .breadcrumb { font-size: .82em; color: var(--text-muted2); margin-bottom: 28px; }\n .breadcrumb a { color: #818cf8; text-decoration: none; }\n .breadcrumb a:hover { text-decoration: underline; }\n .skill-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 20px; padding: 28px; margin-bottom: 24px; }\n .skill-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }\n .skill-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\n .skill-top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }\n .badge { display: inline-flex; align-items: center; gap: 5px; font-size: .75em; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; }\n .skill-title { font-size: 1.6em; font-weight: 800; color: var(--text-primary); margin: 0 0 4px; line-height: 1.2; }\n .skill-owner { font-size: .82em; color: var(--text-muted2); margin: 0 0 14px; }\n .skill-owner span { color: #818cf8; }\n .skill-desc { font-size: .92em; color: var(--text-secondary); line-height: 1.65; margin: 0 0 16px; }\n .skill-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-card); }\n .meta-item { display: flex; flex-direction: column; gap: 2px; }\n .meta-label { font-size: .7em; color: var(--text-muted5); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }\n .meta-value { font-size: .92em; color: var(--text-muted2); font-weight: 600; }\n .tags-row { display: flex; gap: 6px; flex-wrap: wrap; }\n .tag { font-size: .75em; color: #6366f1; background: #6366f115; border: 1px solid #6366f130; border-radius: 6px; padding: 3px 10px; text-decoration: none; }\n .tag:hover { background: #6366f125; }\n .install-box { background: var(--bg-deep); border: 1px solid var(--border-card); border-radius: 12px; overflow: hidden; margin-bottom: 24px; }\n .install-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border-card); }\n .install-dots { display: flex; gap: 6px; }\n .dot { width: 10px; height: 10px; border-radius: 50%; }\n .install-label { font-size: .72em; color: var(--text-muted5); font-family: monospace; letter-spacing: 1px; }\n .install-body { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n .install-cmd { color: var(--text-code);\n font-family: 'Courier New', monospace; font-size: 1em; }\n .copy-btn { font-size: .75em; color: #6366f1; background: #6366f115; border: 1px solid #6366f130; border-radius: 6px; padding: 5px 12px; cursor: pointer; white-space: nowrap; transition: all .15s; }\n .copy-btn:hover { background: #6366f125; }\n .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; background: transparent; border: 1px solid var(--border-card); border-radius: 10px; color: #6b7280; text-decoration: none; font-weight: 600; font-size: .95em; transition: all .15s; }\n .btn-secondary:hover { border-color: #818cf8; color: #818cf8; }\n .ours-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72em; font-weight: 700; color: #22d3ee; background: #22d3ee10; border: 1px solid #22d3ee30; border-radius: 999px; padding: 4px 14px; }\n .section-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px; padding: 22px 24px; margin-bottom: 20px; }\n .section-title { color: var(--text-primary); font-size: 1.08em; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }\n /* Script box */\n .script-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--bg-input); border-bottom: 1px solid var(--border-card); }\n .script-filename { font-size: .72em; color: var(--text-muted2); font-family: 'Courier New', monospace; }\n .script-copy-btn { font-size: .72em; color: #6366f1; background: none; border: 1px solid #6366f130; border-radius: 4px; padding: 2px 10px; cursor: pointer; }\n .script-copy-btn:hover { background: #6366f115; }\n .script-body { padding: 14px 16px; font-family: 'Courier New', monospace; font-size: .82em; line-height: 1.6; color: var(--text-code); overflow-x: auto; max-height: 420px; overflow-y: auto; white-space: pre; }\n /* Articles */\n .article-card { display: block; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 10px; padding: 14px 16px; text-decoration: none; transition: border-color .15s; }\n .article-card:hover { border-color: #6366f1; }\n @media (max-width: 600px) {\n .skill-card { padding: 20px; }\n .skill-title { font-size: 1.5em; }\n }\n "])</script><script>self.__next_f.push([1,"15:[[\"$\",\"style\",null,{\"children\":\"$1f\"}],\"$L20\",\"$L21\"]\n"])</script><script>self.__next_f.push([1,"22:I[78297,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/12w5ognupk9fb.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\n23:T66ea,"])</script><script>self.__next_f.push([1,"\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\nname: varg-ai\ndescription: \u003e-\n Generate AI videos, images, speech, and music using varg.\n Use when creating videos, animations, talking characters, slideshows,\n product showcases, social content, or single-asset generation.\n Supports zero-install cloud rendering (just API key + curl) and\n full local rendering (bun + ffmpeg).\n Triggers: \"create a video\", \"generate video\", \"make a slideshow\",\n \"talking head\", \"product video\", \"generate image\", \"text to speech\",\n \"varg\", \"vargai\", \"render video\", \"lip sync\", \"captions\".\nlicense: MIT\nmetadata:\n author: vargHQ\n version: \"2.0.4\"\n openclaw:\n requires:\n env:\n - VARG_API_KEY\n anyBins:\n - curl\n - bun\n primaryEnv: VARG_API_KEY\n homepage: https://varg.ai\ncompatibility: \u003e-\n Requires VARG_API_KEY (get at https://varg.ai).\n Cloud mode: curl only (zero dependencies).\n Local mode: bun runtime + ffmpeg.\nallowed-tools: Bash(bun:*) Bash(bunx:*) Bash(npx:*) Bash(curl:*) Bash(mkdir:*) Bash(echo:*) Bash(chmod:*) Read Write Edit\n\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eVersion Check (run once per session)\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eThis skill is version \u003cstrong style=\"color:#e5e7eb\"\u003e2.0.4\u003c/strong\u003e. Before first use each session, check for updates:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003ecurl -sf https://raw.githubusercontent.com/vargHQ/skills/main/varg-ai/SKILL.md | grep 'version:' | head -1\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eIf the remote version is newer than 2.0.4, update and re-read this file:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003enpx -y skills update\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eSetup (REQUIRED before first use)\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eBefore generating anything, check authentication and determine rendering mode.\n\u003cstrong style=\"color:#e5e7eb\"\u003eDo NOT run interactive CLI tools\u003c/strong\u003e (like \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ebunx vargai init\u003c/code\u003e) -- they require stdin which agents cannot provide. Use the curl-based flow below instead.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003e1. Check for API key\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003eecho \"${VARG_API_KEY:-}\" \u0026\u0026 cat ~/.varg/credentials 2\u003e/dev/null\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eIf \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eVARG_API_KEY\u003c/code\u003e is set (via env or credentials file), skip to step 2.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eIf neither exists, authenticate the user. Try Option A first, fall back to Option B.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eOption A: User already has an API key\u003c/strong\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eAsk the user if they have a \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eVARG_API_KEY\u003c/code\u003e. If yes, tell them to export it in their terminal:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003eexport VARG_API_KEY=\u003ctheir_key\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eImportant:\u003c/strong\u003e Do NOT ask the user to paste the raw key to you. Ask them to run the \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eexport\u003c/code\u003e command themselves. Then skip to \"Save credentials\" below.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eOption B: Sign up / sign in via email (OTP)\u003c/strong\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e1. Ask the user for their \u003cstrong style=\"color:#e5e7eb\"\u003eemail address\u003c/strong\u003e.\n2. Send a one-time code to their email:\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003ecurl -s -X POST https://app.varg.ai/api/auth/cli/send-otp \\\n -H \"Content-Type: application/json\" \\\n -d '{\"email\":\"USER_EMAIL\"}'\n\u003c/code\u003e\u003c/pre\u003e\n3. Tell the user: \u003cstrong style=\"color:#e5e7eb\"\u003e\"Check your inbox for a 6-digit verification code from varg.ai\"\u003c/strong\u003e\n4. Ask the user for the code, then verify and capture the response in one step:\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003eVARG_AUTH=$(curl -s -X POST https://app.varg.ai/api/auth/cli/verify-otp \\\n -H \"Content-Type: application/json\" \\\n -d '{\"email\":\"USER_EMAIL\",\"code\":\"THE_6_DIGIT_CODE\"}')\nexport VARG_API_KEY=$(echo \"$VARG_AUTH\" | grep -o '\"api_key\":\"[^\"]*\"' | cut -d'\"' -f4)\necho \"Authenticated. Balance: $(echo \"$VARG_AUTH\" | grep -o '\"balance_cents\":[0-9]*' | cut -d: -f2) credits\"\n\u003c/code\u003e\u003c/pre\u003e\nThe response contains \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e{\"api_key\":\"varg_xxx\",\"email\":\"...\",\"balance_cents\":0,\"access_token\":\"...\"}\u003c/code\u003e.\nThe key is now in \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e$VARG_API_KEY\u003c/code\u003e -- never reference the raw value directly.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eSave credentials\u003c/strong\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eOnce \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eVARG_API_KEY\u003c/code\u003e is set (from either option), save it globally and verify. Always reference \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e$VARG_API_KEY\u003c/code\u003e -- never the raw value:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003emkdir -p ~/.varg \u0026\u0026 echo \"{\\\"api_key\\\":\\\"$VARG_API_KEY\\\",\\\"email\\\":\\\"USER_EMAIL\\\",\\\"created_at\\\":\\\"$(date -u +%Y-%m-%dT%H:%M:%SZ)\\\"}\" \u003e ~/.varg/credentials \u0026\u0026 chmod 600 ~/.varg/credentials\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eVerify the key works:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003ecurl -s -H \"Authorization: Bearer $VARG_API_KEY\" https://api.varg.ai/v1/balance\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eYou should get \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e{\"balance_cents\": ...}\u003c/code\u003e. If you get 401, the key is invalid -- ask the user to double-check it.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eAlso add to the project \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e.env\u003c/code\u003e if one exists:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003eecho \"VARG_API_KEY=$VARG_API_KEY\" \u003e\u003e .env\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eCheck balance and add credits\u003c/strong\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eCheck \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ebalance_cents\u003c/code\u003e from the verify-otp response or the balance check above. If balance is 0 (or too low for the user's task), the user needs credits before generating anything. 1 credit = 1 cent. A typical video costs $2-5 (200-500 credits).\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eAvailable packages:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Package ID | Credits | Price |\n|---|---|---|\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ecredits-2000\u003c/code\u003e | 2,000 | $20 |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ecredits-5000\u003c/code\u003e | 5,000 | $50 |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ecredits-10000\u003c/code\u003e | 10,000 (recommended) | $100 |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ecredits-20000\u003c/code\u003e | 20,000 | $200 |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ecredits-50000\u003c/code\u003e | 50,000 | $500 |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ecredits-100000\u003c/code\u003e | 100,000 | $1,000 |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eAsk the user which package they'd like, then:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eIf you have the \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eaccess_token\u003c/code\u003e\u003c/strong\u003e (from Option B email OTP), capture it and create a Stripe checkout session:\u003c/li\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003eVARG_ACCESS_TOKEN=$(echo \"$VARG_AUTH\" | grep -o '\"access_token\":\"[^\"]*\"' | cut -d'\"' -f4)\ncurl -s -X POST https://app.varg.ai/api/billing/checkout \\\n -H \"Content-Type: application/json\" \\\n -H \"Authorization: Bearer $VARG_ACCESS_TOKEN\" \\\n -H \"Origin: https://app.varg.ai\" \\\n -d '{\"packageId\":\"PACKAGE_ID\"}'\n\u003c/code\u003e\u003c/pre\u003e\nResponse: \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e{\"url\":\"https://checkout.stripe.com/...\"}\u003c/code\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eTell the user to open that URL in their browser to complete payment. Credits are added immediately after payment.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eIf you only have the API key\u003c/strong\u003e (from Option A), direct the user to \u003cstrong style=\"color:#e5e7eb\"\u003ehttps://app.varg.ai/dashboard\u003c/strong\u003e to purchase credits manually.\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003e2. Determine rendering mode\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| bun | ffmpeg | Mode |\n|-----|--------|------|\n| No | No | \u003cstrong style=\"color:#e5e7eb\"\u003eCloud Render\u003c/strong\u003e -- read \u003ca href=\"references/cloud-render.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003ecloud-render.md\u003c/a\u003e |\n| Yes | No | \u003cstrong style=\"color:#e5e7eb\"\u003eCloud Render\u003c/strong\u003e -- read \u003ca href=\"references/cloud-render.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003ecloud-render.md\u003c/a\u003e |\n| Yes | Yes | \u003cstrong style=\"color:#e5e7eb\"\u003eLocal Render\u003c/strong\u003e (recommended) -- read \u003ca href=\"references/local-render.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003elocal-render.md\u003c/a\u003e |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eCritical Rules\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eEverything you know about varg is likely outdated. Always verify against this skill and its references before writing code.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e1. \u003cstrong style=\"color:#e5e7eb\"\u003eNever guess model IDs\u003c/strong\u003e -- consult \u003ca href=\"references/models.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003emodels.md\u003c/a\u003e for current models, pricing, and constraints.\n2. \u003cstrong style=\"color:#e5e7eb\"\u003eFunction calls for media, JSX for composition\u003c/strong\u003e -- \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eImage({...})\u003c/code\u003e creates media, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cClip\u003e\u003c/code\u003e composes timeline. Never write \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cImage prompt=\"...\" /\u003e\u003c/code\u003e.\n3. \u003cstrong style=\"color:#e5e7eb\"\u003eCache is sacred\u003c/strong\u003e -- identical prompt + params = instant $0 cache hit. When iterating, keep unchanged prompts EXACTLY the same. Never clear cache.\n4. \u003cstrong style=\"color:#e5e7eb\"\u003eOne image per Video\u003c/strong\u003e -- \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eVideo({ prompt: { images: [img] } })\u003c/code\u003e takes exactly one image. Multiple images cause errors.\n5. \u003cstrong style=\"color:#e5e7eb\"\u003eDuration constraints differ by model\u003c/strong\u003e -- kling-v3: 3-15s (integer only). kling-v2.5: ONLY 5 or 10. Check \u003ca href=\"references/models.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003emodels.md\u003c/a\u003e.\n6. \u003cstrong style=\"color:#e5e7eb\"\u003eGateway namespace\u003c/strong\u003e -- use \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eproviderOptions: { varg: {...} }\u003c/code\u003e, never \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003efal\u003c/code\u003e, when going through the gateway (both modes).\n7. \u003cstrong style=\"color:#e5e7eb\"\u003eRenders cost money\u003c/strong\u003e -- 1 credit = 1 cent. A typical 3-clip video costs $2-5. Use preview mode (local) or cheap models to iterate.\n8. \u003cstrong style=\"color:#e5e7eb\"\u003eAPI key hygiene\u003c/strong\u003e -- Never write a raw API key value into a bash command. After obtaining a key (from the user or OTP response), immediately \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eexport VARG_API_KEY=...\u003c/code\u003e and use \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e$VARG_API_KEY\u003c/code\u003e in all subsequent commands. This prevents keys from leaking into conversation context and terminal history.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eQuick Start\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eCloud Render (no bun/ffmpeg needed)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e# Submit TSX code to the render service\ncurl -s -X POST https://render.varg.ai/api/render \\\n -H \"Authorization: Bearer $VARG_API_KEY\" \\\n -H \"Content-Type: application/json\" \\\n -d '{\"code\": \"const img = Image({ model: varg.imageModel(\\\"nano-banana-pro\\\"), prompt: \\\"a cabin in mountains at sunset\\\", aspectRatio: \\\"16:9\\\" });\\nexport default (\u003cRender width={1920} height={1080}\u003e\u003cClip duration={3}\u003e{img}\u003c/Clip\u003e\u003c/Render\u003e);\"}'\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch2 style=\"color:#f3f4f6;margin:20px 0 10px;font-size:1.15em\"\u003ePoll for result (repeat until \"completed\" or \"failed\")\u003c/h2\u003e\ncurl -s https://render.varg.ai/api/render/jobs/JOB_ID \\\n -H \"Authorization: Bearer $VARG_API_KEY\"\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eFull details: \u003ca href=\"references/cloud-render.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003ecloud-render.md\u003c/a\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eLocal Render (bun + ffmpeg)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e/** @jsxImportSource vargai */\nimport { Render, Clip, Image } from \"vargai/react\"\nimport { createVarg } from \"vargai/ai\"\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003econst varg = createVarg({ apiKey: process.env.VARG_API_KEY! })\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003econst img = Image({\n model: varg.imageModel(\"nano-banana-pro\"),\n prompt: \"a cabin in mountains at sunset\",\n aspectRatio: \"16:9\"\n})\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eexport default (\n \u003cRender width={1920} height={1080}\u003e\n \u003cClip duration={3}\u003e{img}\u003c/Clip\u003e\n \u003c/Render\u003e\n)\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003ebunx vargai render video.tsx --preview # free preview\nbunx vargai render video.tsx --verbose # full render (costs credits)\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eFull details: \u003ca href=\"references/local-render.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003elocal-render.md\u003c/a\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eSingle Asset (no video composition)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eFor one-off images, videos, speech, or music without building a multi-clip template:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003ecurl -X POST https://api.varg.ai/v1/image \\\n -H \"Authorization: Bearer $VARG_API_KEY\" \\\n -d '{\"model\": \"nano-banana-pro\", \"prompt\": \"a sunset over mountains\"}'\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eFull API reference: \u003ca href=\"references/gateway-api.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003egateway-api.md\u003c/a\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eHow to Write Video Code\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eVideo code has two layers: \u003cstrong style=\"color:#e5e7eb\"\u003emedia generation\u003c/strong\u003e (function calls) and \u003cstrong style=\"color:#e5e7eb\"\u003ecomposition\u003c/strong\u003e (JSX).\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e// 1. GENERATE media via function calls\nconst img = Image({ model: ..., prompt: \"...\" })\nconst vid = Video({ model: ..., prompt: { text: \"...\", images: [img] }, duration: 5 })\nconst voice = Speech({ model: ..., voice: \"rachel\", children: \"Hello!\" })\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e// 2. COMPOSE via JSX tree\nexport default (\n \u003cRender width={1080} height={1920}\u003e\n \u003cMusic model={...} prompt=\"upbeat electronic\" duration={10} volume={0.3} /\u003e\n \u003cClip duration={5}\u003e\n {vid}\n \u003cTitle position=\"bottom\"\u003eWelcome\u003c/Title\u003e\n \u003c/Clip\u003e\n \u003cCaptions src={voice} style=\"tiktok\" withAudio /\u003e\n \u003c/Render\u003e\n)\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eComponent Summary\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Component | Type | Purpose |\n|-----------|------|---------|\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eImage()\u003c/code\u003e | Function call | Generate still image |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eVideo()\u003c/code\u003e | Function call | Generate video (text-to-video or image-to-video) |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eSpeech()\u003c/code\u003e | Function call | Text-to-speech audio |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cRender\u003e\u003c/code\u003e | JSX | Root container -- sets width, height, fps |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cClip\u003e\u003c/code\u003e | JSX | Timeline segment -- duration, transitions |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cMusic\u003e\u003c/code\u003e | JSX | Background audio (always set \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eduration\u003c/code\u003e!) |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cCaptions\u003e\u003c/code\u003e | JSX | Subtitle track from Speech |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cTitle\u003e\u003c/code\u003e | JSX | Text overlay |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cOverlay\u003e\u003c/code\u003e | JSX | Positioned layer |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cSplit\u003e\u003c/code\u003e / \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cGrid\u003e\u003c/code\u003e | JSX | Layout helpers |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eFull props: \u003ca href=\"references/components.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003ecomponents.md\u003c/a\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eProvider Differences (Cloud vs Local)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eBoth modes use \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003evarg.*\u003c/code\u003e for all models. The only difference is imports:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Cloud Render | Local Render |\n|---|---|\n| No imports needed (globals are auto-injected) | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eimport { ... } from \"vargai/react\"\u003c/code\u003e + \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eimport { createVarg } from \"vargai/ai\"\u003c/code\u003e |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003evarg.imageModel(\"nano-banana-pro\")\u003c/code\u003e | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003evarg.imageModel(\"nano-banana-pro\")\u003c/code\u003e |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003evarg.videoModel(\"kling-v3\")\u003c/code\u003e | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003evarg.videoModel(\"kling-v3\")\u003c/code\u003e |\n| \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003evarg.speechModel(\"eleven_v3\")\u003c/code\u003e | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003evarg.speechModel(\"eleven_v3\")\u003c/code\u003e |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eAlways use \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003evarg.*Model()\u003c/code\u003e\u003c/strong\u003e with \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eVARG_API_KEY\u003c/code\u003e. It handles routing, caching, billing, and works with a single key. See \u003ca href=\"references/byok.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003ebyok.md\u003c/a\u003e for using your own provider keys.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eCost \u0026 Iteration\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003e1 credit = 1 cent.\u003c/strong\u003e nano-banana-pro = 5 credits, kling-v3 = 150 credits, speech = 20-25 credits.\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eCache saves money.\u003c/strong\u003e Keep unchanged prompts character-for-character identical across iterations.\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003ePreview first\u003c/strong\u003e (local mode only): \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e--preview\u003c/code\u003e generates free placeholders to validate structure.\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eFull pricing: \u003ca href=\"references/models.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003emodels.md\u003c/a\u003e\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eReferences\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eLoad these on demand based on what you need:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Need | Reference | When to load |\n|------|-----------|-------------|\n| Render via API | \u003ca href=\"references/cloud-render.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003ecloud-render.md\u003c/a\u003e | No bun/ffmpeg, or user wants cloud rendering |\n| Render locally | \u003ca href=\"references/local-render.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003elocal-render.md\u003c/a\u003e | bun + ffmpeg available |\n| Patterns \u0026 workflows | \u003ca href=\"references/recipes.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003erecipes.md\u003c/a\u003e | Talking head, character consistency, slideshow, lipsync |\n| Model selection | \u003ca href=\"references/models.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003emodels.md\u003c/a\u003e | Choosing models, checking prices, duration constraints |\n| Component props | \u003ca href=\"references/components.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003ecomponents.md\u003c/a\u003e | Need detailed props for any component |\n| Better prompts | \u003ca href=\"references/prompting.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003eprompting.md\u003c/a\u003e | User wants cinematic / high-quality results |\n| REST API | \u003ca href=\"references/gateway-api.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003egateway-api.md\u003c/a\u003e | Single-asset generation or Render API details |\n| Debugging | \u003ca href=\"references/common-errors.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003ecommon-errors.md\u003c/a\u003e | Something failed or produced unexpected results |\n| Full examples | \u003ca href=\"references/templates.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003etemplates.md\u003c/a\u003e | Need complete copy-paste-ready templates |\n| BYOK keys | \u003ca href=\"references/byok.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003ebyok.md\u003c/a\u003e | Using your own provider API keys for $0 billing |\n\u003c/p\u003e"])</script><script>self.__next_f.push([1,"20:[\"$\",\"div\",null,{\"className\":\"skill-page\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"SoftwareApplication\\\",\\\"name\\\":\\\"Varg Ai\\\",\\\"description\\\":\\\"Generate AI videos, images, speech, and music using varg. Use when creating videos, animations, talking characters, slideshows, product showcases, social con...\\\",\\\"url\\\":\\\"https://bytesagain.com/skill/varg-ai\\\",\\\"applicationCategory\\\":\\\"crypto\\\",\\\"operatingSystem\\\":\\\"Any\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"BytesAgain\\\",\\\"url\\\":\\\"https://bytesagain.com\\\"}}\"}}],[\"$\",\"div\",null,{\"className\":\"breadcrumb\",\"children\":[[\"$\",\"a\",null,{\"href\":\"/\",\"children\":\"BytesAgain\"}],\" β€Ί \",[\"$\",\"a\",null,{\"href\":\"/skills\",\"children\":\"Skills\"}],\" β€Ί \",\"Varg Ai\"]}],[\"$\",\"div\",null,{\"className\":\"two-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"two-col-main\",\"children\":[[\"$\",\"div\",null,{\"className\":\"skill-card\",\"children\":[[\"$\",\"div\",null,{\"className\":\"skill-header\",\"children\":[[\"$\",\"div\",null,{\"className\":\"skill-badges\",\"children\":[[\"$\",\"span\",null,{\"className\":\"badge\",\"style\":{\"color\":\"#818cf8\",\"background\":\"#818cf822\",\"borderColor\":\"#818cf844\"},\"children\":[\"πŸ¦€\",\" \",\"ClawHub\"]}],false]}],[\"$\",\"div\",null,{\"className\":\"skill-top-actions\",\"children\":[\"$\",\"$L22\",null,{\"slug\":\"varg-ai\"}]}]]}],[\"$\",\"h1\",null,{\"className\":\"skill-title\",\"children\":\"Varg Ai\"}],[\"$\",\"p\",null,{\"className\":\"skill-owner\",\"children\":[\"by \",[\"$\",\"span\",null,{\"children\":[\"@\",\"securityqq\"]}]]}],[\"$\",\"p\",null,{\"className\":\"skill-desc\",\"children\":\"Generate AI videos, images, speech, and music using varg. Use when creating videos, animations, talking characters, slideshows, product showcases, social con...\"}],[\"$\",\"div\",null,{\"className\":\"skill-meta\",\"children\":[[\"$\",\"div\",null,{\"className\":\"meta-item\",\"children\":[[\"$\",\"span\",null,{\"className\":\"meta-label\",\"children\":\"Version\"}],[\"$\",\"span\",null,{\"className\":\"meta-value\",\"children\":[\"v\",\"2.0.6\"]}]]}],[\"$\",\"div\",null,{\"className\":\"meta-item\",\"children\":[[\"$\",\"span\",null,{\"className\":\"meta-label\",\"children\":\"Downloads\"}],[\"$\",\"span\",null,{\"className\":\"meta-value\",\"children\":\"715\"}]]}],[\"$\",\"div\",null,{\"className\":\"meta-item\",\"children\":[[\"$\",\"span\",null,{\"className\":\"meta-label\",\"children\":\"Installs\"}],[\"$\",\"span\",null,{\"className\":\"meta-value\",\"children\":\"1\"}]]}],false,false,[\"$\",\"div\",null,{\"className\":\"meta-item\",\"style\":{\"flexDirection\":\"row\",\"gap\":6,\"alignItems\":\"center\"},\"children\":[[\"$\",\"a\",\"crypto-defi\",{\"href\":\"/?q=crypto-defi\",\"className\":\"tag\",\"children\":[\"#\",\"crypto-defi\"]}],[\"$\",\"a\",\"security\",{\"href\":\"/?q=security\",\"className\":\"tag\",\"children\":[\"#\",\"security\"]}],[\"$\",\"a\",\"video\",{\"href\":\"/?q=video\",\"className\":\"tag\",\"children\":[\"#\",\"video\"]}],[\"$\",\"a\",\"audio\",{\"href\":\"/?q=audio\",\"className\":\"tag\",\"children\":[\"#\",\"audio\"]}],[\"$\",\"a\",\"legal\",{\"href\":\"/?q=legal\",\"className\":\"tag\",\"children\":[\"#\",\"legal\"]}]]}]]}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":6},\"children\":[\"$\",\"a\",null,{\"href\":\"https://clawhub.ai/securityqq/varg-ai\",\"target\":\"_blank\",\"rel\":\"noopener\",\"className\":\"btn-secondary\",\"style\":{\"padding\":\"6px 12px\",\"fontSize\":\".82em\",\"borderRadius\":8,\"background\":\"transparent\",\"border\":\"1px solid var(--border-card)\",\"color\":\"var(--text-muted2)\",\"textDecoration\":\"none\",\"whiteSpace\":\"nowrap\"},\"children\":[\"View on \",\"ClawHub\",\" β†’\"]}]}]]}],[\"$\",\"div\",null,{\"className\":\"install-box\",\"children\":[[\"$\",\"div\",null,{\"className\":\"install-header\",\"children\":[[\"$\",\"div\",null,{\"className\":\"install-dots\",\"children\":[[\"$\",\"div\",null,{\"className\":\"dot\",\"style\":{\"background\":\"#ef4444\"}}],[\"$\",\"div\",null,{\"className\":\"dot\",\"style\":{\"background\":\"#eab308\"}}],[\"$\",\"div\",null,{\"className\":\"dot\",\"style\":{\"background\":\"#22c55e\"}}]]}],[\"$\",\"span\",null,{\"className\":\"install-label\",\"children\":\"TERMINAL\"}]]}],[\"$\",\"div\",null,{\"className\":\"install-body\",\"style\":{\"flexWrap\":\"wrap\"},\"children\":[[\"$\",\"code\",null,{\"className\":\"install-cmd\",\"children\":\"clawhub install varg-ai\"}],[\"$\",\"button\",null,{\"className\":\"copy-btn\",\"data-cmd\":\"clawhub install varg-ai\",\"style\":{\"fontWeight\":700},\"children\":\"Copy\"}]]}]]}],[\"$\",\"section\",null,{\"className\":\"skill-card\",\"style\":{\"marginBottom\":20},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"color\":\"#f8fafc\",\"fontSize\":\"1.2em\",\"fontWeight\":800,\"margin\":\"0 0 16px\",\"display\":\"flex\",\"alignItems\":\"center\",\"gap\":8},\"children\":\"πŸ“– About This Skill\"}],[\"$\",\"div\",null,{\"style\":{\"fontSize\":\".92em\",\"color\":\"#94a3b8\",\"lineHeight\":1.75},\"dangerouslySetInnerHTML\":{\"__html\":\"$23\"}}]]}],null,\"$L24\",null,null,null,null,null,false,false]}],\"$L25\"]}]]}]\n"])</script><script>self.__next_f.push([1,"21:[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"\\n document.querySelectorAll('.copy-btn, .script-copy-btn').forEach(btn =\u003e {\\n btn.addEventListener('click', () =\u003e {\\n const cmd = btn.getAttribute('data-cmd');\\n if (!cmd) return;\\n navigator.clipboard.writeText(cmd).then(() =\u003e {\\n const orig = btn.textContent;\\n btn.textContent = 'Copied!';\\n setTimeout(() =\u003e btn.textContent = orig, 1500);\\n }).catch(() =\u003e {});\\n });\\n });\\n \"}}]\n"])</script><script>self.__next_f.push([1,"27:I[71521,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/12w5ognupk9fb.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\n26:Td44,"])</script><script>self.__next_f.push([1,"\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eCloud Render (no bun/ffmpeg needed)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e# Submit TSX code to the render service\ncurl -s -X POST https://render.varg.ai/api/render \\\n -H \"Authorization: Bearer $VARG_API_KEY\" \\\n -H \"Content-Type: application/json\" \\\n -d '{\"code\": \"const img = Image({ model: varg.imageModel(\\\"nano-banana-pro\\\"), prompt: \\\"a cabin in mountains at sunset\\\", aspectRatio: \\\"16:9\\\" });\\nexport default (\u003cRender width={1920} height={1080}\u003e\u003cClip duration={3}\u003e{img}\u003c/Clip\u003e\u003c/Render\u003e);\"}'\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch2 style=\"color:#f3f4f6;margin:20px 0 10px;font-size:1.15em\"\u003ePoll for result (repeat until \"completed\" or \"failed\")\u003c/h2\u003e\ncurl -s https://render.varg.ai/api/render/jobs/JOB_ID \\\n -H \"Authorization: Bearer $VARG_API_KEY\"\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eFull details: \u003ca href=\"references/cloud-render.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003ecloud-render.md\u003c/a\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eLocal Render (bun + ffmpeg)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e/** @jsxImportSource vargai */\nimport { Render, Clip, Image } from \"vargai/react\"\nimport { createVarg } from \"vargai/ai\"\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003econst varg = createVarg({ apiKey: process.env.VARG_API_KEY! })\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003econst img = Image({\n model: varg.imageModel(\"nano-banana-pro\"),\n prompt: \"a cabin in mountains at sunset\",\n aspectRatio: \"16:9\"\n})\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eexport default (\n \u003cRender width={1920} height={1080}\u003e\n \u003cClip duration={3}\u003e{img}\u003c/Clip\u003e\n \u003c/Render\u003e\n)\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003ebunx vargai render video.tsx --preview # free preview\nbunx vargai render video.tsx --verbose # full render (costs credits)\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eFull details: \u003ca href=\"references/local-render.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003elocal-render.md\u003c/a\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eSingle Asset (no video composition)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eFor one-off images, videos, speech, or music without building a multi-clip template:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003ecurl -X POST https://api.varg.ai/v1/image \\\n -H \"Authorization: Bearer $VARG_API_KEY\" \\\n -d '{\"model\": \"nano-banana-pro\", \"prompt\": \"a sunset over mountains\"}'\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eFull API reference: \u003ca href=\"references/gateway-api.md\" target=\"_blank\" rel=\"noopener\" style=\"color:#6366f1\"\u003egateway-api.md\u003c/a\u003e\u003c/p\u003e"])</script><script>self.__next_f.push([1,"24:[\"$\",\"section\",null,{\"className\":\"skill-card\",\"style\":{\"marginBottom\":20},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"color\":\"#f8fafc\",\"fontSize\":\"1.2em\",\"fontWeight\":800,\"margin\":\"0 0 16px\",\"display\":\"flex\",\"alignItems\":\"center\",\"gap\":8},\"children\":\"πŸ’‘ Examples\"}],[\"$\",\"div\",null,{\"style\":{\"fontSize\":\".92em\",\"color\":\"#94a3b8\",\"lineHeight\":1.75},\"dangerouslySetInnerHTML\":{\"__html\":\"$26\"}}]]}]\n25:[\"$\",\"div\",null,{\"className\":\"two-col-side\",\"children\":[\"$\",\"$L27\",null,{\"category\":\"crypto\",\"currentSlug\":\"varg-ai\",\"name\":\"Varg Ai\",\"tags\":[\"crypto-defi\",\"security\",\"video\",\"audio\",\"legal\"]}]}]\n"])</script></body></html>