vargai 0.4.0-alpha86 → 0.4.0-alpha87

package/hello.tsx

@@ -0,0 +1,35 @@
+/** @jsxImportSource vargai */
+import { Render, Clip, Image, Video, assets } from "vargai/react";
+import { fal } from "vargai/ai";
+
+const girl = Image({
+  prompt: {
+    text: `Using the attached reference images, generate a photorealistic three-quarter editorial portrait of the exact same character — maintain identical face, hairstyle, and proportions from Image 1.
+
+Framing: Head and shoulders, cropped at upper chest. Direct eye contact with camera.
+
+Natural confident expression, relaxed shoulders.
+Preserve the outfit neckline and visible clothing details from reference.
+
+Background: Deep black with two contrasting orange gradient accents matching Reference 2. Soft gradient bleed, no hard edges.
+
+Shot on 85mm f/1.4 lens, shallow depth of field. Clean studio lighting — soft key light on face, subtle rim light on hair and shoulders for separation. High-end fashion editorial aesthetic.`,
+    images: [assets.characters.orangeGirl, assets.backgrounds.orangeGradient],
+  },
+  model: fal.imageModel("nano-banana-pro/edit"),
+  aspectRatio: "9:16",
+});
+
+export default (
+  <Render width={1080} height={1920}>
+    <Clip duration={5}>
+      <Video
+        prompt={{
+          text: "She waves hello warmly, natural smile, friendly expression. Studio lighting, authentic confident slightly playful atmosphere. Camera static. Intense orange lighting.",
+          images: [girl],
+        }}
+        model={fal.videoModel("kling-v2.5")}
+      />
+    </Clip>
+  </Render>
+);

package/package.json

@@ -71,7 +71,7 @@
     "zod": "^4.2.1"
   },
   "sideEffects": false,
