@vanillaskyai/video 0.1.0

package/docs/responsive-orientation.md

@@ -0,0 +1,37 @@
+[← Documentation home](../README.md) · [Previous: Input and first scene](input-and-first-scene.md)
+
+# Responsive orientation
+
+Orientation is a composition constraint, not a fixed pixel size.
+
+- `portrait` uses a 9:16 design space for phones, stories, and feeds.
+- `landscape` uses 16:9 for embedded product surfaces, presentations, and desktop playback.
+
+Templates render on a canonical design canvas: 1080×1920 for portrait and
+1920×1080 for landscape. `VideoPlayer` preserves that canvas and scales it
+uniformly to its viewport. When the viewport has a different aspect ratio, the
+canvas is centered with letterboxing instead of being stretched.
+
+Template authors should still use relative layout, safe edges, clamped typography, and content-aware wrapping so both orientations and localized content remain readable.
+
+```tsx
+<div className="video-shell">
+  <VideoPlayer {...video.playerProps} orientation="auto" />
+</div>
+```
+
+```css
+.video-shell { width: min(100%, 48rem); margin-inline: auto; }
+```
+
+`orientation="auto"` uses landscape above 520 CSS pixels and portrait at or
+below 520, based on the player's container rather than the browser window. Set
+`responsiveBreakpoint` to match an existing host breakpoint. Set
+`orientation="portrait"` or `"landscape"` when a surface must remain fixed.
+Omitting the prop preserves the orientation recorded in the response config.
+
+This display override does not mutate the completed response, checksum, or export
+orientation. It reflows the same trusted templates and scene variables without
+another provider call. Test every template at narrow mobile widths, large embeds,
+200% zoom, both orientations, reduced motion, and with long localized copy.
+Meaning must remain available when motion is reduced.

package/docs/security.md

@@ -0,0 +1,38 @@
+[← Documentation home](../README.md) · [Previous: Streaming protocol](streaming-protocol.md) · [Next: Errors and recovery →](errors.md)
+
+# Security
+
+The SDK validates protocol shape; your application still owns identity, authorization, data policy, and infrastructure controls.
+
+## Required server controls
+
+- Authenticate the user and tenant before reading the prompt body.
+- `createVideoHandler` requires an explicit `authorize` policy. The
+  `authorize: "none"` escape hatch is for intentionally non-public in-process
+  tests only; do not use it on a billable generation route.
+- Allowlist browser origins; CORS is not authentication.
+- Bound request bytes, media count, scene count, duration, tokens, concurrency, and cost.
+- Keep provider keys, system prompts, tools, signed-URL credentials, and admin tokens server-side.
+- Use the same generated template registry on the server and in React; the handler infers validation.
+- Treat every project-owned template as trusted application build code and
+  review it before using the CLI. Normal `vanillasky list`,
+  `vanillasky describe`, `vanillasky add`, `vanillasky sync`, and
+  `vanillasky check` commands execute project template modules locally. This
+  includes `vanillasky add` previews with `--dry-run` or `--diff`, because the
+  CLI must derive the proposed browser and server registries. Resource and
+  environment boundaries reduce accidental damage but are not a portable
+  JavaScript sandbox.
+- Use `--builtin` with `list` or `describe` when you need the packaged catalog
+  only. That view does not execute project template modules. Project template
+  execution requires macOS, Linux, or WSL because Windows cannot provide the
+  process-group cleanup guarantee used by these commands.
+- Restrict media domains, types, dimensions, bytes, redirects, and fetch timeouts.
+- Propagate cancellation and use timeouts for provider, media, persistence, and export work.
+- Return safe typed errors while logging private causes only in protected observability.
+
+Do not log raw source, personalization, authorization headers, provider deltas, or signed media URLs by default. Record request ID, tenant-safe metrics, model ID, timing, event counts, error codes, and token usage.
+
+Treat final configs as customer data. Apply tenant isolation, retention,
+encryption, and deletion policy to snapshots and event logs. Report suspected
+SDK vulnerabilities through the repository's private process in
+[SECURITY.md](../SECURITY.md).

package/docs/streaming-protocol.md

