feat(examples): add direct-xAI grok video entries to ts-react-media

Adds 'xAI Direct' text-to-video and image-to-video entries to the video
generator that use the native grokVideo adapter against xAI's Imagine
API (XAI_API_KEY), alongside the existing fal-hosted grok-imagine
entries. Polling is now keyed by the UI model id (the direct entries
share one adapter model), and the completed card shows the exact USD
cost when the adapter reports it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: tombeckenham

examples/ts-react-media/.env.example

@@ -5,3 +5,7 @@ FAL_KEY=
 
 # Get a Google API key at https://aistudio.google.com/apikey
 GOOGLE_API_KEY=
+
+# Get an xAI API key at https://console.x.ai — used by the "xAI Direct"
+# Grok Imagine video models (the other Grok Imagine entries go through fal).
+XAI_API_KEY=

examples/ts-react-media/package.json

@@ -14,6 +14,7 @@
     "@tanstack/ai": "workspace:*",
     "@tanstack/ai-fal": "workspace:*",
     "@tanstack/ai-gemini": "workspace:*",
+    "@tanstack/ai-grok": "workspace:*",
     "@tanstack/react-router": "^1.158.4",
     "@tanstack/react-start": "^1.159.0",
     "@tanstack/router-plugin": "^1.158.4",

examples/ts-react-media/src/components/VideoGenerator.tsx

@@ -21,7 +21,7 @@ type JobState =
       model: string
       progress?: number | undefined
     }
-  | { status: 'completed'; url: string; unitsBilled?: number }
+  | { status: 'completed'; url: string; unitsBilled?: number; cost?: number }
   | { status: 'error'; message: string }
 
 interface VideoGeneratorProps {
@@ -97,6 +97,7 @@ export default function VideoGenerator({
             status: 'completed',
             url: url,
             unitsBilled: urlResult.usage?.unitsBilled,
+            cost: urlResult.usage?.cost,
           },
         }))
       } else if (status.status === 'processing') {
@@ -164,8 +165,11 @@ export default function VideoGenerator({
         },
       }))
 
