@tanstack/cta-framework-react-cra 0.44.2 → 0.45.0

package/add-ons/ai/assets/src/routes/demo/ai-structured.tsx

@@ -0,0 +1,310 @@
+import { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { ChefHat, Clock, Users, Gauge } from 'lucide-react'
+import { Streamdown } from 'streamdown'
+
+import type { Recipe } from './api.ai.structured'
+
+type Mode = 'structured' | 'oneshot'
+
+const SAMPLE_RECIPES = [
+  'Homemade Margherita Pizza',
+  'Thai Green Curry',
+  'Classic Beef Bourguignon',
+  'Chocolate Lava Cake',
+  'Crispy Korean Fried Chicken',
+  'Fresh Spring Rolls with Peanut Sauce',
+  'Creamy Mushroom Risotto',
+  'Authentic Pad Thai',
+]
+
+function RecipeCard({ recipe }: { recipe: Recipe }) {
+  const difficultyColors = {
+    easy: 'bg-green-500/20 text-green-400',
+    medium: 'bg-yellow-500/20 text-yellow-400',
+    hard: 'bg-red-500/20 text-red-400',
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h3 className="text-2xl font-bold text-white mb-2">{recipe.name}</h3>
+        <p className="text-gray-400">{recipe.description}</p>
+      </div>
+
+      {/* Meta info */}
+      <div className="flex flex-wrap gap-4">
+        <div className="flex items-center gap-2 text-gray-300">
+          <Clock className="w-4 h-4 text-orange-400" />
+          <span className="text-sm">Prep: {recipe.prepTime}</span>
+        </div>
+        <div className="flex items-center gap-2 text-gray-300">
+          <Clock className="w-4 h-4 text-orange-400" />
+          <span className="text-sm">Cook: {recipe.cookTime}</span>
+        </div>
+        <div className="flex items-center gap-2 text-gray-300">
+          <Users className="w-4 h-4 text-orange-400" />
+          <span className="text-sm">{recipe.servings} servings</span>
+        </div>
+        <div
+          className={`flex items-center gap-2 px-2 py-1 rounded-full ${
+            difficultyColors[recipe.difficulty]
+          }`}
+        >
+          <Gauge className="w-4 h-4" />
+          <span className="text-sm capitalize">{recipe.difficulty}</span>
+        </div>
+      </div>
+
+      {/* Ingredients */}
+      <div>
+        <h4 className="text-lg font-semibold text-white mb-3">Ingredients</h4>
+        <ul className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          {recipe.ingredients.map((ing, idx) => (
+            <li key={idx} className="flex items-start gap-2 text-gray-300">
+              <span className="text-orange-400">•</span>
+              <span>
+                <span className="font-medium">{ing.amount}</span> {ing.item}
+                {ing.notes && (
+                  <span className="text-gray-500 text-sm"> ({ing.notes})</span>
+                )}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Instructions */}
+      <div>
+        <h4 className="text-lg font-semibold text-white mb-3">Instructions</h4>
+        <ol className="space-y-3">
+          {recipe.instructions.map((step, idx) => (
+            <li key={idx} className="flex gap-3 text-gray-300">
+              <span className="flex-shrink-0 w-6 h-6 bg-orange-500/20 text-orange-400 rounded-full flex items-center justify-center text-sm font-medium">
+                {idx + 1}
+              </span>
+              <span>{step}</span>
+            </li>
+          ))}
+        </ol>
+      </div>
+
+      {/* Tips */}
+      {recipe.tips && recipe.tips.length > 0 && (
+        <div>
+          <h4 className="text-lg font-semibold text-white mb-3">Tips</h4>
+          <ul className="space-y-2">
+            {recipe.tips.map((tip, idx) => (
+              <li key={idx} className="flex items-start gap-2 text-gray-300">
+                <span className="text-yellow-400">*</span>
+                <span>{tip}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Nutrition */}
+      {recipe.nutritionPerServing && (
+        <div>
+          <h4 className="text-lg font-semibold text-white mb-3">
+            Nutrition (per serving)
+          </h4>
+          <div className="flex flex-wrap gap-4 text-sm">
+            {recipe.nutritionPerServing.calories && (
+              <span className="px-3 py-1 bg-gray-700 rounded-full text-gray-300">
+                {recipe.nutritionPerServing.calories} cal
+              </span>
+            )}
+            {recipe.nutritionPerServing.protein && (
+              <span className="px-3 py-1 bg-gray-700 rounded-full text-gray-300">
+                Protein: {recipe.nutritionPerServing.protein}
+              </span>
+            )}
+            {recipe.nutritionPerServing.carbs && (
+              <span className="px-3 py-1 bg-gray-700 rounded-full text-gray-300">
+                Carbs: {recipe.nutritionPerServing.carbs}
+              </span>
+            )}
+            {recipe.nutritionPerServing.fat && (
+              <span className="px-3 py-1 bg-gray-700 rounded-full text-gray-300">
+                Fat: {recipe.nutritionPerServing.fat}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function StructuredPage() {
+  const [recipeName, setRecipeName] = useState('')
+  const [result, setResult] = useState<{
+    mode: Mode
+    recipe?: Recipe
+    markdown?: string
+    provider: string
+    model: string
+  } | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleGenerate = async (mode: Mode) => {
+    if (!recipeName.trim()) return
+
+    setIsLoading(true)
+    setError(null)
+    setResult(null)
+
+    try {
+      const response = await fetch('/demo/api/ai/structured', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ recipeName, mode }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to generate recipe')
+      }
+
+      setResult(data)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const canExecute = !!(!isLoading && recipeName.trim() && !error)
+
+  return (
+    <div className="min-h-[calc(100vh-80px)] bg-gray-900 p-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex items-center gap-3 mb-6">
+          <ChefHat className="w-8 h-8 text-orange-500" />
+          <h1 className="text-2xl font-bold text-white">
+            One-Shot & Structured Output
+          </h1>
+        </div>
+
+        <p className="text-gray-400 mb-6">
+          Compare two output modes:{' '}
+          <strong className="text-orange-400">One-Shot</strong> returns freeform
+          markdown, while{' '}
+          <strong className="text-orange-400">Structured</strong> returns
+          validated JSON conforming to a Zod schema.
+        </p>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              Recipe Name
+            </label>
+            <input
+              type="text"
+              value={recipeName}
+              onChange={(e) => setRecipeName(e.target.value)}
+              disabled={isLoading}
+              placeholder="e.g., Chocolate Chip Cookies"
+              className="w-full rounded-lg border border-orange-500/20 bg-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50"
+            />
+
+            <div className="mt-2">
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Quick Picks
+              </label>
+              <div className="flex flex-wrap gap-2">
+                {SAMPLE_RECIPES.map((name) => (
+                  <button
+                    key={name}
+                    onClick={() => setRecipeName(name)}
+                    disabled={isLoading}
+                    className="px-2 py-1 text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg border border-gray-700 transition-colors"
+                  >
+                    {name}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <div className="grid grid-cols-2 gap-2">
+              <button
+                onClick={() => handleGenerate('oneshot')}
+                disabled={!canExecute}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors text-white ${
+                  !canExecute ? 'bg-gray-600' : 'bg-orange-500'
+                }`}
+              >
+                One-Shot (Markdown)
+              </button>
+              <button
+                onClick={() => handleGenerate('structured')}
+                disabled={!canExecute}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors  text-white ${
+                  !canExecute ? 'bg-gray-600' : 'bg-blue-500'
+                }`}
+              >
+                Structured (JSON)
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Output Panel */}
+        <div className="mt-5 lg:col-span-2 bg-gray-800 rounded-lg p-6 border border-orange-500/20">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-semibold text-white">
+              Generated Recipe
+            </h2>
+            {result && (
+              <span
+                className={`px-2 py-1 rounded text-xs font-medium ${
+                  result.mode === 'structured'
+                    ? 'bg-purple-500/20 text-purple-400'
+                    : 'bg-blue-500/20 text-blue-400'
+                }`}
+              >
+                {result.mode === 'structured' ? 'Structured JSON' : 'Markdown'}
+              </span>
+            )}
+          </div>
+
+          {error && (
+            <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 mb-4">
+              {error}
+            </div>
+          )}
+
+          {result ? (
+            <div className="space-y-4">
+              {result.mode === 'structured' && result.recipe ? (
+                <RecipeCard recipe={result.recipe} />
+              ) : result.markdown ? (
+                <div className="prose prose-invert max-w-none">
+                  <Streamdown>{result.markdown}</Streamdown>
+                </div>
+              ) : null}
+            </div>
+          ) : !error && !isLoading ? (
+            <div className="flex flex-col items-center justify-center h-64 text-gray-500">
+              <ChefHat className="w-16 h-16 mb-4 opacity-50" />
+              <p>
+                Enter a recipe name and click "Generate Recipe" to get started.
+              </p>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Route = createFileRoute('/demo/ai-structured')({
+  component: StructuredPage,
+})

package/{examples/tanchat/assets/src/routes/demo/api.tanchat.ts → add-ons/ai/assets/src/routes/demo/api.ai.chat.ts}

@@ -5,8 +5,7 @@ import { openaiText } from '@tanstack/ai-openai'
 import { geminiText } from '@tanstack/ai-gemini'
 import { ollamaText } from '@tanstack/ai-ollama'
 
-import { getGuitars, recommendGuitarToolDef } from '@/lib/example.guitar-tools'
-import type { Provider } from '@/lib/model-selection'
+import { getGuitars, recommendGuitarToolDef } from '@/lib/demo-guitar-tools'
 
 const SYSTEM_PROMPT = `You are a helpful assistant for a store that sells guitars.
 
@@ -25,7 +24,7 @@ IMPORTANT:
 - Do NOT describe the guitar yourself - let the recommendGuitar tool do it
 `
 
-export const Route = createFileRoute('/demo/api/tanchat')({
+export const Route = createFileRoute('/demo/api/ai/chat')({
   server: {
     handlers: {
       POST: async ({ request }) => {
@@ -42,9 +41,20 @@ export const Route = createFileRoute('/demo/api/tanchat')({
         try {
           const body = await request.json()
           const { messages } = body
-          const data = body.data || {}
-          const provider: Provider = data.provider || 'anthropic'
-          const model: string = data.model || 'claude-haiku-4-5'
+
+          // Determine the best available provider
+          let provider: string = 'ollama'
+          let model: string = 'mistral:7b'
+          if (process.env.ANTHROPIC_API_KEY) {
+            provider = 'anthropic'
+            model = 'claude-haiku-4-5'
+          } else if (process.env.OPENAI_API_KEY) {
+            provider = 'openai'
+            model = 'gpt-4o'
+          } else if (process.env.GEMINI_API_KEY) {
+            provider = 'gemini'
+            model = 'gemini-2.0-flash-exp'
+          }
 
           // Adapter factory pattern for multi-vendor support
           const adapterConfig = {

package/{examples/tanchat/assets/src/routes/demo/api.image.ts → add-ons/ai/assets/src/routes/demo/api.ai.image.ts}

@@ -2,14 +2,12 @@ import { createFileRoute } from '@tanstack/react-router'
 import { generateImage, createImageOptions } from '@tanstack/ai'
 import { openaiImage } from '@tanstack/ai-openai'
 
-export const Route = createFileRoute('/demo/api/image')({
+export const Route = createFileRoute('/demo/api/ai/image')({
   server: {
     handlers: {
       POST: async ({ request }) => {
         const body = await request.json()
         const { prompt, numberOfImages = 1, size = '1024x1024' } = body
-        const data = body.data || {}
-        const model: string = data.model || body.model || 'gpt-image-1'
 
         if (!prompt || prompt.trim().length === 0) {
           return new Response(
@@ -37,7 +35,7 @@ export const Route = createFileRoute('/demo/api/image')({
 
         try {
           const options = createImageOptions({
-            adapter: openaiImage((model || 'gpt-image-1') as any),
+            adapter: openaiImage('gpt-image-1'),
           })
 
           const result = await generateImage({
@@ -50,7 +48,7 @@ export const Route = createFileRoute('/demo/api/image')({
           return new Response(
             JSON.stringify({
               images: result.images,
-              model,
+              model: 'gpt-image-1',
             }),
             {
               status: 200,

package/add-ons/ai/assets/src/routes/demo/api.ai.structured.ts

@@ -0,0 +1,136 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { z } from 'zod'
+
+// Schema for structured recipe output
+const RecipeSchema = z.object({
+  name: z.string().describe('The name of the recipe'),
+  description: z.string().describe('A brief description of the dish'),
+  prepTime: z.string().describe('Preparation time (e.g., "15 minutes")'),
+  cookTime: z.string().describe('Cooking time (e.g., "30 minutes")'),
+  servings: z.number().describe('Number of servings'),
+  difficulty: z.enum(['easy', 'medium', 'hard']).describe('Difficulty level'),
+  ingredients: z
+    .array(
+      z.object({
+        item: z.string().describe('Ingredient name'),
+        amount: z.string().describe('Amount needed (e.g., "2 cups")'),
+        notes: z.string().optional().describe('Optional preparation notes'),
+      }),
+    )
+    .describe('List of ingredients'),
+  instructions: z
+    .array(z.string())
+    .describe('Step-by-step cooking instructions'),
+  tips: z.array(z.string()).optional().describe('Optional cooking tips'),
+  nutritionPerServing: z
+    .object({
+      calories: z.number().optional(),
+      protein: z.string().optional(),
+      carbs: z.string().optional(),
+      fat: z.string().optional(),
+    })
+    .optional()
+    .describe('Nutritional information per serving'),
+})
+
+export type Recipe = z.infer<typeof RecipeSchema>
+
+export const Route = createFileRoute('/demo/api/ai/structured')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const body = await request.json()
+        const { recipeName, mode = 'structured' } = body
+
+        if (!recipeName || recipeName.trim().length === 0) {
+          return new Response(
+            JSON.stringify({
+              error: 'Recipe name is required',
+            }),
+            {
+              status: 400,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+
+        try {
+          if (mode === 'structured') {
+            // Structured output mode - returns validated object
+            const result = await chat({
+              adapter: openaiText('gpt-4o'),
+              messages: [
+                {
+                  role: 'user',
+                  content: `Generate a complete recipe for: ${recipeName}. Include all ingredients with amounts, step-by-step instructions, prep/cook times, and difficulty level.`,
+                },
+              ],
+              outputSchema: RecipeSchema,
+            } as any)
+
+            return new Response(
+              JSON.stringify({
+                mode: 'structured',
+                recipe: result,
+                provider: 'openai',
+                model: 'gpt-4o',
+              }),
+              {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+              },
+            )
+          } else {
+            // One-shot markdown mode - returns text
+            const markdown = await chat({
+              adapter: openaiText('gpt-4o'),
+              stream: false,
+              messages: [
+                {
+                  role: 'user',
+                  content: `Generate a complete recipe for: ${recipeName}.
+
+Format the recipe in beautiful markdown with:
+- A title with the recipe name
+- A brief description
+- Prep time, cook time, and servings
+- Ingredients list with amounts
+- Numbered step-by-step instructions
+- Optional tips section
+- Nutritional info if applicable
+
+Make it detailed and easy to follow.`,
+                },
+              ],
+            } as any)
+
+            return new Response(
+              JSON.stringify({
+                mode: 'oneshot',
+                markdown,
+                provider: 'openai',
+                model: 'gpt-4o',
+              }),
+              {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+              },
+            )
+          }
+        } catch (error: any) {
+          return new Response(
+            JSON.stringify({
+              error: error.message || 'An error occurred',
+            }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+      },
+    },
+  },
+})

package/add-ons/ai/assets/src/routes/demo/api.ai.transcription.ts

@@ -0,0 +1,89 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+
+export const Route = createFileRoute('/demo/api/ai/transcription')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const formData = await request.formData()
+        const audioFile = formData.get('audio') as File | null
+        const audioBase64 = formData.get('audioBase64') as string | null
+        const model = (formData.get('model') as string) || 'whisper-1'
+        const language = formData.get('language') as string | null
+        const responseFormat = formData.get('responseFormat') as string | null
+
+        if (!audioFile && !audioBase64) {
+          return new Response(
+            JSON.stringify({
+              error: 'Audio file or base64 data is required',
+            }),
+            {
+              status: 400,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+
+        if (!process.env.OPENAI_API_KEY) {
+          return new Response(
+            JSON.stringify({
+              error: 'OPENAI_API_KEY is not configured',
+            }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+
+        try {
+          const adapter = openaiTranscription(model as any)
+
+          // Prepare audio data
+          let audioData: string | File
+          if (audioFile) {
+            audioData = audioFile
+          } else if (audioBase64) {
+            audioData = audioBase64
+          } else {
+            throw new Error('No audio data provided')
+          }
+
+          const result = await generateTranscription({
+            adapter,
+            audio: audioData,
+            language: language || undefined,
+            responseFormat: (responseFormat as any) || 'verbose_json',
+          })
+
+          return new Response(
+            JSON.stringify({
+              id: result.id,
+              model: result.model,
+              text: result.text,
+              language: result.language,
+              duration: result.duration,
+              segments: result.segments,
+              words: result.words,
+            }),
+            {
+              status: 200,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        } catch (error: any) {
+          return new Response(
+            JSON.stringify({
+              error: error.message || 'An error occurred',
+            }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+      },
+    },
+  },
+})

package/{examples/tanchat/assets/src/routes/demo/api.tts.ts → add-ons/ai/assets/src/routes/demo/api.ai.tts.ts}

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { generateSpeech } from '@tanstack/ai'
 import { openaiSpeech } from '@tanstack/ai-openai'
 
-export const Route = createFileRoute('/demo/api/tts')({
+export const Route = createFileRoute('/demo/api/ai/tts')({
   server: {
     handlers: {
       POST: async ({ request }) => {

package/{examples/tanchat/assets/src/routes/example.guitars → add-ons/ai/assets/src/routes/demo/guitars}/$guitarId.tsx

@@ -1,7 +1,8 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
-import guitars from '../../data/example-guitars'
 
-export const Route = createFileRoute('/example/guitars/$guitarId')({
+import guitars from '@/data/demo-guitars'
+
+export const Route = createFileRoute('/demo/guitars/$guitarId')({
   component: RouteComponent,
   loader: async ({ params }) => {
     const guitar = guitars.find((guitar) => guitar.id === +params.guitarId)

package/{examples/tanchat/assets/src/routes/example.guitars → add-ons/ai/assets/src/routes/demo/guitars}/index.tsx

@@ -1,7 +1,8 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
-import guitars from '../../data/example-guitars'
 
-export const Route = createFileRoute('/example/guitars/')({
+import guitars from '@/data/demo-guitars'
+
+export const Route = createFileRoute('/demo/guitars/')({
   component: GuitarsIndex,
 })