@tanstack/create 0.49.1

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

@@ -0,0 +1,32 @@
+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/ai-chat.css

@@ -0,0 +1,228 @@
+@import 'tailwindcss';
+@import 'highlight.js/styles/github-dark.css';
+@source "../../../../node_modules/streamdown/dist/*.js";
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.7);
+}
+
+/* Smooth transitions for dark mode */
+html {
+  transition: background-color 0.3s ease;
+}
+
+/* Markdown content styles */
+.prose {
+  max-width: none;
+  color: #e5e7eb; /* text-gray-200 */
+}
+
+/* .prose p {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+} */
+
+.prose code {
+  color: #e5e7eb;
+  background-color: rgba(31, 41, 55, 0.5);
+  padding: 0.2em 0.4em;
+  border-radius: 0.375rem;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  background-color: rgba(31, 41, 55, 0.5);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1.25em 0;
+  overflow-x: auto;
+}
+
+.prose pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+  color: inherit;
+}
+
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4 {
+  color: #f9fafb; /* text-gray-50 */
+  /* margin-top: 2em; */
+  /* margin-bottom: 1em; */
+}
+
+.prose ul,
+.prose ol {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose blockquote {
+  border-left-color: #f97316; /* orange-500 */
+  background-color: rgba(249, 115, 22, 0.1);
+  padding: 1em;
+  margin: 1.25em 0;
+  border-radius: 0.5rem;
+}
+
+.prose hr {
+  border-color: rgba(249, 115, 22, 0.2);
+  margin: 2em 0;
+}
+
+.prose a {
+  color: #f97316; /* orange-500 */
+  text-decoration: underline;
+  text-decoration-thickness: 0.1em;
+  text-underline-offset: 0.2em;
+}
+
+.prose a:hover {
+  color: #fb923c; /* orange-400 */
+}
+
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.25em 0;
+}
+
+.prose th,
+.prose td {
+  padding: 0.75em;
+  border: 1px solid rgba(249, 115, 22, 0.2);
+}
+
+.prose th {
+  background-color: rgba(249, 115, 22, 0.1);
+  font-weight: 600;
+}
+
+/* Message transition animations */
+.message-enter {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.message-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 300ms,
+    transform 300ms;
+}
+
+.message-exit {
+  opacity: 1;
+}
+
+.message-exit-active {
+  opacity: 0;
+  transition: opacity 300ms;
+}
+
+/* Add/update these styles to match AI formatting capabilities */
+.prose h1 {
+  font-size: 2em;
+  /* margin-top: 1em; */
+  margin-bottom: 0.5em;
+}
+
+.prose h2 {
+  font-size: 1.5em;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.prose h3 {
+  font-size: 1.25em;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.prose ul {
+  list-style-type: disc;
+  padding-left: 1.5em;
+}
+
+.prose ol {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+}
+
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+}
+
+.prose th,
+.prose td {
+  border: 1px solid rgba(249, 115, 22, 0.2);
+  padding: 0.5em;
+}
+
+.prose th {
+  background-color: rgba(249, 115, 22, 0.1);
+}
+
+.prose strong {
+  color: #f9fafb; /* text-gray-50 */
+  font-weight: 600;
+}
+
+.prose em {
+  font-style: italic;
+}
+
+.prose blockquote {
+  border-left: 4px solid #f97316; /* orange-500 */
+  padding-left: 1em;
+  margin: 1em 0;
+  color: #d1d5db; /* text-gray-300 */
+}
+
+/* Ensure code blocks match the AI's formatting */
+.prose code {
+  color: #e5e7eb;
+  background-color: rgba(31, 41, 55, 0.5);
+  padding: 0.2em 0.4em;
+  border-radius: 0.375rem;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  background-color: rgba(31, 41, 55, 0.5);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1em 0;
+}
+
+.prose pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+}

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

