sunpeak 0.5.18 → 0.5.20

package/README.md

@@ -36,7 +36,11 @@ Quickstart, build, and test your ChatGPT App locally with OpenAI apps-sdk-ui Rea
 Requirements: Node (20+), pnpm (10+)
 
 ```bash
-pnpm dlx sunpeak new
+# Install the CLI globally
+pnpm add -g sunpeak
+
+# Create a new project
+sunpeak new
 ```
 
 To add sunpeak to an existing project, refer to the [documentation](https://docs.sunpeak.ai/add-to-existing-project).

package/bin/sunpeak.js

@@ -4,8 +4,10 @@ import { existsSync, mkdirSync, cpSync, readFileSync, writeFileSync, renameSync
 import { join, dirname, basename } from 'path';
 import { fileURLToPath } from 'url';
 import { createInterface } from 'readline';
+import { spawn } from 'child_process';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
+const CLI_DIR = join(__dirname, '..', 'cli');
 
 function prompt(question) {
   const rl = createInterface({ input: process.stdin, output: process.stdout });
@@ -17,6 +19,28 @@ function prompt(question) {
   });
 }
 
+function runCommand(command, args = [], options = {}) {
+  const child = spawn(command, args, {
+    cwd: process.cwd(),
+    stdio: 'inherit',
+    env: { ...process.env, FORCE_COLOR: '1' },
+    ...options,
+  });
+
+  child.on('exit', (code) => {
+    process.exit(code || 0);
+  });
+}
+
+function checkPackageJson() {
+  const pkgPath = join(process.cwd(), 'package.json');
+  if (!existsSync(pkgPath)) {
+    console.error('Error: No package.json found in current directory.');
+    console.error('Make sure you are in a Sunpeak project directory.');
+    process.exit(1);
+  }
+}
+
 async function init(projectName) {
   if (!projectName) {
     projectName = await prompt('☀️ 🏔️ Project name [my-app]: ');
@@ -81,8 +105,17 @@ async function init(projectName) {
   console.log(`
 Done! To get started:
 
+  # Install the CLI (if not already installed)
+  pnpm add -g sunpeak
+
+  # Navigate to your project and install dependencies
   cd ${projectName}
-  pnpm install && pnpm dev
+  pnpm install
+
+  # Start development
+  sunpeak dev
+
+Alternatively, use "pnpm dlx sunpeak dev" if you prefer not to install globally.
 
 See README.md for more details.
 `);
@@ -90,13 +123,100 @@ See README.md for more details.
 
 const [, , command, ...args] = process.argv;
 
-if (command === 'new') {
-  init(args[0]);
-} else {
-  console.log(`
-sunpeak - The MCP App SDK
+// Main CLI handler
+(async () => {
+  // Commands that don't require a package.json
+  const standaloneCommands = ['new', 'help', undefined];
+
+  if (command && !standaloneCommands.includes(command)) {
+    checkPackageJson();
+  }
+
+  switch (command) {
+    case 'new':
+      await init(args[0]);
+      break;
+
+    case 'dev':
+      runCommand('pnpm', ['dev', ...args]);
+      break;
+
+    case 'build':
+      {
+        const { build } = await import(join(CLI_DIR, 'build.mjs'));
+        await build(process.cwd());
+      }
+      break;
+
+    case 'mcp':
+    case 'mcp:serve':
+      if (command === 'mcp:serve' || args[0] === 'serve' || args[0] === ':serve') {
+        runCommand('pnpm', ['mcp:serve', ...(command === 'mcp:serve' ? args : args.slice(1))]);
+      } else {
+        runCommand('pnpm', ['mcp', ...args]);
+      }
+      break;
+
+    case 'lint':
+      runCommand('pnpm', ['lint', ...args]);
+      break;
+
+    case 'typecheck':
+      runCommand('pnpm', ['typecheck', ...args]);
+      break;
+
+    case 'test':
+      runCommand('pnpm', ['test', ...args]);
+      break;
+
+    case 'format':
+      runCommand('pnpm', ['format', ...args]);
+      break;
+
+    case 'validate':
+      {
+        const { validate } = await import(join(CLI_DIR, 'validate.mjs'));
+        await validate(process.cwd());
+      }
+      break;
+
+    case 'help':
+    case undefined:
+      console.log(`
+☀️ 🏔️ sunpeak - The MCP App SDK
+
+Usage:
+  sunpeak <command> [options]
 
 Commands:
-  new [name]  Create a new project from template
+  new [name]       Create a new project from template
+  dev              Start the development server
+  build            Build all resources for production
+  mcp              Run the MCP server with nodemon
+  mcp:serve        Run the MCP server directly
+  lint             Run ESLint to check code quality
+  typecheck        Run TypeScript type checking
+  test             Run tests with Vitest
+  format           Format code with Prettier
+  validate         Run full validation suite
+  help             Show this help message
+
+Examples:
+  sunpeak new my-app
+  sunpeak dev
+  sunpeak build
+  sunpeak mcp
+
+For more information, visit: https://sunpeak.ai/
 `);
-}
+      break;
+
+    default:
+      console.error(`Unknown command: ${command}`);
+      console.error('Run "sunpeak help" to see available commands.');
+      process.exit(1);
+  }
+})().catch((error) => {
+  console.error('Error:', error.message);
+  process.exit(1);
+});

package/cli/build.mjs

@@ -0,0 +1,199 @@
+#!/usr/bin/env node
+import { execSync } from 'child_process';
+import { existsSync, rmSync, readdirSync, readFileSync, writeFileSync, mkdirSync, copyFileSync } from 'fs';
+import path from 'path';
+
+/**
+ * Detect package manager for the project
+ */
+function detectPackageManager(projectRoot) {
+  if (existsSync(path.join(projectRoot, 'pnpm-lock.yaml'))) return 'pnpm';
+  if (existsSync(path.join(projectRoot, 'yarn.lock'))) return 'yarn';
+  if (existsSync(path.join(projectRoot, 'package-lock.json'))) return 'npm';
+  return 'pnpm'; // default
+}
+
+/**
+ * Build all resources for a Sunpeak project
+ * Runs in the context of a user's project directory
+ */
+export async function build(projectRoot = process.cwd()) {
+  const pm = detectPackageManager(projectRoot);
+
+  // Check for package.json first
+  const pkgJsonPath = path.join(projectRoot, 'package.json');
+  if (!existsSync(pkgJsonPath)) {
+    console.error('Error: No package.json found in current directory');
+    console.error('Make sure you are in a Sunpeak project directory');
+    process.exit(1);
+  }
+
+  const distDir = path.join(projectRoot, 'dist/chatgpt');
+  const buildDir = path.join(projectRoot, 'dist/build-output');
+  const tempDir = path.join(projectRoot, '.tmp');
+  const resourcesDir = path.join(projectRoot, 'src/components/resources');
+  const templateFile = path.join(projectRoot, 'src/index-resource.tsx');
+  const viteConfigFile = path.join(projectRoot, 'vite.config.build.ts');
+
+  // Validate project structure
+  if (!existsSync(resourcesDir)) {
+    console.error('Error: src/components/resources directory not found');
+    console.error('Expected location: ' + resourcesDir);
+    console.error('\nThe build command expects the standard Sunpeak project structure.');
+    console.error('If you have customized your project structure, you may need to use');
+    console.error('a custom build script instead of "sunpeak build".');
+    process.exit(1);
+  }
+
+  if (!existsSync(templateFile)) {
+    console.error('Error: src/index-resource.tsx not found');
+    console.error('Expected location: ' + templateFile);
+    console.error('\nThis file is the template entry point for building resources.');
+    console.error('If you have moved or renamed it, you may need to use a custom build script.');
+    process.exit(1);
+  }
+
+  if (!existsSync(viteConfigFile)) {
+    console.error('Error: vite.config.build.ts not found');
+    console.error('Expected location: ' + viteConfigFile);
+    console.error('\nThis Vite config is required for building resources.');
+    console.error('If you have renamed it, you may need to use a custom build script.');
+    process.exit(1);
+  }
+
+  // Clean dist and temp directories
+  if (existsSync(distDir)) {
+    rmSync(distDir, { recursive: true });
+  }
+  if (existsSync(tempDir)) {
+    rmSync(tempDir, { recursive: true });
+  }
+  mkdirSync(distDir, { recursive: true });
+  mkdirSync(tempDir, { recursive: true });
+
+  // Auto-discover all resources
+  const resourceFiles = readdirSync(resourcesDir)
+    .filter(file => file.endsWith('-resource.tsx'))
+    .map(file => {
+      // Extract kebab-case name: 'counter-resource.tsx' -> 'counter'
+      const kebabName = file.replace('-resource.tsx', '');
+
+      // Convert kebab-case to PascalCase: 'counter' -> 'Counter', 'my-widget' -> 'MyWidget'
+      const pascalName = kebabName
+        .split('-')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join('');
+
+      return {
+        componentName: `${pascalName}Resource`,
+        componentFile: file.replace('.tsx', ''),
+        entry: `.tmp/index-${kebabName}.tsx`,
+        output: `${kebabName}.js`,
+        buildOutDir: path.join(buildDir, kebabName),
+      };
+    });
+
+  if (resourceFiles.length === 0) {
+    console.error('Error: No resource files found in src/components/resources/');
+    console.error('Resource files should be named like: counter-resource.tsx');
+    process.exit(1);
+  }
+
+  console.log('Building all resources...\n');
+
+  // Read and validate the template
+  const template = readFileSync(templateFile, 'utf-8');
+
+  // Verify template has required placeholders
+  if (!template.includes('// RESOURCE_IMPORT')) {
+    console.error('Error: src/index-resource.tsx is missing "// RESOURCE_IMPORT" placeholder');
+    console.error('\nThe template file must include this comment where the resource import should go.');
+    console.error('If you have customized this file, ensure it has the required placeholders.');
+    process.exit(1);
+  }
+
+  if (!template.includes('// RESOURCE_MOUNT')) {
+    console.error('Error: src/index-resource.tsx is missing "// RESOURCE_MOUNT" placeholder');
+    console.error('\nThe template file must include this comment where the resource mount should go.');
+    console.error('If you have customized this file, ensure it has the required placeholders.');
+    process.exit(1);
+  }
+
+  // Build all resources (but don't copy yet)
+  resourceFiles.forEach(({ componentName, componentFile, entry, output, buildOutDir }, index) => {
+    console.log(`[${index + 1}/${resourceFiles.length}] Building ${output}...`);
+
+    try {
+      // Create build directory if it doesn't exist
+      if (!existsSync(buildOutDir)) {
+        mkdirSync(buildOutDir, { recursive: true });
+      }
+
+      // Create entry file from template in temp directory
+      const entryContent = template
+        .replace('// RESOURCE_IMPORT', `import { ${componentName} } from '../src/components/resources/${componentFile}';`)
+        .replace('// RESOURCE_MOUNT', `createRoot(root).render(<${componentName} />);`);
+
+      const entryPath = path.join(projectRoot, entry);
+      writeFileSync(entryPath, entryContent);
+
+      // Build with vite to build directory
+      const viteCommand = pm === 'npm' ? 'npx vite' : `${pm} exec vite`;
+      execSync(
+        `${viteCommand} build --config vite.config.build.ts`,
+        {
+          cwd: projectRoot,
+          stdio: 'inherit',
+          env: {
+            ...process.env,
+            ENTRY_FILE: entry,
+            OUTPUT_FILE: output,
+            OUT_DIR: buildOutDir,
+          },
+        }
+      );
+    } catch (error) {
+      console.error(`Failed to build ${output}`);
+      process.exit(1);
+    }
+  });
+
+  // Now copy all files from build-output to dist/chatgpt
+  console.log('\nCopying built files to dist/chatgpt...');
+  resourceFiles.forEach(({ output, buildOutDir }) => {
+    const builtFile = path.join(buildOutDir, output);
+    const destFile = path.join(distDir, output);
+
+    if (existsSync(builtFile)) {
+      copyFileSync(builtFile, destFile);
+      console.log(`✓ Copied ${output}`);
+    } else {
+      console.error(`Built file not found: ${builtFile}`);
+      if (existsSync(buildOutDir)) {
+        console.log(`  Files in ${buildOutDir}:`, readdirSync(buildOutDir));
+      } else {
+        console.log(`  Build directory doesn't exist: ${buildOutDir}`);
+      }
+      process.exit(1);
+    }
+  });
+
+  // Clean up temp and build directories
+  if (existsSync(tempDir)) {
+    rmSync(tempDir, { recursive: true });
+  }
+  if (existsSync(buildDir)) {
+    rmSync(buildDir, { recursive: true });
+  }
+
+  console.log('\n✓ All resources built successfully!');
+  console.log(`\nBuilt files:`, readdirSync(distDir));
+}
+
+// Allow running directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  build().catch(error => {
+    console.error(error);
+    process.exit(1);
+  });
+}

