create-start-app 0.4.3 → 0.5.0

package/dist/mcp.js

@@ -180,7 +180,7 @@ export default async function runServer(sse) {
         });
         const port = process.env.PORT || 8080;
         app.listen(port, () => {
-            console.log(`Server is running on port http://localhost:${port}`);
+            console.log(`Server is running on port http://localhost:${port}/sse`);
         });
     }
     else {

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.3",
+  "version": "0.5.0",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",

package/src/mcp.ts

@@ -220,7 +220,7 @@ export default async function runServer(sse: boolean) {
 
     const port = process.env.PORT || 8080
     app.listen(port, () => {
-      console.log(`Server is running on port http://localhost:${port}`)
+      console.log(`Server is running on port http://localhost:${port}/sse`)
     })
   } else {
     const transport = new StdioServerTransport()

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/sentry/assets/src/app/global-middleware.ts

@@ -1,4 +1,4 @@
-import { createIsomorphicFn } from '@tanstack/start'
+import { createIsomorphicFn } from '@tanstack/react-start'
 import * as Sentry from "@sentry/react";
 import * as SentryServer from "@sentry/node";
 

package/templates/react/add-on/sentry/assets/src/routes/demo.sentry.testing.tsx

@@ -8,7 +8,7 @@
 
 import * as fs from 'node:fs/promises'
 import { createFileRoute } from '@tanstack/react-router'
-import { createServerFn } from '@tanstack/start'
+import { createServerFn } from '@tanstack/react-start'
 import * as Sentry from '@sentry/react'
 import * as SentryServer from '@sentry/node'
 import { useState, useEffect, useRef } from 'react'

package/templates/react/add-on/start/assets/app.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from '@tanstack/start/config'
+import { defineConfig } from '@tanstack/react-start/config'
 import viteTsConfigPaths from 'vite-tsconfig-paths'
 
 export default defineConfig({

package/templates/react/add-on/start/assets/src/api.ts

@@ -1,6 +1,6 @@
 import {
   createStartAPIHandler,
   defaultAPIFileRouteHandler,
-} from '@tanstack/start/api'
+} from '@tanstack/react-start/api'
 
 export default createStartAPIHandler(defaultAPIFileRouteHandler)

package/templates/react/add-on/start/assets/src/client.tsx

@@ -1,5 +1,5 @@
 import { hydrateRoot } from 'react-dom/client'
-import { StartClient } from '@tanstack/start'
+import { StartClient } from '@tanstack/react-start'
 
 import { createRouter } from './router'
 

package/templates/react/add-on/start/assets/src/router.tsx.ejs

@@ -1,7 +1,7 @@
 import { createRouter as createTanstackRouter } from '@tanstack/react-router'<% if (addOnEnabled.sentry) { %>
 import * as Sentry from '@sentry/react'
 import * as SentryServer from '@sentry/node'
-import { createIsomorphicFn } from '@tanstack/start'
+import { createIsomorphicFn } from '@tanstack/react-start'
 <% } %>
 
 // Import the generated route tree

package/templates/react/add-on/start/assets/src/routes/api.demo-names.ts

@@ -1,4 +1,4 @@
-import { createAPIFileRoute } from '@tanstack/start/api'
+import { createAPIFileRoute } from '@tanstack/react-start/api'
 
 export const APIRoute = createAPIFileRoute('/demo/start/api/names')({
   GET: async ({ request }) => {

package/templates/react/add-on/start/assets/src/routes/demo.start.server-funcs.tsx

@@ -1,6 +1,6 @@
 import * as fs from 'fs'
 import { createFileRoute, useRouter } from '@tanstack/react-router'
-import { createServerFn } from '@tanstack/start'
+import { createServerFn } from '@tanstack/react-start'
 
 const filePath = 'count.txt'
 

package/templates/react/add-on/start/assets/src/ssr.tsx

@@ -1,8 +1,8 @@
 import {
   createStartHandler,
   defaultStreamHandler,
-} from '@tanstack/start/server'
-import { getRouterManifest } from '@tanstack/start/router-manifest'
+} from '@tanstack/react-start/server'
+import { getRouterManifest } from '@tanstack/react-start/router-manifest'
 
 import { createRouter } from './router'
 

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

@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "@tailwindcss/postcss": "^4.0.7",
-    "@tanstack/start": "^1.106.0",
+    "@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,
 })