@@ -0,0 +1,287 @@
+import { useEffect, useRef, useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import {
+  Send,
+  Square,
+  Mic,
+  MicOff,
+  Volume2,
+  VolumeX,
+  Loader2,
+} from 'lucide-react'
+import { Streamdown } from 'streamdown'
+
+import { useGuitarRecommendationChat } from '@/lib/demo-ai-hook'
+import type { ChatMessages } from '@/lib/demo-ai-hook'
+import { useAudioRecorder } from '@/hooks/demo-useAudioRecorder'
+import { useTTS } from '@/hooks/demo-useTTS'
+
+import GuitarRecommendation from '@/components/demo-GuitarRecommendation'
+
+import './ai-chat.css'
+
+function InitialLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex-1 flex items-center justify-center px-4">
+      <div className="text-center max-w-3xl mx-auto w-full">
+        <h1 className="text-6xl font-bold mb-4 bg-linear-to-r from-orange-500 to-red-600 text-transparent bg-clip-text uppercase">
+          <span className="text-white">TanStack</span> Chat
+        </h1>
+        <p className="text-gray-400 mb-6 w-2/3 mx-auto text-lg">
+          You can ask me about anything, I might or might not have a good
+          answer, but you can still ask.
+        </p>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function ChattingLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="sticky bottom-0 left-0 right-0 bg-gray-900/80 backdrop-blur-sm border-t border-orange-500/10 z-10">
+      <div className="max-w-3xl mx-auto w-full px-4 py-3">{children}</div>
+    </div>
+  )
+}
+
+function Messages({
+  messages,
+  playingId,
+  onSpeak,
+  onStopSpeak,
+}: {
+  messages: ChatMessages
+  playingId: string | null
+  onSpeak: (text: string, id: string) => void
+  onStopSpeak: () => void
+}) {
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop =
+        messagesContainerRef.current.scrollHeight
+    }
+  }, [messages])
+
+  if (!messages.length) {
+    return null
+  }
+
+  // Extract text content from message parts
+  const getTextContent = (
+    parts: ChatMessages[number]['parts'],
+  ): string | null => {
+    for (const part of parts) {
+      if (part.type === 'text' && part.content) {
+        return part.content
+      }
+    }
+    return null
+  }
+
+  return (
+    <div
+      ref={messagesContainerRef}
+      className="flex-1 overflow-y-auto pb-4 min-h-0"
+    >
+      <div className="max-w-3xl mx-auto w-full px-4">
+        {messages.map((message) => {
+          const textContent = getTextContent(message.parts)
+          const isPlaying = playingId === message.id
+
+          return (
+            <div
+              key={message.id}
+              className={`p-4 ${
+                message.role === 'assistant'
+                  ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
+                  : 'bg-transparent'
+              }`}
+            >
+              <div className="flex items-start gap-4 max-w-3xl mx-auto w-full">
+                {message.role === 'assistant' ? (
+                  <div className="w-8 h-8 rounded-lg bg-linear-to-r from-orange-500 to-red-600 mt-2 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
+                    AI
+                  </div>
+                ) : (
+                  <div className="w-8 h-8 rounded-lg bg-gray-700 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
+                    Y
+                  </div>
+                )}
+                <div className="flex-1 min-w-0">
+                  {message.parts.map((part, index) => {
+                    if (part.type === 'text' && part.content) {
+                      return (
+                        <div
+                          className="flex-1 min-w-0 prose dark:prose-invert max-w-none prose-sm"
+                          key={index}
+                        >
+                          <Streamdown>{part.content}</Streamdown>
+                        </div>
+                      )
+                    }
+                    // Guitar recommendation card
+                    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>
+                      )
+                    }
+                    return null
+                  })}
+                </div>
+                {/* TTS button for assistant messages */}
+                {message.role === 'assistant' && textContent && (
+                  <button
+                    onClick={() =>
+                      isPlaying
+                        ? onStopSpeak()
+                        : onSpeak(textContent, message.id)
+                    }
+                    className="flex-shrink-0 p-2 text-gray-400 hover:text-orange-400 transition-colors"
+                    title={isPlaying ? 'Stop speaking' : 'Read aloud'}
+                  >
+                    {isPlaying ? (
+                      <VolumeX className="w-4 h-4" />
+                    ) : (
+                      <Volume2 className="w-4 h-4" />
+                    )}
+                  </button>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function ChatPage() {
+  const [input, setInput] = useState('')
+
+  const { isRecording, isTranscribing, startRecording, stopRecording } =
+    useAudioRecorder()
+  const { playingId, speak, stop: stopTTS } = useTTS()
+
+  const { messages, sendMessage, isLoading, stop } =
+    useGuitarRecommendationChat()
+
+  const handleMicClick = async () => {
+    if (isRecording) {
+      const transcribedText = await stopRecording()
+      if (transcribedText) {
+        setInput((prev) =>
+          prev ? `${prev} ${transcribedText}` : transcribedText,
+        )
+      }
+    } else {
+      await startRecording()
+    }
+  }
+
+  const Layout = messages.length ? ChattingLayout : InitialLayout
+
+  return (
+    <div className="relative flex h-[calc(100vh-80px)] bg-gray-900">
+      <div className="flex-1 flex flex-col min-h-0">
+        <Messages
+          messages={messages}
+          playingId={playingId}
+          onSpeak={speak}
+          onStopSpeak={stopTTS}
+        />
+
+        <Layout>
+          <div className="space-y-3">
+            {isLoading && (
+              <div className="flex items-center justify-center">
+                <button
+                  onClick={stop}
+                  className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+                >
+                  <Square className="w-4 h-4 fill-current" />
+                  Stop
+                </button>
+              </div>
+            )}
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                if (input.trim()) {
+                  sendMessage(input)
+                  setInput('')
+                }
+              }}
+            >
+              <div className="relative max-w-xl mx-auto flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={handleMicClick}
+                  disabled={isLoading || isTranscribing}
+                  className={`p-3 rounded-lg transition-colors ${
+                    isRecording
+                      ? 'bg-red-600 hover:bg-red-700 text-white'
+                      : 'bg-gray-800/50 text-gray-400 hover:text-orange-400 border border-orange-500/20'
+                  } disabled:opacity-50`}
+                  title={isRecording ? 'Stop recording' : 'Start recording'}
+                >
+                  {isTranscribing ? (
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  ) : isRecording ? (
+                    <MicOff className="w-4 h-4" />
+                  ) : (
+                    <Mic className="w-4 h-4" />
+                  )}
+                </button>
+
+                <div className="relative flex-1">
+                  <textarea
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    placeholder="Type something clever..."
+                    className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-4 pr-12 py-3 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 shadow-lg"
+                    rows={1}
+                    style={{ minHeight: '44px', maxHeight: '200px' }}
+                    disabled={isLoading}
+                    onInput={(e) => {
+                      const target = e.target as HTMLTextAreaElement
+                      target.style.height = 'auto'
+                      target.style.height =
+                        Math.min(target.scrollHeight, 200) + 'px'
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && !e.shiftKey && input.trim()) {
+                        e.preventDefault()
+                        sendMessage(input)
+                        setInput('')
+                      }
+                    }}
+                  />
+                  <button
+                    type="submit"
+                    disabled={!input.trim() || isLoading}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
+                  >
+                    <Send className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </Layout>
+      </div>
+    </div>
+  )
+}
+
+export const Route = createFileRoute('/demo/ai/chat')({
+  component: ChatPage,
+})