@tanstack/cta-cli 0.27.1 → 0.29.0

package/dist/cli.js

@@ -226,17 +226,79 @@ Remove your node_modules directory and package lock file and re-install.`);
         return addOns;
     })
         .option('--list-add-ons', 'list all available add-ons', false)
+        .option('--addon-details <addon-id>', 'show detailed information about a specific add-on')
         .option('--no-git', 'do not create a git repository')
         .option('--target-dir <path>', 'the target directory for the application root')
         .option('--mcp', 'run the MCP server', false)
         .option('--mcp-sse', 'run the MCP server in SSE mode', false)
-        .option('--ui', 'Add with the UI');
+        .option('--ui', 'Add with the UI')
+        .option('--add-on-config <config>', 'JSON string with add-on configuration options');
     program.action(async (projectName, options) => {
         if (options.listAddOns) {
             const addOns = await getAllAddOns(getFrameworkByName(options.framework || defaultFramework || 'React'), defaultMode ||
                 convertTemplateToMode(options.template || defaultTemplate));
+            let hasConfigurableAddOns = false;
             for (const addOn of addOns.filter((a) => !forcedAddOns.includes(a.id))) {
-                console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`);
+                const hasOptions = addOn.options && Object.keys(addOn.options).length > 0;
+                const optionMarker = hasOptions ? '*' : ' ';
+                if (hasOptions)
+                    hasConfigurableAddOns = true;
+                console.log(`${optionMarker} ${chalk.bold(addOn.id)}: ${addOn.description}`);
+            }
+            if (hasConfigurableAddOns) {
+                console.log('\n* = has configuration options');
+            }
+        }
+        else if (options.addonDetails) {
+            const addOns = await getAllAddOns(getFrameworkByName(options.framework || defaultFramework || 'React'), defaultMode ||
+                convertTemplateToMode(options.template || defaultTemplate));
+            const addOn = addOns.find((a) => a.id === options.addonDetails);
+            if (!addOn) {
+                console.error(`Add-on '${options.addonDetails}' not found`);
+                process.exit(1);
+            }
+            console.log(`${chalk.bold.cyan('Add-on Details:')} ${chalk.bold(addOn.name)}`);
+            console.log(`${chalk.bold('ID:')} ${addOn.id}`);
+            console.log(`${chalk.bold('Description:')} ${addOn.description}`);
+            console.log(`${chalk.bold('Type:')} ${addOn.type}`);
+            console.log(`${chalk.bold('Phase:')} ${addOn.phase}`);
+            console.log(`${chalk.bold('Supported Modes:')} ${addOn.modes.join(', ')}`);
+            if (addOn.link) {
+                console.log(`${chalk.bold('Link:')} ${chalk.blue(addOn.link)}`);
+            }
+            if (addOn.dependsOn && addOn.dependsOn.length > 0) {
+                console.log(`${chalk.bold('Dependencies:')} ${addOn.dependsOn.join(', ')}`);
+            }
+            if (addOn.options && Object.keys(addOn.options).length > 0) {
+                console.log(`\n${chalk.bold.yellow('Configuration Options:')}`);
+                for (const [optionName, option] of Object.entries(addOn.options)) {
+                    if (option && typeof option === 'object' && 'type' in option) {
+                        const opt = option;
+                        console.log(`  ${chalk.bold(optionName)}:`);
+                        console.log(`    Label: ${opt.label}`);
+                        if (opt.description) {
+                            console.log(`    Description: ${opt.description}`);
+                        }
+                        console.log(`    Type: ${opt.type}`);
+                        console.log(`    Default: ${opt.default}`);
+                        if (opt.type === 'select' && opt.options) {
+                            console.log(`    Available values:`);
+                            for (const choice of opt.options) {
+                                console.log(`      - ${choice.value}: ${choice.label}`);
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                console.log(`\n${chalk.gray('No configuration options available')}`);
+            }
+            if (addOn.routes && addOn.routes.length > 0) {
+                console.log(`\n${chalk.bold.green('Routes:')}`);
+                for (const route of addOn.routes) {
+                    console.log(`  ${chalk.bold(route.url)} (${route.name})`);
+                    console.log(`    File: ${route.path}`);
+                }
             }
         }
         else if (options.mcp || options.mcpSse) {

package/dist/command-line.js

@@ -1,5 +1,5 @@
 import { resolve } from 'node:path';
-import { DEFAULT_PACKAGE_MANAGER, finalizeAddOns, getFrameworkById, getPackageManager, loadStarter, } from '@tanstack/cta-engine';
+import { DEFAULT_PACKAGE_MANAGER, finalizeAddOns, getFrameworkById, getPackageManager, loadStarter, populateAddOnOptionsDefaults, } from '@tanstack/cta-engine';
 export async function normalizeOptions(cliOptions, forcedMode, forcedAddOns, opts) {
     const projectName = (cliOptions.projectName ?? '').trim();
     if (!projectName && !opts?.disableNameCheck) {
@@ -69,6 +69,17 @@ export async function normalizeOptions(cliOptions, forcedMode, forcedAddOns, opt
         tailwind = true;
         typescript = true;
     }
+    // Handle add-on configuration option
+    let addOnOptionsFromCLI = {};
+    if (cliOptions.addOnConfig) {
+        try {
+            addOnOptionsFromCLI = JSON.parse(cliOptions.addOnConfig);
+        }
+        catch (error) {
+            console.error('Error parsing add-on config:', error);
+            process.exit(1);
+        }
+    }
     return {
         projectName: projectName,
         targetDir: resolve(process.cwd(), projectName),
@@ -81,6 +92,10 @@ export async function normalizeOptions(cliOptions, forcedMode, forcedAddOns, opt
             DEFAULT_PACKAGE_MANAGER,
         git: !!cliOptions.git,
         chosenAddOns,
+        addOnOptions: {
+            ...populateAddOnOptionsDefaults(chosenAddOns),
+            ...addOnOptionsFromCLI
+        },
         starter: starter,
     };
 }

package/dist/mcp.js

@@ -5,7 +5,7 @@ import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import express from 'express';
 import { z } from 'zod';
-import { createApp, createDefaultEnvironment, finalizeAddOns, getFrameworkByName, getFrameworks, } from '@tanstack/cta-engine';
+import { createApp, createDefaultEnvironment, finalizeAddOns, getFrameworkByName, getFrameworks, populateAddOnOptionsDefaults, } from '@tanstack/cta-engine';
 function createServer({ appName, forcedAddOns = [], }) {
     const server = new McpServer({
         name: `${appName} Application Builder`,
@@ -28,7 +28,10 @@ function createServer({ appName, forcedAddOns = [], }) {
                         .filter((addOn) => addOn.modes.includes('file-router'))
                         .map((addOn) => ({
                         id: addOn.id,
+                        name: addOn.name,
                         description: addOn.description,
+                        options: addOn.options,
+                        dependsOn: addOn.dependsOn,
                     }))),
                 },
             ],
@@ -42,11 +45,12 @@ function createServer({ appName, forcedAddOns = [], }) {
             .string()
             .describe('The package.json module name of the application (will also be the directory name)'),
         cwd: z.string().describe('The directory to create the application in'),
-        addOns: z.array(z.string()).describe('The IDs of the add-ons to install'),
+        addOns: z.array(z.string()).describe('Array of add-on IDs to install. Use listTanStackAddOns tool to see available add-ons and their configuration options. Example: ["prisma", "shadcn", "tanstack-query"]'),
+        addOnOptions: z.record(z.record(z.any())).optional().describe('Configuration options for add-ons. Format: {"addOnId": {"optionName": "value"}}. Use listTanStackAddOns to see available options for each add-on.'),
         targetDir: z
             .string()
             .describe('The directory to create the application in. Use the absolute path of the directory you want the application to be created in'),
-    }, async ({ framework: frameworkName, projectName, addOns, cwd, targetDir, }) => {
+    }, async ({ framework: frameworkName, projectName, addOns, addOnOptions, cwd, targetDir, }) => {
         const framework = getFrameworkByName(frameworkName);
         try {
             process.chdir(cwd);
@@ -64,6 +68,7 @@ function createServer({ appName, forcedAddOns = [], }) {
                     packageManager: 'pnpm',
                     mode: 'file-router',
                     chosenAddOns,
+                    addOnOptions: addOnOptions || populateAddOnOptionsDefaults(chosenAddOns),
                     git: true,
                 });
             }

package/dist/options.js

@@ -1,6 +1,6 @@
 import { intro } from '@clack/prompts';
-import { finalizeAddOns, getFrameworkById, getPackageManager, readConfigFile, } from '@tanstack/cta-engine';
-import { getProjectName, selectAddOns, selectGit, selectPackageManager, selectRouterType, selectTailwind, selectToolchain, selectHost, selectTypescript, } from './ui-prompts.js';
+import { finalizeAddOns, getFrameworkById, getPackageManager, populateAddOnOptionsDefaults, readConfigFile, } from '@tanstack/cta-engine';
+import { getProjectName, promptForAddOnOptions, selectAddOns, selectGit, selectPackageManager, selectRouterType, selectTailwind, selectToolchain, selectHost, selectTypescript, } from './ui-prompts.js';
 export async function promptForCreateOptions(cliOptions, { forcedAddOns = [], forcedMode, }) {
     const options = {};
     options.framework = getFrameworkById(cliOptions.framework || 'react-cra');
@@ -76,6 +76,18 @@ export async function promptForCreateOptions(cliOptions, { forcedAddOns = [], fo
         options.tailwind = true;
         options.typescript = true;
     }
+    // Prompt for add-on options in interactive mode
+    if (Array.isArray(cliOptions.addOns)) {
+        // Non-interactive mode: use defaults
+        options.addOnOptions = populateAddOnOptionsDefaults(options.chosenAddOns);
+    }
+    else {
+        // Interactive mode: prompt for options
+        const userOptions = await promptForAddOnOptions(options.chosenAddOns.map(a => a.id), options.framework);
+        const defaultOptions = populateAddOnOptionsDefaults(options.chosenAddOns);
+        // Merge user options with defaults
+        options.addOnOptions = { ...defaultOptions, ...userOptions };
+    }
     options.git = cliOptions.git || (await selectGit());
     return options;
 }

package/dist/types/types.d.ts

@@ -11,10 +11,12 @@ export interface CliOptions {
     git?: boolean;
     addOns?: Array<string> | boolean;
     listAddOns?: boolean;
+    addonDetails?: string;
     mcp?: boolean;
     mcpSse?: boolean;
     starter?: string;
     targetDir?: string;
     interactive?: boolean;
     ui?: boolean;
+    addOnConfig?: string;
 }

package/dist/types/ui-prompts.d.ts

@@ -8,4 +8,5 @@ export declare function selectPackageManager(): Promise<PackageManager>;
 export declare function selectAddOns(framework: Framework, mode: string, type: string, message: string, forcedAddOns?: Array<string>): Promise<Array<string>>;
 export declare function selectGit(): Promise<boolean>;
 export declare function selectToolchain(framework: Framework, toolchain?: string): Promise<string | undefined>;
+export declare function promptForAddOnOptions(addOnIds: Array<string>, framework: Framework): Promise<Record<string, Record<string, any>>>;
 export declare function selectHost(framework: Framework, host?: string): Promise<string | undefined>;

package/dist/ui-prompts.js

@@ -138,6 +138,37 @@ export async function selectToolchain(framework, toolchain) {
     }
     return tc;
 }
+export async function promptForAddOnOptions(addOnIds, framework) {
+    const addOnOptions = {};
+    for (const addOnId of addOnIds) {
+        const addOn = framework.getAddOns().find((a) => a.id === addOnId);
+        if (!addOn || !addOn.options)
+            continue;
+        addOnOptions[addOnId] = {};
+        for (const [optionName, option] of Object.entries(addOn.options)) {
+            if (option && typeof option === 'object' && 'type' in option) {
+                if (option.type === 'select') {
+                    const selectOption = option;
+                    const value = await select({
+                        message: `${addOn.name}: ${selectOption.label}`,
+                        options: selectOption.options.map((opt) => ({
+                            value: opt.value,
+                            label: opt.label,
+                        })),
+                        initialValue: selectOption.default,
+                    });
+                    if (isCancel(value)) {
+                        cancel('Operation cancelled.');
+                        process.exit(0);
+                    }
+                    addOnOptions[addOnId][optionName] = value;
+                }
+                // Future option types can be added here
+            }
+        }
+    }
+    return addOnOptions;
+}
 export async function selectHost(framework, host) {
     const hosts = new Set();
     let initialValue = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-cli",
-  "version": "0.27.1",
+  "version": "0.29.0",
   "description": "Tanstack Application Builder CLI",
   "type": "module",
   "main": "./dist/index.js",
@@ -30,8 +30,8 @@
     "express": "^4.21.2",
     "semver": "^7.7.2",
     "zod": "^3.24.2",
-    "@tanstack/cta-engine": "0.27.1",
-    "@tanstack/cta-ui": "0.27.1"
+    "@tanstack/cta-engine": "0.29.0",
+    "@tanstack/cta-ui": "0.29.0"
   },
   "devDependencies": {
     "@tanstack/config": "^0.16.2",

package/src/cli.ts

@@ -353,6 +353,7 @@ Remove your node_modules directory and package lock file and re-install.`,
       },
     )
     .option('--list-add-ons', 'list all available add-ons', false)
+    .option('--addon-details <addon-id>', 'show detailed information about a specific add-on')
     .option('--no-git', 'do not create a git repository')
     .option(
       '--target-dir <path>',
@@ -361,6 +362,7 @@ Remove your node_modules directory and package lock file and re-install.`,
     .option('--mcp', 'run the MCP server', false)
     .option('--mcp-sse', 'run the MCP server in SSE mode', false)
     .option('--ui', 'Add with the UI')
+    .option('--add-on-config <config>', 'JSON string with add-on configuration options')
 
   program.action(async (projectName: string, options: CliOptions) => {
     if (options.listAddOns) {
@@ -369,8 +371,73 @@ Remove your node_modules directory and package lock file and re-install.`,
         defaultMode ||
           convertTemplateToMode(options.template || defaultTemplate),
       )
+      let hasConfigurableAddOns = false
       for (const addOn of addOns.filter((a) => !forcedAddOns.includes(a.id))) {
-        console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`)
+        const hasOptions = addOn.options && Object.keys(addOn.options).length > 0
+        const optionMarker = hasOptions ? '*' : ' '
+        if (hasOptions) hasConfigurableAddOns = true
+        console.log(`${optionMarker} ${chalk.bold(addOn.id)}: ${addOn.description}`)
+      }
+      if (hasConfigurableAddOns) {
+        console.log('\n* = has configuration options')
+      }
+    } else if (options.addonDetails) {
+      const addOns = await getAllAddOns(
+        getFrameworkByName(options.framework || defaultFramework || 'React')!,
+        defaultMode ||
+          convertTemplateToMode(options.template || defaultTemplate),
+      )
+      const addOn = addOns.find((a) => a.id === options.addonDetails)
+      if (!addOn) {
+        console.error(`Add-on '${options.addonDetails}' not found`)
+        process.exit(1)
+      }
+      
+      console.log(`${chalk.bold.cyan('Add-on Details:')} ${chalk.bold(addOn.name)}`)
+      console.log(`${chalk.bold('ID:')} ${addOn.id}`)
+      console.log(`${chalk.bold('Description:')} ${addOn.description}`)
+      console.log(`${chalk.bold('Type:')} ${addOn.type}`)
+      console.log(`${chalk.bold('Phase:')} ${addOn.phase}`)
+      console.log(`${chalk.bold('Supported Modes:')} ${addOn.modes.join(', ')}`)
+      
+      if (addOn.link) {
+        console.log(`${chalk.bold('Link:')} ${chalk.blue(addOn.link)}`)
+      }
+      
+      if (addOn.dependsOn && addOn.dependsOn.length > 0) {
+        console.log(`${chalk.bold('Dependencies:')} ${addOn.dependsOn.join(', ')}`)
+      }
+      
+      if (addOn.options && Object.keys(addOn.options).length > 0) {
+        console.log(`\n${chalk.bold.yellow('Configuration Options:')}`)
+        for (const [optionName, option] of Object.entries(addOn.options)) {
+          if (option && typeof option === 'object' && 'type' in option) {
+            const opt = option as any
+            console.log(`  ${chalk.bold(optionName)}:`)
+            console.log(`    Label: ${opt.label}`)
+            if (opt.description) {
+              console.log(`    Description: ${opt.description}`)
+            }
+            console.log(`    Type: ${opt.type}`)
+            console.log(`    Default: ${opt.default}`)
+            if (opt.type === 'select' && opt.options) {
+              console.log(`    Available values:`)
+              for (const choice of opt.options) {
+                console.log(`      - ${choice.value}: ${choice.label}`)
+              }
+            }
+          }
+        }
+      } else {
+        console.log(`\n${chalk.gray('No configuration options available')}`)
+      }
+      
+      if (addOn.routes && addOn.routes.length > 0) {
+        console.log(`\n${chalk.bold.green('Routes:')}`)
+        for (const route of addOn.routes) {
+          console.log(`  ${chalk.bold(route.url)} (${route.name})`)
+          console.log(`    File: ${route.path}`)
+        }
       }
     } else if (options.mcp || options.mcpSse) {
       await runMCPServer(!!options.mcpSse, {

package/src/command-line.ts

@@ -6,6 +6,7 @@ import {
   getFrameworkById,
   getPackageManager,
   loadStarter,
+  populateAddOnOptionsDefaults,
 } from '@tanstack/cta-engine'
 
 import type { Options } from '@tanstack/cta-engine'
@@ -110,6 +111,17 @@ export async function normalizeOptions(
     typescript = true
   }
 
+  // Handle add-on configuration option
+  let addOnOptionsFromCLI = {}
+  if (cliOptions.addOnConfig) {
+    try {
+      addOnOptionsFromCLI = JSON.parse(cliOptions.addOnConfig)
+    } catch (error) {
+      console.error('Error parsing add-on config:', error)
+      process.exit(1)
+    }
+  }
+
   return {
     projectName: projectName,
     targetDir: resolve(process.cwd(), projectName),
@@ -123,6 +135,10 @@ export async function normalizeOptions(
       DEFAULT_PACKAGE_MANAGER,
     git: !!cliOptions.git,
     chosenAddOns,
+    addOnOptions: {
+      ...populateAddOnOptionsDefaults(chosenAddOns),
+      ...addOnOptionsFromCLI
+    },
     starter: starter,
   }
 }

package/src/mcp.ts

@@ -13,6 +13,7 @@ import {
   finalizeAddOns,
   getFrameworkByName,
   getFrameworks,
+  populateAddOnOptionsDefaults,
 } from '@tanstack/cta-engine'
 
 function createServer({
@@ -53,7 +54,10 @@ function createServer({
                 .filter((addOn) => addOn.modes.includes('file-router'))
                 .map((addOn) => ({
                   id: addOn.id,
+                  name: addOn.name,
                   description: addOn.description,
+                  options: addOn.options,
+                  dependsOn: addOn.dependsOn,
                 })),
             ),
           },
@@ -77,7 +81,8 @@ function createServer({
           'The package.json module name of the application (will also be the directory name)',
         ),
       cwd: z.string().describe('The directory to create the application in'),
-      addOns: z.array(z.string()).describe('The IDs of the add-ons to install'),
+      addOns: z.array(z.string()).describe('Array of add-on IDs to install. Use listTanStackAddOns tool to see available add-ons and their configuration options. Example: ["prisma", "shadcn", "tanstack-query"]'),
+      addOnOptions: z.record(z.record(z.any())).optional().describe('Configuration options for add-ons. Format: {"addOnId": {"optionName": "value"}}. Use listTanStackAddOns to see available options for each add-on.'),
       targetDir: z
         .string()
         .describe(
@@ -88,6 +93,7 @@ function createServer({
       framework: frameworkName,
       projectName,
       addOns,
+      addOnOptions,
       cwd,
       targetDir,
     }) => {
@@ -114,6 +120,7 @@ function createServer({
             packageManager: 'pnpm',
             mode: 'file-router',
             chosenAddOns,
+            addOnOptions: addOnOptions || populateAddOnOptionsDefaults(chosenAddOns),
             git: true,
           })
         } catch (error) {

package/src/options.ts

@@ -4,11 +4,13 @@ import {
   finalizeAddOns,
   getFrameworkById,
   getPackageManager,
+  populateAddOnOptionsDefaults,
   readConfigFile,
 } from '@tanstack/cta-engine'
 
 import {
   getProjectName,
+  promptForAddOnOptions,
   selectAddOns,
   selectGit,
   selectPackageManager,
@@ -137,6 +139,17 @@ export async function promptForCreateOptions(
     options.typescript = true
   }
 
+  // Prompt for add-on options in interactive mode
+  if (Array.isArray(cliOptions.addOns)) {
+    // Non-interactive mode: use defaults
+    options.addOnOptions = populateAddOnOptionsDefaults(options.chosenAddOns)
+  } else {
+    // Interactive mode: prompt for options
+    const userOptions = await promptForAddOnOptions(options.chosenAddOns.map(a => a.id), options.framework)
+    const defaultOptions = populateAddOnOptionsDefaults(options.chosenAddOns)
+    // Merge user options with defaults
+    options.addOnOptions = { ...defaultOptions, ...userOptions }
+  }
   options.git = cliOptions.git || (await selectGit())
 
   return options

package/src/types.ts

@@ -13,10 +13,12 @@ export interface CliOptions {
   git?: boolean
   addOns?: Array<string> | boolean
   listAddOns?: boolean
+  addonDetails?: string
   mcp?: boolean
   mcpSse?: boolean
   starter?: string
   targetDir?: string
   interactive?: boolean
   ui?: boolean
+  addOnConfig?: string
 }

package/src/ui-prompts.ts

@@ -185,6 +185,53 @@ export async function selectToolchain(
   return tc
 }
 
+export async function promptForAddOnOptions(
+  addOnIds: Array<string>,
+  framework: Framework,
+): Promise<Record<string, Record<string, any>>> {
+  const addOnOptions: Record<string, Record<string, any>> = {}
+
+  for (const addOnId of addOnIds) {
+    const addOn = framework.getAddOns().find((a) => a.id === addOnId)
+    if (!addOn || !addOn.options) continue
+
+    addOnOptions[addOnId] = {}
+
+    for (const [optionName, option] of Object.entries(addOn.options)) {
+      if (option && typeof option === 'object' && 'type' in option) {
+        if (option.type === 'select') {
+          const selectOption = option as {
+            type: 'select'
+            label: string
+            description?: string
+            default: string
+            options: Array<{ value: string; label: string }>
+          }
+
+          const value = await select({
+            message: `${addOn.name}: ${selectOption.label}`,
+            options: selectOption.options.map((opt) => ({
+              value: opt.value,
+              label: opt.label,
+            })),
+            initialValue: selectOption.default,
+          })
+
+          if (isCancel(value)) {
+            cancel('Operation cancelled.')
+            process.exit(0)
+          }
+
+          addOnOptions[addOnId][optionName] = value
+        }
+        // Future option types can be added here
+      }
+    }
+  }
+
+  return addOnOptions
+}
+
 export async function selectHost(
   framework: Framework,
   host?: string,