@tanstack/create 0.49.1

package/dist/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-image.tsx

@@ -0,0 +1,209 @@
+import { useState, useEffect } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { ImageIcon, Loader2, Download } from 'lucide-react'
+
+const SIZES = ['1024x1024', '1536x1024', '1024x1536', 'auto']
+
+interface GeneratedImage {
+  url?: string
+  b64Json?: string
+  revisedPrompt?: string
+}
+
+function ImagePage() {
+  const [prompt, setPrompt] = useState(
+    'A cute baby sea otter wearing a beret and glasses, sitting at a small cafe table, sipping a cappuccino',
+  )
+  const [size, setSize] = useState('1024x1024')
+  const [numberOfImages, setNumberOfImages] = useState(1)
+  const [images, setImages] = useState<Array<GeneratedImage>>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleGenerate = async () => {
+    setIsLoading(true)
+    setError(null)
+    setImages([])
+
+    try {
+      const response = await fetch('/demo/api/ai/image', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt, size, numberOfImages }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to generate image')
+      }
+
+      setImages(data.images)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const getImageSrc = (image: GeneratedImage) => {
+    if (image.url) return image.url
+    if (image.b64Json) return `data:image/png;base64,${image.b64Json}`
+    return ''
+  }
+
+  const handleDownload = async (image: GeneratedImage, index: number) => {
+    const src = getImageSrc(image)
+    if (!src) return
+
+    try {
+      const response = await fetch(src)
+      const blob = await response.blob()
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `generated-image-${index + 1}.png`
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+    } catch (err) {
+      // Failed to download image
+    }
+  }
+
+  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">
+          <ImageIcon className="w-8 h-8 text-orange-500" />
+          <h1 className="text-2xl font-bold text-white">Image Generation</h1>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Input Panel */}
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-2">
+                  Size
+                </label>
+                <select
+                  value={size}
+                  onChange={(e) => setSize(e.target.value)}
+                  disabled={isLoading}
+                  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"
+                >
+                  {SIZES.map((s) => (
+                    <option key={s} value={s}>
+                      {s}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-2">
+                  Count
+                </label>
+                <input
+                  type="number"
+                  value={numberOfImages}
+                  onChange={(e) =>
+                    setNumberOfImages(
+                      Math.max(1, Math.min(4, parseInt(e.target.value) || 1)),
+                    )
+                  }
+                  min={1}
+                  max={4}
+                  disabled={isLoading}
+                  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>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Prompt
+              </label>
+              <textarea
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                disabled={isLoading}
+                rows={6}
+                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 resize-none"
+                placeholder="Describe the image you want to generate..."
+              />
+            </div>
+
+            <button
+              onClick={handleGenerate}
+              disabled={isLoading || !prompt.trim()}
+              className="w-full px-4 py-3 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-600 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                  Generating...
+                </>
+              ) : (
+                'Generate Image'
+              )}
+            </button>
+          </div>
+
+          {/* Output Panel */}
+          <div className="lg:col-span-2 bg-gray-800 rounded-lg p-6 border border-orange-500/20">
+            <h2 className="text-lg font-semibold text-white mb-4">
+              Generated Images
+            </h2>
+
+            {error && (
+              <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 mb-4">
+                {error}
+              </div>
+            )}
+
+            {images.length > 0 ? (
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {images.map((image, index) => (
+                    <div key={index} className="relative group">
+                      <img
+                        src={getImageSrc(image)}
+                        alt={`Generated image ${index + 1}`}
+                        className="w-full rounded-lg border border-gray-700"
+                      />
+                      <button
+                        onClick={() => handleDownload(image, index)}
+                        className="absolute top-2 right-2 p-2 bg-gray-900/80 hover:bg-gray-900 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
+                        title="Download image"
+                      >
+                        <Download className="w-4 h-4 text-white" />
+                      </button>
+                      {image.revisedPrompt && (
+                        <p className="mt-2 text-xs text-gray-400 italic">
+                          Revised: {image.revisedPrompt}
+                        </p>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : !error && !isLoading ? (
+              <div className="flex flex-col items-center justify-center h-64 text-gray-500">
+                <ImageIcon className="w-16 h-16 mb-4 opacity-50" />
+                <p>
+                  Enter a prompt and click "Generate Image" to create an image.
+                </p>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Route = createFileRoute('/demo/ai/image')({
+  component: ImagePage,
+})

package/dist/frameworks/react/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/dist/frameworks/react/add-ons/ai/assets/src/routes/demo/api.ai.chat.js

@@ -0,0 +1,87 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { chat, maxIterations, toServerSentEventsResponse } from '@tanstack/ai';
+import { anthropicText } from '@tanstack/ai-anthropic';
+import { openaiText } from '@tanstack/ai-openai';
+import { geminiText } from '@tanstack/ai-gemini';
+import { ollamaText } from '@tanstack/ai-ollama';
+import { getGuitars, recommendGuitarToolDef } from '@/lib/demo-guitar-tools';
+const SYSTEM_PROMPT = `You are a helpful assistant for a store that sells guitars.
+
+CRITICAL INSTRUCTIONS - YOU MUST FOLLOW THIS EXACT WORKFLOW:
+
+When a user asks for a guitar recommendation:
+1. FIRST: Use the getGuitars tool (no parameters needed)
+2. SECOND: Use the recommendGuitar tool with the ID of the guitar you want to recommend
+3. NEVER write a recommendation directly - ALWAYS use the recommendGuitar tool
+
+IMPORTANT:
+- The recommendGuitar tool will display the guitar in a special, appealing format
+- You MUST use recommendGuitar for ANY guitar recommendation
+- ONLY recommend guitars from our inventory (use getGuitars first)
+- The recommendGuitar tool has a buy button - this is how customers purchase
+- Do NOT describe the guitar yourself - let the recommendGuitar tool do it
+`;
+export const Route = createFileRoute('/demo/api/ai/chat')({
+    server: {
+        handlers: {
+            POST: async ({ request }) => {
+                // Capture request signal before reading body (it may be aborted after body is consumed)
+                const requestSignal = request.signal;
+                // If request is already aborted, return early
+                if (requestSignal.aborted) {
+                    return new Response(null, { status: 499 }); // 499 = Client Closed Request
+                }
+                const abortController = new AbortController();
+                try {
+                    const body = await request.json();
+                    const { messages } = body;
+                    // Determine the best available provider
+                    let provider = 'ollama';
+                    let model = '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 = {
+                        anthropic: () => anthropicText((model || 'claude-haiku-4-5')),
+                        openai: () => openaiText((model || 'gpt-4o')),
+                        gemini: () => geminiText((model || 'gemini-2.0-flash-exp')),
+                        ollama: () => ollamaText((model || 'mistral:7b')),
+                    };
+                    const adapter = adapterConfig[provider]();
+                    const stream = chat({
+                        adapter,
+                        tools: [
+                            getGuitars, // Server tool
+                            recommendGuitarToolDef, // No server execute - client will handle
+                        ],
+                        systemPrompts: [SYSTEM_PROMPT],
+                        agentLoopStrategy: maxIterations(5),
+                        messages,
+                        abortController,
+                    });
+                    return toServerSentEventsResponse(stream, { abortController });
+                }
+                catch (error) {
+                    // If request was aborted, return early (don't send error response)
+                    if (error.name === 'AbortError' || abortController.signal.aborted) {
+                        return new Response(null, { status: 499 }); // 499 = Client Closed Request
+                    }
+                    return new Response(JSON.stringify({ error: 'Failed to process chat request' }), {
+                        status: 500,
+                        headers: { 'Content-Type': 'application/json' },
+                    });
+                }
+            },
+        },
+    },
+});

package/dist/frameworks/react/add-ons/ai/assets/src/routes/demo/api.ai.image.js

@@ -0,0 +1,55 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { generateImage, createImageOptions } from '@tanstack/ai';
+import { openaiImage } from '@tanstack/ai-openai';
+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;
+                if (!prompt || prompt.trim().length === 0) {
+                    return new Response(JSON.stringify({
+                        error: 'Prompt 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 options = createImageOptions({
+                        adapter: openaiImage('gpt-image-1'),
+                    });
+                    const result = await generateImage({
+                        ...options,
+                        prompt,
+                        numberOfImages,
+                        size,
+                    });
+                    return new Response(JSON.stringify({
+                        images: result.images,
+                        model: 'gpt-image-1',
+                    }), {
+                        status: 200,
+                        headers: { 'Content-Type': 'application/json' },
+                    });
+                }
+                catch (error) {
+                    return new Response(JSON.stringify({
+                        error: error.message || 'An error occurred',
+                    }), {
+                        status: 500,
+                        headers: { 'Content-Type': 'application/json' },
+                    });
+                }
+            },
+        },
+    },
+});