@tanstack/create 0.49.1 → 0.49.3

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @tanstack/create
+
+## 0.49.3
+
+### Patch Changes
+
+- fix: do not exclude .ts files in asset transfer ([`30edd20`](https://github.com/TanStack/cli/commit/30edd208fd81b5c501fa42cd476232273ff108d1))
+
+## 0.49.2
+
+### Patch Changes
+
+- Fixed windows \\ delimiter stripping ([`7940300`](https://github.com/TanStack/cli/commit/79403004689817339ec6f6e03c20fb25e841ddb0))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/file-helpers.js

@@ -34,8 +34,10 @@ export function getBinaryFile(content) {
  */
 export function toCleanPath(absolutePath, baseDir) {
     let cleanPath = absolutePath.replace(baseDir, '');
-    if (cleanPath.startsWith('/'))
+    // Handle both Unix (/) and Windows (\) path separators
+    if (cleanPath.startsWith('/') || cleanPath.startsWith('\\')) {
         cleanPath = cleanPath.slice(1);
+    }
     return cleanPath;
 }
 export function relativePath(from, to, stripExtension = false) {

package/dist/frameworks/react/add-ons/ai/assets/src/data/demo-guitars.ts

@@ -0,0 +1,93 @@
+export interface Guitar {
+  id: number
+  name: string
+  image: string
+  description: string
+  shortDescription: string
+  price: number
+}
+
+const guitars: Array<Guitar> = [
+  {
+    id: 1,
+    name: 'TanStack Ukelele',
+    image: '/example-ukelele-tanstack.jpg',
+    description:
+      "Introducing the TanStack Signature Ukulele—a beautifully handcrafted concert ukulele that combines exceptional sound quality with distinctive style. Featuring a warm, resonant koa-wood body with natural grain patterns, this instrument delivers the rich, mellow tones Hawaii is famous for. The exclusive TanStack palm tree inlay on the soundhole adds a unique touch of island flair, while the matching branded headstock makes this a true collector's piece for developers and musicians alike. Whether you're a beginner looking for a quality starter instrument or an experienced player wanting something special, the TanStack Ukulele brings together craftsmanship, character, and that unmistakable tropical spirit.",
+    shortDescription:
+      'Premium koa-wood ukulele featuring exclusive TanStack branding, perfect for beach vibes and island-inspired melodies.',
+    price: 299,
+  },
+  {
+    id: 2,
+    name: 'Video Game Guitar',
+    image: '/example-guitar-video-games.jpg',
+    description:
+      "The Video Game Guitar is a unique acoustic guitar that features a design inspired by video games. It has a sleek, high-gloss finish and a comfortable playability. The guitar's ergonomic body and fast neck profile ensure comfortable playability for hours on end.",
+    shortDescription:
+      'A unique electric guitar with a video game design, high-gloss finish, and comfortable playability.',
+    price: 699,
+  },
+  {
+    id: 3,
+    name: 'Superhero Guitar',
+    image: '/example-guitar-superhero.jpg',
+    description:
+      "The Superhero Guitar is a bold black electric guitar that stands out with its unique superhero logo design. Its sleek, high-gloss finish and powerful pickups make it perfect for high-energy performances. The guitar's ergonomic body and fast neck profile ensure comfortable playability for hours on end.",
+    shortDescription:
+      'A bold black electric guitar with a unique superhero logo, high-gloss finish, and powerful pickups.',
+    price: 699,
+  },
+  {
+    id: 4,
+    name: 'Motherboard Guitar',
+    image: '/example-guitar-motherboard.jpg',
+    description:
+      "This guitar is a tribute to the motherboard of a computer. It's a unique and stylish instrument that will make you feel like a hacker. The intricate circuit-inspired design features actual LED lights that pulse with your playing intensity, while the neck is inlaid with binary code patterns that glow under stage lights. Each pickup has been custom-wound to produce tones ranging from clean digital precision to glitched-out distortion, perfect for electronic music fusion. The Motherboard Guitar seamlessly bridges the gap between traditional craftsmanship and cutting-edge technology, making it the ultimate instrument for the digital age musician.",
+    shortDescription:
+      'A tech-inspired electric guitar featuring LED lights and binary code inlays that glow under stage lights.',
+    price: 649,
+  },
+  {
+    id: 5,
+    name: 'Racing Guitar',
+    image: '/example-guitar-racing.jpg',
+    description:
+      "Engineered for speed and precision, the Racing Guitar embodies the spirit of motorsport in every curve and contour. Its aerodynamic body, painted in classic racing stripes and high-gloss finish, is crafted from lightweight materials that allow for effortless play during extended performances. The custom low-action setup and streamlined neck profile enable lightning-fast fretwork, while specially designed pickups deliver a high-octane tone that cuts through any mix. Built with performance-grade hardware including racing-inspired control knobs and checkered flag inlays, this guitar isn't just played—it's driven to the limits of musical possibility.",
+    shortDescription:
+      'A lightweight, aerodynamic guitar with racing stripes and a low-action setup designed for speed and precision.',
+    price: 679,
+  },
+  {
+    id: 6,
+    name: 'Steamer Trunk Guitar',
+    image: '/example-guitar-steamer-trunk.jpg',
+    description:
+      'The Steamer Trunk Guitar is a semi-hollow body instrument that exudes vintage charm and character. Crafted from reclaimed antique luggage wood, it features brass hardware that adds a touch of elegance and durability. The fretboard is adorned with a world map inlay, making it a unique piece that tells a story of travel and adventure.',
+    shortDescription:
+      'A semi-hollow body guitar with brass hardware and a world map inlay, crafted from reclaimed antique luggage wood.',
+    price: 629,
+  },
+  {
+    id: 7,
+    name: "Travelin' Man Guitar",
+    image: '/example-guitar-traveling.jpg',
+    description:
+      "The Travelin' Man Guitar is an acoustic masterpiece adorned with vintage postcards from around the world. Each postcard tells a story of adventure and wanderlust, making this guitar a unique piece of art. Its rich, resonant tones and comfortable playability make it perfect for musicians who love to travel and perform.",
+    shortDescription:
+      'An acoustic guitar with vintage postcards, rich tones, and comfortable playability.',
+    price: 499,
+  },
+  {
+    id: 8,
+    name: 'Flowerly Love Guitar',
+    image: '/example-guitar-flowers.jpg',
+    description:
+      "The Flowerly Love Guitar is an acoustic masterpiece adorned with intricate floral designs on its body. Each flower is hand-painted, adding a touch of nature's beauty to the instrument. Its warm, resonant tones make it perfect for both intimate performances and larger gatherings.",
+    shortDescription:
+      'An acoustic guitar with hand-painted floral designs and warm, resonant tones.',
+    price: 599,
+  },
+]
+
+export default guitars

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

@@ -0,0 +1,85 @@
+import { useCallback, useRef, useState } from 'react'
+
+/**
+ * Hook for recording audio and transcribing it via the transcription API.
+ */
+export function useAudioRecorder() {
+  const [isRecording, setIsRecording] = useState(false)
+  const [isTranscribing, setIsTranscribing] = useState(false)
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+  const chunksRef = useRef<Blob[]>([])
+
+  const startRecording = useCallback(async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      const mediaRecorder = new MediaRecorder(stream, {
+        mimeType: 'audio/webm;codecs=opus',
+      })
+      mediaRecorderRef.current = mediaRecorder
+      chunksRef.current = []
+
+      mediaRecorder.ondataavailable = (e) => {
+        if (e.data.size > 0) {
+          chunksRef.current.push(e.data)
+        }
+      }
+
+      mediaRecorder.start()
+      setIsRecording(true)
+    } catch (error) {
+      console.error('Failed to start recording:', error)
+      alert('Could not access microphone. Please check permissions.')
+    }
+  }, [])
+
+  const stopRecording = useCallback(async (): Promise<string | null> => {
+    return new Promise((resolve) => {
+      const mediaRecorder = mediaRecorderRef.current
+      if (!mediaRecorder) {
+        resolve(null)
+        return
+      }
+
+      mediaRecorder.onstop = async () => {
+        setIsRecording(false)
+        setIsTranscribing(true)
+
+        const audioBlob = new Blob(chunksRef.current, { type: 'audio/webm' })
+
+        // Stop all tracks
+        mediaRecorder.stream.getTracks().forEach((track) => track.stop())
+
+        try {
+          const formData = new FormData()
+          formData.append(
+            'audio',
+            new File([audioBlob], 'recording.webm', { type: 'audio/webm' }),
+          )
+          formData.append('model', 'whisper-1')
+
+          const response = await fetch('/demo/api/transcription', {
+            method: 'POST',
+            body: formData,
+          })
+
+          if (!response.ok) {
+            const errorData = await response.json()
+            throw new Error(errorData.error || 'Transcription failed')
+          }
+
+          const result = await response.json()
+          setIsTranscribing(false)
+          resolve(result.text || null)
+        } catch (error) {
+          console.error('Transcription error:', error)
+          setIsTranscribing(false)
+          resolve(null)
+        }
+      }
+
+      mediaRecorder.stop()
+    })
+  }, [])
+
+  return { isRecording, isTranscribing, startRecording, stopRecording }
+}

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

@@ -0,0 +1,78 @@
+import { useCallback, useRef, useState } from 'react'
+
+/**
+ * Hook for text-to-speech playback via the TTS API.
+ */
+export function useTTS() {
+  const [playingId, setPlayingId] = useState<string | null>(null)
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+
+  const speak = useCallback(async (text: string, id: string) => {
+    // Stop any currently playing audio
+    if (audioRef.current) {
+      audioRef.current.pause()
+      audioRef.current = null
+    }
+
+    setPlayingId(id)
+
+    try {
+      const response = await fetch('/demo/api/tts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          text,
+          voice: 'nova',
+          model: 'tts-1',
+          format: 'mp3',
+        }),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'TTS failed')
+      }
+
+      const result = await response.json()
+
+      // Convert base64 to audio and play
+      const audioData = atob(result.audio)
+      const bytes = new Uint8Array(audioData.length)
+      for (let i = 0; i < audioData.length; i++) {
+        bytes[i] = audioData.charCodeAt(i)
+      }
+      const blob = new Blob([bytes], { type: result.contentType })
+      const url = URL.createObjectURL(blob)
+
+      const audio = new Audio(url)
+      audioRef.current = audio
+
+      audio.onended = () => {
+        URL.revokeObjectURL(url)
+        setPlayingId(null)
+        audioRef.current = null
+      }
+
+      audio.onerror = () => {
+        URL.revokeObjectURL(url)
+        setPlayingId(null)
+        audioRef.current = null
+      }
+
+      await audio.play()
+    } catch (error) {
+      console.error('TTS error:', error)
+      setPlayingId(null)
+    }
+  }, [])
+
+  const stop = useCallback(() => {
+    if (audioRef.current) {
+      audioRef.current.pause()
+      audioRef.current = null
+    }
+    setPlayingId(null)
+  }, [])
+
+  return { playingId, speak, stop }
+}

package/dist/frameworks/react/add-ons/ai/assets/src/lib/demo-ai-hook.ts

@@ -0,0 +1,22 @@
+import {
+  fetchServerSentEvents,
+  useChat,
+  createChatClientOptions,
+} from '@tanstack/ai-react'
+import type { InferChatMessages } from '@tanstack/ai-react'
+import { clientTools } from '@tanstack/ai-client'
+
+import { recommendGuitarToolDef } from '@/lib/demo-guitar-tools'
+
+const recommendGuitarToolClient = recommendGuitarToolDef.client(({ id }) => ({
+  id: +id,
+}))
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents('/demo/api/ai/chat'),
+  tools: clientTools(recommendGuitarToolClient),
+})
+
+export type ChatMessages = InferChatMessages<typeof chatOptions>
+
+export const useGuitarRecommendationChat = () => useChat(chatOptions)

