@vanillaskyai/video 0.7.1 → 0.8.0

package/registry/items/progressRing.json

@@ -123,7 +123,7 @@
           "mediaKeyword": {
             "type": "string",
             "title": "Background search keyword",
-            "description": "2-4 word English term for Pexels stock-footage search (auto-fills mediaUrl).",
+            "description": "2-4 word English term for stock-media search (auto-fills mediaUrl).",
             "format": "stock-media-keyword",
             "default": ""
           },
@@ -142,7 +142,7 @@
           "mediaPoster": {
             "type": "string",
             "title": "Background poster image",
-            "description": "Still image URL shown while a video backdrop is decoding its first frame. Auto-filled from Pexels' thumbnail when fillPexelsUrls sets a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
+            "description": "Still image URL shown while a video backdrop is decoding its first frame. A media resolver can supply a poster alongside a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
             "format": "uri",
             "default": ""
           },

package/registry/items/promptInput.json

@@ -80,7 +80,7 @@
           "mediaKeyword": {
             "type": "string",
             "title": "Background search keyword",
-            "description": "2-4 word English term for Pexels stock-footage search (auto-fills mediaUrl).",
+            "description": "2-4 word English term for stock-media search (auto-fills mediaUrl).",
             "format": "stock-media-keyword",
             "default": ""
           },
@@ -99,7 +99,7 @@
           "mediaPoster": {
             "type": "string",
             "title": "Background poster image",
-            "description": "Still image URL shown while a video backdrop is decoding its first frame. Auto-filled from Pexels' thumbnail when fillPexelsUrls sets a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
+            "description": "Still image URL shown while a video backdrop is decoding its first frame. A media resolver can supply a poster alongside a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
             "format": "uri",
             "default": ""
           },

package/registry/items/reaction.json

