create-start-app 0.9.4 → 0.9.7

package/dist/create-app.js

@@ -5,6 +5,7 @@ import { render } from 'ejs';
 import { format } from 'prettier';
 import chalk from 'chalk';
 import { CODE_ROUTER, FILE_ROUTER } from './constants.js';
+import { packageManagerExecute } from './package-manager.js';
 function sortObject(obj) {
     return Object.keys(obj)
         .sort()
@@ -306,7 +307,7 @@ export async function createApp(options, { silent = false, environment, }) {
         }
         if (shadcnComponents.size > 0) {
             s?.start(`Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`);
-            await environment.execute('npx', ['shadcn@canary', 'add', '--silent', '--yes', ...shadcnComponents], resolve(targetDir));
+            await packageManagerExecute(environment, options.packageManager, 'shadcn@latest', ['add', '--silent', '--yes', ...shadcnComponents], resolve(targetDir));
             s?.stop(`Installed additional shadcn components`);
         }
     }
@@ -445,6 +446,6 @@ Use the following commands to start your app:
 % cd ${options.projectName}
 % ${startCommand}
 
-Please read README.md for more information on testing, styling, adding routes, react-query, etc.${errorStatement}`);
+Please read the README.md for more information on testing, styling, adding routes, react-query, etc.${errorStatement}`);
     }
 }

package/dist/package-manager.js

@@ -14,3 +14,17 @@ export function getPackageManager() {
     const packageManager = SUPPORTED_PACKAGE_MANAGERS.find((manager) => userAgent.startsWith(manager));
     return packageManager;
 }
+export function packageManagerExecute(environment, packagerManager, pkg, args, cwd) {
+    switch (packagerManager) {
+        case 'yarn':
+            return environment.execute('yarn', ['dlx', pkg, ...args], cwd);
+        case 'pnpm':
+            return environment.execute('pnpx', [pkg, ...args], cwd);
+        case 'bun':
+            return environment.execute('bunx', ['--bun', pkg, ...args], cwd);
+        case 'deno':
+            return environment.execute('deno', ['run', `npm:${pkg}`, ...args], cwd);
+        default:
+            return environment.execute('npx', [pkg, ...args], cwd);
+    }
+}

package/package.json

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

package/src/create-app.ts

@@ -6,6 +6,7 @@ import { format } from 'prettier'
 import chalk from 'chalk'
 
 import { CODE_ROUTER, FILE_ROUTER } from './constants.js'
+import { packageManagerExecute } from './package-manager.js'
 
 import type { Environment } from './environment.js'
 import type { Options } from './types.js'