package/dist/frameworks/react/add-ons/ai/assets/src/lib/demo-guitar-tools.ts

@@ -0,0 +1,40 @@
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+import guitars from '@/data/demo-guitars'
+
+// Tool definition for getting guitars
+export const getGuitarsToolDef = toolDefinition({
+  name: 'getGuitars',
+  description: 'Get all products from the database',
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      id: z.number(),
+      name: z.string(),
+      image: z.string(),
+      description: z.string(),
+      shortDescription: z.string(),
+      price: z.number(),
+    }),
+  ),
+})
+
+// Server implementation
+export const getGuitars = getGuitarsToolDef.server(() => guitars)
+
+// Tool definition for guitar recommendation
+export const recommendGuitarToolDef = toolDefinition({
+  name: 'recommendGuitar',
+  description:
+    'REQUIRED tool to display a guitar recommendation to the user. This tool MUST be used whenever recommending a guitar - do NOT write recommendations yourself. This displays the guitar in a special appealing format with a buy button.',
+  inputSchema: z.object({
+    id: z
+      .union([z.string(), z.number()])
+      .describe(
+        'The ID of the guitar to recommend (from the getGuitars results)',
+      ),
+  }),
+  outputSchema: z.object({
+    id: z.number(),
+  }),
+})

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

@@ -0,0 +1,99 @@
+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: 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 = {
+            anthropic: () =>
+              anthropicText((model || 'claude-haiku-4-5') as any),
+            openai: () => openaiText((model || 'gpt-4o') as any),
+            gemini: () => geminiText((model || 'gemini-2.0-flash-exp') as any),
+            ollama: () => ollamaText((model || 'mistral:7b') as any),
+          }
+
+          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: any) {
+          // 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.ts

@@ -0,0 +1,72 @@
+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: 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.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' },
+            },
+          )
+        }
+      },
+    },
+  },
+})