@tanstack/create 0.49.1

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

@@ -0,0 +1,116 @@
+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 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,
+                        });
+                        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.`,
+                                },
+                            ],
+                        });
+                        return new Response(JSON.stringify({
+                            mode: 'oneshot',
+                            markdown,
+                            provider: 'openai',
+                            model: 'gpt-4o',
+                        }), {
+                            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' },
+                    });
+                }
+            },
+        },
+    },
+});

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

@@ -0,0 +1,73 @@
+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');
+                const audioBase64 = formData.get('audioBase64');
+                const model = formData.get('model') || 'whisper-1';
+                const language = formData.get('language');
+                const responseFormat = formData.get('responseFormat');
+                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);
+                    // Prepare audio data
+                    let audioData;
+                    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 || '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) {
+                    return new Response(JSON.stringify({
+                        error: error.message || 'An error occurred',
+                    }), {
+                        status: 500,
+                        headers: { 'Content-Type': 'application/json' },
+                    });
+                }
+            },
+        },
+    },
+});

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

@@ -0,0 +1,58 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { generateSpeech } from '@tanstack/ai';
+import { openaiSpeech } from '@tanstack/ai-openai';
+export const Route = createFileRoute('/demo/api/ai/tts')({
+    server: {
+        handlers: {
+            POST: async ({ request }) => {
+                const body = await request.json();
+                const { text, voice = 'alloy', model = 'tts-1', format = 'mp3', speed = 1.0, } = body;
+                if (!text || text.trim().length === 0) {
+                    return new Response(JSON.stringify({
+                        error: 'Text 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 = openaiSpeech(model);
+                    const result = await generateSpeech({
+                        adapter,
+                        text,
+                        voice,
+                        format,
+                        speed,
+                    });
+                    return new Response(JSON.stringify({
+                        id: result.id,
+                        model: result.model,
+                        audio: result.audio,
+                        format: result.format,
+                        contentType: result.contentType,
+                        duration: result.duration,
+                    }), {
+                        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' },
+                    });
+                }
+            },
+        },
+    },
+});

package/dist/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/$guitarId.tsx

@@ -0,0 +1,51 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+
+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)
+    if (!guitar) {
+      throw new Error('Guitar not found')
+    }
+    return guitar
+  },
+})
+
+function RouteComponent() {
+  const guitar = Route.useLoaderData()
+
+  return (
+    <div className="relative min-h-[100vh] flex items-center bg-black text-white p-5">
+      <div className="relative z-10 w-[60%] bg-gray-900/60 backdrop-blur-md rounded-2xl p-8 border border-gray-800/50 shadow-xl">
+        <Link
+          to="/example/guitars"
+          className="inline-block mb-4 text-emerald-400 hover:text-emerald-300"
+        >
+          &larr; Back to all guitars
+        </Link>
+        <h1 className="text-3xl font-bold mb-4">{guitar.name}</h1>
+        <p className="text-gray-300 mb-6">{guitar.description}</p>
+        <div className="flex items-center justify-between">
+          <div className="text-2xl font-bold text-emerald-400">
+            ${guitar.price}
+          </div>
+          <button className="bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-2 rounded-lg transition-colors">
+            Add to Cart
+          </button>
+        </div>
+      </div>
+
+      <div className="absolute top-0 right-0 w-[55%] h-full z-0">
+        <div className="w-full h-full overflow-hidden rounded-2xl border-4 border-gray-800 shadow-2xl">
+          <img
+            src={guitar.image}
+            alt={guitar.name}
+            className="w-full h-full object-cover guitar-image"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,55 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+
+import guitars from '@/data/demo-guitars'
+
+export const Route = createFileRoute('/demo/guitars/')({
+  component: GuitarsIndex,
+})
+
+function GuitarsIndex() {
+  return (
+    <div className="bg-black text-white p-5">
+      <h1 className="text-3xl font-bold mb-8 text-center">Featured Guitars</h1>
+      <div className="flex flex-wrap gap-12 justify-center">
+        {guitars.map((guitar) => (
+          <div
+            key={guitar.id}
+            className="w-full md:w-[calc(50%-1.5rem)] xl:w-[calc(33.333%-2rem)] relative mb-24"
+          >
+            <Link
+              to="/example/guitars/$guitarId"
+              params={{
+                guitarId: guitar.id.toString(),
+              }}
+            >
+              <div className="relative z-0 w-full aspect-square mb-8">
+                <div className="w-full h-full overflow-hidden rounded-2xl border-4 border-gray-800 shadow-2xl">
+                  <img
+                    src={guitar.image}
+                    alt={guitar.name}
+                    className="w-full h-full object-cover guitar-image group-hover:scale-105 transition-transform duration-500"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                </div>
+
+                <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-emerald-500/80 text-white px-4 py-2 rounded-full text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 backdrop-blur-sm">
+                  View Details
+                </div>
+              </div>
+
+              <div className="absolute bottom-0 right-0 z-10 w-[80%] bg-gray-900/60 backdrop-blur-md rounded-2xl p-5 border border-gray-800/50 shadow-xl transform translate-y-[40%]">
+                <h2 className="text-xl font-bold mb-2">{guitar.name}</h2>
+                <p className="text-gray-300 mb-3 line-clamp-2">
+                  {guitar.shortDescription}
+                </p>
+                <div className="text-xl font-bold text-emerald-400">
+                  ${guitar.price}
+                </div>
+              </div>
+            </Link>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/dist/frameworks/react/add-ons/ai/info.json

@@ -0,0 +1,48 @@
+{
+  "name": "AI",
+  "description": "TanStack AI integration and examples.",
+  "phase": "add-on",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "category": "tanstack",
+  "color": "#EC4899",
+  "priority": 60,
+  "link": "",
+  "routes": [
+    {
+      "icon": "MessagesSquare",
+      "url": "/demo/ai-chat",
+      "name": "Chat",
+      "path": "src/routes/demo/ai-chat.tsx",
+      "jsName": "AIChatDemo"
+    },
+    {
+      "icon": "ImageIcon",
+      "url": "/demo/ai-image",
+      "name": "Generate Image",
+      "path": "src/routes/demo/ai-image.tsx",
+      "jsName": "AIImageDemo"
+    },
+    {
+      "icon": "ChefHat",
+      "url": "/demo/ai-structured",
+      "name": "Structured Output",
+      "path": "src/routes/demo/ai-structured.tsx",
+      "jsName": "AISturcturedDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "header-user",
+      "path": "src/components/demo-AIAssistant.tsx",
+      "jsName": "TanChatAIAssistant"
+    },
+    {
+      "type": "devtools",
+      "path": "src/lib/ai-devtools.tsx",
+      "jsName": "AiDevtools"
+    }
+  ],
+  "dependsOn": ["start", "store"],
+  "variables": []
+}

package/dist/frameworks/react/add-ons/ai/package.json

@@ -0,0 +1,16 @@
+{
+  "dependencies": {
+    "@tanstack/ai": "latest",
+    "@tanstack/ai-anthropic": "latest",
+    "@tanstack/ai-client": "latest",
+    "@tanstack/ai-gemini": "latest",
+    "@tanstack/ai-ollama": "latest",
+    "@tanstack/ai-openai": "latest",
+    "@tanstack/ai-react": "latest",
+    "@tanstack/react-ai-devtools": "latest",
+    "highlight.js": "^11.11.1",
+    "streamdown": "^1.6.5",
+    "lucide-react": "^0.544.0",
+    "zod": "^4.3.5"
+  }
+}

package/dist/frameworks/react/add-ons/ai/small-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 633 633"><defs><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="71.65%"><stop offset="0%" stop-color="#6BDAFF"/><stop offset="31.922%" stop-color="#F9FFB5"/><stop offset="70.627%" stop-color="#FFA770"/><stop offset="100%" stop-color="#FF7373"/></linearGradient><linearGradient id="d" x1="43.996%" x2="53.441%" y1="8.54%" y2="93.872%"><stop offset="0%" stop-color="#673800"/><stop offset="100%" stop-color="#B65E00"/></linearGradient><linearGradient id="e" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="f" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="g" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="h" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="i" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="j" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="k" x1="92.9%" x2="8.641%" y1="45.768%" y2="54.892%"><stop offset="0%" stop-color="#EE2700"/><stop offset="100%" stop-color="#FF008E"/></linearGradient><linearGradient id="l" x1="61.109%" x2="43.717%" y1="3.633%" y2="43.072%"><stop offset="0%" stop-color="#FFF400"/><stop offset="100%" stop-color="#3C8700"/></linearGradient><linearGradient id="m" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFDF00"/><stop offset="100%" stop-color="#FF9D00"/></linearGradient><linearGradient id="n" x1="127.279%" x2="0%" y1="49.778%" y2="50.222%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="o" x1="127.279%" x2="0%" y1="47.531%" y2="52.469%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="p" x1="127.279%" x2="0%" y1="46.195%" y2="53.805%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="q" x1="127.279%" x2="0%" y1="35.33%" y2="64.67%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="r" x1="127.279%" x2="0%" y1="4.875%" y2="95.125%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="s" x1="78.334%" x2="31.668%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="t" x1="57.913%" x2="44.88%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="u" x1="50.495%" x2="49.68%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><circle id="a" cx="308.5" cy="308.5" r="308.5"/><circle id="v" cx="307.5" cy="308.5" r="316.5"/></defs><g fill="none" fill-rule="evenodd" transform="translate(9 8)"><mask id="c" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a" fill="url(#b)"/><ellipse cx="81.5" cy="602.5" fill="#015064" stroke="#00CFE2" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="602.5" fill="#015064" stroke="#00CFE2" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="81.5" cy="640.5" fill="#015064" stroke="#00A8B8" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="640.5" fill="#015064" stroke="#00A8B8" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="81.5" cy="676.5" fill="#015064" stroke="#007782" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="676.5" fill="#015064" stroke="#007782" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><g mask="url(#c)"><path fill="url(#d)" stroke="#6E3A00" stroke-width="6.088" d="M98.318 88.007c7.691 37.104 16.643 72.442 26.856 106.013 10.212 33.571 25.57 68.934 46.07 106.088l-51.903 11.67c-10.057-60.01-17.232-99.172-21.525-117.487-4.293-18.315-10.989-51.434-20.089-99.357l20.591-6.927" transform="scale(-1 1) rotate(25 -300.37 -553.013)"/><g stroke="#2F8A00"><path fill="url(#e)" stroke-width="9.343" d="M108.544 66.538s-13.54-21.305-37.417-27.785c-15.917-4.321-33.933.31-54.048 13.892C33.464 65.975 47.24 73.52 58.405 75.28c16.749 2.64 50.14-8.74 50.14-8.74Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#f)" stroke-width="9.343" d="M108.544 67.138s-47.187-5.997-81.077 19.936C4.873 104.362-3.782 137.794 1.502 187.369c28.42-29.22 48.758-50.836 61.016-64.846 18.387-21.016 46.026-55.385 46.026-55.385Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#g)" stroke-width="9.343" d="M108.544 66.538c-1.96-21.705 3.98-38.018 17.82-48.94C140.203 6.674 154.85.808 170.303 0c-4.865 21.527-12.373 36.314-22.524 44.361-10.151 8.048-23.23 15.44-39.236 22.177Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#h)" stroke-width="9.343" d="M108.544 67.138c29.838-31.486 61.061-42.776 93.669-33.869C234.82 42.176 253.749 60.785 259 89.096c-34.898-3.657-59.974-6.343-75.228-8.058-15.254-1.716-40.33-6.349-75.228-13.9Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#i)" stroke-width="9.343" d="M108.544 67.138c34.868-9.381 64.503-3.658 88.905 17.17 24.402 20.829 39.656 46.686 45.762 77.571-39.626-7.574-68.4-20.115-86.322-37.624a395.051 395.051 0 0 1-48.345-57.117Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#j)" stroke-width="9.343" d="M108.544 67.138C76.206 82.6 57.608 105.366 52.75 135.436c-4.858 30.07-.292 62.89 13.698 98.462 24.873-41.418 38.905-71.368 42.096-89.849 3.191-18.48 3.191-44.118 0-76.91Z" transform="rotate(1 -6061.691 5926.397)"/><path stroke-linecap="round" stroke-width="5.91" d="M211.284 173.477c-13.851 21.992-23.291 42.022-28.32 60.093-5.03 18.071-8.175 33.143-9.436 45.216"/><path stroke-linecap="round" stroke-width="5.91" d="M209.814 176.884c-23.982 2.565-42.792 10.469-56.428 23.714-13.639 13.245-23.483 26.136-29.536 38.674M219.045 167.299c29.028-7.723 50.972-10.173 65.831-7.352 14.859 2.822 26.807 7.659 35.842 14.51M211.31 172.618c20.29 9.106 38.353 19.052 54.186 29.837 15.833 10.786 27.714 20.99 35.643 30.617"/></g><path stroke="#830305" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="6.937" d="m409.379 398.157-23.176 18.556M328.04 375.516l-22.313 28.398M312.904 353.698l53.18 59.816"/><path fill="url(#k)" d="M67.585 27.463H5.68C1.893 28.148 0 30.38 0 34.16c0 3.78 1.893 6.211 5.68 7.293h67.17l41.751-30.356c2.488-2.646 2.794-5.315.92-8.006s-4.6-3.626-8.177-2.803l-39.76 27.174Z" transform="scale(-1 1) rotate(-9 2092.128 2856.854)"/><path fill="#D8D8D8" stroke="#FFF" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="4.414" d="m402.861 391.51.471-4.088M382.21 388.752l.472-4.087M361.546 385.404l.485-3.845M337.59 371.883l2.56-2.498M324.276 359.567l2.56-2.497"/></g><ellipse cx="308.5" cy="720.5" fill="url(#l)" mask="url(#c)" rx="266" ry="316.5"/><ellipse cx="308.5" cy="720.5" stroke="#6DA300" stroke-opacity=".502" stroke-width="26" mask="url(#c)" rx="253" ry="303.5"/><g mask="url(#c)"><g transform="translate(389 -32)"><circle cx="168.5" cy="113.5" r="113.5" fill="url(#m)"/><circle cx="168.5" cy="113.5" r="106" stroke="#FFC900" stroke-opacity=".529" stroke-width="15"/><path stroke="url(#n)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M30 113H0"/><path stroke="url(#o)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M33.5 79.5 7 74"/><path stroke="url(#p)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m34 146-29 8"/><path stroke="url(#q)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m45 177-24 13"/><path stroke="url(#r)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m67 204-20 19"/><path stroke="url(#s)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m94.373 227-13.834 22.847"/><path stroke="url(#t)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M127.5 243.5 120 268"/><path stroke="url(#u)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m167.5 252.5.5 24.5"/></g></g><circle cx="307.5" cy="308.5" r="304" stroke="#000" stroke-width="25"/></g></svg>

package/dist/frameworks/react/add-ons/apollo-client/README.md

@@ -0,0 +1,150 @@
+# Apollo Client Integration
+
+This add-on integrates Apollo Client with TanStack Start to provide modern streaming SSR support for GraphQL data fetching.
+
+## Dependencies
+
+The following packages are automatically installed:
+
+- `@apollo/client` - Apollo Client core
+- `@apollo/client-integration-tanstack-start` - TanStack Start integration
+- `graphql` - GraphQL implementation
+
+## Configuration
+
+### 1. GraphQL Endpoint
+
+Configure your GraphQL API endpoint in `src/router.tsx`:
+
+```tsx
+// Configure Apollo Client
+const apolloClient = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: new HttpLink({
+    uri: 'https://your-graphql-api.example.com/graphql', // Update this!
+  }),
+})
+```
+
+You can use environment variables by creating a `.env.local` file:
+
+```bash
+VITE_GRAPHQL_ENDPOINT=https://your-api.com/graphql
+```
+
+The default configuration already uses this pattern:
+
+```tsx
+uri: import.meta.env.VITE_GRAPHQL_ENDPOINT ||
+  'https://your-graphql-api.example.com/graphql'
+```
+
+## Usage Patterns
+
+### Pattern 1: Loader with preloadQuery (Recommended for SSR)
+
+Use `preloadQuery` in route loaders for optimal streaming SSR performance:
+
+```tsx
+import { gql, TypedDocumentNode } from '@apollo/client'
+import { useReadQuery } from '@apollo/client/react'
+import { createFileRoute } from '@tanstack/react-router'
+
+const MY_QUERY: TypedDocumentNode<{
+  posts: { id: string; title: string; content: string }[]
+}> = gql`
+  query GetData {
+    posts {
+      id
+      title
+      content
+    }
+  }
+`
+
+export const Route = createFileRoute('/my-route')({
+  component: RouteComponent,
+  loader: ({ context: { preloadQuery } }) => {
+    const queryRef = preloadQuery(MY_QUERY, {
+      variables: {},
+    })
+    return { queryRef }
+  },
+})
+
+function RouteComponent() {
+  const { queryRef } = Route.useLoaderData()
+  const { data } = useReadQuery(queryRef)
+
+  return <div>{/* render your data */}</div>
+}
+```
+
+### Pattern 2: useSuspenseQuery
+
+Use `useSuspenseQuery` directly in components with automatic suspense support:
+
+```tsx
+import { gql, TypedDocumentNode } from '@apollo/client'
+import { useSuspenseQuery } from '@apollo/client/react'
+import { createFileRoute } from '@tanstack/react-router'
+
+const MY_QUERY: TypedDocumentNode<{
+  posts: { id: string; title: string }[]
+}> = gql`
+  query GetData {
+    posts {
+      id
+      title
+    }
+  }
+`
+
+export const Route = createFileRoute('/my-route')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { data } = useSuspenseQuery(MY_QUERY)
+
+  return <div>{/* render your data */}</div>
+}
+```
+
+### Pattern 3: Manual Refetching
+
+```tsx
+import { useQueryRefHandlers, useReadQuery } from '@apollo/client/react'
+
+function MyComponent() {
+  const { queryRef } = Route.useLoaderData()
+  const { refetch } = useQueryRefHandlers(queryRef)
+  const { data } = useReadQuery(queryRef)
+
+  return (
+    <div>
+      <button onClick={() => refetch()}>Refresh</button>
+      {/* render data */}
+    </div>
+  )
+}
+```
+
+## Important Notes
+
+### SSR Optimization
+
+The integration automatically handles:
+
+- Query deduplication across server and client
+- Streaming SSR with `@defer` directive support
+- Proper cache hydration
+
+## Learn More
+
+- [Apollo Client Documentation](https://www.apollographql.com/docs/react)
+- [@apollo/client-integration-tanstack-start](https://www.npmjs.com/package/@apollo/client-integration-tanstack-start)
+
+## Demo
+
+Visit `/demo/apollo-client` in your application to see a working example of Apollo Client integration.

package/dist/frameworks/react/add-ons/apollo-client/assets/src/routes/demo.apollo-client.tsx

@@ -0,0 +1,75 @@
+import { gql, TypedDocumentNode } from '@apollo/client'
+import { useReadQuery } from '@apollo/client/react'
+import { createFileRoute } from '@tanstack/react-router'
+import React from 'react'
+
+// Example GraphQL query - replace with your own schema
+const EXAMPLE_QUERY: TypedDocumentNode<{
+  continents: { __typename: string; code: string; name: string }
+}> = gql`
+  query ExampleQuery {
+    continents {
+      code
+      name
+    }
+  }
+`
+
+export const Route = createFileRoute('/demo/apollo-client')({
+  component: RouteComponent,
+  loader: ({ context: { preloadQuery } }) => {
+    // Preload the query in the loader for optimal performance
+    const queryRef = preloadQuery(EXAMPLE_QUERY, {
+      variables: {},
+    })
+    return {
+      queryRef,
+    }
+  },
+})
+
+function RouteComponent() {
+  const { queryRef } = Route.useLoaderData()
+  const { data } = useReadQuery(queryRef)
+
+  return (
+    <div className="p-4">
+      <h2 className="text-2xl font-bold mb-4">Apollo Client Demo</h2>
+      <div className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
+        <p className="font-bold">Apollo Client is configured!</p>
+        <p className="text-sm mt-2">
+          This demo uses{' '}
+          <code className="bg-blue-200 px-1 rounded">preloadQuery</code> in the
+          loader and{' '}
+          <code className="bg-blue-200 px-1 rounded">useReadQuery</code> in the
+          component for optimal streaming SSR performance.
+        </p>
+      </div>
+      <div className="bg-gray-100 p-4 rounded">
+        <h3 className="font-bold mb-2">Query Result:</h3>
+        <pre className="text-sm overflow-x-auto">
+          {JSON.stringify(data, null, 2)}
+        </pre>
+      </div>
+      <div className="mt-4 text-sm text-gray-600">
+        <p>📝 Next steps:</p>
+        <ul className="list-disc ml-6 mt-2">
+          <li>
+            Configure your GraphQL endpoint in{' '}
+            <code className="bg-gray-200 px-1 rounded">src/router.tsx</code>
+          </li>
+          <li>Replace the example query with your actual GraphQL schema</li>
+          <li>
+            Learn more:{' '}
+            <a
+              href="https://www.apollographql.com/docs/react"
+              className="text-blue-600 hover:underline"
+            >
+              Apollo Client Docs
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}