@tpitre/story-ui 2.4.0 → 2.6.0

package/dist/cli/setup.d.ts

@@ -4,6 +4,7 @@
 export declare function cleanupDefaultStorybookComponents(): void;
 export interface SetupOptions {
     designSystem?: string;
+    llmProvider?: 'claude' | 'openai' | 'gemini';
     yes?: boolean;
     skipInstall?: boolean;
 }

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;AAuWD,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,YAAY,CAAC,OAAO,GAAE,YAAiB,iBAsvB5D"}
+{"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,iBAqxB5D"}

package/dist/cli/setup.js

@@ -189,6 +189,30 @@ export default preview;
     fs.writeFileSync(previewTsxPath, previewContent);
     console.log(chalk.green(`✅ Created .storybook/preview.tsx with ${designSystem} provider setup`));
 }
+// LLM Provider configurations
+const LLM_PROVIDERS = {
+    claude: {
+        name: 'Claude (Anthropic)',
+        envKey: 'ANTHROPIC_API_KEY',
+        models: ['claude-sonnet-4-20250514', 'claude-3-5-sonnet-20241022', 'claude-3-haiku-20240307'],
+        docsUrl: 'https://console.anthropic.com/',
+        description: 'Recommended - Best for complex reasoning and code quality'
+    },
+    openai: {
+        name: 'OpenAI (GPT-4)',
+        envKey: 'OPENAI_API_KEY',
+        models: ['gpt-4o', 'gpt-4-turbo', 'gpt-3.5-turbo'],
+        docsUrl: 'https://platform.openai.com/api-keys',
+        description: 'Versatile and fast'
+    },
+    gemini: {
+        name: 'Google Gemini',
+        envKey: 'GEMINI_API_KEY',
+        models: ['gemini-2.0-flash', 'gemini-1.5-pro', 'gemini-1.5-flash'],
+        docsUrl: 'https://aistudio.google.com/app/apikey',
+        description: 'Cost-effective with good performance'
+    }
+};
 // Design system installation configurations (organized by framework)
 const DESIGN_SYSTEM_CONFIGS = {
     // React design systems
@@ -544,14 +568,17 @@ export async function setupCommand(options = {}) {
             console.log(chalk.yellow(`Valid options: ${validSystems.join(', ')}`));
             process.exit(1);
         }
+        const llmProvider = options.llmProvider || 'claude';
         answers = {
             designSystem,
             installDesignSystem: !options.skipInstall && Object.keys(DESIGN_SYSTEM_CONFIGS).includes(designSystem),
             generatedStoriesPath: './src/stories/generated/',
+            llmProvider,
             mcpPort,
             hasApiKey: false,
         };
         console.log(chalk.blue(`📦 Design system: ${designSystem}`));
+        console.log(chalk.blue(`🤖 AI Provider: ${LLM_PROVIDERS[llmProvider]?.name || llmProvider}`));
         console.log(chalk.blue(`📁 Generated stories: ${answers.generatedStoriesPath}`));
         console.log(chalk.blue(`🔌 MCP port: ${mcpPort}`));
         if (options.skipInstall) {
@@ -623,16 +650,33 @@ export async function setupCommand(options = {}) {
                     return available ? true : `Port ${value} is already in use`;
                 }
             },
+            {
+                type: 'list',
+                name: 'llmProvider',
+                message: 'Which AI provider would you like to use?',
+                choices: [
+                    { name: `${chalk.green('Claude (Anthropic)')} - ${chalk.gray('Recommended for complex reasoning and code quality')}`, value: 'claude' },
+                    { name: `${chalk.blue('OpenAI (GPT-4)')} - ${chalk.gray('Versatile and fast')}`, value: 'openai' },
+                    { name: `${chalk.yellow('Google Gemini')} - ${chalk.gray('Cost-effective with good performance')}`, value: 'gemini' }
+                ],
+                default: 'claude'
+            },
             {
                 type: 'confirm',
                 name: 'hasApiKey',
-                message: 'Do you have a Claude API key? (You can add it later)',
+                message: (promptAnswers) => {
+                    const provider = LLM_PROVIDERS[promptAnswers.llmProvider];
+                    return `Do you have a ${provider?.name || 'provider'} API key? (You can add it later)`;
+                },
                 default: false
             },
             {
                 type: 'password',
                 name: 'apiKey',
-                message: 'Enter your Claude API key:',
+                message: (promptAnswers) => {
+                    const provider = LLM_PROVIDERS[promptAnswers.llmProvider];
+                    return `Enter your ${provider?.name || 'provider'} API key:`;
+                },
                 when: (promptAnswers) => promptAnswers.hasApiKey,
                 validate: (input) => input.trim() ? true : 'API key is required'
             }
@@ -906,6 +950,7 @@ Material UI (MUI) is a React component library implementing Material Design.
     config.defaultAuthor = 'Story UI AI';
     config.componentFramework = componentFramework; // react, angular, vue, svelte, or web-components
     config.storybookFramework = storybookFramework; // e.g., @storybook/react-vite, @storybook/angular
+    config.llmProvider = answers.llmProvider || 'claude'; // claude, openai, or gemini
     // Create configuration file
     const configContent = `module.exports = ${JSON.stringify(config, null, 2)};`;
     const configPath = path.join(process.cwd(), 'story-ui.config.js');
@@ -972,23 +1017,32 @@ Material UI (MUI) is a React component library implementing Material Design.
         console.log(chalk.green('✅ Created story-ui-docs/ directory structure'));
         console.log(chalk.gray('   Add your design system documentation to enhance AI story generation'));
     }
