@tpitre/story-ui 2.6.1 → 2.7.1

package/dist/cli/deploy.js

@@ -34,6 +34,410 @@ function isToolInstalled(tool) {
         return false;
     }
 }
+/**
+ * Generate deployment files for live Storybook deployment
+ * This creates Dockerfile, start script, and platform configs
+ */
+function generateLiveDeploymentFiles(projectDir, platform) {
+    console.log('📝 Generating deployment files...\n');
+    // 1. Create Dockerfile for running both servers
+    const dockerfilePath = path.join(projectDir, 'Dockerfile');
+    const dockerfile = `# Story UI Live Deployment
+# Runs Storybook in dev mode with Story UI MCP server
+
+FROM node:20-slim
+
+WORKDIR /app
+
+# Install dependencies
+COPY package*.json ./
+RUN npm install
+
+# Copy project files
+COPY . .
+
+# Make start script executable
+RUN chmod +x ./start-production.sh
+
+# Expose ports: Storybook (6006) and MCP server (4005)
+EXPOSE 6006 4005
+
+# Start both servers
+CMD ["./start-production.sh"]
+`;
+    fs.writeFileSync(dockerfilePath, dockerfile);
+    console.log('✅ Created Dockerfile');
+    // 2. Create start script that runs both servers
+    const startScriptPath = path.join(projectDir, 'start-production.sh');
+    const startScript = `#!/bin/bash
+
+# Story UI Live Production Start Script
+# Runs Storybook in dev mode with Story UI MCP server
+
+echo "🚀 Starting Story UI Live Environment..."
+
+# Start Storybook dev server in background
+echo "📖 Starting Storybook dev server on port 6006..."
+npm run storybook -- --port 6006 --host 0.0.0.0 --ci --no-open &
+STORYBOOK_PID=$!
+
+# Wait a moment for Storybook to initialize
+sleep 5
+
+# Start Story UI MCP server in background
+echo "🤖 Starting Story UI MCP server on port 4005..."
+npx story-ui start --port 4005 &
+MCP_PID=$!
+
+echo ""
+echo "✅ Story UI Live Environment is running!"
+echo "   📖 Storybook:   http://localhost:6006"
+echo "   🤖 MCP Server:  http://localhost:4005"
+echo "   📡 MCP Endpoint: http://localhost:4005/mcp"
+echo ""
+
+# Wait for either process to exit
+wait $STORYBOOK_PID $MCP_PID
+`;
+    fs.writeFileSync(startScriptPath, startScript);
+    fs.chmodSync(startScriptPath, '755');
+    console.log('✅ Created start-production.sh');
+    // 3. Create platform-specific config
+    switch (platform) {
+        case 'railway':
+            createRailwayConfig(projectDir);
+            break;
+        case 'render':
+            createRenderConfig(projectDir);
+            break;
+        case 'fly':
+            createFlyConfig(projectDir);
+            break;
+    }
+    // 4. Create .dockerignore if it doesn't exist
+    const dockerignorePath = path.join(projectDir, '.dockerignore');
+    if (!fs.existsSync(dockerignorePath)) {
+        const dockerignore = `node_modules
+.git
+.gitignore
+*.md
+.DS_Store
+storybook-static
+dist
+.env.local
+`;
+        fs.writeFileSync(dockerignorePath, dockerignore);
+        console.log('✅ Created .dockerignore');
+    }
+    // 5. Update package.json to ensure story-ui is a dependency
+    const packageJsonPath = path.join(projectDir, 'package.json');
+    if (fs.existsSync(packageJsonPath)) {
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+        // Add story-ui as a dependency if not present
+        if (!packageJson.dependencies?.['@tpitre/story-ui'] && !packageJson.devDependencies?.['@tpitre/story-ui']) {
+            packageJson.devDependencies = packageJson.devDependencies || {};
+            packageJson.devDependencies['@tpitre/story-ui'] = 'latest';
+            fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+            console.log('✅ Added @tpitre/story-ui to package.json');
+        }
+    }
+}
+function createRailwayConfig(projectDir) {
+    const railwayJsonPath = path.join(projectDir, 'railway.json');
+    const railwayJson = {
+        "$schema": "https://railway.app/railway.schema.json",
+        "build": {
+            "builder": "DOCKERFILE"
+        },
+        "deploy": {
+            "numReplicas": 1,
+            "restartPolicyType": "ON_FAILURE"
+        }
+    };
+    fs.writeFileSync(railwayJsonPath, JSON.stringify(railwayJson, null, 2));
+    console.log('✅ Created railway.json');
+    // Also create nixpacks.toml as alternative
+    const nixpacksPath = path.join(projectDir, 'nixpacks.toml');
+    const nixpacks = `[start]
+cmd = "./start-production.sh"
+
+[phases.install]
+cmds = ["npm install"]
+
+[phases.build]
+cmds = []
+`;
+    fs.writeFileSync(nixpacksPath, nixpacks);
+    console.log('✅ Created nixpacks.toml (Railway alternative)');
+}
+function createRenderConfig(projectDir) {
+    const renderYamlPath = path.join(projectDir, 'render.yaml');
+    const renderYaml = `services:
+  - type: web
+    name: story-ui-live
+    env: docker
+    dockerfilePath: ./Dockerfile
+    plan: starter
+    healthCheckPath: /
+    envVars:
+      - key: NODE_ENV
+        value: production
+      - key: ANTHROPIC_API_KEY
+        sync: false
+      - key: OPENAI_API_KEY
+        sync: false
+      - key: GEMINI_API_KEY
+        sync: false
+`;
+    fs.writeFileSync(renderYamlPath, renderYaml);
+    console.log('✅ Created render.yaml');
+}
+function createFlyConfig(projectDir) {
+    const flyTomlPath = path.join(projectDir, 'fly.toml');
+    const projectName = path.basename(projectDir).toLowerCase().replace(/[^a-z0-9-]/g, '-');
+    const flyToml = `app = "${projectName}-story-ui"
+primary_region = "sjc"
+
+[build]
+  dockerfile = "Dockerfile"
+
+[[services]]
+  internal_port = 6006
+  protocol = "tcp"
+
+  [[services.ports]]
+    handlers = ["http"]
+    port = 80
+
+  [[services.ports]]
+    handlers = ["tls", "http"]
+    port = 443
+
+[[services]]
+  internal_port = 4005
+  protocol = "tcp"
+
+  [[services.ports]]
+    handlers = ["http"]
+    port = 4005
+
+[env]
+  NODE_ENV = "production"
+`;
+    fs.writeFileSync(flyTomlPath, flyToml);
+    console.log('✅ Created fly.toml');
+}
+/**
+ * Deploy live Storybook (dev mode) with MCP server to a cloud platform
+ * This is the RECOMMENDED approach for production Story UI deployment
+ */
+async function deployLiveStorybook(options) {
+    console.log('\n🚀 Story UI Live Deployment');
+    console.log('═'.repeat(50));
+    console.log('This deploys your Storybook in DEV MODE with the MCP server.');
+    console.log('Works with ANY components - exactly like your local environment!\n');
+    const projectDir = process.cwd();
+    const platform = options.platform || 'railway';
+    // Validate project has Storybook
+    const packageJsonPath = path.join(projectDir, 'package.json');
+    if (!fs.existsSync(packageJsonPath)) {
+        console.error('❌ No package.json found. Run this from your Storybook project root.');
+        return { storybookUrl: null, mcpUrl: null };
+    }
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+    const hasStorybook = packageJson.devDependencies?.storybook ||
+        packageJson.dependencies?.storybook ||
+        packageJson.devDependencies?.['@storybook/react'] ||
+        packageJson.dependencies?.['@storybook/react'];
+    if (!hasStorybook) {
+        console.error('❌ No Storybook found in package.json.');
+        console.log('   Make sure you have Storybook installed: npx storybook@latest init');
+        return { storybookUrl: null, mcpUrl: null };
+    }
+    // Generate deployment files
+    generateLiveDeploymentFiles(projectDir, platform);
+    if (options.dryRun) {
+        console.log('\n[DRY RUN] Deployment files generated. Would deploy to', platform);
+        console.log('[DRY RUN] To deploy manually:');
+        switch (platform) {
+            case 'railway':
+                console.log('   1. railway login');
+                console.log('   2. railway init');
+                console.log('   3. railway up');
+                console.log('   4. railway domain (to get URL)');
+                break;
+            case 'render':
+                console.log('   1. Push to GitHub');
+                console.log('   2. Create new Web Service on render.com');
+                console.log('   3. Connect your repository');
+                break;
+            case 'fly':
+                console.log('   1. fly auth login');
+                console.log('   2. fly launch');
+                console.log('   3. fly secrets set ANTHROPIC_API_KEY=...');
+                console.log('   4. fly deploy');
+                break;
+        }
+        return { storybookUrl: 'https://dry-run.example.com', mcpUrl: 'https://dry-run.example.com:4005/mcp' };
+    }
+    // Actually deploy based on platform
+    console.log(`\n☁️  Deploying to ${platform}...`);
+    switch (platform) {
+        case 'railway':
+            return await deployLiveToRailway(projectDir);
+        case 'render':
+            return await deployLiveToRender(projectDir);
+        case 'fly':
+            return await deployLiveToFly(projectDir);
+        default:
+            console.error(`❌ Unknown platform: ${platform}`);
+            return { storybookUrl: null, mcpUrl: null };
+    }
+}
+async function deployLiveToRailway(projectDir) {
+    console.log('\n🚂 Deploying to Railway...\n');
+    if (!isToolInstalled('railway')) {
+        console.log('📦 Railway CLI not found. Installing...');
+        try {
+            execSync('npm install -g @railway/cli', { stdio: 'inherit' });
+        }
+        catch {
+            console.error('❌ Failed to install Railway CLI');
+            console.log('   Install manually: npm install -g @railway/cli');
+            return { storybookUrl: null, mcpUrl: null };
+        }
+    }
+    // Check if logged in
+    try {
+        execSync('railway whoami', { stdio: 'pipe' });
+    }
+    catch {
+        console.log('🔐 Not logged into Railway. Please login:');
+        execSync('railway login', { stdio: 'inherit' });
+    }
+    try {
+        // Check if project is linked
+        try {
+            execSync('railway status', { cwd: projectDir, stdio: 'pipe' });
+            console.log('✅ Railway project already linked');
+        }
+        catch {
+            console.log('📁 Creating new Railway project...');
+            execSync('railway init', { cwd: projectDir, stdio: 'inherit' });
+        }
+        // Set environment variables reminder
+        console.log('\n⚠️  Remember to set your API keys in Railway dashboard:');
+        console.log('   railway variables set ANTHROPIC_API_KEY=your-key');
+        console.log('   (or OPENAI_API_KEY, GEMINI_API_KEY)\n');
+        // Deploy
+        console.log('🚀 Deploying to Railway...');
+        const result = execSync('railway up --detach 2>&1', {
+            cwd: projectDir,
+            encoding: 'utf-8'
+        });
+        console.log(result);
+        // Get the deployment URL
+        console.log('\n📋 Getting deployment URL...');
+        try {
+            const urlResult = execSync('railway domain 2>&1', {
+                cwd: projectDir,
+                encoding: 'utf-8'
+            }).trim();
+            if (urlResult && !urlResult.includes('No domain')) {
+                const storybookUrl = `https://${urlResult}`;
+                const mcpUrl = `https://${urlResult}:4005/mcp`;
+                console.log(`\n✅ Deployment successful!`);
+                console.log(`   📖 Storybook:   ${storybookUrl}`);
+                console.log(`   🤖 MCP Server:  ${mcpUrl}`);
+                return { storybookUrl, mcpUrl };
+            }
+        }
+        catch {
+            console.log('⚠️  Could not get domain automatically.');
+        }
+        // Try to generate a domain
+        console.log('🌐 Generating Railway domain...');
+        execSync('railway domain', { cwd: projectDir, stdio: 'inherit' });
+        console.log('\n✅ Deployment submitted!');
+        console.log('   Run "railway domain" to get your deployment URL.');
+        return { storybookUrl: null, mcpUrl: null };
+    }
+    catch (error) {
+        console.error('❌ Railway deployment failed:', error.message);
+        return { storybookUrl: null, mcpUrl: null };
+    }
+}
+async function deployLiveToRender(projectDir) {
+    console.log('\n🎨 Render Deployment Instructions\n');
+    console.log('Render uses Git-based deployments. Follow these steps:\n');
+    console.log('1. Push your code to GitHub/GitLab');
+    console.log('2. Go to https://dashboard.render.com');
+    console.log('3. Click "New" → "Web Service"');
+    console.log('4. Connect your repository');
+    console.log('5. Render will auto-detect the Dockerfile');
+    console.log('6. Add your API keys as environment variables:');
+    console.log('   - ANTHROPIC_API_KEY');
+    console.log('   - OPENAI_API_KEY (optional)');
+    console.log('   - GEMINI_API_KEY (optional)');
+    console.log('\n📁 Deployment files have been created:');
+    console.log('   - Dockerfile');
+    console.log('   - render.yaml');
+    console.log('   - start-production.sh');
+    return { storybookUrl: null, mcpUrl: null };
+}
+async function deployLiveToFly(projectDir) {
+    console.log('\n🪁 Deploying to Fly.io...\n');
+    const flyCmd = isToolInstalled('flyctl') ? 'flyctl' : (isToolInstalled('fly') ? 'fly' : null);
+    if (!flyCmd) {
+        console.log('📦 Fly CLI not found. Installing...');
+        try {
+            execSync('curl -L https://fly.io/install.sh | sh', { stdio: 'inherit' });
+        }
+        catch {
+            console.error('❌ Failed to install Fly CLI');
+            console.log('   Install manually: https://fly.io/docs/hands-on/install-flyctl/');
+            return { storybookUrl: null, mcpUrl: null };
+        }
+    }
+    const cmd = flyCmd || 'fly';
+    try {
+        // Check if logged in
+        try {
+            execSync(`${cmd} auth whoami`, { stdio: 'pipe' });
+        }
+        catch {
+            console.log('🔐 Not logged into Fly.io. Please login:');
+            execSync(`${cmd} auth login`, { stdio: 'inherit' });
+        }
+        // Launch or deploy
+        try {
+            execSync(`${cmd} status`, { cwd: projectDir, stdio: 'pipe' });
+            console.log('🚀 Deploying to existing Fly app...');
+            execSync(`${cmd} deploy`, { cwd: projectDir, stdio: 'inherit' });
+        }
+        catch {
+            console.log('📁 Creating new Fly app...');
+            execSync(`${cmd} launch --no-deploy`, { cwd: projectDir, stdio: 'inherit' });
+            console.log('\n⚠️  Before deploying, set your secrets:');
+            console.log(`   ${cmd} secrets set ANTHROPIC_API_KEY=your-key`);
+            console.log('\n   Then run:');
+            console.log(`   ${cmd} deploy`);
+            return { storybookUrl: null, mcpUrl: null };
+        }
+        // Get URL
+        const appName = path.basename(projectDir).toLowerCase().replace(/[^a-z0-9-]/g, '-') + '-story-ui';
+        const storybookUrl = `https://${appName}.fly.dev`;
+        const mcpUrl = `https://${appName}.fly.dev:4005/mcp`;
+        console.log(`\n✅ Deployment successful!`);
+        console.log(`   📖 Storybook:   ${storybookUrl}`);
+        console.log(`   🤖 MCP Server:  ${mcpUrl}`);
+        return { storybookUrl, mcpUrl };
+    }
+    catch (error) {
+        console.error('❌ Fly.io deployment failed:', error.message);
+        return { storybookUrl: null, mcpUrl: null };
+    }
+}
 /**
  * Deploy backend to Railway
  */
