chore: merging and adding add-on creation

Author: jherr

package.json

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

src/create-app.ts

@@ -8,6 +8,7 @@ import chalk from 'chalk'
 import { CODE_ROUTER, FILE_ROUTER } from './constants.js'
 import { sortObject } from './utils.js'
 import { writeConfigFile } from './config-file.js'
+import { packageManagerExecute } from './package-manager.js'
 
 import type { Environment } from './environment.js'
 import type { Options } from './types.js'
@@ -484,9 +485,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`)
@@ -723,6 +726,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}`)
   }
 }

src/options.ts

@@ -23,6 +23,15 @@ import type { CliOptions, Options } from './types.js'
 export async function normalizeOptions(
   cliOptions: CliOptions,
 ): Promise<Required<Options> | undefined> {
+  // in some cases, if you use windows/powershell, the argument for addons
+  // if sepparated by comma is not really passed as an array, but as a string 
+  // with spaces, We need to normalize this edge case.
+  if (Array.isArray(cliOptions.addOns) && cliOptions.addOns.length === 1) {
+      const parseSeparatedArgs = cliOptions.addOns[0].split(' ');
+      if (parseSeparatedArgs.length > 1) {
+          cliOptions.addOns = parseSeparatedArgs;
+      }
+  }
   if (cliOptions.projectName) {
     let typescript =
       cliOptions.template === 'typescript' ||

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)
+  }
+}

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
 ```

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
 ```

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>

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,
   }
 }

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"
   }
 }