@tpitre/story-ui 2.7.0 → 2.8.0

package/README.md

@@ -10,7 +10,7 @@ Story UI revolutionizes component documentation by automatically generating Stor
 ## Why Story UI?
 
 - **Framework Agnostic**: Works with React, Vue, Angular, Svelte, and Web Components
-- **Multi-Provider AI**: Choose between Claude (Anthropic), GPT-4 (OpenAI), or Gemini (Google)
+- **Multi-Provider AI**: Choose between Claude (Anthropic), GPT-5 (OpenAI), or Gemini (Google)
 - **Design System Aware**: Learns your component library and generates appropriate code
 - **Production Ready**: Deploy as a standalone web app with full MCP integration
 - **Zero Lock-in**: Use any component library - Mantine, Vuetify, Angular Material, Shoelace, or your own
@@ -51,19 +51,19 @@ Story UI will guide you through:
 
 | Framework | Design Systems | Status |
 |-----------|---------------|--------|
-| React | Mantine, Chakra UI, MUI, Ant Design, ShadCN, Custom | Fully Supported |
-| Vue | Vuetify, Element Plus, PrimeVue, Quasar, Custom | Fully Supported |
-| Angular | Angular Material, PrimeNG, NG-ZORRO, Custom | Fully Supported |
-| Svelte | Skeleton, Custom | Fully Supported |
-| Web Components | Shoelace, Lit, Custom | Fully Supported |
+| React | Mantine, Chakra UI, Material UI, Custom | Fully Supported |
+| Vue | Vuetify, Custom | Fully Supported |
+| Angular | Angular Material, Custom | Fully Supported |
+| Svelte | Skeleton UI, Custom | Fully Supported |
+| Web Components | Shoelace, Custom | Fully Supported |
 
 ### Multi-Provider LLM Support
 
 | Provider | Models | Best For |
 |----------|--------|----------|
 | **Claude** (Anthropic) | Opus 4.5, Sonnet 4.5, Haiku 4.5 | Complex reasoning, code quality |
-| **GPT-5** (OpenAI) | GPT-5.1, GPT-5 Mini, GPT-5 Nano | Versatility, speed |
-| **Gemini** (Google) | Gemini 3 Pro, Gemini 2.5 Pro, Gemini 2.5 Flash | Fast generation, cost efficiency |
+| **GPT** (OpenAI) | GPT-5.1, GPT-5.1 Thinking, GPT-4o, GPT-4o Mini | Versatility, speed |
+| **Gemini** (Google) | Gemini 3 Pro, Gemini 2.0 Flash, Gemini 1.5 Pro | Fast generation, cost efficiency |
 
 ### Production Deployment
 - **Cloudflare Workers**: Edge-deployed API proxy
@@ -97,25 +97,19 @@ The interactive installer will ask:
    ```
    # For React:
    ? Choose a design system:
-     > ShadCN/UI
-       Mantine
+     > Mantine - Most Popular
        Chakra UI
-       Ant Design
+       Material UI
        Custom
 
    # For Vue:
    ? Choose a design system:
-     > Vuetify
-       Element Plus
-       PrimeVue
-       Quasar
+     > Vuetify - Most Popular
        Custom
 
    # For Angular:
    ? Choose a design system:
-     > Angular Material
-       PrimeNG
-       NG-ZORRO
+     > Angular Material - Most Popular
        Custom
    ```
 
@@ -254,11 +248,31 @@ export class DataTableComponent { }
 
 ## MCP Server Integration
 
-Story UI includes a Model Context Protocol (MCP) server, allowing direct integration with AI clients like Claude Desktop.
+Story UI includes a Model Context Protocol (MCP) server, allowing direct integration with AI clients like Claude Desktop and Claude Code.
 
-### Local MCP Setup
+### Claude Code Integration (Recommended)
 
-Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
+The easiest way to connect is via Claude Code's built-in MCP support:
+
+```bash
+# Add remote HTTP MCP server
+claude mcp add --transport http story-ui https://your-worker.workers.dev/mcp
+
+# Or for local development
+claude mcp add --transport http story-ui-local http://localhost:4005/mcp
+```
+
+### Claude Desktop Integration
+
+Claude Desktop now supports a connector UI for adding MCP servers. Simply:
+
+1. Open Claude Desktop Settings
+2. Navigate to the MCP Servers section
+3. Add a new server with:
+   - **Name**: Story UI
+   - **URL**: `https://your-worker.workers.dev/mcp` (production) or `http://localhost:4005/mcp` (local)
+
+For advanced users who prefer manual configuration, add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
 
 ```json
 {
@@ -274,28 +288,13 @@ Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_
 }
 ```
 