@@ -0,0 +1,15 @@
+[← Documentation home](../README.md) · [Previous: Core concepts](concepts.md) · [Next: Security →](security.md)
+
+# Streaming protocol
+
+`createVideoHandler` returns validated server-sent events and `useVideo` consumes
+them. Normal applications do not parse SSE or reduce events themselves.
+
+The internal protocol is deterministic and versioned. A run starts once, adds or
+patches only complete validated scenes, and terminates exactly once as complete,
+error, or aborted. Every event has a run ID and sequence. Completion carries the
+authoritative snapshot and drift-detection checksum.
+
+Persist `video.video` when replay, editing, or export is required. Played scenes
+are immutable; patches may affect only future scenes. See the [protocol reference](reference/protocol.md)
+when implementing infrastructure rather than an ordinary SDK integration.

package/docs/testing.md

@@ -0,0 +1,137 @@
+# Test integrations without a model
+
+`@vanillaskyai/video/test` provides deterministic provider streams and in-process
+protocol events. It has no React or provider-SDK dependency, makes no network
+request, and does not require a model key.
+
+## Test a route handler with Vitest
+
+Pass `createMockVideoPlanner()` directly to the same `createVideoHandler()`
+used by the application. Call the handler with a standard `Request`; no live
+HTTP server is involved.
+
+```ts
+import { describe, expect, it } from "vitest";
+import { createVideoHandler } from "@vanillaskyai/video/server";
+import {
+  createMockVideoPlanner,
+  videoFixtures,
+} from "@vanillaskyai/video/test";
+
+describe("POST /api/video", () => {
+  it("returns a completed video stream", async () => {
+    const handle = createVideoHandler({
+      authorize: "none", // Explicit because this in-process test route is never public.
+      heartbeatMs: false,
+      streamText: createMockVideoPlanner(),
+    });
+    const response = await handle(new Request("https://app.test/api/video", {
+      method: "POST",
+      body: JSON.stringify({
+        protocolVersion: "0.4",
+        requestId: "route-test",
+        input: videoFixtures.portrait.input,
+      }),
+    }));
+    const body = await response.text();
+
+    expect(response.status).toBe(200);
+    expect(body).toContain('"type":"response.complete"');
+  });
+});
+```
+
+The mock emits provider-style newline-delimited JSON. The route still parses,
+validates, paces, and converts those plan parts into SSE exactly as it does with
+a live provider.
+
+## Test protocol events in process
+
+`simulateVideoStream(parts, options?)` runs the same composition and validation
+pipeline without an HTTP boundary. It yields structural, discriminated event
+objects. Default IDs are `test-request` and `test-run`; override `requestId` and
+`runId` when a test needs different fixed values.
+
+```ts
+import { expect, it } from "vitest";
+import {
+  simulateVideoStream,
+  videoFixtures,
+} from "@vanillaskyai/video/test";
+
+it("keeps a truncated result playable", async () => {
+  const events = [];
+  for await (const event of simulateVideoStream(
+    videoFixtures.scenarios.truncated,
+  )) {
+    events.push(event);
+  }
+
+  expect(events.at(-1)).toMatchObject({
+    type: "response.complete",
+    data: { finishReason: "length" },
+  });
+});
+```
+
+The portrait and landscape fixtures each contain `{ input, parts }`. All public
+fixture values are deeply frozen, and each helper clones parts before a run so
+one test cannot mutate another test's input.
+
+## Delays, aborts, and timeouts
+
+Delays and `timeoutMs` use ordinary timers and work with Vitest fake timers.
+
+```ts
+import { expect, it, vi } from "vitest";
+import {
+  simulateVideoStream,
+  videoFixtures,
+} from "@vanillaskyai/video/test";
+
+it("times out deterministically", async () => {
+  vi.useFakeTimers();
+  try {
+    const result = (async () => {
+      const events = [];
+      for await (const event of simulateVideoStream(
+        videoFixtures.scenarios.timeout,
+        { timeoutMs: 50 },
+      )) events.push(event);
+      return events;
+    })();
+
+    await vi.advanceTimersByTimeAsync(50);
+    await expect(result).resolves.toMatchObject([
+      { type: "response.start" },
+      { type: "scene.add" },
+      { type: "response.abort", data: { reason: "Request timed out" } },
+    ]);
+  } finally {
+    vi.useRealTimers();
+  }
+});
+```
+
+For a host cancellation, pass an `AbortController` signal and abort it after the
+desired partial event. Timeouts are opt-in and local to the simulator; at the
+route boundary the host remains responsible for aborting the request signal.
+
+## Fixed scenarios
+
+`createMockVideoPlanner({ scenario })` accepts:
+
+| Scenario | Expected terminal behavior |
+| --- | --- |
+| `success` | Completed portrait fixture |
+| `delayed` | Success after a 25 ms fake-timer-safe delay |
+| `truncated` | Partial playable result completed with `length` |
+| `invalidScene` | Invalid scene dropped with a recoverable diagnostic, then completion |
+| `providerFailure` | Redacted terminal generation failure |
+| `contentFilter` | Partial playable result completed with `content-filter` |
+| `abort` | Waits for the supplied request signal to abort |
+| `timeout` | Waits for the host signal or simulator `timeoutMs` |
+
+Use `parts` in `MockVideoPlannerOptions` to supply custom structural plan parts,
+and `delayMs` to delay every emitted provider chunk. Provider selection,
+credentials, retries, and real-provider acceptance remain application-owned.

