create-start-app 0.4.4 → 0.5.0

package/dist/options.js

@@ -211,24 +211,24 @@ export async function promptForOptions(cliOptions) {
             selectedAddOns = value;
         }
         // Select any examples
-        const selectedExamples = [];
-        // const examples = allAddOns.filter((addOn) => addOn.type === 'example')
-        // if (options.typescript && examples.length > 0) {
-        //   const value = await multiselect({
-        //     message: 'Would you like any examples?',
-        //     options: examples.map((addOn) => ({
-        //       value: addOn.id,
-        //       label: addOn.name,
-        //       hint: addOn.description,
-        //     })),
-        //     required: false,
-        //   })
-        //   if (isCancel(value)) {
-        //     cancel('Operation cancelled.')
-        //     process.exit(0)
-        //   }
-        //   selectedExamples = value
-        // }
+        let selectedExamples = [];
+        const examples = allAddOns.filter((addOn) => addOn.type === 'example');
+        if (options.typescript && examples.length > 0) {
+            const value = await multiselect({
+                message: 'Would you like any examples?',
+                options: examples.map((addOn) => ({
+                    value: addOn.id,
+                    label: addOn.name,
+                    hint: addOn.description,
+                })),
+                required: false,
+            });
+            if (isCancel(value)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            selectedExamples = value;
+        }
         if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
             options.chosenAddOns = await finalizeAddOns(options.framework, options.mode, [...selectedAddOns, ...selectedExamples]);
             options.tailwind = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-start-app",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",

package/src/options.ts

@@ -251,25 +251,25 @@ export async function promptForOptions(
     }
 
     // Select any examples
-    const selectedExamples: Array<string> = []
-    // const examples = allAddOns.filter((addOn) => addOn.type === 'example')
-    // if (options.typescript && examples.length > 0) {
-    //   const value = await multiselect({
-    //     message: 'Would you like any examples?',
-    //     options: examples.map((addOn) => ({
-    //       value: addOn.id,
-    //       label: addOn.name,
-    //       hint: addOn.description,
-    //     })),
-    //     required: false,
-    //   })
+    let selectedExamples: Array<string> = []
+    const examples = allAddOns.filter((addOn) => addOn.type === 'example')
+    if (options.typescript && examples.length > 0) {
+      const value = await multiselect({
+        message: 'Would you like any examples?',
+        options: examples.map((addOn) => ({
+          value: addOn.id,
+          label: addOn.name,
+          hint: addOn.description,
+        })),
+        required: false,
+      })
 
-    //   if (isCancel(value)) {
-    //     cancel('Operation cancelled.')
-    //     process.exit(0)
-    //   }
-    //   selectedExamples = value
-    // }
+      if (isCancel(value)) {
+        cancel('Operation cancelled.')
+        process.exit(0)
+      }
+      selectedExamples = value
+    }
 
     if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
       options.chosenAddOns = await finalizeAddOns(

package/templates/react/add-on/form/info.json

@@ -1,6 +1,6 @@
 {
   "name": "Form",
-  "description": "TansStack Form",
+  "description": "TanStack Form",
   "phase": "add-on",
   "templates": ["file-router", "code-router"],
   "link": "https://tanstack.com/form/latest",

package/templates/react/add-on/start/package.json

@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "@tailwindcss/postcss": "^4.0.7",
-    "@tanstack/react-start": "^1.111.12",
+    "@tanstack/react-start": "^1.112.1",
     "postcss": "^8.5.2",
     "vinxi": "^0.5.3",
     "vite-tsconfig-paths": "^5.1.4"

package/templates/react/base/package.json

@@ -9,8 +9,8 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.104.1",
-    "@tanstack/router-devtools": "^1.104.3",
+    "@tanstack/react-router": "^1.112.0",
+    "@tanstack/router-devtools": "^1.112.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/templates/react/example/tanchat/assets/src/routes/{example.chat.tsx.ejs → example.chat.tsx}

@@ -1,15 +1,26 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useEffect, useState, useRef } from 'react'
-import { PlusCircle, MessageCircle, ChevronLeft, ChevronRight, Trash2, X, Menu, Send, Settings, User, LogOut, Edit2 } from 'lucide-react'
+import {
+  PlusCircle,
+  MessageCircle,
+  Trash2,
+  Send,
+  Settings,
+  Edit2,
+} from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize from 'rehype-sanitize'
 import rehypeHighlight from 'rehype-highlight'
+
 import { SettingsDialog } from '../components/demo.SettingsDialog'
 import { useAppState } from '../store/demo.hooks'
 import { store } from '../store/demo.store'
-import { genAIResponse, type Message } from '../utils/demo.ai'
-import "../demo.index.css"
+import { genAIResponse } from '../utils/demo.ai'
+
+import type { Message } from '../utils/demo.ai'
+
+import '../demo.index.css'
 
 function Home() {
   const {
@@ -23,22 +34,23 @@ function Home() {
     addMessage,
     setLoading,
     getCurrentConversation,
-    getActivePrompt
+    getActivePrompt,
   } = useAppState()
 
   const currentConversation = getCurrentConversation(store.state)
   const messages = currentConversation?.messages || []
-  
+
   // Local state
   const [input, setInput] = useState('')
   const [editingChatId, setEditingChatId] = useState<string | null>(null)
   const [isSettingsOpen, setIsSettingsOpen] = useState(false)
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const messagesContainerRef = useRef<HTMLDivElement>(null)
+  const [pendingMessage, setPendingMessage] = useState<Message | null>(null)
 
   const scrollToBottom = () => {
     if (messagesContainerRef.current) {
-      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight
+      messagesContainerRef.current.scrollTop =
+        messagesContainerRef.current.scrollHeight
     }
   }
 
@@ -50,7 +62,7 @@ function Home() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     if (!input.trim() || isLoading) return
-    
+
     const currentInput = input
     setInput('') // Clear input early for better UX
     setLoading(true)
@@ -64,7 +76,7 @@ function Home() {
         const newConversation = {
           id: conversationId,
           title: currentInput.trim().slice(0, 30),
-          messages: []
+          messages: [],
         }
         addConversation(newConversation)
       }
@@ -84,7 +96,7 @@ function Home() {
       if (activePrompt) {
         systemPrompt = {
           value: activePrompt.content,
-          enabled: true
+          enabled: true,
         }
       }
 
@@ -92,21 +104,44 @@ function Home() {
       const response = await genAIResponse({
         data: {
           messages: [...messages, userMessage],
-          systemPrompt
-        }
+          systemPrompt,
+        },
       })
 
-      if (!response.text?.trim()) {
-        throw new Error('Received empty response from AI')
+      const reader = response.body?.getReader()
+      if (!reader) {
+        throw new Error('No reader found in response')
       }
 
-      const assistantMessage: Message = {
+      const decoder = new TextDecoder()
+
+      let done = false
+      let newMessage = {
         id: (Date.now() + 1).toString(),
         role: 'assistant' as const,
-        content: response.text
+        content: '',
+      }
+      while (!done) {
+        const out = await reader.read()
+        done = out.done
+        if (!done) {
+          try {
+            const json = JSON.parse(decoder.decode(out.value))
+            if (json.type === 'content_block_delta') {
+              newMessage = {
+                ...newMessage,
+                content: newMessage.content + json.delta.text,
+              }
+              setPendingMessage(newMessage)
+            }
+          } catch (e) {}
+        }
       }
 
-      addMessage(conversationId, assistantMessage)
+      setPendingMessage(null)
+      if (newMessage.content.trim()) {
+        addMessage(conversationId, newMessage)
+      }
     } catch (error) {
       console.error('Error:', error)
       const errorMessage: Message = {
@@ -126,7 +161,7 @@ function Home() {
     const newConversation = {
       id: Date.now().toString(),
       title: 'New Chat',
-      messages: []
+      messages: [],
     }
     addConversation(newConversation)
   }
@@ -184,7 +219,9 @@ function Home() {
                 <input
                   type="text"
                   value={chat.title}
-                  onChange={(e) => handleUpdateChatTitle(chat.id, e.target.value)}
+                  onChange={(e) =>
+                    handleUpdateChatTitle(chat.id, e.target.value)
+                  }
                   onBlur={() => setEditingChatId(null)}
                   onKeyDown={(e) => {
                     if (e.key === 'Enter') {
@@ -229,37 +266,47 @@ function Home() {
         {currentConversationId ? (
           <>
             {/* Messages */}
-            <div ref={messagesContainerRef} className="flex-1 overflow-y-auto pb-24">
+            <div
+              ref={messagesContainerRef}
+              className="flex-1 overflow-y-auto pb-24"
+            >
               <div className="max-w-3xl mx-auto w-full px-4">
-                {messages.map((message) => (
-                  <div
-                    key={message.id}
-                    className={`py-6 ${message.role === 'assistant'
-                      ? 'bg-gradient-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-gradient-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
+                {[...messages, pendingMessage]
+                  .filter((v) => v)
+                  .map((message) => (
+                    <div
+                      key={message!.id}
+                      className={`py-6 ${
+                        message!.role === 'assistant'
+                          ? 'bg-gradient-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-gradient-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">
+                          <ReactMarkdown
+                            className="prose dark:prose-invert max-w-none"
+                            rehypePlugins={[
+                              rehypeRaw,
+                              rehypeSanitize,
+                              rehypeHighlight,
+                            ]}
+                          >
+                            {message!.content}
+                          </ReactMarkdown>
                         </div>
-                      )}
-                      <div className="flex-1 min-w-0">
-                        <ReactMarkdown
-                          className="prose dark:prose-invert max-w-none"
-                          rehypePlugins={[rehypeRaw, rehypeSanitize, rehypeHighlight]}
-                        >
-                          {message.content}
-                        </ReactMarkdown>
                       </div>
                     </div>
-                  </div>
-                ))}
+                  ))}
                 {isLoading && (
                   <div className="py-6 bg-gradient-to-r from-orange-500/5 to-red-600/5">
                     <div className="flex items-start gap-4 max-w-3xl mx-auto w-full">
@@ -268,16 +315,29 @@ function Home() {
                         <div className="absolute inset-[2px] rounded-lg bg-gray-900 flex items-center justify-center">
                           <div className="relative w-full h-full rounded-lg bg-gradient-to-r from-orange-500 to-red-600 flex items-center justify-center">
                             <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-orange-500 to-red-600 animate-pulse"></div>
-                            <span className="relative z-10 text-sm font-medium text-white">AI</span>
+                            <span className="relative z-10 text-sm font-medium text-white">
+                              AI
+                            </span>
                           </div>
                         </div>
                       </div>
                       <div className="flex items-center gap-3">
-                        <div className="text-gray-400 font-medium text-lg">Thinking</div>
+                        <div className="text-gray-400 font-medium text-lg">
+                          Thinking
+                        </div>
                         <div className="flex gap-2">
-                          <div className="w-2 h-2 rounded-full bg-orange-500 animate-[bounce_0.8s_infinite]" style={{ animationDelay: '0ms' }}></div>
-                          <div className="w-2 h-2 rounded-full bg-orange-500 animate-[bounce_0.8s_infinite]" style={{ animationDelay: '200ms' }}></div>
-                          <div className="w-2 h-2 rounded-full bg-orange-500 animate-[bounce_0.8s_infinite]" style={{ animationDelay: '400ms' }}></div>
+                          <div
+                            className="w-2 h-2 rounded-full bg-orange-500 animate-[bounce_0.8s_infinite]"
+                            style={{ animationDelay: '0ms' }}
+                          ></div>
+                          <div
+                            className="w-2 h-2 rounded-full bg-orange-500 animate-[bounce_0.8s_infinite]"
+                            style={{ animationDelay: '200ms' }}
+                          ></div>
+                          <div
+                            className="w-2 h-2 rounded-full bg-orange-500 animate-[bounce_0.8s_infinite]"
+                            style={{ animationDelay: '400ms' }}
+                          ></div>
                         </div>
                       </div>
                     </div>
@@ -305,9 +365,10 @@ function Home() {
                       rows={1}
                       style={{ minHeight: '44px', maxHeight: '200px' }}
                       onInput={(e) => {
-                        const target = e.target as HTMLTextAreaElement;
-                        target.style.height = 'auto';
-                        target.style.height = Math.min(target.scrollHeight, 200) + 'px';
+                        const target = e.target as HTMLTextAreaElement
+                        target.style.height = 'auto'
+                        target.style.height =
+                          Math.min(target.scrollHeight, 200) + 'px'
                       }}
                     />
                     <button
@@ -329,7 +390,8 @@ function Home() {
                 <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.
+                You can ask me about anything, I might or might not have a good
+                answer, but you can still ask.
               </p>
               <form onSubmit={handleSubmit}>
                 <div className="relative max-w-xl mx-auto">
@@ -370,6 +432,6 @@ function Home() {
   )
 }
 
-export const Route = createFileRoute('/')({
-  component: Home
+export const Route = createFileRoute('/example/chat')({
+  component: Home,
 })

package/templates/react/example/tanchat/assets/src/utils/demo.ai.ts

@@ -2,9 +2,9 @@ import { createServerFn } from '@tanstack/react-start'
 import { Anthropic } from '@anthropic-ai/sdk'
 
 export interface Message {
-    id: string
-    role: 'user' | 'assistant'
-    content: string
+  id: string
+  role: 'user' | 'assistant'
+  content: string
 }
 
 const DEFAULT_SYSTEM_PROMPT = `You are TanStack Chat, an AI assistant using Markdown for clear and structured responses. Format your responses following these guidelines:
@@ -47,62 +47,66 @@ const DEFAULT_SYSTEM_PROMPT = `You are TanStack Chat, an AI assistant using Mark
    - Use inline \`code\` for technical terms
    - Include example usage where helpful
 
-Keep responses concise and well-structured. Use appropriate Markdown formatting to enhance readability and understanding.`;
+Keep responses concise and well-structured. Use appropriate Markdown formatting to enhance readability and understanding.`
 
 // Non-streaming implementation
-export const genAIResponse = createServerFn({ method: 'GET' })
-   
-    .validator((d: { 
-        messages: Message[], 
-        systemPrompt?: { value: string, enabled: boolean },
-        streamEnabled?: boolean 
-    }) => d)
-    // .middleware([loggingMiddleware])
-    .handler(async ({ data }) => {
-        const anthropic = new Anthropic({
-            apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY || '',
-        });
-
-        // Filter out error messages and empty messages
-        const formattedMessages = data.messages
-            .filter(msg => msg.content.trim() !== '' && !msg.content.startsWith('Sorry, I encountered an error'))
-            .map(msg => ({
-                role: msg.role,
-                content: msg.content.trim()
-            }));
-
-        if (formattedMessages.length === 0) {
-            return { error: 'No valid messages to send' };
-        }
-
-        const systemPrompt = data.systemPrompt?.enabled 
-            ? `${DEFAULT_SYSTEM_PROMPT}\n\n${data.systemPrompt.value}`
-            : DEFAULT_SYSTEM_PROMPT;
-
-        // Debug log to verify prompt layering
-        console.log('System Prompt Configuration:', {
-            hasCustomPrompt: data.systemPrompt?.enabled,
-            customPromptValue: data.systemPrompt?.value,
-            finalPrompt: systemPrompt
-        });
-
-        try {
-            const response = await anthropic.messages.create({
-                model: "claude-3-5-sonnet-20241022",
-                max_tokens: 4096,
-                system: systemPrompt,
-                messages: formattedMessages,
-            });
-
-            if (response.content[0].type === 'text') {
-                return { text: response.content[0].text };
-            }
-            return { error: 'Unexpected response type' };
-        } catch (error) {
-            console.error('Error in genAIResponse:', error);
-            if (error instanceof Error && error.message.includes('rate limit')) {
-                return { error: 'Rate limit exceeded. Please try again in a moment.' };
-            }
-            return { error: error instanceof Error ? error.message : 'Failed to get AI response' };
-        }
-    });
+export const genAIResponse = createServerFn({ method: 'GET', response: 'raw' })
+  .validator(
+    (d: {
+      messages: Array<Message>
+      systemPrompt?: { value: string; enabled: boolean }
+    }) => d,
+  )
+  // .middleware([loggingMiddleware])
+  .handler(async ({ data }) => {
+    const anthropic = new Anthropic({
+      apiKey: process.env.ANTHROPIC_API_KEY || '',
+    })
+
+    // Filter out error messages and empty messages
+    const formattedMessages = data.messages
+      .filter(
+        (msg) =>
+          msg.content.trim() !== '' &&
+          !msg.content.startsWith('Sorry, I encountered an error'),
+      )
+      .map((msg) => ({
+        role: msg.role,
+        content: msg.content.trim(),
+      }))
+
+    if (formattedMessages.length === 0) {
+      return { error: 'No valid messages to send' }
+    }
+
+    const systemPrompt = data.systemPrompt?.enabled
+      ? `${DEFAULT_SYSTEM_PROMPT}\n\n${data.systemPrompt.value}`
+      : DEFAULT_SYSTEM_PROMPT
+
+    // Debug log to verify prompt layering
+    console.log('System Prompt Configuration:', {
+      hasCustomPrompt: data.systemPrompt?.enabled,
+      customPromptValue: data.systemPrompt?.value,
+      finalPrompt: systemPrompt,
+    })
+
+    try {
+      const response = await anthropic.messages.stream({
+        model: 'claude-3-5-sonnet-20241022',
+        max_tokens: 4096,
+        system: systemPrompt,
+        messages: formattedMessages,
+      })
+
+      return new Response(response.toReadableStream())
+    } catch (error) {
+      console.error('Error in genAIResponse:', error)
+      if (error instanceof Error && error.message.includes('rate limit')) {
+        return { error: 'Rate limit exceeded. Please try again in a moment.' }
+      }
+      return {
+        error:
+          error instanceof Error ? error.message : 'Failed to get AI response',
+      }
+    }
+  })

package/templates/react/example/tanchat/package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@anthropic-ai/sdk": "^0.14.1",
+    "highlight.js": "^11.11.1",
     "react-markdown": "^9.0.1",
     "rehype-highlight": "^7.0.0",
     "rehype-raw": "^7.0.0",

package/templates/react/file-router/package.fr.json

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@tanstack/router-plugin": "^1.105.0"
+    "@tanstack/router-plugin": "^1.112.0"
   }
 }

package/templates/solid/add-on/form/info.json

@@ -1,6 +1,6 @@
 {
   "name": "Form",
-  "description": "TansStack Form",
+  "description": "TanStack Form",
   "phase": "add-on",
   "link": "https://tanstack.com/form/latest",
   "templates": ["file-router", "code-router"],

package/templates/solid/example/tanchat/README.md

@@ -0,0 +1,52 @@
+# TanStack Chat Application
+
+Am example chat application built with TanStack Start, TanStack Store, and Claude AI.
+
+## Sidecar service
+
+This applicaton requires a sidecar microservice to be running. The server is located in the `ai-streaming-service` directory.
+
+In that directory you should edit the `.env.local` file to add your Anthropic API key:
+
+```env
+ANTHROPIC_API_KEY=your_anthropic_api_key
+```
+
+Then run the server:
+
+```bash
+cd ai-streaming-service
+npm install
+npm run dev
+```
+
+## ✨ 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
+
+- **Routing**: TanStack Router
+- **State Management**: TanStack Store
+- **Styling**: Tailwind CSS
+- **AI Integration**: Anthropic's Claude API