-  "version": "0.4.0-alpha86",
+  "version": "0.4.0-alpha87",
   "exports": {
     ".": "./src/index.ts",
     "./ai": "./src/ai-sdk/index.ts",

package/src/ai-sdk/examples/garry-tan-varg.ts

@@ -0,0 +1,61 @@
+/**
+ * Garry Tan Talking Head Video
+ * Generate a video of Garry Tan saying "varg.ai is cool!"
+ */
+
+import {
+  generateImage,
+  experimental_generateSpeech as generateSpeech,
+} from "ai";
+import { elevenlabs, File, fal, generateVideo } from "../index";
+
+async function main() {
+  const script = `varg.ai is cool!`;
+
+  console.log("generating Garry Tan image and voice in parallel...");
+  const [imageResult, speechResult] = await Promise.all([
+    generateImage({
+      model: fal.imageModel("flux-schnell"),
+      prompt:
+        "Garry Tan, Y Combinator CEO, Asian American man, short dark hair, glasses, friendly smile, professional headshot, studio lighting, clean background, looking at camera",
+      n: 1,
+    }),
+    generateSpeech({
+      model: elevenlabs.speechModel("turbo"),
+      text: script,
+      voice: "adam",
+    }),
+  ]);
+
+  const firstImage = imageResult.images[0];
+  if (!firstImage) throw new Error("No image generated");
+  const image = File.from(firstImage);
+  const audio = File.from(speechResult.audio);
+
+  console.log(`image: ${(await image.data()).byteLength} bytes`);
+  console.log(`audio: ${(await audio.data()).byteLength} bytes`);
+
+  await Bun.write("output/garry-tan-image.png", await image.data());
+  await Bun.write("output/garry-tan-voice.mp3", await audio.data());
+
+  console.log("\nanimating Garry Tan (5 seconds)...");
+  const { video } = await generateVideo({
+    model: fal.videoModel("wan-2.5"),
+    prompt: {
+      text: "man talking naturally, moving mouth while speaking, subtle head movements, professional demeanor, blinking naturally",
+      images: [await image.data()],
+    },
+    duration: 5,
+  });
+
+  const output = File.from(video);
+  console.log(`video: ${(await output.data()).byteLength} bytes`);
+  await Bun.write("output/garry-tan-varg.mp4", await output.data());
+
+  console.log("\ndone! files saved to output/");
+  console.log("- output/garry-tan-image.png");
+  console.log("- output/garry-tan-voice.mp3");
+  console.log("- output/garry-tan-varg.mp4");
+}
+
+main().catch(console.error);

package/src/ai-sdk/providers/varg.ts

@@ -43,7 +43,20 @@ class VargAPIError extends Error {
 }
 
 function resolveConfig(settings: VargProviderSettings = {}) {
-  const apiKey = settings.apiKey ?? process.env.VARG_API_KEY ?? "";
+  let apiKey = settings.apiKey ?? process.env.VARG_API_KEY ?? "";
+
+  // Fallback to global credentials (~/.varg/credentials) if no key from settings or env
+  if (!apiKey) {
+    try {
+      const { getGlobalApiKey } = require("../../cli/credentials") as {
+        getGlobalApiKey: () => string | null;
+      };
+      apiKey = getGlobalApiKey() ?? "";
+    } catch {
+      // credentials module may not be available in all contexts (e.g., browser)
+    }
+  }
+
   const baseUrl = settings.baseUrl ?? "https://api.varg.ai/v1";
   return { apiKey, baseUrl };
 }

package/src/cli/commands/balance.ts

@@ -0,0 +1,102 @@
+/**
+ * vargai balance — check your credit balance
+ *
+ * Fetches the current balance from the Gateway API using the saved API key.
+ */
+
+import { defineCommand } from "citty";
+import { getCredentials, getGlobalApiKey } from "../credentials";
+
+const GATEWAY_URL = process.env.VARG_GATEWAY_URL ?? "https://api.varg.ai";
+
+const COLORS = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  red: "\x1b[31m",
+  cyan: "\x1b[36m",
+};
+
+function formatCents(cents: number): string {
+  return `$${(cents / 100).toLocaleString("en-US", { minimumFractionDigits: 2 })}`;
+}
+
+export const balanceCmd = defineCommand({
+  meta: {
+    name: "balance",
+    description: "check your credit balance",
+  },
+  async run() {
+    const apiKey = process.env.VARG_API_KEY ?? getGlobalApiKey();
+    const creds = getCredentials();
+
+    if (!apiKey) {
+      console.log();
+      console.log(
+        `${COLORS.yellow} !${COLORS.reset}  Not logged in. Run ${COLORS.cyan}vargai login${COLORS.reset} first.`,
+      );
+      console.log();
+      return;
+    }
+
+    process.stdout.write(
+      `\n${COLORS.dim}  ● Fetching balance...${COLORS.reset}`,
+    );
+
+    try {
+      const res = await fetch(`${GATEWAY_URL}/v1/balance`, {
+        headers: {
+          Authorization: `Bearer ${apiKey}`,
+        },
+      });
+
+      if (!res.ok) {
+        process.stdout.write("\r\x1b[K");
+        const body = (await res.json().catch(() => ({}))) as {
+          error?: string | { message?: string };
+        };
+        const errMsg =
+          typeof body.error === "string"
+            ? body.error
+            : (body.error?.message ??
+              `Failed to fetch balance (${res.status})`);
+        console.log(`${COLORS.red} ✗${COLORS.reset}  ${errMsg}`);
+        console.log();
+        return;
+      }
+
+      const data = (await res.json()) as { balance_cents: number };
+
+      process.stdout.write("\r\x1b[K");
+
+      console.log(
+        `${COLORS.bold}${COLORS.cyan}varg${COLORS.reset}${COLORS.dim} — account balance${COLORS.reset}`,
+      );
+      console.log();
+
+      if (creds?.email) {
+        console.log(`  ${COLORS.dim}Account:${COLORS.reset}  ${creds.email}`);
+      }
+
+      console.log(
+        `  ${COLORS.dim}Balance:${COLORS.reset}  ${COLORS.bold}${data.balance_cents.toLocaleString()} credits${COLORS.reset} (${formatCents(data.balance_cents)})`,
+      );
+      console.log();
+
+      if (data.balance_cents <= 0) {
+        console.log(
+          `  ${COLORS.yellow}No credits remaining.${COLORS.reset} Run ${COLORS.cyan}vargai topup${COLORS.reset} to add more.`,
+        );
+        console.log();
+      }
+    } catch (error) {
+      process.stdout.write("\r\x1b[K");
+      console.log(
+        `${COLORS.red} ✗${COLORS.reset}  Failed to connect to gateway. Check your connection.`,
+      );
+      console.log();
+    }
+  },
+});

package/src/cli/commands/index.ts

@@ -1,9 +1,12 @@
+export { balanceCmd } from "./balance.ts";
 export { findCmd, showFindHelp } from "./find.tsx";
 export { frameCmd, showFrameHelp } from "./frame.tsx";
 export { helloCmd } from "./hello.ts";
 export { helpCmd, showHelp } from "./help.tsx";
 export { initCmd, showInitHelp } from "./init.tsx";
 export { listCmd, showListHelp } from "./list.tsx";
+export { loginCmd } from "./login.tsx";
+export { logoutCmd } from "./logout.ts";
 export {
   previewCmd,
   renderCmd,
@@ -13,4 +16,5 @@ export {
 export { runCmd, showRunHelp, showTargetHelp } from "./run.tsx";
 export { showStoryboardHelp, storyboardCmd } from "./storyboard.tsx";
 export { studioCmd } from "./studio.ts";
+export { topupCmd } from "./topup.ts";
 export { showWhichHelp, whichCmd } from "./which.tsx";