@tanstack/create 0.49.2 → 0.59.4

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

@@ -0,0 +1,81 @@
+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: any) {
+          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/info.json

@@ -43,6 +43,6 @@
       "jsName": "AiDevtools"
     }
   ],
-  "dependsOn": ["start", "store"],
+  "dependsOn": ["store"],
   "variables": []
 }

package/dist/frameworks/react/add-ons/apollo-client/info.json

@@ -8,7 +8,7 @@
   "color": "#311C87",
   "priority": 15,
   "link": "https://github.com/apollographql/apollo-client-integrations/tree/main/packages/tanstack-start",
-  "dependsOn": ["start"],
+  
   "routes": [
     {
       "icon": "Network",

package/dist/frameworks/react/add-ons/better-auth/assets/src/lib/auth-client.ts

@@ -0,0 +1,3 @@
+import { createAuthClient } from 'better-auth/react'
+
+export const authClient = createAuthClient()

package/dist/frameworks/react/add-ons/better-auth/assets/src/lib/auth.ts

@@ -0,0 +1,9 @@
+import { betterAuth } from 'better-auth'
+import { tanstackStartCookies } from 'better-auth/tanstack-start'
+
+export const auth = betterAuth({
+  emailAndPassword: {
+    enabled: true,
+  },
+  plugins: [tanstackStartCookies()],
+})

package/dist/frameworks/react/add-ons/better-auth/assets/src/routes/api/auth/$.ts

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { auth } from '@/lib/auth'
+
+export const Route = createFileRoute('/api/auth/$')({
+  server: {
+    handlers: {
+      GET: ({ request }) => auth.handler(request),
+      POST: ({ request }) => auth.handler(request),
+    },
+  },
+})

package/dist/frameworks/react/add-ons/better-auth/info.json

@@ -9,8 +9,6 @@
   "priority": 26,
   "link": "https://www.better-auth.com",
   "modes": ["file-router"],
-  "tailwind": true,
-  "dependsOn": ["start"],
   "routes": [
     {
       "url": "/demo/better-auth",

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

@@ -9,7 +9,6 @@
   "color": "#6C47FF",
   "priority": 150,
   "link": "https://clerk.com",
-  "tailwind": true,
   "routes": [
     {
       "url": "/demo/clerk",

package/dist/frameworks/react/add-ons/convex/assets/convex/schema.ts

@@ -0,0 +1,14 @@
+import { defineSchema, defineTable } from 'convex/server'
+import { v } from 'convex/values'
+
+export default defineSchema({
+  products: defineTable({
+    title: v.string(),
+    imageId: v.string(),
+    price: v.number(),
+  }),
+  todos: defineTable({
+    text: v.string(),
+    completed: v.boolean(),
+  }),
+})

package/dist/frameworks/react/add-ons/convex/assets/convex/todos.ts

@@ -0,0 +1,43 @@
+import { mutation, query } from './_generated/server'
+import { v } from 'convex/values'
+
+export const list = query({
+  args: {},
+  handler: async (ctx) => {
+    return await ctx.db
+      .query('todos')
+      .withIndex('by_creation_time')
+      .order('desc')
+      .collect()
+  },
+})
+
+export const add = mutation({
+  args: { text: v.string() },
+  handler: async (ctx, args) => {
+    return await ctx.db.insert('todos', {
+      text: args.text,
+      completed: false,
+    })
+  },
+})
+
+export const toggle = mutation({
+  args: { id: v.id('todos') },
+  handler: async (ctx, args) => {
+    const todo = await ctx.db.get(args.id)
+    if (!todo) {
+      throw new Error('Todo not found')
+    }
+    return await ctx.db.patch(args.id, {
+      completed: !todo.completed,
+    })
+  },
+})
+
+export const remove = mutation({
+  args: { id: v.id('todos') },
+  handler: async (ctx, args) => {
+    return await ctx.db.delete(args.id)
+  },
+})

package/dist/frameworks/react/add-ons/db/assets/src/db-collections/index.ts

@@ -0,0 +1,20 @@
+import {
+  createCollection,
+  localOnlyCollectionOptions,
+} from "@tanstack/react-db";
+import { z } from "zod";
+
+const MessageSchema = z.object({
+  id: z.number(),
+  text: z.string(),
+  user: z.string(),
+});
+
+export type Message = z.infer<typeof MessageSchema>;
+
+export const messagesCollection = createCollection(
+  localOnlyCollectionOptions({
+    getKey: (message) => message.id,
+    schema: MessageSchema,
+  })
+);

package/dist/frameworks/react/add-ons/db/assets/src/hooks/demo.useChat.ts

@@ -0,0 +1,62 @@
+import { useEffect, useRef } from 'react'
+import { useLiveQuery } from '@tanstack/react-db'
+
+import { messagesCollection, type Message } from '@/db-collections'
+
+import type { Collection } from '@tanstack/react-db'
+
+function useStreamConnection(
+  url: string,
+  collection: Collection<any, any, any>,
+) {
+  const loadedRef = useRef(false)
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (loadedRef.current) return
+      loadedRef.current = true
+
+      const response = await fetch(url)
+      const reader = response.body?.getReader()
+      if (!reader) {
+        return
+      }
+
+      const decoder = new TextDecoder()
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+        for (const chunk of decoder
+          .decode(value, { stream: true })
+          .split('\n')
+          .filter((chunk) => chunk.length > 0)) {
+          collection.insert(JSON.parse(chunk))
+        }
+      }
+    }
+    fetchData()
+  }, [])
+}
+
+export function useChat() {
+  useStreamConnection('/demo/db-chat-api', messagesCollection)
+
+  const sendMessage = (message: string, user: string) => {
+    fetch('/demo/db-chat-api', {
+      method: 'POST',
+      body: JSON.stringify({ text: message.trim(), user: user.trim() }),
+    })
+  }
+
+  return { sendMessage }
+}
+
+export function useMessages() {
+  const { data: messages } = useLiveQuery((q) =>
+    q.from({ message: messagesCollection }).select(({ message }) => ({
+      ...message,
+    })),
+  )
+
+  return messages as Message[]
+}

package/dist/frameworks/react/add-ons/db/assets/src/routes/demo/db-chat-api.ts

@@ -0,0 +1,83 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { json } from '@tanstack/react-start'
+
+import {
+  createCollection,
+  localOnlyCollectionOptions,
+} from '@tanstack/react-db'
+import { z } from 'zod'
+
+const IncomingMessageSchema = z.object({
+  user: z.string(),
+  text: z.string(),
+})
+
+const MessageSchema = IncomingMessageSchema.extend({
+  id: z.number(),
+})
+
+export type Message = z.infer<typeof MessageSchema>
+
+export const serverMessagesCollection = createCollection(
+  localOnlyCollectionOptions({
+    getKey: (message) => message.id,
+    schema: MessageSchema,
+  }),
+)
+
+let id = 0
+serverMessagesCollection.insert({
+  id: id++,
+  user: 'Alice',
+  text: 'Hello, how are you?',
+})
+serverMessagesCollection.insert({
+  id: id++,
+  user: 'Bob',
+  text: "I'm fine, thank you!",
+})
+
+const sendMessage = (message: { user: string; text: string }) => {
+  serverMessagesCollection.insert({
+    id: id++,
+    user: message.user,
+    text: message.text,
+  })
+}
+
+export const Route = createFileRoute('/demo/db-chat-api')({
+  server: {
+    handlers: {
+      GET: () => {
+        const stream = new ReadableStream({
+          start(controller) {
+            for (const [_id, message] of serverMessagesCollection.state) {
+              controller.enqueue(JSON.stringify(message) + '\n')
+            }
+            serverMessagesCollection.subscribeChanges((changes) => {
+              for (const change of changes) {
+                if (change.type === 'insert') {
+                  controller.enqueue(JSON.stringify(change.value) + '\n')
+                }
+              }
+            })
+          },
+        })
+
+        return new Response(stream, {
+          headers: {
+            'Content-Type': 'application/x-ndjson',
+          },
+        })
+      },
+      POST: async ({ request }) => {
+        const message = IncomingMessageSchema.safeParse(await request.json())
+        if (!message.success) {
+          return new Response(message.error.message, { status: 400 })
+        }
+        sendMessage(message.data)
+        return json(message.data)
+      },
+    },
+  },
+})

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

@@ -8,7 +8,7 @@
   "priority": 48,
   "modes": ["file-router"],
   "link": "https://tanstack.com/db/latest",
-  "dependsOn": ["tanstack-query", "start"],
+  "dependsOn": ["tanstack-query"],
   "routes": [
     {
       "icon": "Database",

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

@@ -9,7 +9,7 @@
   "priority": 46,
   "link": "https://orm.drizzle.team/",
   "modes": ["file-router"],
-  "dependsOn": ["start"],
+  
   "options": {
     "database": {
       "type": "select",

package/dist/frameworks/react/add-ons/drizzle/package.json.ejs

@@ -18,5 +18,9 @@
     "db:push": "drizzle-kit push",
     "db:pull": "drizzle-kit pull",
     "db:studio": "drizzle-kit studio"
+  }<% if (addOnOption.drizzle.database === 'sqlite') { %>,
+  "pnpm": {
+    "onlyBuiltDependencies": ["better-sqlite3"]
   }
+  <% } %>
 }

package/dist/frameworks/react/add-ons/form/assets/src/hooks/demo.form-context.ts

@@ -0,0 +1,4 @@
+import { createFormHookContexts } from '@tanstack/react-form'
+
+export const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts()

package/dist/frameworks/react/add-ons/form/assets/src/hooks/demo.form.ts

@@ -0,0 +1,22 @@
+import { createFormHook } from '@tanstack/react-form'
+
+import {
+  Select,
+  SubscribeButton,
+  TextArea,
+  TextField,
+} from '../components/demo.FormComponents'
+import { fieldContext, formContext } from './demo.form-context'
+
+export const { useAppForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+    Select,
+    TextArea,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})