-Then start the Story UI HTTP server:
+### Starting the Local MCP Server
+
 ```bash
 npx story-ui start
 ```
 
-### Production MCP Setup
-
-Connect Claude Desktop to your deployed Story UI instance:
-
-```json
-{
-  "mcpServers": {
-    "story-ui-production": {
-      "command": "npx",
-      "args": ["mcp-remote", "https://your-worker.workers.dev/mcp"],
-      "env": {}
-    }
-  }
-}
-```
-
-This allows you to generate stories in your production environment directly from Claude Desktop, with all your design system configurations loaded.
+This starts the Story UI HTTP server with MCP endpoint at `http://localhost:4005/mcp`.
 
 ### Available MCP Commands
 
@@ -365,19 +364,50 @@ wrangler pages deploy dist --project-name=your-app-name
 
 Update the frontend to point to your worker URL in the configuration.
 
-### Alternative: Railway Backend
+### Railway Deployment (Recommended)
 
-For a full Node.js environment:
+Railway provides the most complete deployment experience with:
+- Full Storybook dev server with HMR
+- Integrated Story UI MCP server
+- Live story generation directly in the sidebar
+- Easy environment variable management
+
+**1. Deploy to Railway**
 
 ```bash
-cd mcp-server
+# From your Storybook project with Story UI configured
+npx story-ui deploy --live --platform=railway --dry-run
+
+# Review the generated configuration, then deploy:
 railway up
+```
+
+**2. Set Environment Variables in Railway Dashboard:**
+- `ANTHROPIC_API_KEY` - Required for Claude models
+- `OPENAI_API_KEY` - Optional for OpenAI models
+- `GEMINI_API_KEY` - Optional for Gemini models
+- `STORY_UI_DEV_MODE=true` - Enable file-based story storage
+
+**3. Connect External MCP Clients**
+
+Once deployed, your Railway instance provides an MCP endpoint that AI clients can connect to:
 
-# Set environment variables in Railway dashboard:
-# - ANTHROPIC_API_KEY
-# - OPENAI_API_KEY (optional)
-# - GEMINI_API_KEY (optional)
 ```
+https://your-app.up.railway.app/story-ui
+```
+
+**For Claude Desktop/Claude Code:**
+```bash
+# Add your Railway deployment as an MCP server
+claude mcp add --transport http story-ui https://your-app.up.railway.app/story-ui
+```
+
+**For other MCP clients**, use the full URL:
+```
+https://your-app.up.railway.app/mcp
+```
+
+This allows you to generate stories from Claude Desktop, ChatGPT (with MCP support), or any other MCP-compatible AI client, and see them appear in your deployed Storybook instance.
 
 ---
 

package/dist/cli/deploy.d.ts

@@ -1,12 +1,13 @@
 interface DeployOptions {
+    live?: boolean;
+    platform?: 'railway' | 'fly';
+    projectName?: string;
+    dryRun?: boolean;
     backend?: boolean;
     frontend?: boolean;
     app?: boolean;
-    platform?: 'railway' | 'render' | 'fly';
     backendUrl?: string;
     storybookDir?: string;
-    projectName?: string;
-    dryRun?: boolean;
     init?: boolean;
     edge?: boolean;
     pages?: boolean;

package/dist/cli/deploy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deploy.d.ts","sourceRoot":"","sources":["../../cli/deploy.ts"],"names":[],"mappings":"AASA,UAAU,aAAa;IAErB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAotBD,wBAAsB,aAAa,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CAwHzE"}
+{"version":3,"file":"deploy.d.ts","sourceRoot":"","sources":["../../cli/deploy.ts"],"names":[],"mappings":"AASA,UAAU,aAAa;IAErB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AA6hCD,wBAAsB,aAAa,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CA0JzE"}

package/dist/cli/deploy.js

@@ -34,6 +34,360 @@ 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 '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 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 '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 '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 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
  */
@@ -116,61 +470,6 @@ async function deployToRailway(dryRun) {
         return null;
     }
 }