-    // Create .env file from template
-    const envSamplePath = path.resolve(__dirname, '../../.env.sample');
+    // Create .env file with provider-specific configuration
     const envPath = path.join(process.cwd(), '.env');
+    const selectedProvider = answers.llmProvider || 'claude';
+    const providerConfig = LLM_PROVIDERS[selectedProvider];
     if (!fs.existsSync(envPath)) {
-        if (fs.existsSync(envSamplePath)) {
-            let envContent = fs.readFileSync(envSamplePath, 'utf-8');
-            // If user provided API key, update the template
-            if (answers.apiKey) {
-                envContent = envContent.replace('your-claude-api-key-here', answers.apiKey);
-            }
-            // Update the VITE_STORY_UI_PORT with the chosen port
-            if (answers.mcpPort) {
-                envContent = envContent.replace('VITE_STORY_UI_PORT=4001', `VITE_STORY_UI_PORT=${answers.mcpPort}`);
-            }
-            fs.writeFileSync(envPath, envContent);
-            console.log(chalk.green(`✅ Created .env file${answers.apiKey ? ' with your API key' : ''}`));
-        }
+        // Generate .env content based on selected provider
+        let envContent = `# Story UI Configuration
+# Generated by: npx story-ui init
+
+# LLM Provider: ${providerConfig?.name || selectedProvider}
+LLM_PROVIDER=${selectedProvider}
+
+# API Key for ${providerConfig?.name || selectedProvider}
+# Get your key from: ${providerConfig?.docsUrl || 'your provider dashboard'}
+${providerConfig?.envKey || 'API_KEY'}=${answers.apiKey || 'your-api-key-here'}
+
+# Story UI MCP Server Port
+VITE_STORY_UI_PORT=${answers.mcpPort || '4001'}
+
+# Optional: Add additional provider keys if you want to switch providers later
+# ANTHROPIC_API_KEY=your-anthropic-key
+# OPENAI_API_KEY=your-openai-key
+# GEMINI_API_KEY=your-gemini-key
+`;
+        fs.writeFileSync(envPath, envContent);
+        console.log(chalk.green(`✅ Created .env file for ${providerConfig?.name || selectedProvider}${answers.apiKey ? ' with your API key' : ''}`));
     }
     else {
         console.log(chalk.yellow('⚠️  .env file already exists, skipping'));
@@ -1077,11 +1131,13 @@ Material UI (MUI) is a React component library implementing Material Design.
         console.log(`📦 Import path: ${chalk.cyan(config.importPath)}`);
     }
     if (!answers.apiKey) {
-        console.log(chalk.yellow('\n⚠️  Don\'t forget to add your Claude API key to .env file!'));
-        console.log('   Get your key from: https://console.anthropic.com/');
+        const provider = LLM_PROVIDERS[answers.llmProvider] || LLM_PROVIDERS.claude;
+        console.log(chalk.yellow(`\n⚠️  Don't forget to add your ${provider.name} API key to .env file!`));
+        console.log(`   Get your key from: ${provider.docsUrl}`);
     }
+    const providerName = LLM_PROVIDERS[answers.llmProvider]?.name || 'your LLM provider';
     console.log('\n🚀 Next steps:');
-    console.log('1. ' + (answers.apiKey ? 'Start' : 'Add your Claude API key to .env, then start') + ' Story UI: npm run story-ui');
+    console.log('1. ' + (answers.apiKey ? 'Start' : `Add your ${providerName} API key to .env, then start`) + ' Story UI: npm run story-ui');
     console.log('2. Start Storybook: npm run storybook');
     console.log('3. Navigate to "Story UI > Story Generator" in your Storybook sidebar');
     console.log('4. Start generating UI with natural language prompts!');

package/package.json

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