@@ -82,7 +82,7 @@
           "reactionTag": {
             "type": "string",
             "title": "Reaction tag",
-            "description": "Pexels meme search intent. Pick from the punchline/problem copy first, then the overall video topic.",
+            "description": "Stock-media search intent. Pick from the punchline/problem copy first, then the overall video topic.",
             "enum": [
               "launch",
               "productLaunch",
@@ -123,7 +123,7 @@
           "mediaUrl": {
             "type": "string",
             "title": "Reaction clip",
-            "description": "Resolved Pexels MP4 URL.",
+            "description": "Resolved stock-video URL.",
             "format": "uri",
             "default": ""
           },

package/registry/items/reviewStack.json

@@ -149,7 +149,7 @@
           "mediaKeyword": {
             "type": "string",
             "title": "Background search keyword",
-            "description": "2-4 word English term for Pexels stock-footage search (auto-fills mediaUrl).",
+            "description": "2-4 word English term for stock-media search (auto-fills mediaUrl).",
             "format": "stock-media-keyword",
             "default": ""
           },
@@ -168,7 +168,7 @@
           "mediaPoster": {
             "type": "string",
             "title": "Background poster image",
-            "description": "Still image URL shown while a video backdrop is decoding its first frame. Auto-filled from Pexels' thumbnail when fillPexelsUrls sets a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
+            "description": "Still image URL shown while a video backdrop is decoding its first frame. A media resolver can supply a poster alongside a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
             "format": "uri",
             "default": ""
           },

package/registry/items/steps.json

@@ -135,7 +135,7 @@
           "mediaKeyword": {
             "type": "string",
             "title": "Background search keyword",
-            "description": "2-4 word English term for Pexels stock-footage search (auto-fills mediaUrl).",
+            "description": "2-4 word English term for stock-media search (auto-fills mediaUrl).",
             "format": "stock-media-keyword",
             "default": ""
           },
@@ -154,7 +154,7 @@
           "mediaPoster": {
             "type": "string",
             "title": "Background poster image",
-            "description": "Still image URL shown while a video backdrop is decoding its first frame. Auto-filled from Pexels' thumbnail when fillPexelsUrls sets a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
+            "description": "Still image URL shown while a video backdrop is decoding its first frame. A media resolver can supply a poster alongside a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
             "format": "uri",
             "default": ""
           },

package/registry/items/terminal.json

@@ -137,7 +137,7 @@
           "mediaKeyword": {
             "type": "string",
             "title": "Background search keyword",
-            "description": "2-4 word English term for Pexels stock-footage search (auto-fills mediaUrl).",
+            "description": "2-4 word English term for stock-media search (auto-fills mediaUrl).",
             "format": "stock-media-keyword",
             "default": ""
           },
@@ -156,7 +156,7 @@
           "mediaPoster": {
             "type": "string",
             "title": "Background poster image",
-            "description": "Still image URL shown while a video backdrop is decoding its first frame. Auto-filled from Pexels' thumbnail when fillPexelsUrls sets a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
+            "description": "Still image URL shown while a video backdrop is decoding its first frame. A media resolver can supply a poster alongside a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
             "format": "uri",
             "default": ""
           },

package/registry/items/testimonial.json

@@ -93,7 +93,7 @@
           "mediaKeyword": {
             "type": "string",
             "title": "Background search keyword",
-            "description": "2-4 word English term for Pexels stock-footage search (auto-fills mediaUrl).",
+            "description": "2-4 word English term for stock-media search (auto-fills mediaUrl).",
             "format": "stock-media-keyword",
             "default": ""
           },
@@ -112,7 +112,7 @@
           "mediaPoster": {
             "type": "string",
             "title": "Background poster image",
-            "description": "Still image URL shown while a video backdrop is decoding its first frame. Auto-filled from Pexels' thumbnail when fillPexelsUrls sets a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
+            "description": "Still image URL shown while a video backdrop is decoding its first frame. A media resolver can supply a poster alongside a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
             "format": "uri",
             "default": ""
           },

package/registry/items/tripleStats.json

@@ -146,7 +146,7 @@
           "mediaKeyword": {
             "type": "string",
             "title": "Background search keyword",
-            "description": "2-4 word English term for Pexels stock-footage search (auto-fills mediaUrl).",
+            "description": "2-4 word English term for stock-media search (auto-fills mediaUrl).",
             "format": "stock-media-keyword",
             "default": ""
           },
@@ -165,7 +165,7 @@
           "mediaPoster": {
             "type": "string",
             "title": "Background poster image",
-            "description": "Still image URL shown while a video backdrop is decoding its first frame. Auto-filled from Pexels' thumbnail when fillPexelsUrls sets a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
+            "description": "Still image URL shown while a video backdrop is decoding its first frame. A media resolver can supply a poster alongside a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
             "format": "uri",
             "default": ""
           },

package/registry/items/tweet.json

@@ -129,7 +129,7 @@
           "mediaKeyword": {
             "type": "string",
             "title": "Background search keyword",
-            "description": "2-4 word English term for Pexels stock-footage search (auto-fills mediaUrl).",
+            "description": "2-4 word English term for stock-media search (auto-fills mediaUrl).",
             "format": "stock-media-keyword",
             "default": ""
           },
@@ -148,7 +148,7 @@
           "mediaPoster": {
             "type": "string",
             "title": "Background poster image",
-            "description": "Still image URL shown while a video backdrop is decoding its first frame. Auto-filled from Pexels' thumbnail when fillPexelsUrls sets a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
+            "description": "Still image URL shown while a video backdrop is decoding its first frame. A media resolver can supply a poster alongside a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
             "format": "uri",
             "default": ""
           },

package/registry/items/webMockup.json

@@ -204,7 +204,7 @@
           "mediaKeyword": {
             "type": "string",
             "title": "Background search keyword",
-            "description": "2-4 word English term for Pexels stock-footage search (auto-fills mediaUrl).",
+            "description": "2-4 word English term for stock-media search (auto-fills mediaUrl).",
             "default": ""
           },
           "mediaType": {
@@ -222,7 +222,7 @@
           "mediaPoster": {
             "type": "string",
             "title": "Background poster image",
-            "description": "Still image URL shown while a video backdrop is decoding its first frame. Auto-filled from Pexels' thumbnail when fillPexelsUrls sets a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
+            "description": "Still image URL shown while a video backdrop is decoding its first frame. A media resolver can supply a poster alongside a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a <video> mounting and decoding its first frame.",
             "format": "uri",
             "default": ""
           },

package/starters/video-chat/.env.example

@@ -1,10 +1,12 @@
 # Required: plans the response, including its opening and narration, and suggestions.
 ANTHROPIC_API_KEY=
 
-# Optional: generated speech. The browser voice is used when this is empty.
+# Optional: run `npx vanillasky providers add speech` first.
+# Generated speech; browser voice remains the fallback.
 XAI_API_KEY=
 
-# Optional: generated video and server-side speech transcription.
+# Optional: run `npx vanillasky providers add video` first.
+# Generated video and server-side speech transcription.
 FAL_KEY=
 
 # Optional: stock video and photography for templates and suggestion cards.

package/starters/video-chat/README.md

@@ -20,11 +20,23 @@ ANTHROPIC_API_KEY=...
 ```
 
 That is enough for rendered templates and the browser's built-in voice. The
-optional keys progressively improve the same experience:
+starter installs only the text provider. Enable optional adapters when needed:
 
-- `XAI_API_KEY` replaces the browser voice with generated speech.
-- `FAL_KEY` enables generated-video modes and server transcription.
-- `PEXELS_API_KEY` adds stock footage to rendered responses and suggestion cards.
+```bash
+npx vanillasky providers add speech
+npx vanillasky providers add video
+```
+
+Each command installs its provider package and connects the adapter through
+`providers.ts`. Run both commands to enable both upgrades.
+
+- Speech: add `XAI_API_KEY` to replace browser voice with generated speech.
+- Video: add `FAL_KEY` for generated video and server transcription.
+- Stock: add `PEXELS_API_KEY` for footage and suggestion images; no installation
+  is needed.
+
+The adapters live in `providers/` and remain application-owned. Running an
+upgrade again can finish an interrupted dependency installation.
 
 Restart the development server after changing keys. Open
 <http://localhost:5173> and prompt anything.
@@ -42,7 +54,7 @@ Restart the development server after changing keys. Open
 4. The opening footage loops or holds until the first planned scene and its
    voice are ready, then the response timeline takes over without a blank gap.
 5. The SDK holds every planned scene for its measured or estimated speech time
-   and prepares four possible next prompts while playback continues.
+   and loads possible next prompts independently after the response completes.
 
 The text model is the only required provider. Generated speech, transcription,
 stock media, and generated video are independent upgrades and never prevent a

package/starters/video-chat/package.json

@@ -9,13 +9,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vanillaskyai/video": "0.7.1",
+    "@vanillaskyai/video": "0.8.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "@ai-sdk/anthropic": "^3.0.0",
-    "ai": "^7.0.77",
-    "@ai-sdk/xai": "^4.0.52",
-    "@fal-ai/client": "1.10.1"
+    "ai": "^7.0.77"
   },
   "devDependencies": {
     "@types/react": "^19.2.18",

package/starters/video-chat/providers/speech.ts

@@ -0,0 +1,20 @@
+import { createXai } from "@ai-sdk/xai";
+import { experimental_generateSpeech as synthesizeSpeech } from "ai";
+import type { VideoChatHandlerOptions } from "@vanillaskyai/video/server";
+
+/** Optional generated speech; the SDK supplies the browser-voice fallback. */
+export const speechProvider: Pick<VideoChatHandlerOptions, "generateSpeech"> = {
+  generateSpeech: process.env.XAI_API_KEY
+    ? async ({ text, signal }) => {
+        const speech = await synthesizeSpeech({
+          model: createXai({ apiKey: process.env.XAI_API_KEY }).speech(),
+          text,
+          abortSignal: signal,
+        });
+        return {
+          audio: speech.audio.uint8Array,
+          mediaType: speech.audio.mediaType || "audio/mpeg",
+        };
+      }
+    : undefined,
+};

package/starters/video-chat/providers/video.ts

@@ -0,0 +1,66 @@
+import { fal } from "@fal-ai/client";
+import type { VideoChatHandlerOptions } from "@vanillaskyai/video/server";
+
+const VIDEO_MODEL = process.env.FAL_VIDEO_MODEL ?? "minimax/h3-max/text-to-video";
+
+async function filmScene(
+  subject: string,
+  generatedLook: string | undefined,
+  orientation: "portrait" | "landscape",
+  signal: AbortSignal,
+) {
+  fal.config({ credentials: process.env.FAL_KEY });
+  const started = Date.now();
+  console.log(`[video-chat] filming: ${subject.slice(0, 70)}`);
+  try {
+    const result = await fal.subscribe(VIDEO_MODEL, {
+      input: {
+        prompt: [
+          `Locked-off shot, ${orientation === "portrait" ? "9:16 vertical" : "16:9"}. ${subject}.`,
+          "One slow continuous camera move. Physically plausible motion.",
+          "No on-screen text, captions, subtitles, watermarks or logos.",
+          "Diegetic sound only. No music, no voiceover.",
+          generatedLook,
+        ].filter(Boolean).join("\n\n"),
+        duration: 5,
+        resolution: "480P",
+        aspect_ratio: orientation === "portrait" ? "9:16" : "16:9",
+      },
+      abortSignal: signal,
+    });
+    const url = result?.data?.video?.url;
+    if (typeof url !== "string") throw new Error("the video provider returned no url");
+    console.log(`[video-chat] filmed in ${Date.now() - started}ms`);
+    return url;
+  } catch (cause) {
+    const status = (cause as { status?: unknown })?.status;
+    console.error(
+      `[video-chat] filming failed after ${Date.now() - started}ms${typeof status === "number" ? ` (status ${status})` : ""}`,
+    );
+    throw cause;
+  }
+}
+
+/** Optional generated video and transcription; credentials remain server-only. */
+export const videoProvider: Pick<VideoChatHandlerOptions, "generateVideo" | "transcribe"> = {
+  generateVideo: process.env.FAL_KEY
+    ? async (query, { generatedLook, orientation, signal }) => ({
+        url: await filmScene(query, generatedLook, orientation, signal),
+        type: "video" as const,
+      })
+    : undefined,
+  transcribe: process.env.FAL_KEY
+    ? async ({ audio, mediaType, signal }) => {
+        signal.throwIfAborted();
+        fal.config({ credentials: process.env.FAL_KEY });
+        const bytes = Uint8Array.from(audio);
+        const url = await fal.storage.upload(new Blob([bytes.buffer], { type: mediaType }));
+        signal.throwIfAborted();
+        const result = await fal.subscribe(process.env.FAL_TRANSCRIBE_MODEL ?? "fal-ai/whisper", {
+          input: { audio_url: url, task: "transcribe" },
+          abortSignal: AbortSignal.any([signal, AbortSignal.timeout(60_000)]),
+        });
+        return String((result?.data as { text?: unknown })?.text ?? "");
+      }
+    : undefined,
+};

package/starters/video-chat/providers.ts

@@ -0,0 +1,3 @@
+import type { VideoChatHandlerOptions } from "@vanillaskyai/video/server";
+
+export const providers: Pick<VideoChatHandlerOptions, "generateSpeech" | "generateVideo" | "transcribe"> = {};

package/starters/video-chat/server.ts

@@ -1,57 +1,11 @@
 import { anthropic } from "@ai-sdk/anthropic";
-import { fal } from "@fal-ai/client";
-import { createXai } from "@ai-sdk/xai";
-import {
-  experimental_generateSpeech as synthesizeSpeech,
-  generateText,
-  streamText,
-} from "ai";
+import { generateText, streamText } from "ai";
 import { createVideoChatHandler } from "@vanillaskyai/video/server";
 import { findStockFootage } from "./stock";
+import { providers } from "./providers";
 
 const PLANNER_MODEL = process.env.ANTHROPIC_PLANNER_MODEL ?? "claude-sonnet-5";
 const NARRATION_MODEL = process.env.ANTHROPIC_NARRATION_MODEL ?? "claude-haiku-4-5";
-const VIDEO_MODEL = process.env.FAL_VIDEO_MODEL ?? "minimax/h3-max/text-to-video";
-const SHOT_DEADLINE_MS = 180_000;
-
-async function filmScene(
-  subject: string,
-  generatedLook: string | undefined,
-  orientation: "portrait" | "landscape",
-  signal: AbortSignal,
-) {
-  fal.config({ credentials: process.env.FAL_KEY });
-  const started = Date.now();
-  console.log(`[video-chat] filming: ${subject.slice(0, 70)}`);
-  try {
-    const result = await fal.subscribe(VIDEO_MODEL, {
-      input: {
-        prompt: [
-          `Locked-off shot, ${orientation === "portrait" ? "9:16 vertical" : "16:9"}. ${subject}.`,
-          "One slow continuous camera move. Physically plausible motion.",
-          "No on-screen text, captions, subtitles, watermarks or logos.",
-          "Diegetic sound only. No music, no voiceover.",
-          generatedLook,
-        ].filter(Boolean).join("\n\n"),
-        duration: 5,
-        resolution: "480P",
-        aspect_ratio: orientation === "portrait" ? "9:16" : "16:9",
-      },
-      abortSignal: AbortSignal.any([signal, AbortSignal.timeout(SHOT_DEADLINE_MS)]),
-    });
-    const url = result?.data?.video?.url;
-    if (typeof url !== "string") throw new Error("the video provider returned no url");
-    console.log(`[video-chat] filmed in ${Date.now() - started}ms`);
-    return url;
-  } catch (cause) {
-    const status = (cause as { status?: unknown })?.status;
-    console.error(
-      `[video-chat] filming failed after ${Date.now() - started}ms${typeof status === "number" ? ` (status ${status})` : ""}`,
-    );
-    throw cause;
-  }
-}
-
 /**
  * The application chooses providers and keeps their credentials here. The SDK
  * owns the video-chat protocol, prompts, capability negotiation, spend limits,
@@ -87,40 +41,10 @@ export const handleVideoChat = createVideoChatHandler({
     });
     return text;
   },
-  generateSpeech: process.env.XAI_API_KEY
-    ? async ({ text, signal }) => {
-        const speech = await synthesizeSpeech({
-          model: createXai({ apiKey: process.env.XAI_API_KEY }).speech(),
-          text,
-          abortSignal: signal,
-        });
-        return {
-          audio: speech.audio.uint8Array,
-          mediaType: speech.audio.mediaType || "audio/mpeg",
-        };
-      }
-    : undefined,
-  transcribe: process.env.FAL_KEY
-    ? async ({ audio, mediaType, signal }) => {
-        fal.config({ credentials: process.env.FAL_KEY });
-        const bytes = Uint8Array.from(audio);
-        const url = await fal.storage.upload(new Blob([bytes.buffer], { type: mediaType }));
-        const result = await fal.subscribe(process.env.FAL_TRANSCRIBE_MODEL ?? "fal-ai/whisper", {
-          input: { audio_url: url, task: "transcribe" },
-          abortSignal: AbortSignal.any([signal, AbortSignal.timeout(60_000)]),
-        });
-        return String((result?.data as { text?: unknown })?.text ?? "");
-      }
-    : undefined,
   searchMedia: process.env.PEXELS_API_KEY
-    ? (query, { orientation, signal }) => findStockFootage(query, orientation, signal)
-    : undefined,
-  generateVideo: process.env.FAL_KEY
-    ? async (query, { generatedLook, orientation, signal }) => ({
-        url: await filmScene(query, generatedLook, orientation, signal),
-        type: "video" as const,
-      })
+    ? (query, { orientation, signal, fallbackQuery }) => findStockFootage(query, orientation, signal, fallbackQuery)
     : undefined,
+  ...providers,
   welcome: {
     heroQuery: process.env.VIDEO_CHAT_WELCOME_KEYWORD ?? "underwater ocean sunlight",
     prompts: [