@tanstack/create 0.49.1

package/dist/file-helpers.js

@@ -0,0 +1,183 @@
+import { readdir } from 'node:fs/promises';
+import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs';
+import { basename, extname, resolve } from 'node:path';
+import parseGitignore from 'parse-gitignore';
+import ignore from 'ignore';
+const BINARY_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.ico'];
+export function readFileHelper(path) {
+    if (isBinaryFile(path)) {
+        return `base64::${readFileSync(path).toString('base64')}`;
+    }
+    else {
+        return readFileSync(path, 'utf-8').toString();
+    }
+}
+export function isBinaryFile(path) {
+    return BINARY_EXTENSIONS.includes(extname(path));
+}
+export function convertBinaryContentsToBase64(contents) {
+    return `base64::${Buffer.from(contents).toString('base64')}`;
+}
+export function isBase64(content) {
+    return content.startsWith('base64::');
+}
+export function getBinaryFile(content) {
+    if (content.startsWith('base64::')) {
+        const binaryContent = Buffer.from(content.replace('base64::', ''), 'base64');
+        return binaryContent;
+    }
+    return null;
+}
+/**
+ * Convert an absolute path to a clean relative path by removing a base directory.
+ * Returns a path without leading ./ or / prefix.
+ */
+export function toCleanPath(absolutePath, baseDir) {
+    let cleanPath = absolutePath.replace(baseDir, '');
+    if (cleanPath.startsWith('/'))
+        cleanPath = cleanPath.slice(1);
+    return cleanPath;
+}
+export function relativePath(from, to, stripExtension = false) {
+    const fixedOnWindows = from.startsWith('.\\')
+        ? from.replace(/\\/g, '/')
+        : from;
+    const cleanedFrom = fixedOnWindows.startsWith('./')
+        ? fixedOnWindows.slice(2)
+        : from;
+    const cleanedTo = to.startsWith('./') ? to.slice(2) : to;
+    const fromSegments = cleanedFrom.split('/');
+    const toSegments = cleanedTo.split('/');
+    fromSegments.pop();
+    toSegments.pop();
+    let commonIndex = 0;
+    while (commonIndex < fromSegments.length &&
+        commonIndex < toSegments.length &&
+        fromSegments[commonIndex] === toSegments[commonIndex]) {
+        commonIndex++;
+    }
+    const upLevels = fromSegments.length - commonIndex;
+    const downLevels = toSegments.slice(commonIndex);
+    if (stripExtension) {
+        to = to.replace(extname(to), '');
+    }
+    if (upLevels === 0 && downLevels.length === 0) {
+        return `./${basename(to)}`;
+    }
+    else if (upLevels === 0 && downLevels.length > 0) {
+        return `./${downLevels.join('/')}/${basename(to)}`;
+    }
+    else {
+        const relativePath = [...Array(upLevels).fill('..'), ...downLevels].join('/');
+        return `${relativePath}/${basename(to)}`;
+    }
+}
+export function isDirectory(path) {
+    return statSync(path).isDirectory();
+}
+export function findFilesRecursively(path, files) {
+    const dirFiles = readdirSync(path);
+    for (const file of dirFiles) {
+        const filePath = resolve(path, file);
+        if (isDirectory(filePath)) {
+            findFilesRecursively(filePath, files);
+        }
+        else {
+            files[filePath] = readFileHelper(filePath);
+        }
+    }
+}
+async function recursivelyGatherFilesHelper(basePath, path, files, ignore) {
+    const dirFiles = await readdir(path, { withFileTypes: true });
+    for (const file of dirFiles) {
+        if (ignore(file.name)) {
+            continue;
+        }
+        if (file.isDirectory()) {
+            await recursivelyGatherFilesHelper(basePath, resolve(path, file.name), files, ignore);
+        }
+        else {
+            const filePath = resolve(path, file.name);
+            files[toCleanPath(filePath, basePath)] = await readFileHelper(filePath);
+        }
+    }
+}
+export async function recursivelyGatherFiles(path, includeProjectFiles = true) {
+    const ignore = createIgnore(path, includeProjectFiles);
+    const files = {};
+    await recursivelyGatherFilesHelper(path, path, files, ignore);
+    return files;
+}
+async function recursivelyGatherFilesFromEnvironmentHelper(environment, basePath, path, files, ignore) {
+    const dirFiles = await environment.readdir(path);
+    for (const file of dirFiles) {
+        if (ignore(file)) {
+            continue;
+        }
+        if (environment.isDirectory(resolve(path, file))) {
+            await recursivelyGatherFilesFromEnvironmentHelper(environment, basePath, resolve(path, file), files, ignore);
+        }
+        else {
+            const filePath = resolve(path, file);
+            files[toCleanPath(filePath, basePath)] =
+                await environment.readFile(filePath);
+        }
+    }
+}
+export async function recursivelyGatherFilesFromEnvironment(environment, path, includeProjectFiles = true) {
+    const ignore = createIgnore(path, includeProjectFiles);
+    const files = {};
+    await recursivelyGatherFilesFromEnvironmentHelper(environment, path, path, files, ignore);
+    return files;
+}
+export const IGNORE_FILES = [
+    '.starter',
+    '.add-on',
+    '.cta.json',
+    '.git',
+    'add-on-info.json',
+    'add-on.json',
+    'build',
+    'bun.lock',
+    'bun.lockb',
+    'deno.lock',
+    'dist',
+    'node_modules',
+    'package-lock.json',
+    'pnpm-lock.yaml',
+    'starter.json',
+    'starter-info.json',
+    'yarn.lock',
+];
+const PROJECT_FILES = ['package.json'];
+export function createIgnore(path, includeProjectFiles = true) {
+    const ignoreList = existsSync(resolve(path, '.gitignore'))
+        ? parseGitignore(readFileSync(resolve(path, '.gitignore'))).patterns
+        : [];
+    const ig = ignore().add(ignoreList);
+    return (filePath) => {
+        const fileName = basename(filePath);
+        if (IGNORE_FILES.includes(fileName) ||
+            (includeProjectFiles && PROJECT_FILES.includes(fileName))) {
+            return true;
+        }
+        const nameWithoutDotSlash = fileName.replace(/^\.\//, '');
+        return ig.ignores(nameWithoutDotSlash);
+    };
+}
+export function cleanUpFiles(files, targetDir) {
+    return Object.keys(files).reduce((acc, file) => {
+        if (basename(file) !== '.cta.json') {
+            acc[targetDir ? toCleanPath(file, targetDir) : file] = files[file];
+        }
+        return acc;
+    }, {});
+}
+export function cleanUpFileArray(files, targetDir) {
+    return files.reduce((acc, file) => {
+        if (basename(file) !== '.cta.json') {
+            acc.push(targetDir ? toCleanPath(file, targetDir) : file);
+        }
+        return acc;
+    }, []);
+}

package/dist/frameworks/react/add-ons/ai/README.md

@@ -0,0 +1,37 @@
+# TanStack Chat Application
+
+Am example chat application built with TanStack Start, TanStack Store, and Claude AI.
+
+## .env Updates
+
+```env
+ANTHROPIC_API_KEY=your_anthropic_api_key
+```
+
+## ✨ Features
+
+### AI Capabilities
+- 🤖 Powered by Claude 3.5 Sonnet 
+- 📝 Rich markdown formatting with syntax highlighting
+- 🎯 Customizable system prompts for tailored AI behavior
+- 🔄 Real-time message updates and streaming responses (coming soon)
+
+### User Experience
+- 🎨 Modern UI with Tailwind CSS and Lucide icons
+- 🔍 Conversation management and history
+- 🔐 Secure API key management
+- 📋 Markdown rendering with code highlighting
+
+### Technical Features
+- 📦 Centralized state management with TanStack Store
+- 🔌 Extensible architecture for multiple AI providers
+- 🛠️ TypeScript for type safety
+
+## Architecture
+
+### Tech Stack
+- **Frontend Framework**: TanStack Start
+- **Routing**: TanStack Router
+- **State Management**: TanStack Store
+- **Styling**: Tailwind CSS
+- **AI Integration**: Anthropic's Claude API

package/dist/frameworks/react/add-ons/ai/assets/_dot_env.local.append

@@ -0,0 +1,2 @@
+# Add your Anthropic API key
+ANTHROPIC_API_KEY=

package/dist/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useRef, useState } from 'react'
+import { useStore } from '@tanstack/react-store'
+import { Store } from '@tanstack/store'
+
+import { Send, X, ChevronRight, BotIcon } from 'lucide-react'
+import { Streamdown } from 'streamdown'
+
+import { useGuitarRecommendationChat } from '@/lib/demo-ai-hook'
+import type { ChatMessages } from '@/lib/demo-ai-hook'
+
+import GuitarRecommendation from './demo-GuitarRecommendation'
+
+export const showAIAssistant = new Store(false)
+
+function Messages({ messages }: { messages: ChatMessages }) {
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop =
+        messagesContainerRef.current.scrollHeight
+    }
+  }, [messages])
+
+  if (!messages.length) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-gray-400 text-sm">
+        Ask me anything! I'm here to help.
+      </div>
+    )
+  }
+
+  return (
+    <div ref={messagesContainerRef} className="flex-1 overflow-y-auto">
+      {messages.map(({ id, role, parts }) => (
+        <div
+          key={id}
+          className={`py-3 ${
+            role === 'assistant'
+              ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
+              : 'bg-transparent'
+          }`}
+        >
+          {parts.map((part, index) => {
+            if (part.type === 'text' && part.content) {
+              return (
+                <div key={index} className="flex items-start gap-2 px-4">
+                  {role === 'assistant' ? (
+                    <div className="w-6 h-6 rounded-lg bg-linear-to-r from-orange-500 to-red-600 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                      AI
+                    </div>
+                  ) : (
+                    <div className="w-6 h-6 rounded-lg bg-gray-700 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                      Y
+                    </div>
+                  )}
+                  <div className="flex-1 min-w-0 text-white prose dark:prose-invert max-w-none prose-sm">
+                    <Streamdown>{part.content}</Streamdown>
+                  </div>
+                </div>
+              )
+            }
+            if (
+              part.type === 'tool-call' &&
+              part.name === 'recommendGuitar' &&
+              part.output
+            ) {
+              return (
+                <div key={part.id} className="max-w-[80%] mx-auto">
+                  <GuitarRecommendation id={String(part.output?.id)} />
+                </div>
+              )
+            }
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default function AIAssistant() {
+  const isOpen = useStore(showAIAssistant)
+  const { messages, sendMessage } = useGuitarRecommendationChat()
+  const [input, setInput] = useState('')
+
+  return (
+    <div className="relative z-50">
+      <button
+        onClick={() => showAIAssistant.setState((state) => !state)}
+        className="w-full flex items-center justify-between px-4 py-2.5 rounded-lg bg-linear-to-r from-green-700 to-green-900 text-white hover:opacity-90 transition-opacity"
+      >
+        <div className="flex items-center gap-2">
+          <BotIcon size={24} />
+          <span className="font-medium">AI Assistant</span>
+        </div>
+        <ChevronRight className="w-4 h-4" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute bottom-0 left-full ml-2 w-[700px] h-[600px] bg-gray-900 rounded-lg shadow-xl border border-orange-500/20 flex flex-col">
+          <div className="flex items-center justify-between p-3 border-b border-orange-500/20">
+            <h3 className="font-semibold text-white">AI Assistant</h3>
+            <button
+              onClick={() => showAIAssistant.setState((state) => !state)}
+              className="text-gray-400 hover:text-white transition-colors"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+
+          <Messages messages={messages} />
+
+          <div className="p-3 border-t border-orange-500/20">
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                if (input.trim()) {
+                  sendMessage(input)
+                  setInput('')
+                }
+              }}
+            >
+              <div className="relative">
+                <textarea
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder="Type your message..."
+                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-3 pr-10 py-2 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden"
+                  rows={1}
+                  style={{ minHeight: '36px', maxHeight: '120px' }}
+                  onInput={(e) => {
+                    const target = e.target as HTMLTextAreaElement
+                    target.style.height = 'auto'
+                    target.style.height =
+                      Math.min(target.scrollHeight, 120) + 'px'
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey && input.trim()) {
+                      e.preventDefault()
+                      sendMessage(input)
+                      setInput('')
+                    }
+                  }}
+                />
+                <button
+                  type="submit"
+                  disabled={!input.trim()}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
+                >
+                  <Send className="w-4 h-4" />
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/dist/frameworks/react/add-ons/ai/assets/src/components/demo-GuitarRecommendation.tsx

@@ -0,0 +1,47 @@
+import { useNavigate } from '@tanstack/react-router'
+
+import { showAIAssistant } from './demo-AIAssistant'
+
+import guitars from '@/data/demo-guitars'
+
+export default function GuitarRecommendation({ id }: { id: string }) {
+  const navigate = useNavigate()
+  const guitar = guitars.find((guitar) => guitar.id === +id)
+  if (!guitar) {
+    return null
+  }
+  return (
+    <div className="my-4 rounded-lg overflow-hidden border border-orange-500/20 bg-gray-800/50">
+      <div className="aspect-[4/3] relative overflow-hidden">
+        <img
+          src={guitar.image}
+          alt={guitar.name}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      <div className="p-4">
+        <h3 className="text-lg font-semibold text-white mb-2">{guitar.name}</h3>
+        <p className="text-sm text-gray-300 mb-3 line-clamp-2">
+          {guitar.shortDescription}
+        </p>
+        <div className="flex items-center justify-between">
+          <div className="text-lg font-bold text-emerald-400">
+            ${guitar.price}
+          </div>
+          <button
+            onClick={() => {
+              navigate({
+                to: '/example/guitars/$guitarId',
+                params: { guitarId: guitar.id.toString() },
+              })
+              showAIAssistant.setState(() => false)
+            }}
+            className="bg-gradient-to-r from-orange-500 to-red-600 text-white px-4 py-1.5 rounded-lg text-sm hover:opacity-90 transition-opacity"
+          >
+            View Details
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,67 @@
+const guitars = [
+    {
+        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.js

@@ -0,0 +1,70 @@
+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(null);
+    const chunksRef = useRef([]);
+    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 () => {
+        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.js

@@ -0,0 +1,66 @@
+import { useCallback, useRef, useState } from 'react';
+/**
+ * Hook for text-to-speech playback via the TTS API.
+ */
+export function useTTS() {
+    const [playingId, setPlayingId] = useState(null);
+    const audioRef = useRef(null);
+    const speak = useCallback(async (text, id) => {
+        // 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/ai-devtools.tsx

@@ -0,0 +1,3 @@
+import { aiDevtoolsPlugin } from '@tanstack/react-ai-devtools'
+
+export default aiDevtoolsPlugin()

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

@@ -0,0 +1,11 @@
+import { fetchServerSentEvents, useChat, createChatClientOptions, } 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 const useGuitarRecommendationChat = () => useChat(chatOptions);