@@ -373,29 +777,89 @@ async function deployProductionApp(backendUrl, projectName, dryRun) {
         // Generate the component registry in the user's project context
         process.chdir(userCwd);
         await generateComponentRegistry(registryOutputPath);
-        // 2.5. Generate AI considerations from story-ui-considerations.md (if exists)
-        console.log('📝 Loading AI considerations...');
+        // 2.5. Load ALL design system documentation (story-ui-docs/ AND story-ui-considerations.md)
+        console.log('📚 Loading design system documentation...');
+        // First, try the full documentation directory (story-ui-docs/)
+        const { DocumentationLoader } = await import('../story-generator/documentationLoader.js');
+        const docLoader = new DocumentationLoader(userCwd);
+        let fullDocumentation = '';
+        let documentationTokens = {};
+        let documentationPatterns = {};
+        let hasFullDocs = false;
+        if (docLoader.hasDocumentation()) {
+            console.log('📂 Found story-ui-docs/ directory, loading all documentation...');
+            const docs = await docLoader.loadDocumentation();
+            fullDocumentation = docLoader.formatForPrompt(docs);
+            documentationTokens = docs.tokens;
+            documentationPatterns = docs.patterns;
+            hasFullDocs = true;
+            console.log(`   ✅ Loaded ${docs.guidelines.length} guidelines, ${Object.keys(docs.tokens).length} token categories, ${Object.keys(docs.patterns).length} patterns`);
+        }
+        // Also load legacy considerations file (story-ui-considerations.md)
         const { loadConsiderations, considerationsToPrompt } = await import('../story-generator/considerationsLoader.js');
         const considerations = loadConsiderations(); // Auto-finds in common locations
         const considerationsPrompt = considerations ? considerationsToPrompt(considerations) : '';
+        // Combine both sources - full docs take priority, considerations supplement
+        let combinedDocumentation = '';
+        if (fullDocumentation) {
+            combinedDocumentation = fullDocumentation;
+            if (considerationsPrompt) {
+                // Add considerations as supplementary rules
+                combinedDocumentation += '\n\n📋 ADDITIONAL DESIGN SYSTEM RULES:\n' + considerationsPrompt;
+            }
+        }
+        else if (considerationsPrompt) {
+            combinedDocumentation = considerationsPrompt;
+        }
         const considerationsOutputPath = path.join(buildDir, 'src/considerations.ts');
-        // Write considerations to a TypeScript file
+        // Write comprehensive documentation to a TypeScript file
         const considerationsContent = `/**
- * AI Considerations - Auto-generated from story-ui-considerations.md
+ * AI Design System Documentation - Auto-generated
+ *
+ * This file contains ALL design system documentation for the AI:
+ * - Guidelines from story-ui-docs/ directory
+ * - Design tokens (colors, spacing, typography, etc.)
+ * - Component-specific documentation
+ * - Layout patterns
+ * - Accessibility rules
+ * - Legacy considerations from story-ui-considerations.md
  *
- * This file contains design-system-specific instructions for the AI
- * when generating components. Edit story-ui-considerations.md in your
- * project root to customize these rules.
+ * To customize:
+ * 1. Create a story-ui-docs/ directory with markdown/JSON files
+ * 2. And/or edit story-ui-considerations.md in your project root
  */
 
-export const aiConsiderations = ${JSON.stringify(considerationsPrompt, null, 2)};
+export const aiConsiderations = ${JSON.stringify(combinedDocumentation, null, 2)};
+
+export const hasConsiderations = ${(hasFullDocs || considerations) ? 'true' : 'false'};
+
+// Design tokens for programmatic access (if needed)
+export const designTokens = ${JSON.stringify(documentationTokens, null, 2)};
+
+// Design patterns for programmatic access (if needed)
+export const designPatterns = ${JSON.stringify(documentationPatterns, null, 2)};
 
-export const hasConsiderations = ${considerations ? 'true' : 'false'};
+// Source information
+export const documentationSource = {
+  hasFullDocs: ${hasFullDocs},
+  hasLegacyConsiderations: ${considerations ? 'true' : 'false'},
+  libraryName: ${JSON.stringify(considerations?.libraryName || null)}
+};
 `;
         fs.writeFileSync(considerationsOutputPath, considerationsContent);
-        console.log(considerations
-            ? `✅ Loaded AI considerations for: ${considerations.libraryName || 'your component library'}`
-            : '⚠️  No story-ui-considerations.md found - using default prompts');
+        if (hasFullDocs && considerations) {
+            console.log(`✅ Loaded full documentation + considerations for: ${considerations.libraryName || 'your component library'}`);
+        }
+        else if (hasFullDocs) {
+            console.log('✅ Loaded full documentation from story-ui-docs/');
+        }
+        else if (considerations) {
+            console.log(`✅ Loaded considerations for: ${considerations.libraryName || 'your component library'}`);
+        }
+        else {
+            console.log('⚠️  No documentation found - using default prompts');
+            console.log('   Create story-ui-docs/ directory or story-ui-considerations.md for better results');
+        }
         process.chdir(buildDir);
         // 3. Install dependencies
         console.log('📦 Installing dependencies...');
@@ -427,7 +891,7 @@ export const hasConsiderations = ${considerations ? 'true' : 'false'};
         execSync('npm install', { cwd: buildDir, stdio: 'inherit' });
         // 4. Create .env file with backend URL
         console.log('⚙️  Configuring backend URL...');
-        fs.writeFileSync(path.join(buildDir, '.env'), `VITE_BACKEND_URL=${backendUrl}\nVITE_APP_TITLE=Story UI\n`);
+        fs.writeFileSync(path.join(buildDir, '.env'), `VITE_STORY_UI_SERVER=${backendUrl}\nVITE_APP_TITLE=Story UI\n`);
         // 5. Build the app
         console.log('🔨 Building production app...');
         execSync('npm run build', { cwd: buildDir, stdio: 'inherit' });
@@ -600,7 +1064,32 @@ export async function deployCommand(options) {
         await legacyEdgeDeployment(options);
         return;
     }
-    // New recommended deployment flow
+    // NEW RECOMMENDED: Live Storybook deployment
+    // Runs Storybook in dev mode with MCP server - works with ANY components
+    if (options.live) {
+        const result = await deployLiveStorybook(options);
+        if (result.storybookUrl || result.mcpUrl) {
+            console.log('\n' + '═'.repeat(60));
+            console.log('📋 LIVE DEPLOYMENT SUMMARY');
+            console.log('═'.repeat(60));
+            if (result.storybookUrl) {
+                console.log(`\n📖 Storybook (Live Dev Mode): ${result.storybookUrl}`);
+                console.log('   This runs in dev mode - Story UI can generate & hot-reload stories!');
+            }
+            if (result.mcpUrl) {
+                console.log(`\n🤖 MCP Server: ${result.mcpUrl}`);
+                console.log('   Connect Claude Desktop with:');
+                console.log(`   claude mcp add --transport http story-ui ${result.mcpUrl}`);
+            }
+            console.log('\n✅ This is the EXACT same experience as local development!');
+            console.log('   - Works with ANY components (custom, Tailwind, multiple libraries)');
+            console.log('   - Generated stories are hot-reloaded instantly');
+            console.log('   - MCP server accessible from anywhere');
+            console.log('\n' + '═'.repeat(60));
+        }
+        return;
+    }
+    // Legacy deployment flows
     let backendUrl = options.backendUrl || null;
     let frontendUrl = null;
     let appUrl = null;
@@ -657,40 +1146,47 @@ export async function deployCommand(options) {
         printSummary(backendUrl, frontendUrl, appUrl);
     }
     // Show help if no flags provided
-    if (!options.backend && !options.frontend && !options.app && !options.edge && !options.pages && !options.all && !options.init) {
-        console.log('Story UI Deployment - Deploy your component library as a production app\n');
-        console.log('RECOMMENDED APPROACH (Lovable/Bolt-style App):');
-        console.log('─'.repeat(50));
-        console.log('  --backend              Deploy MCP server backend');
-        console.log('  --app                  Deploy standalone production app (RECOMMENDED)');
-        console.log('                         Builds a Lovable/Bolt-style UI with your components');
-        console.log('  --platform <name>      Backend platform: railway (default), render, fly');
-        console.log('  --backend-url <url>    Use existing backend URL');
-        console.log('  --project-name <name>  Project name prefix (default: story-ui)');
-        console.log('  --dry-run              Show what would be deployed\n');
+    if (!options.backend && !options.frontend && !options.app && !options.live && !options.edge && !options.pages && !options.all && !options.init) {
+        console.log('Story UI Deployment - Deploy your Storybook with AI story generation\n');
+        console.log('═'.repeat(60));
+        console.log('  RECOMMENDED: Live Storybook Deployment');
+        console.log('═'.repeat(60));
+        console.log('  --live                 Deploy Storybook in DEV MODE with MCP server');
+        console.log('                         Works with ANY components - exactly like local dev!');
+        console.log('  --platform <name>      Platform: railway (default), render, fly');
+        console.log('  --dry-run              Generate deployment files only\n');
         console.log('EXAMPLES:');
-        console.log('─'.repeat(50));
-        console.log('  # Deploy everything (recommended)');
-        console.log('  npx story-ui deploy --backend --app\n');
-        console.log('  # Deploy backend only to Railway');
-        console.log('  npx story-ui deploy --backend --platform=railway\n');
-        console.log('  # Deploy app with existing backend');
-        console.log('  npx story-ui deploy --app --backend-url=https://your-api.railway.app\n');
-        console.log('  # Custom project name');
-        console.log('  npx story-ui deploy --backend --app --project-name=my-design-system\n');
-        console.log('ENVIRONMENT VARIABLES (set on backend platform):');
-        console.log('─'.repeat(50));
-        console.log('  CLAUDE_API_KEY    - Anthropic API key');
-        console.log('  OPENAI_API_KEY    - OpenAI API key');
-        console.log('  GEMINI_API_KEY    - Google Gemini API key');
+        console.log('─'.repeat(60));
+        console.log('  # Deploy your Storybook to Railway (recommended)');
+        console.log('  npx story-ui deploy --live\n');
+        console.log('  # Deploy to Render');
+        console.log('  npx story-ui deploy --live --platform=render\n');
+        console.log('  # Deploy to Fly.io');
+        console.log('  npx story-ui deploy --live --platform=fly\n');
+        console.log('  # Just generate deployment files (no actual deploy)');
+        console.log('  npx story-ui deploy --live --dry-run\n');
+        console.log('WHY --live IS RECOMMENDED:');
+        console.log('─'.repeat(60));
+        console.log('  - Works with ANY components (custom, Tailwind, multiple libraries)');
+        console.log('  - Exactly the same experience as local development');
+        console.log('  - Story UI writes stories to disk, Storybook hot-reloads them');
+        console.log('  - MCP server accessible from Claude Desktop anywhere');
+        console.log('  - No design system lock-in - completely agnostic\n');
+        console.log('ENVIRONMENT VARIABLES (set on your platform):');
+        console.log('─'.repeat(60));
+        console.log('  ANTHROPIC_API_KEY  - Claude API key (recommended)');
+        console.log('  OPENAI_API_KEY     - OpenAI API key (optional)');
+        console.log('  GEMINI_API_KEY     - Google Gemini API key (optional)');
         console.log('  (Set at least one of these)\n');
-        console.log('LEGACY OPTIONS (Storybook-based frontend):');
-        console.log('─'.repeat(50));
-        console.log('  --frontend             Deploy Storybook frontend (use --app instead)');
-        console.log('  --storybook-dir <dir>  Path to Storybook project\n');
-        console.log('DEPRECATED OPTIONS (Cloudflare Edge approach):');
-        console.log('─'.repeat(50));
+        console.log('ALTERNATIVE APPROACHES (for specific use cases):');
+        console.log('─'.repeat(60));
+        console.log('  --backend              Deploy only the MCP server backend');
+        console.log('  --app                  Deploy standalone production app (static)');
+        console.log('  --frontend             Deploy Storybook static build');
+        console.log('  --backend-url <url>    Use existing backend URL\n');
+        console.log('DEPRECATED:');
+        console.log('─'.repeat(60));
         console.log('  --init, --edge, --pages, --all');
-        console.log('  These are deprecated. Use --backend and --app instead.\n');
+        console.log('  These Cloudflare Edge options are deprecated. Use --live instead.\n');
     }
 }