package/docs/use-cases.md

@@ -0,0 +1,59 @@
+[← Documentation home](../README.md)
+
+# Video response use cases
+
+These four inputs show the primary product shape: AI answers and live
+application context become embedded video responses. The application decides
+which context matters and keeps it current. VanillaSky grounds, validates,
+composes, and plays the visual response.
+
+## News summary
+
+```ts
+video.generate({
+  input: `Headline: North Sea wind output reached a record on August 17.
+Source summary: Grid operators reported 18.2 GW at 14:00 CET, 12% above the
+previous record. Operators said lower demand helped reduce wholesale prices.`,
+  instructions: "Lead with the record, explain the comparison, then the impact.",
+  maxDurationSec: 24,
+});
+```
+
+## Contextual help
+
+```ts
+video.generate({
+  input: `The user is configuring an alert. The current threshold is 80%.
+Alerts evaluate every 15 minutes. Email and Slack are enabled. The Save button
+applies the rule to 42 selected accounts.`,
+  instructions: "Explain what will happen if the user saves this configuration.",
+  opening: "Here is what this alert will do.",
+  maxDurationSec: 24,
+});
+```
+
+## Personalized briefing
+
+```ts
+video.generate({
+  input: `The Acme account has 1,240 weekly active users, up 18% month over
+month. Three renewals are due in September. Support response time improved from
+4.2 hours to 2.8 hours.`,
+  personalization: { firstName: "Maya", accountName: "Acme" },
+  instructions: "Create a concise morning account briefing.",
+  maxDurationSec: 30,
+});
+```
+
+## Dynamic personalized page content
+
+```ts
+video.generate({
+  input: `The page shows the Q2 onboarding funnel. 8,420 users started setup,
+6,315 connected a data source, and 4,884 invited a teammate. The largest drop
+is between connecting a data source and inviting a teammate.`,
+  instructions: "Respond to the visible funnel and focus on the largest drop.",
+  orientation: "landscape",
+  maxDurationSec: 24,
+});
+```

package/examples/custom-template/README.md

@@ -0,0 +1,19 @@
+# Custom template references
+
+These files are deliberately complete, one-file examples. Copy the closest
+shape into `vanillasky/templates/`, rename its ID, then run `npx vanillasky
+sync` and `npx vanillasky check`.
+
+| Reference | Use it when |
+| --- | --- |
+| [Minimal text](minimal-text.tsx) | One short, grounded idea should fill the scene. |
+| [Structured data](structured-data.tsx) | An exact metric and its change are the central proof. |
+| [Supplied media](supplied-media.tsx) | An image already supplied by the application is the strongest evidence. |
+
+All three use only `defineTemplate` from the public
+`@vanillaskyai/video/templates` entry point. They include selection guidance,
+JSON Schema defaults, a named example, deterministic progress-based motion,
+safe-zone layout, and portrait/landscape handling. The media reference uses
+`format: "supplied-image"` for an image that must appear in
+`VideoInput.suppliedMedia`; use `format: "uri"` for another approved media or
+link URL governed by the same server media policy.

package/examples/custom-template/minimal-text.tsx