@@ -485,9 +486,11 @@ export async function createApp(
       s?.start(
         `Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
       )
-      await environment.execute(
-        'npx',
-        ['shadcn@canary', 'add', '--silent', '--yes', ...shadcnComponents],
+      await packageManagerExecute(
+        environment,
+        options.packageManager,
+        'shadcn@latest',
+        ['add', '--silent', '--yes', ...shadcnComponents],
         resolve(targetDir),
       )
       s?.stop(`Installed additional shadcn components`)
@@ -722,6 +725,6 @@ Use the following commands to start your app:
 % cd ${options.projectName}
 % ${startCommand}
 
-Please read README.md for more information on testing, styling, adding routes, react-query, etc.${errorStatement}`)
+Please read the README.md for more information on testing, styling, adding routes, react-query, etc.${errorStatement}`)
   }
 }

package/src/package-manager.ts

@@ -1,3 +1,5 @@
+import type { Environment } from './environment'
+
 export const SUPPORTED_PACKAGE_MANAGERS = [
   'npm',
   'yarn',
@@ -21,3 +23,24 @@ export function getPackageManager(): PackageManager | undefined {
 
   return packageManager
 }
+
+export function packageManagerExecute(
+  environment: Environment,
+  packagerManager: PackageManager,
+  pkg: string,
+  args: Array<string>,
+  cwd: string,
+) {
+  switch (packagerManager) {
+    case 'yarn':
+      return environment.execute('yarn', ['dlx', pkg, ...args], cwd)
+    case 'pnpm':
+      return environment.execute('pnpx', [pkg, ...args], cwd)
+    case 'bun':
+      return environment.execute('bunx', ['--bun', pkg, ...args], cwd)
+    case 'deno':
+      return environment.execute('deno', ['run', `npm:${pkg}`, ...args], cwd)
+    default:
+      return environment.execute('npx', [pkg, ...args], cwd)
+  }
+}

package/templates/react/add-on/shadcn/README.md

@@ -1,7 +1,7 @@
 ## Shadcn
 
-Add components using the canary version of [Shadcn](https://ui.shadcn.com/).
+Add components using the latest version of [Shadcn](https://ui.shadcn.com/).
 
 ```bash
-pnpx shadcn@canary add button
+pnpx shadcn@latest add button
 ```

package/templates/react/add-on/shadcn/assets/_dot_cursorrules.append

@@ -1,7 +1,7 @@
 # shadcn instructions
 
-Use the canary version of Shadcn to install new components, like this command to add a button component:
+Use the latest version of Shadcn to install new components, like this command to add a button component:
 
 ```bash
-pnpx shadcn@canary add button
+pnpx shadcn@latest add button
 ```

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

@@ -10,9 +10,15 @@ export interface Message {
   content: string
 }
 
-const SYSTEM_PROMPT = `You are TanStack Chat, an AI assistant using Markdown for clear and structured responses.`
+const SYSTEM_PROMPT = `You are a helpful assistant for a store that sells guitars.
 
-export const genAIResponse = createServerFn({ method: 'GET', response: 'raw' })
+You can use the following tools to help the user:
+
+- getGuitars: Get all guitars from the database
+- recommendGuitar: Recommend a guitar to the user
+`
+
+export const genAIResponse = createServerFn({ method: 'POST', response: 'raw' })
   .validator(
     (d: {
       messages: Array<Message>

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

@@ -1,24 +1,28 @@
 import { experimental_createMCPClient, tool } from 'ai'
+//import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
 import { z } from 'zod'
 import guitars from '../data/example-guitars'
 
-// Example of using an MCP server to get tools
-// const mcpCient = await experimental_createMCPClient({
+// Example of using an SSE MCP server
+// const mcpClient = await experimental_createMCPClient({
 //   transport: {
-//     type: 'stdio',
+//     type: "sse",
+//     url: "http://localhost:8081/sse",
+//   },
+//   name: "Demo Service",
+// });
+
+// Example of using an STDIO MCP server
+// const mcpClient = await experimental_createMCPClient({
+//   transport: new StdioClientTransport({
+//     command: "node",
 //     args: [
-//       '--directory',
-//       '~/mcp/servers/src/sqlite',
-//       'run',
-//       'mcp-server-sqlite',
-//       '--db-path',
-//       '~/sqlite-example/orders.db',
+//       "stdio-server.js",
 //     ],
-//     command: 'uv',
-//   },
-// })
+//   }),
+// });
 
-const getProducts = tool({
+const getGuitars = tool({
   description: 'Get all products from the database',
   parameters: z.object({}),
   execute: async () => {
@@ -37,7 +41,7 @@ export default async function getTools() {
   // const mcpTools = await mcpCient.tools()
   return {
     // ...mcpTools,
-    getProducts,
+    getGuitars,
     recommendGuitar,
   }
 }

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

@@ -2,13 +2,14 @@
   "dependencies": {
     "@ai-sdk/anthropic": "^1.1.17",
     "@ai-sdk/react": "^1.1.23",
-    "ai": "^4.1.61",
+    "ai": "^4.1.65",
     "highlight.js": "^11.11.1",
     "react-markdown": "^9.0.1",
     "rehype-highlight": "^7.0.0",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "lucide-react": "^0.475.0"
+    "lucide-react": "^0.475.0",
+    "zod": "^3.24.2"
   }
 }