package/cli/validate.mjs

@@ -0,0 +1,245 @@
+#!/usr/bin/env node
+import { execSync, spawn } from 'child_process';
+import { existsSync, readdirSync, readFileSync } from 'fs';
+import { join } from 'path';
+import http from 'http';
+
+/**
+ * Validate a Sunpeak project by running all checks
+ * Runs in the context of a user's project directory
+ */
+
+// Color codes for output
+const colors = {
+  red: '\x1b[0;31m',
+  green: '\x1b[0;32m',
+  blue: '\x1b[0;34m',
+  yellow: '\x1b[1;33m',
+  reset: '\x1b[0m',
+};
+
+function printSuccess(text) {
+  console.log(`${colors.green}✓ ${text}${colors.reset}`);
+}
+
+function printError(text) {
+  console.log(`${colors.red}✗ ${text}${colors.reset}`);
+}
+
+function printWarning(text) {
+  console.log(`${colors.yellow}⚠ ${text}${colors.reset}`);
+}
+
+function detectPackageManager(projectRoot) {
+  if (existsSync(join(projectRoot, 'pnpm-lock.yaml'))) return 'pnpm';
+  if (existsSync(join(projectRoot, 'yarn.lock'))) return 'yarn';
+  if (existsSync(join(projectRoot, 'package-lock.json'))) return 'npm';
+  return 'pnpm'; // default
+}
+
+function hasScript(projectRoot, scriptName) {
+  try {
+    const pkgJson = JSON.parse(readFileSync(join(projectRoot, 'package.json'), 'utf-8'));
+    return !!pkgJson.scripts?.[scriptName];
+  } catch (error) {
+    return false;
+  }
+}
+
+function runCommand(command, cwd, pm = 'pnpm') {
+  try {
+    // Replace pnpm with detected package manager
+    const actualCommand = command.replace(/^pnpm/, pm);
+    execSync(actualCommand, {
+      cwd,
+      stdio: 'inherit',
+      env: { ...process.env, FORCE_COLOR: '1' },
+    });
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+function waitForServer(port, timeout = 10000) {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    const checkServer = () => {
+      const req = http.get(`http://localhost:${port}`, () => {
+        resolve();
+      });
+      req.on('error', () => {
+        if (Date.now() - startTime > timeout) {
+          reject(new Error(`Server did not start within ${timeout}ms`));
+        } else {
+          setTimeout(checkServer, 500);
+        }
+      });
+      req.end();
+    };
+    checkServer();
+  });
+}
+
+export async function validate(projectRoot = process.cwd()) {
+  const pm = detectPackageManager(projectRoot);
+
+  // Check package.json exists
+  if (!existsSync(join(projectRoot, 'package.json'))) {
+    console.error('Error: No package.json found in current directory');
+    console.error('Make sure you are in a Sunpeak project directory');
+    process.exit(1);
+  }
+
+  console.log(`${colors.yellow}Starting validation for Sunpeak project...${colors.reset}`);
+  console.log(`Project root: ${projectRoot}`);
+  console.log(`Package manager: ${pm}\n`);
+
+  try {
+    console.log(`Running: ${pm} install`);
+    if (!runCommand(`${pm} install`, projectRoot, pm)) {
+      throw new Error(`${pm} install failed`);
+    }
+    console.log()
+    printSuccess(`${pm} install`);
+
+    // Format (optional)
+    if (hasScript(projectRoot, 'format')) {
+      console.log(`\nRunning: ${pm} format`);
+      if (!runCommand(`${pm} format`, projectRoot, pm)) {
+        throw new Error(`${pm} format failed`);
+      }
+      printSuccess(`${pm} format`);
+    } else {
+      printWarning('Skipping format: no "format" script in package.json');
+    }
+
+    // Lint (optional)
+    if (hasScript(projectRoot, 'lint')) {
+      console.log(`\nRunning: ${pm} lint`);
+      if (!runCommand(`${pm} lint`, projectRoot, pm)) {
+        throw new Error(`${pm} lint failed`);
+      }
+      printSuccess(`${pm} lint`);
+    } else {
+      printWarning('Skipping lint: no "lint" script in package.json');
+    }
+
+    // Typecheck (optional)
+    if (hasScript(projectRoot, 'typecheck')) {
+      console.log(`\nRunning: ${pm} typecheck`);
+      if (!runCommand(`${pm} typecheck`, projectRoot, pm)) {
+        throw new Error(`${pm} typecheck failed`);
+      }
+      printSuccess(`${pm} typecheck`);
+    } else {
+      printWarning('Skipping typecheck: no "typecheck" script in package.json');
+    }
+
+    // Test (optional)
+    if (hasScript(projectRoot, 'test')) {
+      console.log(`\nRunning: ${pm} test`);
+      if (!runCommand(`${pm} test`, projectRoot, pm)) {
+        throw new Error(`${pm} test failed`);
+      }
+      printSuccess(`${pm} test`);
+    } else {
+      printWarning('Skipping test: no "test" script in package.json');
+    }
+
+    console.log(`\nRunning: sunpeak build`);
+    // Import and run build directly
+    const { build } = await import('./build.mjs');
+    await build(projectRoot);
+
+    const chatgptDir = join(projectRoot, 'dist', 'chatgpt');
+
+    if (!existsSync(chatgptDir)) {
+      printError('dist/chatgpt directory not found after build');
+      process.exit(1);
+    }
+
+    const files = readdirSync(chatgptDir);
+    if (files.length === 0) {
+      printError('No files found in dist/chatgpt/');
+      process.exit(1);
+    }
+
+    // Verify all files are .js files
+    const nonJsFiles = files.filter(f => !f.endsWith('.js'));
+    if (nonJsFiles.length > 0) {
+      printError(`Unexpected non-JS files in ./dist/chatgpt/: ${nonJsFiles.join(', ')}`);
+      process.exit(1);
+    }
+
+    console.log()
+    printSuccess('sunpeak build');
+
+    // MCP Server Check (optional)
+    if (hasScript(projectRoot, 'mcp:serve')) {
+      console.log(`\nRunning: ${pm} mcp:serve`);
+      const mcpProcess = spawn(pm, ['mcp:serve'], {
+        cwd: projectRoot,
+        stdio: ['ignore', 'pipe', 'pipe'],
+        env: { ...process.env, FORCE_COLOR: '1' },
+      });
+
+      const mcpErrors = [];
+
+      mcpProcess.stderr.on('data', (data) => {
+        const message = data.toString();
+        if (message.includes('error') || message.includes('Error')) {
+          mcpErrors.push(message.trim());
+        }
+      });
+
+      // Store process for cleanup
+      process.on('exit', () => {
+        if (mcpProcess && !mcpProcess.killed) {
+          mcpProcess.kill();
+        }
+      });
+
+      try {
+        console.log('\nWaiting for MCP server to start on port 6766...');
+        await waitForServer(6766, 10000);
+
+        // Give it a moment to ensure no immediate errors
+        await new Promise(resolve => setTimeout(resolve, 1000));
+
+        if (mcpErrors.length > 0) {
+          printError('MCP server started but reported errors:');
+          mcpErrors.forEach(err => console.log(`  ${err}`));
+          throw new Error('MCP server has errors');
+        }
+
+      } catch (error) {
+        printError(`MCP server failed to start: ${error.message}`);
+        throw error;
+      } finally {
+        console.log('Stopping MCP server...');
+        mcpProcess.kill();
+        // Give it a moment to shut down
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+      console.log()
+      printSuccess(`${pm} mcp\n`);
+    } else {
+      printWarning('Skipping MCP server check: no "mcp:serve" script in package.json\n');
+    }
+
+    printSuccess('All systems GO!\n\n');
+    process.exit(0);
+  } catch (error) {
+    console.error(`\n${colors.red}Error: ${error.message}${colors.reset}\n`);
+    process.exit(1);
+  }
+}
+
+// Allow running directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  validate().catch(error => {
+    console.error(error);
+    process.exit(1);
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.5.18",
+  "version": "0.5.20",
   "description": "The MCP App SDK. Quickstart, build, & test your ChatGPT App locally!",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -33,6 +33,7 @@
   "files": [
     "dist",
     "bin",
+    "cli",
     "template",
     "README.md"
   ],