@@ -0,0 +1,82 @@
+import { defineTemplate } from "@vanillaskyai/video/templates";
+
+export const template = defineTemplate({
+  id: "minimal-text",
+  label: "Minimal text",
+  description: "A single grounded statement with a short supporting line.",
+  useWhen: "Use when one concise idea should be the entire visual response.",
+  avoidWhen: "Avoid when exact metrics, comparisons, or supplied media are the main proof.",
+  schema: {
+    type: "object",
+    properties: {
+      headline: {
+        type: "string",
+        title: "Headline",
+        description: "The grounded idea the viewer should remember.",
+        minLength: 1,
+        maxLength: 72,
+        default: "The answer, made visual.",
+      },
+      detail: {
+        type: "string",
+        title: "Supporting detail",
+        description: "One short line that explains the headline.",
+        minLength: 1,
+        maxLength: 140,
+        default: "Grounded in the context your application already has.",
+      },
+    },
+    required: ["headline", "detail"],
+    additionalProperties: false,
+  } as const,
+  examples: [{
+    name: "Visual answer",
+    variables: {
+      headline: "The answer, made visual.",
+      detail: "Grounded in the context your application already has.",
+    },
+  }],
+  minDuration: 3,
+  preferredDuration: 5,
+  component: ({ variables, progress, width, height, safeZone }) => {
+    const isPortrait = height >= width;
+    const reveal = Math.max(0, Math.min(1, progress * 1.6));
+    const contentWidth = isPortrait
+      ? width - safeZone.left - safeZone.right
+      : Math.min(width * 0.7, 980);
+
+    return <section style={{
+      boxSizing: "border-box",
+      width,
+      height,
+      padding: `${safeZone.top}px ${safeZone.right}px ${safeZone.bottom}px ${safeZone.left}px`,
+      display: "grid",
+      placeItems: "center",
+      overflow: "hidden",
+      color: "#ffffff",
+      background: "linear-gradient(145deg, #11152c, #34357d 58%, #7867dd)",
+      fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
+    }}>
+      <div style={{
+        width: contentWidth,
+        opacity: reveal,
+        transform: `translateY(${Math.round((1 - reveal) * 28)}px)`,
+        textAlign: isPortrait ? "left" : "center",
+      }}>
+        <h1 style={{
+          margin: 0,
+          fontSize: Math.max(38, Math.min(width * (isPortrait ? 0.105 : 0.064), 92)),
+          lineHeight: 0.98,
+          letterSpacing: "-0.05em",
+        }}>{variables.headline}</h1>
+        <p style={{
+          margin: `${Math.max(20, height * 0.035)}px auto 0`,
+          maxWidth: 760,
+          fontSize: Math.max(18, Math.min(width * 0.028, 34)),
+          lineHeight: 1.35,
+          color: "rgba(255,255,255,0.76)",
+        }}>{variables.detail}</p>
+      </div>
+    </section>;
+  },
+});

package/examples/custom-template/structured-data.tsx