-/**
- * Deploy backend to Render
- */
-async function deployToRender(dryRun) {
-    console.log('\n🎨 Deploying backend to Render...\n');
-    const pkgRoot = getPackageRoot();
-    // Create render.yaml if it doesn't exist
-    const renderYamlPath = path.join(pkgRoot, 'render.yaml');
-    if (!fs.existsSync(renderYamlPath)) {
-        console.log('📝 Creating render.yaml...');
-        const renderYaml = `services:
-  - type: web
-    name: story-ui-backend
-    env: node
-    buildCommand: npm install && npm run build
-    startCommand: node dist/mcp-server/index.js
-    healthCheckPath: /story-ui/providers
-    envVars:
-      - key: NODE_ENV
-        value: production
-      - key: PORT
-        value: 4001
-      - key: CLAUDE_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');
-    }
-    if (dryRun) {
-        console.log('[DRY RUN] render.yaml created at:', renderYamlPath);
-        console.log('[DRY RUN] To deploy:');
-        console.log('   1. Push this repo to GitHub');
-        console.log('   2. Go to https://render.com');
-        console.log('   3. Create new Web Service from your repo');
-        console.log('   4. Set environment variables');
-        return 'https://dry-run.onrender.com';
-    }
-    console.log('\n📋 Render deployment is Git-based.');
-    console.log('   To deploy to Render:\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 render.yaml config');
-    console.log('   6. Add your API keys as environment variables:');
-    console.log('      - CLAUDE_API_KEY');
-    console.log('      - OPENAI_API_KEY');
-    console.log('      - GEMINI_API_KEY');
-    console.log('\n   render.yaml has been created in your project root.');
-    return null;
-}
 /**
  * Deploy backend to Fly.io
  */
@@ -334,12 +633,12 @@ async function deployStorybook(backendUrl, storybookDir, projectName, dryRun) {
     }
 }
 /**
- * Build and deploy standalone production app (Lovable/Bolt-style)
+ * Build and deploy standalone production app
  * This builds a React app with the user's component library bundled in
  */
 async function deployProductionApp(backendUrl, projectName, dryRun) {
     console.log('\n🚀 Building Standalone Production App...\n');
-    console.log('   This creates a Lovable/Bolt-style UI with your component library\n');
+    console.log('   This creates a standalone web app with your component library\n');
     const pkgRoot = getPackageRoot();
     const userCwd = process.cwd();
     const templateDir = path.join(pkgRoot, 'templates/production-app');
@@ -616,7 +915,7 @@ function printSummary(backendUrl, frontendUrl, appUrl) {
     }
     if (appUrl) {
         console.log(`\n🚀 Production App: ${appUrl}`);
-        console.log('   This is your Lovable/Bolt-style UI with your component library');
+        console.log('   This is your standalone web app with your component library');
         console.log('   Users can prompt and see live-rendered components!');
     }
     if (frontendUrl) {
@@ -660,7 +959,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;
@@ -671,15 +995,12 @@ export async function deployCommand(options) {
             case 'railway':
                 backendUrl = await deployToRailway(options.dryRun || false);
                 break;
-            case 'render':
-                backendUrl = await deployToRender(options.dryRun || false);
-                break;
             case 'fly':
                 backendUrl = await deployToFly(options.dryRun || false);
                 break;
             default:
                 console.error(`❌ Unknown platform: ${platform}`);
-                console.log('   Supported platforms: railway, render, fly');
+                console.log('   Supported platforms: railway, fly');
                 return;
         }
         if (!backendUrl && !options.dryRun) {
@@ -717,40 +1038,45 @@ 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), 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 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');
     }
 }

package/dist/cli/index.js

@@ -264,21 +264,23 @@ program
 });
 program
     .command('deploy')
-    .description('Deploy Story UI to production (backend + standalone app)')
-    // New recommended approach
-    .option('--backend', 'Deploy MCP server backend to Railway/Render/Fly.io')
-    .option('--app', 'Deploy standalone production app (Lovable/Bolt-style with live preview)')
-    .option('--frontend', 'Deploy Storybook frontend (legacy, use --app instead)')
-    .option('--platform <platform>', 'Backend platform: railway (default), render, fly', 'railway')
-    .option('--backend-url <url>', 'Use existing backend URL for app/frontend deployment')
-    .option('--storybook-dir <dir>', 'Path to Storybook project (for --frontend only)')
+    .description('Deploy Story UI to production')
+    // RECOMMENDED: Live Storybook deployment
+    .option('--live', 'Deploy Storybook in DEV MODE with MCP server (RECOMMENDED)')
+    .option('--platform <platform>', 'Platform: railway (default), render, fly', 'railway')
+    .option('--dry-run', 'Generate deployment files only, don\'t deploy')
+    // Alternative approaches
+    .option('--backend', 'Deploy only the MCP server backend')
+    .option('--app', 'Deploy standalone production app (static build)')
+    .option('--frontend', 'Deploy Storybook static build (legacy)')
+    .option('--backend-url <url>', 'Use existing backend URL for app/frontend')
+    .option('--storybook-dir <dir>', 'Path to Storybook project')
     .option('--project-name <name>', 'Project name prefix', 'story-ui')
-    .option('--dry-run', 'Show what would be deployed without deploying')
     // Legacy flags (deprecated)
-    .option('--init', '[DEPRECATED] Initialize deployment templates')
-    .option('--edge', '[DEPRECATED] Deploy Edge Worker only')
-    .option('--pages', '[DEPRECATED] Deploy Pages UI only')
-    .option('--all', '[DEPRECATED] Deploy both Edge Worker and Pages UI')
+    .option('--init', '[DEPRECATED] Use --live instead')
+    .option('--edge', '[DEPRECATED] Use --live instead')
+    .option('--pages', '[DEPRECATED] Use --live instead')
+    .option('--all', '[DEPRECATED] Use --live instead')
     .action(async (options) => {
     await deployCommand(options);
 });

package/dist/cli/setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../cli/setup.ts"],"names":[],"mappings":"AAkCA;;GAEG;AACH,wBAAgB,iCAAiC,SA8ChD;AAiYD,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,YAAY,CAAC,OAAO,GAAE,YAAiB,iBA2wB5D"}
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../cli/setup.ts"],"names":[],"mappings":"AAkCA;;GAEG;AACH,wBAAgB,iCAAiC,SA8ChD;AA2VD,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,YAAY,CAAC,OAAO,GAAE,YAAiB,iBAwsB5D"}

package/dist/cli/setup.js

@@ -87,7 +87,7 @@ function setupStorybookPreview(designSystem) {
         return;
     }
     // Verify required packages are installed before creating preview
-    if (['antd', 'mantine', 'chakra'].includes(designSystem)) {
+    if (['mantine', 'chakra'].includes(designSystem)) {
         const packageJsonPath = path.join(process.cwd(), 'package.json');
         if (fs.existsSync(packageJsonPath)) {
             const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
@@ -119,18 +119,6 @@ function setupStorybookPreview(designSystem) {
       <ChakraProvider value={defaultSystem}>
         <Story />
       </ChakraProvider>
-    )`
-        },
-        antd: {
-            imports: [
-                "import type { Preview } from '@storybook/react-vite'",
-                "import { ConfigProvider } from 'antd'",
-                "import React from 'react'"
-            ],
-            decorator: `(Story) => (
-      <ConfigProvider>
-        <Story />
-      </ConfigProvider>
     )`
         },
         mantine: {
@@ -144,18 +132,6 @@ function setupStorybookPreview(designSystem) {
       <MantineProvider>
         <Story />
       </MantineProvider>
-    )`
-        },
-        shadcn: {
-            imports: [
-                "import type { Preview } from '@storybook/react-vite'",
-                "import '../src/index.css'", // or globals.css for Tailwind styles
-                "import React from 'react'"
-            ],
-            decorator: `(Story) => (
-      <div className="min-h-screen bg-background text-foreground">
-        <Story />
-      </div>
     )`
         }
     };
@@ -199,16 +175,16 @@ const LLM_PROVIDERS = {
         description: 'Recommended - Best for complex reasoning and code quality'
     },
     openai: {
-        name: 'OpenAI (GPT-5)',
+        name: 'OpenAI (GPT)',
         envKey: 'OPENAI_API_KEY',
-        models: ['gpt-5.1', 'gpt-5-mini', 'gpt-5-nano'],
+        models: ['gpt-5.1', 'gpt-5.1-thinking', 'gpt-4o', 'gpt-4o-mini'],
         docsUrl: 'https://platform.openai.com/api-keys',
         description: 'Versatile and fast'
     },
     gemini: {
         name: 'Google Gemini',
         envKey: 'GEMINI_API_KEY',
-        models: ['gemini-3-pro-preview', 'gemini-2.5-pro', 'gemini-2.5-flash'],
+        models: ['gemini-3-pro', 'gemini-2.0-flash-exp', 'gemini-2.0-flash', 'gemini-1.5-pro'],
         docsUrl: 'https://aistudio.google.com/app/apikey',
         description: 'Cost-effective with good performance'
     }
@@ -216,13 +192,6 @@ const LLM_PROVIDERS = {
 // Design system installation configurations (organized by framework)
 const DESIGN_SYSTEM_CONFIGS = {
     // React design systems
-    antd: {
-        packages: ['antd'],
-        name: 'Ant Design',
-        importPath: 'antd',
-        additionalSetup: 'import "antd/dist/reset.css";',
-        framework: 'react'
-    },
     mantine: {
         packages: ['@mantine/core', '@mantine/hooks', '@mantine/notifications'],
         name: 'Mantine',
@@ -244,13 +213,6 @@ const DESIGN_SYSTEM_CONFIGS = {
         additionalSetup: 'import { ThemeProvider } from "@mui/material/styles";',
         framework: 'react'
     },
-    shadcn: {
-        packages: ['class-variance-authority', 'clsx', 'tailwind-merge', '@radix-ui/react-slot', 'lucide-react'],
-        name: 'shadcn/ui',
-        importPath: '@/components/ui',
-        additionalSetup: '// shadcn/ui components are locally installed. Run: npx shadcn@latest init',
-        framework: 'react'
-    },
     // Angular design systems
     'angular-material': {
         packages: ['@angular/material', '@angular/cdk'],
@@ -541,10 +503,13 @@ export async function setupCommand(options = {}) {
                 return [
                     baseChoice,
                     { name: '🎯 Mantine (@mantine/core) - Most Popular', value: 'mantine' },
+                    { name: '⚡ Chakra UI (@chakra-ui/react)', value: 'chakra' },
+                    { name: '🎨 Material UI (@mui/material)', value: 'mui' },
                     customChoice
                 ];
         }
     };
+    ;
     // Non-interactive mode: build answers from CLI options
     let answers;
     if (options.yes || options.designSystem) {
@@ -767,31 +732,6 @@ export async function setupCommand(options = {}) {
             }
         };
     }
-    else if (answers.designSystem === 'antd') {
-        config = {
-            importPath: 'antd',
-            componentPrefix: '',
-            layoutRules: {
-                multiColumnWrapper: 'Row',
-                columnComponent: 'Col',
-                containerComponent: 'div',
-                layoutExamples: {
-                    twoColumn: `<Row gutter={16}>
-  <Col span={12}>
-    <Card title="Left Card" bordered={false}>
-      <p>Left content goes here</p>
-    </Card>
-  </Col>
-  <Col span={12}>
-    <Card title="Right Card" bordered={false}>
-      <p>Right content goes here</p>
-    </Card>
-  </Col>
-</Row>`
-                }
-            }
-        };
-    }
     else if (answers.designSystem === 'mantine') {
         config = {
             importPath: '@mantine/core',
@@ -823,52 +763,6 @@ export async function setupCommand(options = {}) {
             }
         };
     }
-    else if (answers.designSystem === 'shadcn') {
-        config = {
-            importPath: '@/components/ui',
-            componentPrefix: '',
-            layoutRules: {
-                multiColumnWrapper: 'div',
-                columnComponent: 'div',
-                containerComponent: 'div',
-                layoutExamples: {
-                    twoColumn: `<div className="grid grid-cols-2 gap-4">
-  <Card>
-    <CardHeader>
-      <CardTitle>Left Card</CardTitle>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm text-muted-foreground">
-        Left content goes here
-      </p>
-    </CardContent>
-  </Card>
-  <Card>
-    <CardHeader>
-      <CardTitle>Right Card</CardTitle>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm text-muted-foreground">
-        Right content goes here
-      </p>
-    </CardContent>
-  </Card>
-</div>`
-                }
-            },
-            designSystemGuidelines: {
-                name: 'shadcn/ui',
-                additionalNotes: `
-shadcn/ui components are locally installed in the project.
-- Import components from "@/components/ui" (e.g., import { Button } from "@/components/ui/button")
-- Use the cn() utility from "@/lib/utils" for conditional classes
-- Components use Tailwind CSS for styling
-- Use CSS variables for theming (--primary, --secondary, --muted, etc.)
-- Prefer composition over configuration
-        `.trim()
-            }
-        };
-    }
     else if (answers.designSystem === 'mui') {
         config = {
             importPath: '@mui/material',

package/dist/story-generator/llm-providers/settings-manager.js

@@ -18,7 +18,7 @@ import { logger } from '../logger.js';
  */
 export function loadSettingsConfig() {
     const defaultProvider = process.env.DEFAULT_PROVIDER || 'claude';
-    const defaultModel = process.env.DEFAULT_MODEL || 'claude-sonnet-4-5-20250929';
+    const defaultModel = process.env.DEFAULT_MODEL || 'claude-opus-4-5-20251101';
     // Parse allowed providers
     const allowedProvidersEnv = process.env.ALLOWED_PROVIDERS;
     const allowedProviders = allowedProvidersEnv
@@ -79,14 +79,14 @@ export function getAvailableModels(provider, config) {
     // Mark recommended models based on capabilities
     const recommendedModels = [
         // Claude
+        'claude-opus-4-5-20251101', // Claude Opus 4.5 - flagship
         'claude-sonnet-4-5-20250929',
-        'claude-opus-4-5-20251101',
         // OpenAI
-        'gpt-5.1',
+        'gpt-5.1', // GPT-5.1 - flagship
         'gpt-4o',
         // Gemini
+        'gemini-3-pro-preview', // Gemini 3 Pro Preview - flagship
         'gemini-3-pro',
-        'gemini-2.0-flash',
     ];
     return filteredModels.map((model) => ({
         id: model.id,

package/dist/story-generator/productionGitignoreManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"productionGitignoreManager.d.ts","sourceRoot":"","sources":["../../story-generator/productionGitignoreManager.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD;;GAEG;AACH,qBAAa,0BAA0B;IACrC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,YAAY,CAAU;gBAElB,MAAM,EAAE,aAAa,EAAE,WAAW,GAAE,MAAsB;IAMtE;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAgBnC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAW7B;;OAEG;IACH,yBAAyB,IAAI,IAAI;IAQjC;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAUnC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAQpC;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAmB/B;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAY/B;;OAEG;IACH,0BAA0B,IAAI,MAAM;IAuBpC;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAStC;;OAEG;IACH,OAAO,CAAC,+BAA+B;IA0BvC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAmBhC;;OAEG;IACH,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAkBrB;;OAEG;IACH,OAAO,CAAC,aAAa;IAWrB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAOhC;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAyCtC;;OAEG;IACH,iBAAiB,CAAC,MAAM,GAAE,MAAgC,GAAG,IAAI;IAoCjE;;OAEG;IACH,sBAAsB,IAAI,MAAM;IAYhC;;OAEG;IACH,gBAAgB,IAAI,OAAO;CAG5B;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,0BAA0B,CAIhH"}
+{"version":3,"file":"productionGitignoreManager.d.ts","sourceRoot":"","sources":["../../story-generator/productionGitignoreManager.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD;;GAEG;AACH,qBAAa,0BAA0B;IACrC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,YAAY,CAAU;gBAElB,MAAM,EAAE,aAAa,EAAE,WAAW,GAAE,MAAsB;IAMtE;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAuBnC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAW7B;;OAEG;IACH,yBAAyB,IAAI,IAAI;IAQjC;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAUnC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAQpC;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAmB/B;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAY/B;;OAEG;IACH,0BAA0B,IAAI,MAAM;IAuBpC;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAStC;;OAEG;IACH,OAAO,CAAC,+BAA+B;IA0BvC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAmBhC;;OAEG;IACH,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAkBrB;;OAEG;IACH,OAAO,CAAC,aAAa;IAWrB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAOhC;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAyCtC;;OAEG;IACH,iBAAiB,CAAC,MAAM,GAAE,MAAgC,GAAG,IAAI;IAoCjE;;OAEG;IACH,sBAAsB,IAAI,MAAM;IAYhC;;OAEG;IACH,gBAAgB,IAAI,OAAO;CAG5B;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,0BAA0B,CAIhH"}

package/dist/story-generator/productionGitignoreManager.js

@@ -14,6 +14,12 @@ export class ProductionGitignoreManager {
      * Detects if we're running in a production/read-only environment
      */
     detectProductionEnvironment() {
+        // Explicit override: Force development mode for file-based story generation
+        // Use this on Railway/Render when running Storybook dev mode
+        if (process.env.STORY_UI_DEV_MODE === 'true') {
+            logger.log('📁 STORY_UI_DEV_MODE=true - forcing file-based story generation');
+            return false;
+        }
         // Check common production environment indicators
         const prodIndicators = [
             process.env.NODE_ENV === 'production',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",