@tanstack/cta-engine 0.10.0-alpha.9 → 0.11.1

package/dist/add-ons.js

@@ -1,9 +1,10 @@
 import { readFile } from 'node:fs/promises';
-import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs';
+import { existsSync, readdirSync, statSync } from 'node:fs';
 import { resolve } from 'node:path';
 import chalk from 'chalk';
 import { getTemplatesRoot } from './templates.js';
 import { DEFAULT_FRAMEWORK } from './constants.js';
+import { readFileHelper } from './file-helper.js';
 function isDirectory(path) {
     return statSync(path).isDirectory();
 }
@@ -15,7 +16,7 @@ function findFilesRecursively(path, files) {
             findFilesRecursively(filePath, files);
         }
         else {
-            files[filePath] = readFileSync(filePath, 'utf-8').toString();
+            files[filePath] = readFileHelper(filePath);
         }
     }
 }
@@ -91,10 +92,9 @@ export async function finalizeAddOns(framework, template, chosenAddOnIDs) {
     const finalAddOns = [...finalAddOnIDs].map((id) => addOns.find((a) => a.id === id));
     return finalAddOns;
 }
-export async function listAddOns(options) {
-    const mode = options.template === 'file-router' ? 'file-router' : 'code-router';
-    const addOns = await getAllAddOns(options.framework || DEFAULT_FRAMEWORK, mode);
-    for (const addOn of addOns) {
+export async function listAddOns(options, { forcedMode, forcedAddOns = [], }) {
+    const addOns = await getAllAddOns(options.framework || DEFAULT_FRAMEWORK, forcedMode || options.template || 'typescript');
+    for (const addOn of addOns.filter((a) => !forcedAddOns.includes(a.id))) {
         console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`);
     }
 }

package/dist/cli.js

@@ -9,11 +9,9 @@ import { listAddOns } from './add-ons.js';
 import { DEFAULT_FRAMEWORK, SUPPORTED_FRAMEWORKS } from './constants.js';
 // import { initAddOn } from './custom-add-on.js'
 import { createDefaultEnvironment } from './environment.js';
-export function cli({ name, forcedMode, forcedAddOns, }) {
+export function cli({ name, appName, forcedMode, forcedAddOns, }) {
     const program = new Command();
-    program
-        .name('create-tsrouter-app')
-        .description('CLI to create a new TanStack application');
+    program.name(name).description(`CLI to create a new ${appName} application`);
     // program
     //   .command('add')
     //   .argument('add-on', 'Name of the add-on (or add-ons separated by commas)')
@@ -32,16 +30,25 @@ export function cli({ name, forcedMode, forcedAddOns, }) {
     //   .action(async () => {
     //     await initAddOn('overlay')
     //   })
+    program.argument('[project-name]', 'name of the project');
+    if (!forcedMode) {
+        program.option('--template <type>', 'project template (typescript, javascript, file-router)', (value) => {
+            if (value !== 'typescript' &&
+                value !== 'javascript' &&
+                value !== 'file-router') {
+                throw new InvalidArgumentError(`Invalid template: ${value}. Only the following are allowed: typescript, javascript, file-router`);
+            }
+            return value;
+        });
+    }
     program
-        .argument('[project-name]', 'name of the project')
-        .option('--no-git', 'do not create a git repository')
-        .option('--target-dir <path>', 'the directory to create the project in')
         .option('--framework <type>', 'project framework (solid, react)', (value) => {
         if (!SUPPORTED_FRAMEWORKS.includes(value)) {
             throw new InvalidArgumentError(`Invalid framework: ${value}. Only the following are allowed: ${SUPPORTED_FRAMEWORKS.join(', ')}`);
         }
         return value;
     }, DEFAULT_FRAMEWORK)
+        // .option('--overlay [url]', 'add an overlay from a URL', false)
         .option(`--package-manager <${SUPPORTED_PACKAGE_MANAGERS.join('|')}>`, `Explicitly tell the CLI to use this package manager`, (value) => {
         if (!SUPPORTED_PACKAGE_MANAGERS.includes(value)) {
             throw new InvalidArgumentError(`Invalid package manager: ${value}. The following are allowed: ${SUPPORTED_PACKAGE_MANAGERS.join(', ')}`);
@@ -63,25 +70,23 @@ export function cli({ name, forcedMode, forcedAddOns, }) {
         return addOns;
     })
         .option('--list-add-ons', 'list all available add-ons', false)
-        // .option('--overlay [url]', 'add an overlay from a URL', false)
+        .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);
-    if (!forcedMode) {
-        program.option('--template <type>', 'project template (typescript, javascript, file-router)', (value) => {
-            if (value !== 'typescript' &&
-                value !== 'javascript' &&
-                value !== 'file-router') {
-                throw new InvalidArgumentError(`Invalid template: ${value}. Only the following are allowed: typescript, javascript, file-router`);
-            }
-            return value;
-        });
-    }
     program.action(async (projectName, options) => {
         if (options.listAddOns) {
-            await listAddOns(options);
+            await listAddOns(options, {
+                forcedMode,
+                forcedAddOns,
+            });
         }
         else if (options.mcp || options.mcpSse) {
-            await runServer(!!options.mcpSse);
+            await runServer(!!options.mcpSse, {
+                forcedMode,
+                forcedAddOns,
+                appName,
+            });
         }
         else {
             try {
@@ -94,10 +99,10 @@ export function cli({ name, forcedMode, forcedAddOns, }) {
                 }
                 let finalOptions = await normalizeOptions(cliOptions, forcedAddOns);
                 if (finalOptions) {
-                    intro(`Creating a new TanStack app in ${projectName}...`);
+                    intro(`Creating a new ${appName} app in ${projectName}...`);
                 }
                 else {
-                    intro("Let's configure your TanStack application");
+                    intro(`Let's configure your ${appName} application`);
                     finalOptions = await promptForOptions(cliOptions, {
                         forcedMode,
                         forcedAddOns,
@@ -107,6 +112,7 @@ export function cli({ name, forcedMode, forcedAddOns, }) {
                     environment: createDefaultEnvironment(),
                     cwd: options.targetDir || undefined,
                     name,
+                    appName,
                 });
             }
             catch (error) {

package/dist/create-app.js

@@ -8,6 +8,7 @@ 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 { getBinaryFile } from './file-helper.js';
 function createCopyFiles(environment, targetDir) {
     return async function copyFiles(templateDir, files, 
     // optionally copy files from a folder to the root
@@ -197,6 +198,11 @@ async function copyAddOnFile(environment, content, target, targetPath, templateF
         isAppend = true;
     }
     const finalTargetPath = resolve(dirname(targetPath), targetFile);
+    const binaryContent = getBinaryFile(content);
+    if (binaryContent) {
+        await environment.writeFile(finalTargetPath, binaryContent);
+        return;
+    }
     if (isTemplate) {
         await templateFile(content, finalTargetPath);
     }
@@ -209,7 +215,7 @@ async function copyAddOnFile(environment, content, target, targetPath, templateF
         }
     }
 }
-export async function createApp(options, { silent = false, environment, cwd, name = 'create-tsrouter-app', }) {
+export async function createApp(options, { silent = false, environment, cwd, appName = 'TanStack', }) {
     environment.startRun();
     const templateDirBase = resolve(getTemplatesRoot(), options.framework, 'base');
     const templateDirRouter = resolve(getTemplatesRoot(), options.framework, options.mode);
@@ -309,7 +315,7 @@ export async function createApp(options, { silent = false, environment, cwd, nam
     // Copy all the asset files from the addons
     const s = silent ? null : spinner();
     for (const type of ['add-on', 'example']) {
-        for (const phase of ['setup', 'add-on']) {
+        for (const phase of ['setup', 'add-on', 'example']) {
             for (const addOn of options.chosenAddOns.filter((addOn) => addOn.phase === phase && addOn.type === type)) {
                 s?.start(`Setting up ${addOn.name}...`);
                 await runAddOn(addOn);
@@ -480,7 +486,7 @@ ${environment.getErrors().join('\n')}`;
         if (options.packageManager === 'deno') {
             startCommand = `deno ${isAddOnEnabled('start') ? 'task dev' : 'start'}`;
         }
-        outro(`Your TanStack app is ready in '${basename(targetDir)}'.
+        outro(`Your ${appName} app is ready in '${basename(targetDir)}'.
 
 Use the following commands to start your app:
 % cd ${options.projectName}

package/dist/custom-add-on.js

@@ -6,6 +6,7 @@ import { createMemoryEnvironment } from './environment.js';
 import { createApp } from './create-app.js';
 import { readConfigFile } from './config-file.js';
 import { finalizeAddOns } from './add-ons.js';
+import { readFileHelper } from './file-helper.js';
 const INFO_FILE = {
     'add-on': '.add-on/info.json',
     overlay: 'overlay-info.json',
@@ -98,7 +99,7 @@ async function recursivelyGatherFiles(path, files) {
             await recursivelyGatherFiles(resolve(path, file.name), files);
         }
         else {
-            files[resolve(path, file.name)] = (await readFile(resolve(path, file.name))).toString();
+            files[resolve(path, file.name)] = readFileHelper(resolve(path, file.name));
         }
     }
 }

package/dist/file-helper.js

@@ -0,0 +1,18 @@
+import { readFileSync } from 'node:fs';
+import { extname } from 'node:path';
+const BINARY_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.ico'];
+export function readFileHelper(path) {
+    if (BINARY_EXTENSIONS.includes(extname(path))) {
+        return `base64::${readFileSync(path).toString('base64')}`;
+    }
+    else {
+        return readFileSync(path, 'utf-8').toString();
+    }
+}
+export function getBinaryFile(content) {
+    if (content.startsWith('base64::')) {
+        const binaryContent = Buffer.from(content.replace('base64::', ''), 'base64');
+        return binaryContent;
+    }
+    return null;
+}

package/dist/mcp.js

@@ -6,10 +6,6 @@ import { z } from 'zod';
 import { createApp } from './create-app.js';
 import { finalizeAddOns } from './add-ons.js';
 import { createDefaultEnvironment } from './environment.js';
-const server = new McpServer({
-    name: 'Demo',
-    version: '1.0.0',
-});
 const tanStackReactAddOns = [
     {
         id: 'clerk',
@@ -52,63 +48,6 @@ const tanStackReactAddOns = [
         description: 'Add an AI chatbot example to the application',
     },
 ];
-server.tool('listTanStackReactAddOns', {}, () => {
-    return {
-        content: [{ type: 'text', text: JSON.stringify(tanStackReactAddOns) }],
-    };
-});
-server.tool('createTanStackReactApplication', {
-    projectName: z
-        .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.enum([
-        'clerk',
-        'convex',
-        'form',
-        'netlify',
-        'sentry',
-        'shadcn',
-        'start',
-        'store',
-        'tanstack-query',
-        'tanchat',
-    ]))
-        .describe('The IDs of the add-ons to install'),
-}, async ({ projectName, addOns, cwd }) => {
-    try {
-        process.chdir(cwd);
-        const chosenAddOns = await finalizeAddOns('react', 'file-router', addOns);
-        await createApp({
-            projectName: projectName.replace(/^\//, './'),
-            framework: 'react',
-            typescript: true,
-            tailwind: true,
-            packageManager: 'pnpm',
-            toolchain: 'none',
-            mode: 'file-router',
-            addOns: true,
-            chosenAddOns,
-            git: true,
-            variableValues: {},
-        }, {
-            silent: true,
-            environment: createDefaultEnvironment(),
-            name: 'create-tsrouter-app',
-        });
-        return {
-            content: [{ type: 'text', text: 'Application created successfully' }],
-        };
-    }
-    catch (error) {
-        return {
-            content: [
-                { type: 'text', text: `Error creating application: ${error}` },
-            ],
-        };
-    }
-});
 const tanStackSolidAddOns = [
     {
         id: 'solid-ui',
@@ -126,6 +65,10 @@ const tanStackSolidAddOns = [
         id: 'store',
         description: 'Enable the TanStack Store state management library',
     },
+    {
+        id: 'start',
+        description: 'Set this if you want a TanStack Start application that supports server functions or APIs',
+    },
     {
         id: 'tanstack-query',
         description: 'Enable TanStack Query for data fetching',
@@ -135,63 +78,136 @@ const tanStackSolidAddOns = [
         description: 'Add an AI chatbot example to the application',
     },
 ];
-server.tool('listTanStackSolidAddOns', {}, () => {
-    return {
-        content: [{ type: 'text', text: JSON.stringify(tanStackSolidAddOns) }],
-    };
-});
-server.tool('createTanStackSolidApplication', {
-    projectName: z
-        .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.enum([
-        'solid-ui',
-        'form',
-        'sentry',
-        'store',
-        'tanstack-query',
-        'tanchat',
-    ]))
-        .describe('The IDs of the add-ons to install'),
-}, async ({ projectName, addOns, cwd }) => {
-    try {
-        process.chdir(cwd);
-        const chosenAddOns = await finalizeAddOns('solid', 'file-router', addOns);
-        await createApp({
-            projectName: projectName.replace(/^\//, './'),
-            framework: 'solid',
-            typescript: true,
-            tailwind: true,
-            packageManager: 'pnpm',
-            toolchain: 'none',
-            mode: 'file-router',
-            addOns: true,
-            chosenAddOns,
-            git: true,
-            variableValues: {},
-        }, {
-            silent: true,
-            environment: createDefaultEnvironment(),
-            name: 'create-tsrouter-app',
-        });
+function createServer({ appName, forcedAddOns = [], name, }) {
+    const server = new McpServer({
+        name: `${appName} Application Builder`,
+        version: '1.0.0',
+    });
+    server.tool('listTanStackReactAddOns', {}, () => {
         return {
-            content: [{ type: 'text', text: 'Application created successfully' }],
+            content: [{ type: 'text', text: JSON.stringify(tanStackReactAddOns) }],
         };
-    }
-    catch (error) {
+    });
+    server.tool('createTanStackReactApplication', {
+        projectName: z
+            .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.enum([
+            'clerk',
+            'convex',
+            'form',
+            'netlify',
+            'sentry',
+            'shadcn',
+            'start',
+            'store',
+            'tanstack-query',
+            'tanchat',
+        ]))
+            .describe('The IDs of the add-ons to install'),
+        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 ({ projectName, addOns, cwd, targetDir }) => {
+        try {
+            process.chdir(cwd);
+            const chosenAddOns = await finalizeAddOns('react', 'file-router', Array.from(new Set([...addOns, ...forcedAddOns])));
+            await createApp({
+                projectName: projectName.replace(/^\//, './'),
+                framework: 'react',
+                typescript: true,
+                tailwind: true,
+                packageManager: 'pnpm',
+                toolchain: 'none',
+                mode: 'file-router',
+                addOns: true,
+                chosenAddOns,
+                git: true,
+                variableValues: {},
+            }, {
+                silent: true,
+                environment: createDefaultEnvironment(),
+                name,
+                cwd: targetDir,
+            });
+            return {
+                content: [{ type: 'text', text: 'Application created successfully' }],
+            };
+        }
+        catch (error) {
+            return {
+                content: [
+                    { type: 'text', text: `Error creating application: ${error}` },
+                ],
+            };
+        }
+    });
+    server.tool('listTanStackSolidAddOns', {}, () => {
         return {
-            content: [
-                { type: 'text', text: `Error creating application: ${error}` },
-            ],
+            content: [{ type: 'text', text: JSON.stringify(tanStackSolidAddOns) }],
         };
-    }
-});
-export default async function runServer(sse) {
+    });
+    server.tool('createTanStackSolidApplication', {
+        projectName: z
+            .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.enum([
+            'solid-ui',
+            'form',
+            'sentry',
+            'store',
+            'tanstack-query',
+            'tanchat',
+        ]))
+            .describe('The IDs of the add-ons to install'),
+        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 ({ projectName, addOns, cwd, targetDir }) => {
+        try {
+            process.chdir(cwd);
+            const chosenAddOns = await finalizeAddOns('solid', 'file-router', Array.from(new Set([...addOns, ...forcedAddOns])));
+            await createApp({
+                projectName: projectName.replace(/^\//, './'),
+                framework: 'solid',
+                typescript: true,
+                tailwind: true,
+                packageManager: 'pnpm',
+                toolchain: 'none',
+                mode: 'file-router',
+                addOns: true,
+                chosenAddOns,
+                git: true,
+                variableValues: {},
+            }, {
+                silent: true,
+                environment: createDefaultEnvironment(),
+                name,
+                cwd: targetDir,
+            });
+            return {
+                content: [{ type: 'text', text: 'Application created successfully' }],
+            };
+        }
+        catch (error) {
+            return {
+                content: [
+                    { type: 'text', text: `Error creating application: ${error}` },
+                ],
+            };
+        }
+    });
+    return server;
+}
+export default async function runServer(sse, { forcedAddOns, appName, name, }) {
+    let transport = null;
+    const server = createServer({ appName, forcedAddOns, name });
     if (sse) {
         const app = express();
-        let transport = null;
         app.get('/sse', (req, res) => {
             transport = new SSEServerTransport('/messages', res);
             server.connect(transport);

package/dist/options.js

@@ -13,9 +13,6 @@ export async function normalizeOptions(cliOptions, forcedAddOns) {
         if (parseSeparatedArgs.length > 1) {
             cliOptions.addOns = parseSeparatedArgs;
         }
-        if (forcedAddOns) {
-            cliOptions.addOns = [...cliOptions.addOns, ...forcedAddOns];
-        }
     }
     if (cliOptions.projectName) {
         let typescript = cliOptions.template === 'typescript' ||
@@ -37,11 +34,17 @@ export async function normalizeOptions(cliOptions, forcedAddOns) {
         }
         let addOns = false;
         let chosenAddOns = [];
-        if (Array.isArray(cliOptions.addOns) || overlay?.dependsOn) {
+        if (Array.isArray(cliOptions.addOns) ||
+            overlay?.dependsOn ||
+            forcedAddOns) {
             addOns = true;
-            let finalAddOns = [...(overlay?.dependsOn || [])];
+            let finalAddOns = Array.from(new Set([...(overlay?.dependsOn || []), ...(forcedAddOns || [])]));
             if (cliOptions.addOns && Array.isArray(cliOptions.addOns)) {
-                finalAddOns = [...finalAddOns, ...cliOptions.addOns];
+                finalAddOns = Array.from(new Set([
+                    ...(forcedAddOns || []),
+                    ...finalAddOns,
+                    ...cliOptions.addOns,
+                ]));
             }
             chosenAddOns = await finalizeAddOns(cliOptions.framework || DEFAULT_FRAMEWORK, cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER, finalAddOns);
             tailwind = true;

package/dist/types/add-ons.d.ts

@@ -1,5 +1,8 @@
-import type { AddOn, CliOptions, Framework } from './types.js';
+import type { AddOn, CliOptions, Framework, TemplateOptions } from './types.js';
 export declare function getAllAddOns(framework: Framework, template: string): Promise<Array<AddOn>>;
 export declare function finalizeAddOns(framework: Framework, template: string, chosenAddOnIDs: Array<string>): Promise<Array<AddOn>>;
-export declare function listAddOns(options: CliOptions): Promise<void>;
+export declare function listAddOns(options: CliOptions, { forcedMode, forcedAddOns, }: {
+    forcedMode?: TemplateOptions;
+    forcedAddOns?: Array<string>;
+}): Promise<void>;
 export declare function loadRemoteAddOn(url: string): Promise<AddOn>;

package/dist/types/cli.d.ts

@@ -1,5 +1,6 @@
-export declare function cli({ name, forcedMode, forcedAddOns, }: {
+export declare function cli({ name, appName, forcedMode, forcedAddOns, }: {
     name: string;
+    appName: string;
     forcedMode?: 'typescript' | 'javascript' | 'file-router';
     forcedAddOns?: Array<string>;
 }): void;

package/dist/types/create-app.d.ts

@@ -1,7 +1,8 @@
 import type { Environment, Options } from './types.js';
-export declare function createApp(options: Options, { silent, environment, cwd, name, }: {
+export declare function createApp(options: Options, { silent, environment, cwd, appName, }: {
     silent?: boolean;
     environment: Environment;
     cwd?: string;
-    name: string;
+    name?: string;
+    appName?: string;
 }): Promise<void>;

package/dist/types/file-helper.d.ts

@@ -0,0 +1,2 @@
+export declare function readFileHelper(path: string): string;
+export declare function getBinaryFile(content: string): string | null;

package/dist/types/mcp.d.ts

@@ -1 +1,7 @@
-export default function runServer(sse: boolean): Promise<void>;
+import type { TemplateOptions } from './types.js';
+export default function runServer(sse: boolean, { forcedAddOns, appName, name, }: {
+    forcedMode?: TemplateOptions;
+    forcedAddOns?: Array<string>;
+    appName?: string;
+    name?: string;
+}): Promise<void>;

package/dist/types/types.d.ts

@@ -2,6 +2,7 @@ import type { CODE_ROUTER, FILE_ROUTER } from './constants.js';
 import type { PackageManager } from './package-manager.js';
 import type { ToolChain } from './toolchain.js';
 export type Framework = 'solid' | 'react';
+export type TemplateOptions = 'typescript' | 'javascript' | 'file-router';
 export interface Options {
     framework: Framework;
     projectName: string;
@@ -17,7 +18,7 @@ export interface Options {
     overlay?: AddOn | undefined;
 }
 export interface CliOptions {
-    template?: 'typescript' | 'javascript' | 'file-router';
+    template?: TemplateOptions;
     framework?: Framework;
     tailwind?: boolean;
     packageManager?: PackageManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-engine",
-  "version": "0.10.0-alpha.9",
+  "version": "0.11.1",
   "description": "Tanstack Application Builder Engine",
   "type": "module",
   "main": "./dist/index.js",

package/src/add-ons.ts

@@ -1,11 +1,13 @@
 import { readFile } from 'node:fs/promises'
-import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs'
+import { existsSync, readdirSync, statSync } from 'node:fs'
 import { resolve } from 'node:path'
 import chalk from 'chalk'
-import { getTemplatesRoot } from './templates.js'
 
+import { getTemplatesRoot } from './templates.js'
 import { DEFAULT_FRAMEWORK } from './constants.js'
-import type { AddOn, CliOptions, Framework } from './types.js'
+import { readFileHelper } from './file-helper.js'
+
+import type { AddOn, CliOptions, Framework, TemplateOptions } from './types.js'
 
 function isDirectory(path: string): boolean {
   return statSync(path).isDirectory()
@@ -18,7 +20,7 @@ function findFilesRecursively(path: string, files: Record<string, string>) {
     if (isDirectory(filePath)) {
       findFilesRecursively(filePath, files)
     } else {
-      files[filePath] = readFileSync(filePath, 'utf-8').toString()
+      files[filePath] = readFileHelper(filePath)
     }
   }
 }
@@ -121,14 +123,21 @@ export async function finalizeAddOns(
   return finalAddOns
 }
 
-export async function listAddOns(options: CliOptions) {
-  const mode =
-    options.template === 'file-router' ? 'file-router' : 'code-router'
+export async function listAddOns(
+  options: CliOptions,
+  {
+    forcedMode,
+    forcedAddOns = [],
+  }: {
+    forcedMode?: TemplateOptions
+    forcedAddOns?: Array<string>
+  },
+) {
   const addOns = await getAllAddOns(
     options.framework || DEFAULT_FRAMEWORK,
-    mode,
+    forcedMode || options.template || 'typescript',
   )
-  for (const addOn of addOns) {
+  for (const addOn of addOns.filter((a) => !forcedAddOns.includes(a.id))) {
     console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`)
   }
 }

package/src/cli.ts

@@ -20,18 +20,18 @@ import type { CliOptions, Framework } from './types.js'
 
 export function cli({
   name,
+  appName,
   forcedMode,
   forcedAddOns,
 }: {
   name: string
+  appName: string
   forcedMode?: 'typescript' | 'javascript' | 'file-router'
   forcedAddOns?: Array<string>
 }) {
   const program = new Command()
 
-  program
-    .name('create-tsrouter-app')
-    .description('CLI to create a new TanStack application')
+  program.name(name).description(`CLI to create a new ${appName} application`)
 
   // program
   //   .command('add')
@@ -54,10 +54,27 @@ export function cli({
   //     await initAddOn('overlay')
   //   })
 
+  program.argument('[project-name]', 'name of the project')
+
+  if (!forcedMode) {
+    program.option<'typescript' | 'javascript' | 'file-router'>(
+      '--template <type>',
+      'project template (typescript, javascript, file-router)',
+      (value) => {
+        if (
+          value !== 'typescript' &&
+          value !== 'javascript' &&
+          value !== 'file-router'
+        ) {
+          throw new InvalidArgumentError(
+            `Invalid template: ${value}. Only the following are allowed: typescript, javascript, file-router`,
+          )
+        }
+        return value
+      },
+    )
+  }
   program
-    .argument('[project-name]', 'name of the project')
-    .option('--no-git', 'do not create a git repository')
-    .option('--target-dir <path>', 'the directory to create the project in')
     .option<Framework>(
       '--framework <type>',
       'project framework (solid, react)',
@@ -73,6 +90,7 @@ export function cli({
       },
       DEFAULT_FRAMEWORK,
     )
+    // .option('--overlay [url]', 'add an overlay from a URL', false)
     .option<PackageManager>(
       `--package-manager <${SUPPORTED_PACKAGE_MANAGERS.join('|')}>`,
       `Explicitly tell the CLI to use this package manager`,
@@ -114,34 +132,26 @@ export function cli({
       },
     )
     .option('--list-add-ons', 'list all available add-ons', false)
-    // .option('--overlay [url]', 'add an overlay from a URL', false)
+    .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)
 
-  if (!forcedMode) {
-    program.option<'typescript' | 'javascript' | 'file-router'>(
-      '--template <type>',
-      'project template (typescript, javascript, file-router)',
-      (value) => {
-        if (
-          value !== 'typescript' &&
-          value !== 'javascript' &&
-          value !== 'file-router'
-        ) {
-          throw new InvalidArgumentError(
-            `Invalid template: ${value}. Only the following are allowed: typescript, javascript, file-router`,
-          )
-        }
-        return value
-      },
-    )
-  }
-
   program.action(async (projectName: string, options: CliOptions) => {
     if (options.listAddOns) {
-      await listAddOns(options)
+      await listAddOns(options, {
+        forcedMode,
+        forcedAddOns,
+      })
     } else if (options.mcp || options.mcpSse) {
-      await runServer(!!options.mcpSse)
+      await runServer(!!options.mcpSse, {
+        forcedMode,
+        forcedAddOns,
+        appName,
+      })
     } else {
       try {
         const cliOptions = {
@@ -155,9 +165,9 @@ export function cli({
 
         let finalOptions = await normalizeOptions(cliOptions, forcedAddOns)
         if (finalOptions) {
-          intro(`Creating a new TanStack app in ${projectName}...`)
+          intro(`Creating a new ${appName} app in ${projectName}...`)
         } else {
-          intro("Let's configure your TanStack application")
+          intro(`Let's configure your ${appName} application`)
           finalOptions = await promptForOptions(cliOptions, {
             forcedMode,
             forcedAddOns,
@@ -167,6 +177,7 @@ export function cli({
           environment: createDefaultEnvironment(),
           cwd: options.targetDir || undefined,
           name,
+          appName,
         })
       } catch (error) {
         log.error(

package/src/create-app.ts

@@ -9,6 +9,7 @@ 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 { getBinaryFile } from './file-helper.js'
 
 import type { AddOn, Environment, Options } from './types.js'
 
@@ -287,6 +288,15 @@ async function copyAddOnFile(
 
   const finalTargetPath = resolve(dirname(targetPath), targetFile)
 
+  const binaryContent = getBinaryFile(content)
+  if (binaryContent) {
+    await environment.writeFile(
+      finalTargetPath,
+      binaryContent as unknown as string,
+    )
+    return
+  }
+
   if (isTemplate) {
     await templateFile(content, finalTargetPath)
   } else {
@@ -304,12 +314,13 @@ export async function createApp(
     silent = false,
     environment,
     cwd,
-    name = 'create-tsrouter-app',
+    appName = 'TanStack',
   }: {
     silent?: boolean
     environment: Environment
     cwd?: string
-    name: string
+    name?: string
+    appName?: string
   },
 ) {
   environment.startRun()
@@ -498,7 +509,7 @@ export async function createApp(
   // Copy all the asset files from the addons
   const s = silent ? null : spinner()
   for (const type of ['add-on', 'example']) {
-    for (const phase of ['setup', 'add-on']) {
+    for (const phase of ['setup', 'add-on', 'example']) {
       for (const addOn of options.chosenAddOns.filter(
         (addOn) => addOn.phase === phase && addOn.type === type,
       )) {
@@ -782,7 +793,7 @@ ${environment.getErrors().join('\n')}`
       startCommand = `deno ${isAddOnEnabled('start') ? 'task dev' : 'start'}`
     }
 
-    outro(`Your TanStack app is ready in '${basename(targetDir)}'.
+    outro(`Your ${appName} app is ready in '${basename(targetDir)}'.
 
 Use the following commands to start your app:
 % cd ${options.projectName}

package/src/custom-add-on.ts

@@ -7,6 +7,7 @@ import { createMemoryEnvironment } from './environment.js'
 import { createApp } from './create-app.js'
 import { readConfigFile } from './config-file.js'
 import { finalizeAddOns } from './add-ons.js'
+import { readFileHelper } from './file-helper.js'
 
 import type { Framework, Options } from './types.js'
 import type { PersistedOptions } from './config-file.js'
@@ -134,9 +135,7 @@ async function recursivelyGatherFiles(
     if (file.isDirectory()) {
       await recursivelyGatherFiles(resolve(path, file.name), files)
     } else {
-      files[resolve(path, file.name)] = (
-        await readFile(resolve(path, file.name))
-      ).toString()
+      files[resolve(path, file.name)] = readFileHelper(resolve(path, file.name))
     }
   }
 }

package/src/file-helper.ts

@@ -0,0 +1,20 @@
+import { readFileSync } from 'node:fs'
+import { extname } from 'node:path'
+
+const BINARY_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.ico']
+
+export function readFileHelper(path: string): string {
+  if (BINARY_EXTENSIONS.includes(extname(path))) {
+    return `base64::${readFileSync(path).toString('base64')}`
+  } else {
+    return readFileSync(path, 'utf-8').toString()
+  }
+}
+
+export function getBinaryFile(content: string): string | null {
+  if (content.startsWith('base64::')) {
+    const binaryContent = Buffer.from(content.replace('base64::', ''), 'base64')
+    return binaryContent as unknown as string
+  }
+  return null
+}

package/src/mcp.ts

@@ -8,10 +8,7 @@ import { createApp } from './create-app.js'
 import { finalizeAddOns } from './add-ons.js'
 import { createDefaultEnvironment } from './environment.js'
 
-const server = new McpServer({
-  name: 'Demo',
-  version: '1.0.0',
-})
+import type { TemplateOptions } from './types.js'
 
 const tanStackReactAddOns = [
   {
@@ -57,79 +54,6 @@ const tanStackReactAddOns = [
   },
 ]
 
-server.tool('listTanStackReactAddOns', {}, () => {
-  return {
-    content: [{ type: 'text', text: JSON.stringify(tanStackReactAddOns) }],
-  }
-})
-
-server.tool(
-  'createTanStackReactApplication',
-  {
-    projectName: z
-      .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.enum([
-          'clerk',
-          'convex',
-          'form',
-          'netlify',
-          'sentry',
-          'shadcn',
-          'start',
-          'store',
-          'tanstack-query',
-          'tanchat',
-        ]),
-      )
-      .describe('The IDs of the add-ons to install'),
-  },
-  async ({ projectName, addOns, cwd }) => {
-    try {
-      process.chdir(cwd)
-      const chosenAddOns = await finalizeAddOns(
-        'react',
-        'file-router',
-        addOns as unknown as Array<string>,
-      )
-      await createApp(
-        {
-          projectName: projectName.replace(/^\//, './'),
-          framework: 'react',
-          typescript: true,
-          tailwind: true,
-          packageManager: 'pnpm',
-          toolchain: 'none',
-          mode: 'file-router',
-          addOns: true,
-          chosenAddOns,
-          git: true,
-          variableValues: {},
-        },
-        {
-          silent: true,
-          environment: createDefaultEnvironment(),
-          name: 'create-tsrouter-app',
-        },
-      )
-      return {
-        content: [{ type: 'text', text: 'Application created successfully' }],
-      }
-    } catch (error) {
-      return {
-        content: [
-          { type: 'text', text: `Error creating application: ${error}` },
-        ],
-      }
-    }
-  },
-)
-
 const tanStackSolidAddOns = [
   {
     id: 'solid-ui',
@@ -147,6 +71,11 @@ const tanStackSolidAddOns = [
     id: 'store',
     description: 'Enable the TanStack Store state management library',
   },
+  {
+    id: 'start',
+    description:
+      'Set this if you want a TanStack Start application that supports server functions or APIs',
+  },
   {
     id: 'tanstack-query',
     description: 'Enable TanStack Query for data fetching',
@@ -157,81 +86,200 @@ const tanStackSolidAddOns = [
   },
 ]
 
-server.tool('listTanStackSolidAddOns', {}, () => {
-  return {
-    content: [{ type: 'text', text: JSON.stringify(tanStackSolidAddOns) }],
-  }
-})
+function createServer({
+  appName,
+  forcedAddOns = [],
+  name,
+}: {
+  appName?: string
+  forcedAddOns?: Array<string>
+  name?: string
+}) {
+  const server = new McpServer({
+    name: `${appName} Application Builder`,
+    version: '1.0.0',
+  })
 
-server.tool(
-  'createTanStackSolidApplication',
-  {
-    projectName: z
-      .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.enum([
-          'solid-ui',
-          'form',
-          'sentry',
-          'store',
-          'tanstack-query',
-          'tanchat',
-        ]),
-      )
-      .describe('The IDs of the add-ons to install'),
-  },
-  async ({ projectName, addOns, cwd }) => {
-    try {
-      process.chdir(cwd)
-      const chosenAddOns = await finalizeAddOns(
-        'solid',
-        'file-router',
-        addOns as unknown as Array<string>,
-      )
-      await createApp(
-        {
-          projectName: projectName.replace(/^\//, './'),
-          framework: 'solid',
-          typescript: true,
-          tailwind: true,
-          packageManager: 'pnpm',
-          toolchain: 'none',
-          mode: 'file-router',
-          addOns: true,
-          chosenAddOns,
-          git: true,
-          variableValues: {},
-        },
-        {
-          silent: true,
-          environment: createDefaultEnvironment(),
-          name: 'create-tsrouter-app',
-        },
-      )
-      return {
-        content: [{ type: 'text', text: 'Application created successfully' }],
-      }
-    } catch (error) {
-      return {
-        content: [
-          { type: 'text', text: `Error creating application: ${error}` },
-        ],
+  server.tool('listTanStackReactAddOns', {}, () => {
+    return {
+      content: [{ type: 'text', text: JSON.stringify(tanStackReactAddOns) }],
+    }
+  })
+
+  server.tool(
+    'createTanStackReactApplication',
+    {
+      projectName: z
+        .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.enum([
+            'clerk',
+            'convex',
+            'form',
+            'netlify',
+            'sentry',
+            'shadcn',
+            'start',
+            'store',
+            'tanstack-query',
+            'tanchat',
+          ]),
+        )
+        .describe('The IDs of the add-ons to install'),
+      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 ({ projectName, addOns, cwd, targetDir }) => {
+      try {
+        process.chdir(cwd)
+        const chosenAddOns = await finalizeAddOns(
+          'react',
+          'file-router',
+          Array.from(
+            new Set([...(addOns as unknown as Array<string>), ...forcedAddOns]),
+          ),
+        )
+        await createApp(
+          {
+            projectName: projectName.replace(/^\//, './'),
+            framework: 'react',
+            typescript: true,
+            tailwind: true,
+            packageManager: 'pnpm',
+            toolchain: 'none',
+            mode: 'file-router',
+            addOns: true,
+            chosenAddOns,
+            git: true,
+            variableValues: {},
+          },
+          {
+            silent: true,
+            environment: createDefaultEnvironment(),
+            name,
+            cwd: targetDir,
+          },
+        )
+        return {
+          content: [{ type: 'text', text: 'Application created successfully' }],
+        }
+      } catch (error) {
+        return {
+          content: [
+            { type: 'text', text: `Error creating application: ${error}` },
+          ],
+        }
       }
+    },
+  )
+
+  server.tool('listTanStackSolidAddOns', {}, () => {
+    return {
+      content: [{ type: 'text', text: JSON.stringify(tanStackSolidAddOns) }],
     }
+  })
+
+  server.tool(
+    'createTanStackSolidApplication',
+    {
+      projectName: z
+        .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.enum([
+            'solid-ui',
+            'form',
+            'sentry',
+            'store',
+            'tanstack-query',
+            'tanchat',
+          ]),
+        )
+        .describe('The IDs of the add-ons to install'),
+      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 ({ projectName, addOns, cwd, targetDir }) => {
+      try {
+        process.chdir(cwd)
+        const chosenAddOns = await finalizeAddOns(
+          'solid',
+          'file-router',
+          Array.from(
+            new Set([...(addOns as unknown as Array<string>), ...forcedAddOns]),
+          ),
+        )
+        await createApp(
+          {
+            projectName: projectName.replace(/^\//, './'),
+            framework: 'solid',
+            typescript: true,
+            tailwind: true,
+            packageManager: 'pnpm',
+            toolchain: 'none',
+            mode: 'file-router',
+            addOns: true,
+            chosenAddOns,
+            git: true,
+            variableValues: {},
+          },
+          {
+            silent: true,
+            environment: createDefaultEnvironment(),
+            name,
+            cwd: targetDir,
+          },
+        )
+        return {
+          content: [{ type: 'text', text: 'Application created successfully' }],
+        }
+      } catch (error) {
+        return {
+          content: [
+            { type: 'text', text: `Error creating application: ${error}` },
+          ],
+        }
+      }
+    },
+  )
+
+  return server
+}
+
+export default async function runServer(
+  sse: boolean,
+  {
+    forcedAddOns,
+    appName,
+    name,
+  }: {
+    forcedMode?: TemplateOptions
+    forcedAddOns?: Array<string>
+    appName?: string
+    name?: string
   },
-)
+) {
+  let transport: SSEServerTransport | null = null
 
-export default async function runServer(sse: boolean) {
+  const server = createServer({ appName, forcedAddOns, name })
   if (sse) {
     const app = express()
 
-    let transport: SSEServerTransport | null = null
-
     app.get('/sse', (req, res) => {
       transport = new SSEServerTransport('/messages', res)
       server.connect(transport)

package/src/options.ts

@@ -31,10 +31,8 @@ export async function normalizeOptions(
     if (parseSeparatedArgs.length > 1) {
       cliOptions.addOns = parseSeparatedArgs
     }
-    if (forcedAddOns) {
-      cliOptions.addOns = [...cliOptions.addOns, ...forcedAddOns]
-    }
   }
+
   if (cliOptions.projectName) {
     let typescript =
       cliOptions.template === 'typescript' ||
@@ -62,11 +60,23 @@ export async function normalizeOptions(
 
     let addOns = false
     let chosenAddOns: Array<AddOn> = []
-    if (Array.isArray(cliOptions.addOns) || overlay?.dependsOn) {
+    if (
+      Array.isArray(cliOptions.addOns) ||
+      overlay?.dependsOn ||
+      forcedAddOns
+    ) {
       addOns = true
-      let finalAddOns = [...(overlay?.dependsOn || [])]
+      let finalAddOns = Array.from(
+        new Set([...(overlay?.dependsOn || []), ...(forcedAddOns || [])]),
+      )
       if (cliOptions.addOns && Array.isArray(cliOptions.addOns)) {
-        finalAddOns = [...finalAddOns, ...cliOptions.addOns]
+        finalAddOns = Array.from(
+          new Set([
+            ...(forcedAddOns || []),
+            ...finalAddOns,
+            ...cliOptions.addOns,
+          ]),
+        )
       }
       chosenAddOns = await finalizeAddOns(
         cliOptions.framework || DEFAULT_FRAMEWORK,

package/src/types.ts

@@ -4,6 +4,8 @@ import type { ToolChain } from './toolchain.js'
 
 export type Framework = 'solid' | 'react'
 
+export type TemplateOptions = 'typescript' | 'javascript' | 'file-router'
+
 export interface Options {
   framework: Framework
   projectName: string
@@ -20,7 +22,7 @@ export interface Options {
 }
 
 export interface CliOptions {
-  template?: 'typescript' | 'javascript' | 'file-router'
+  template?: TemplateOptions
   framework?: Framework
   tailwind?: boolean
   packageManager?: PackageManager

package/templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs

@@ -13,7 +13,7 @@ function getUrl() {
     if (typeof window !== "undefined") return "";
     return `http://localhost:${process.env.PORT ?? 3000}`;
   })();
-  return base + "/api/trpc";
+  return `${base}/api/trpc`;
 }
 
 export const trpcClient = createTRPCClient<TRPCRouter>({
@@ -67,4 +67,4 @@ export function Provider({ children }: { children: React.ReactNode }) {
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   )
 }
-<% } %>
+<% } %>