@@ -0,0 +1,104 @@
+import { defineTemplate } from "@vanillaskyai/video/templates";
+
+export const template = defineTemplate({
+  id: "structured-data",
+  label: "Structured data",
+  description: "A named metric with its previous value and grounded explanation.",
+  useWhen: "Use when one exact metric and its change are the central proof.",
+  avoidWhen: "Avoid when several peer metrics matter or the source contains no exact number.",
+  schema: {
+    type: "object",
+    properties: {
+      label: {
+        type: "string",
+        title: "Metric",
+        minLength: 1,
+        maxLength: 48,
+        default: "Activation",
+      },
+      current: {
+        type: "number",
+        format: "grounded-stat",
+        title: "Current value",
+        default: 58,
+      },
+      previous: {
+        type: "number",
+        format: "grounded-stat",
+        title: "Previous value",
+        default: 41,
+      },
+      unit: {
+        type: "string",
+        title: "Unit",
+        maxLength: 12,
+        default: "%",
+      },
+      explanation: {
+        type: "string",
+        title: "Explanation",
+        minLength: 1,
+        maxLength: 120,
+        default: "Guided onboarding helped more users reach value.",
+      },
+    },
+    required: ["label", "current", "previous", "unit", "explanation"],
+    additionalProperties: false,
+    "x-vanillasky": { requiresStat: true },
+  } as const,
+  examples: [{
+    name: "Activation improved",
+    variables: {
+      label: "Activation",
+      current: 58,
+      previous: 41,
+      unit: "%",
+      explanation: "Guided onboarding helped more users reach value.",
+    },
+  }],
+  minDuration: 4,
+  preferredDuration: 6,
+  component: ({ variables, progress, width, height, safeZone }) => {
+    const isPortrait = height >= width;
+    const reveal = Math.max(0, Math.min(1, progress * 1.5));
+    const delta = variables.current - variables.previous;
+
+    return <section style={{
+      boxSizing: "border-box",
+      width,
+      height,
+      padding: `${safeZone.top}px ${safeZone.right}px ${safeZone.bottom}px ${safeZone.left}px`,
+      display: "grid",
+      alignContent: "center",
+      gap: isPortrait ? 42 : 28,
+      overflow: "hidden",
+      color: "#f7f7ff",
+      background: "linear-gradient(155deg, #0c1624, #173b4b 58%, #287b77)",
+      fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
+    }}>
+      <p style={{ margin: 0, opacity: 0.72, fontSize: isPortrait ? 30 : 28 }}>
+        {variables.label}
+      </p>
+      <div style={{
+        display: "flex",
+        flexDirection: isPortrait ? "column" : "row",
+        alignItems: isPortrait ? "flex-start" : "baseline",
+        gap: isPortrait ? 12 : 36,
+        opacity: reveal,
+        transform: `translateY(${Math.round((1 - reveal) * 24)}px)`,
+      }}>
+        <strong style={{
+          fontSize: Math.max(76, Math.min(width * (isPortrait ? 0.23 : 0.14), 220)),
+          lineHeight: 0.85,
+          letterSpacing: "-0.07em",
+        }}>{variables.current}{variables.unit}</strong>
+        <span style={{ fontSize: isPortrait ? 28 : 34, color: "#83f3ca" }}>
+          {delta >= 0 ? "+" : ""}{delta}{variables.unit} from {variables.previous}{variables.unit}
+        </span>
+      </div>
+      <p style={{ margin: 0, maxWidth: 900, fontSize: isPortrait ? 27 : 30, lineHeight: 1.35 }}>
+        {variables.explanation}
+      </p>
+    </section>;
+  },
+});

package/examples/custom-template/supplied-media.tsx

@@ -0,0 +1,92 @@
+import { defineTemplate } from "@vanillaskyai/video/templates";
+
+const previewImageUrl = "data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221200%22%20height=%22720%22%20viewBox=%220%200%201200%20720%22%3E%3Crect%20width=%221200%22%20height=%22720%22%20rx=%2248%22%20fill=%22%23181733%22/%3E%3Crect%20x=%2280%22%20y=%2280%22%20width=%221040%22%20height=%22560%22%20rx=%2232%22%20fill=%22%23f4f1ff%22/%3E%3Ccircle%20cx=%22220%22%20cy=%22230%22%20r=%2270%22%20fill=%22%237867dd%22/%3E%3Cpath%20d=%22M160%20520L380%20360L580%20430L820%20220L1040%20300%22%20fill=%22none%22%20stroke=%22%23287b77%22%20stroke-width=%2232%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E";
+
+export const template = defineTemplate({
+  id: "supplied-media",
+  label: "Supplied media",
+  description: "An application-supplied screenshot with a grounded caption.",
+  useWhen: "Use when a supplied product image is the strongest evidence for the answer.",
+  avoidWhen: "Avoid when no approved image was supplied or text and data communicate the point more clearly.",
+  schema: {
+    type: "object",
+    properties: {
+      imageUrl: {
+        type: "string",
+        format: "supplied-image",
+        title: "Supplied image",
+        description: "The URL of an image present in VideoInput.suppliedMedia.",
+        default: previewImageUrl,
+      },
+      headline: {
+        type: "string",
+        title: "Headline",
+        minLength: 1,
+        maxLength: 72,
+        default: "See the change in context.",
+      },
+      caption: {
+        type: "string",
+        title: "Caption",
+        minLength: 1,
+        maxLength: 120,
+        default: "The dashboard reflects the grounded result described in the answer.",
+      },
+    },
+    required: ["imageUrl", "headline", "caption"],
+    additionalProperties: false,
+  } as const,
+  examples: [{
+    name: "Product dashboard",
+    variables: {
+      imageUrl: previewImageUrl,
+      headline: "See the change in context.",
+      caption: "The dashboard reflects the grounded result described in the answer.",
+    },
+  }],
+  minDuration: 4,
+  preferredDuration: 6,
+  component: ({ variables, progress, width, height, safeZone }) => {
+    const isPortrait = height >= width;
+    const reveal = Math.max(0, Math.min(1, progress * 1.7));
+
+    return <section style={{
+      boxSizing: "border-box",
+      width,
+      height,
+      padding: `${safeZone.top}px ${safeZone.right}px ${safeZone.bottom}px ${safeZone.left}px`,
+      display: "grid",
+      gridTemplateColumns: isPortrait ? "1fr" : "minmax(0, 1.1fr) minmax(320px, 0.9fr)",
+      alignContent: "center",
+      alignItems: "center",
+      gap: isPortrait ? 44 : 64,
+      overflow: "hidden",
+      color: "#15152b",
+      background: "linear-gradient(145deg, #f4f1ff, #dfe7ff)",
+      fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
+    }}>
+      <img
+        src={variables.imageUrl}
+        alt=""
+        style={{
+          display: "block",
+          width: "100%",
+          maxHeight: isPortrait ? height * 0.48 : height * 0.68,
+          objectFit: "cover",
+          borderRadius: 28,
+          boxShadow: "0 28px 80px rgba(28, 34, 75, 0.24)",
+          opacity: reveal,
+          transform: `scale(${0.96 + reveal * 0.04})`,
+        }}
+      />
+      <div style={{ opacity: reveal }}>
+        <h1 style={{ margin: 0, fontSize: isPortrait ? 58 : 70, lineHeight: 0.98, letterSpacing: "-0.045em" }}>
+          {variables.headline}
+        </h1>
+        <p style={{ margin: "24px 0 0", fontSize: isPortrait ? 25 : 28, lineHeight: 1.4 }}>
+          {variables.caption}
+        </p>
+      </div>
+    </section>;
+  },
+});