+      // Poll keyed by the UI model id, not result.model: the direct-xAI
+      // entries share one adapter model ('grok-imagine-video'), so
+      // result.model wouldn't identify the card (or the adapter) uniquely.
       const interval = setInterval(() => {
-        pollStatus(result.jobId, result.model)
+        pollStatus(result.jobId, modelId)
       }, 4000)
       pollingRefs.current.set(modelId, interval)
     } catch (err) {
@@ -406,12 +410,21 @@ export default function VideoGenerator({
                         className="w-full h-auto"
                       />
                     </div>
-                    {state.unitsBilled != null && (
+                    {state.cost != null ? (
                       <p className="text-xs text-gray-500">
-                        Billed {state.unitsBilled} fal unit
-                        {state.unitsBilled === 1 ? '' : 's'} — multiply by the
-                        endpoint unit price for USD cost
+                        Billed ${state.cost.toFixed(3)}
+                        {state.unitsBilled != null
+                          ? ` for ${state.unitsBilled} second${state.unitsBilled === 1 ? '' : 's'} of video`
+                          : ''}
                       </p>
+                    ) : (
+                      state.unitsBilled != null && (
+                        <p className="text-xs text-gray-500">
+                          Billed {state.unitsBilled} fal unit
+                          {state.unitsBilled === 1 ? '' : 's'} — multiply by the
+                          endpoint unit price for USD cost
+                        </p>
+                      )
                     )}
                   </>
                 )}

examples/ts-react-media/src/lib/models.ts

@@ -110,6 +110,18 @@ export const VIDEO_MODELS = [
     description: 'xAI animate images to video',
     mode: 'image-to-video' as const,
   },
+  {
+    id: 'grok-imagine-video',
+    name: 'Grok Imagine Video (xAI Direct, Text-to-Video)',
+    description: 'xAI Imagine API via the native grokVideo adapter',
+    mode: 'text-to-video' as const,
+  },
+  {
+    id: 'grok-imagine-video/image-to-video',
+    name: 'Grok Imagine Video (xAI Direct, Image-to-Video)',
+    description: 'Animate a starting frame via the native grokVideo adapter',
+    mode: 'image-to-video' as const,
+  },
   {
     id: 'fal-ai/ltx-2.3/text-to-video/fast',
     name: 'LTX-2.3 Fast (Text-to-Video)',

examples/ts-react-media/src/lib/server-functions.ts

@@ -1,9 +1,9 @@
 import { createServerFn } from '@tanstack/react-start'
 import { falImage, falVideo } from '@tanstack/ai-fal'
 import { geminiImage } from '@tanstack/ai-gemini'
+import { grokVideo } from '@tanstack/ai-grok'
 import { generateImage, generateVideo, getVideoJobStatus } from '@tanstack/ai'
 
-import type { FalModel } from '@tanstack/ai-fal'
 import type {
   ImagePart,
   MediaInputMetadata,
@@ -67,6 +67,21 @@ function asImageToVideoPrompt(
   return narrowed
 }
 
+/**
+ * Resolves the video adapter for a UI model id. The native grok-imagine
+ * entries hit xAI's Imagine API directly via the `grokVideo` adapter
+ * (XAI_API_KEY); everything else is a fal-hosted model.
+ */
+function videoAdapterForModel(model: string) {
+  if (
+    model === 'grok-imagine-video' ||
+    model === 'grok-imagine-video/image-to-video'
+  ) {
+    return grokVideo('grok-imagine-video')
+  }
+  return falVideo(model)
+}
+
 export const generateImageFn = createServerFn({ method: 'POST' })
   .inputValidator((data: { prompt: MediaPrompt; model: string }) => {
     if (!hasPromptContent(data.prompt)) throw new Error('Prompt is required')
@@ -214,6 +229,18 @@ export const createVideoJobFn = createServerFn({ method: 'POST' })
           },
         })
       }
+      case 'grok-imagine-video': {
+        // Direct xAI Imagine API (XAI_API_KEY) — no fal in between. Sizing is
+        // an "aspectRatio_resolution" template; durations are 1-15 integer
+        // seconds. Completed jobs report usage.unitsBilled (billed seconds)
+        // and usage.cost (exact USD).
+        return generateVideo({
+          adapter: grokVideo('grok-imagine-video'),
+          prompt: asTextPrompt(data.prompt),
+          size: '16:9_720p',
+          duration: 5,
+        })
+      }
       case 'fal-ai/ltx-2.3/text-to-video/fast': {
         return generateVideo({
           adapter: falVideo('fal-ai/ltx-2.3/text-to-video/fast'),
@@ -252,6 +279,17 @@ export const createVideoJobFn = createServerFn({ method: 'POST' })
           },
         })
       }
+      case 'grok-imagine-video/image-to-video': {
+        // Direct xAI Imagine API. The starting frame is supplied as an image
+        // prompt part (asImageToVideoPrompt requires one); the grokVideo
+        // adapter forwards it to the Imagine endpoint as the start frame.
+        return generateVideo({
+          adapter: grokVideo('grok-imagine-video'),
+          prompt: asImageToVideoPrompt(data.prompt),
+          size: '16:9_720p',
+          duration: 5,
+        })
+      }
       case 'fal-ai/ltx-2.3/image-to-video/fast': {
         return generateVideo({
           adapter: falVideo('fal-ai/ltx-2.3/image-to-video/fast'),
@@ -265,9 +303,9 @@ export const createVideoJobFn = createServerFn({ method: 'POST' })
   })
 
 export const getVideoStatusFn = createServerFn({ method: 'GET' })
-  .inputValidator((data: { jobId: string; model: FalModel }) => data)
+  .inputValidator((data: { jobId: string; model: string }) => data)
   .handler(async ({ data }) => {
-    const adapter = falVideo(data.model)
+    const adapter = videoAdapterForModel(data.model)
     return await getVideoJobStatus({
       adapter,
       jobId: data.jobId,
@@ -277,7 +315,7 @@ export const getVideoStatusFn = createServerFn({ method: 'GET' })
 export const getVideoUrlFn = createServerFn({ method: 'GET' })
   .inputValidator((data: { jobId: string; model: string }) => data)
   .handler(async ({ data }) => {
-    const adapter = falVideo(data.model)
+    const adapter = videoAdapterForModel(data.model)
     return await getVideoJobStatus({
       adapter,
       jobId: data.jobId,