package/examples/nextjs-quickstart/.env.example

@@ -0,0 +1,2 @@
+OPENAI_API_KEY=replace-me
+OPENAI_MODEL=gpt-4.1

package/examples/nextjs-quickstart/README.md

@@ -0,0 +1,22 @@
+# Next.js quickstart
+
+This is the smallest complete VanillaSky app: one server route, one React page,
+and the built-in templates.
+
+<!-- verify:start -->
+```bash
+npm install
+cp .env.example .env.local
+npm run build
+npm run dev
+```
+<!-- verify:end -->
+
+Add your OpenAI API key to `.env.local` before selecting **Generate video**.
+
+Open <http://localhost:3000> and select **Generate video**.
+
+The example authorizes local development only and denies production requests.
+Replace the local-only authorization before deploying. See the
+[Next.js guide](../../docs/integrate-nextjs.md) for production and optional
+configuration.

package/examples/nextjs-quickstart/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// This file is generated and maintained by Next.js.

package/examples/nextjs-quickstart/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "vanillasky-nextjs-quickstart",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@ai-sdk/openai": "^4.0.42",
+    "@vanillaskyai/video": "0.1.0",
+    "ai": "^7.0.66",
+    "next": "16.3.1",
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5.9.3"
+  }
+}

package/examples/nextjs-quickstart/src/app/api/video/route.ts

@@ -0,0 +1,22 @@
+import { openai } from "@ai-sdk/openai";
+import { streamText } from "ai";
+import { createVideoHandler } from "@vanillaskyai/video/server";
+
+const model = openai(process.env.OPENAI_MODEL ?? "gpt-4.1");
+
+const handle = createVideoHandler({
+  authorize: (request) => {
+    if (process.env.NODE_ENV !== "development") return false;
+    const hostname = new URL(request.url).hostname;
+    return hostname === "localhost" || hostname === "127.0.0.1";
+  },
+  streamText: ({ systemPrompt, userPrompt, signal }) => streamText({
+    model,
+    system: systemPrompt,
+    prompt: userPrompt,
+    abortSignal: signal,
+  }),
+});
+
+export const POST = handle;
+export const OPTIONS = handle;

package/examples/nextjs-quickstart/src/app/layout.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+
+export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
+  return <html lang="en"><body>{children}</body></html>;
+}