@tpitre/story-ui 2.5.0 → 2.6.0

package/README.md

@@ -1,170 +1,264 @@
-# Story UI 🎨
+# Story UI
 
-*AI-powered Storybook story generator for any React component library*
+*AI-powered Storybook story generator for any JavaScript framework*
 
 [![npm version](https://badge.fury.io/js/%40tpitre%2Fstory-ui.svg)](https://badge.fury.io/js/%40tpitre%2Fstory-ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-Story UI revolutionizes component documentation by automatically generating Storybook stories through AI-powered conversations. Simply chat with the AI about your components and watch as comprehensive stories are created in real-time.
-
-## ✨ Features
-
-### 🎯 Core Features
-- **AI-Powered Story Generation**: Chat with AI to create comprehensive Storybook stories
-- **Intelligent Iteration Support**: Modify existing stories without losing your work
-- **Multi-Component Library Support**: Works with any React component library
-- **Real-time Story Updates**: See your stories appear in Storybook instantly
-- **Intelligent Component Discovery**: Automatically finds and analyzes your components
-- **TypeScript Support**: Full TypeScript integration with type-aware story generation
-
-### 🆕 Version 3.0 Features
-- **Multi-Provider LLM Support**: Choose between Claude, OpenAI, or Gemini
-- **Production Deployment**: Deploy as a standalone web app with Railway or Cloudflare
-- **Post-Generation Validation**: Automatic syntax validation with error detection
-- **Children Props Preservation**: Intelligent handling of `children: 'text'` in args
-- **Image/Vision Support**: Attach screenshots for visual component requests
-- **In-Memory Storage**: Production mode without file system writes
-- **REST API**: Full CRUD operations for story management
-- **Design System Agnosticism**: Core code is framework-independent
-
-### 📚 Documentation System (New!)
-- **Auto-Generated Structure**: `npx story-ui init` creates a `story-ui-docs/` directory template
-- **Directory-Based Documentation**: Organize design system docs in a structured directory
-- **Multiple Format Support**: Markdown, JSON, HTML, and text files
-- **Legacy Support**: Still supports single `story-ui-considerations.md` file
-- **Auto-Discovery**: Automatically finds and loads documentation to enhance AI story generation
-
-### 🎨 Advanced Features
-- **Memory-Persistent Stories**: Stories are remembered across sessions
-- **Git Integration**: Automatic gitignore management for generated files
-- **Production Mode**: Clean deployment without generated stories
-- **Auto Port Detection**: Automatically finds available ports
-- **Hot Reload Integration**: Stories update automatically as you chat
-- **MCP Server Integration**: Use Story UI directly from Claude Desktop or other MCP clients
-
-## 🚀 Quick Start
+Story UI revolutionizes component documentation by automatically generating Storybook stories through AI-powered conversations. Works with **any framework** (React, Vue, Angular, Svelte, Web Components) and **any LLM provider** (Claude, OpenAI, Gemini).
+
+## 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)
+- **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
+
+---
+
+## Quick Start
 
 ```bash
 # Install Story UI
 npm install -D @tpitre/story-ui
 
-# Initialize Story UI in your project
+# Initialize in your project
 npx story-ui init
 
-# Start generating stories (Story UI will pick 4001 or the next free port)
+# Start generating stories
 npm run story-ui
-
-# Need a custom port? Just pass the flag:
-npm run story-ui -- --port 4005
 ```
 
-Story UI will automatically:
-- ✅ Discover your components
-- ✅ Set up the chat interface
-- ✅ Create a `story-ui-docs/` directory structure for your design system documentation
-- ✅ Generate stories as you type
-- ✅ Load your design system documentation to enhance AI generation
+Story UI will guide you through:
+1. Selecting your JavaScript framework
+2. Choosing a design system (or using your own)
+3. Configuring your preferred AI provider
+4. Setting up component discovery
+
+---
+
+## Features
 
-## 📚 How It Works
+### Core Capabilities
+- **AI-Powered Story Generation**: Describe what you want in natural language
+- **Intelligent Iteration**: Modify existing stories without losing your work
+- **Real-time Preview**: See generated stories instantly in Storybook
+- **TypeScript Support**: Full type-aware story generation
+- **Vision Support**: Attach screenshots for visual component requests
 
-Story UI uses advanced AI to understand your component library and generate appropriate stories:
+### Multi-Framework Support
 
-1. **Component Discovery**: Story UI scans your codebase for available components
-2. **Documentation Loading**: Reads your design system documentation (if available)
-3. **AI Generation**: Claude generates stories using discovered components
-4. **Iteration Support**: Previous code is preserved when modifying stories
-5. **Hot Reload**: Stories appear instantly in your Storybook
+| 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 |
 
-## 🎯 Configuration
+### Multi-Provider LLM Support
+
+| Provider | Models | Best For |
+|----------|--------|----------|
+| **Claude** (Anthropic) | claude-sonnet-4, claude-3.5-sonnet, claude-3-haiku | Complex reasoning, code quality |
+| **GPT-4** (OpenAI) | gpt-4o, gpt-4-turbo, gpt-3.5-turbo | Versatility, speed |
+| **Gemini** (Google) | gemini-2.0-flash, gemini-1.5-pro | Fast generation, cost efficiency |
+
+### Production Deployment
+- **Cloudflare Workers**: Edge-deployed API proxy
+- **Cloudflare Pages**: Static frontend hosting
+- **Railway**: Full Node.js backend (alternative)
+- **MCP Integration**: Connect AI clients directly to production
+
+---
+
+## Installation Options
+
+### Option 1: Interactive Setup (Recommended)
+
+```bash
+npx story-ui init
+```
 
-### Basic Configuration (`story-ui.config.js`)
+The interactive installer will ask:
+
+1. **Framework Selection**
+   ```
+   ? Which JavaScript framework are you using?
+     > React
+       Vue
+       Angular
+       Svelte
+       Web Components
+   ```
+
+2. **Design System Selection** (varies by framework)
+   ```
+   # For React:
+   ? Choose a design system:
+     > ShadCN/UI
+       Mantine
+       Chakra UI
+       Ant Design
+       Custom
+
+   # For Vue:
+   ? Choose a design system:
+     > Vuetify
+       Element Plus
+       PrimeVue
+       Quasar
+       Custom
+
+   # For Angular:
+   ? Choose a design system:
+     > Angular Material
+       PrimeNG
+       NG-ZORRO
+       Custom
+   ```
+
+3. **AI Provider Selection**
+   ```
+   ? Which AI provider do you prefer?
+     > Claude (Anthropic) - Recommended
+       OpenAI (GPT-4)
+       Google Gemini
+
+   ? Enter your API key:
+   ```
+
+### Option 2: Manual Configuration
+
+Create `story-ui.config.js` in your project root:
 
 ```javascript
 export default {
+  // Framework: 'react' | 'vue' | 'angular' | 'svelte' | 'web-components'
+  framework: 'react',
+
   // Component library import path
-  importPath: 'your-component-library',
+  importPath: '@mantine/core',
 
-  // Path to your local components (for custom libraries)
+  // Path to custom components
   componentsPath: './src/components',
 
   // Generated stories location
   generatedStoriesPath: './src/stories/generated/',
 
+  // LLM provider configuration
+  llmProvider: 'claude', // 'claude' | 'openai' | 'gemini'
+
   // Story configuration
   storyPrefix: 'Generated/',
-  defaultAuthor: 'Story UI AI',
-
-  // Layout rules for multi-column layouts
-  layoutRules: {
-    multiColumnWrapper: 'div',
-    columnComponent: 'div',
-    containerComponent: 'div'
-  }
+  defaultAuthor: 'Story UI AI'
 };
 ```
 
-## 🌟 Officially Supported Design Systems
-
-Story UI provides guided installation and automatic configuration for the following design systems:
-
-| Design System | Package | Auto Install | Pre-configured |
-|--------------|---------|--------------|----------------|
-| Ant Design | `antd` | ✅ Yes | ✅ Yes |
-| Mantine | `@mantine/core` | ✅ Yes | ✅ Yes |
-| Chakra UI | `@chakra-ui/react` | ✅ Yes | ✅ Yes |
-| Custom | Any React library | ❌ Manual | ✅ Configurable |
-
-When you run `npx story-ui init`, you can choose to automatically install and configure these design systems with optimized layout rules and component mappings.
+---
 
-## 📱 Examples
+## Usage
 
-### Simple Component Story
+### Basic Story Generation
 
+Start the Story UI server:
+```bash
+npm run story-ui
 ```
-You: "Create a button story with different variants"
 
-AI: "I'll create a comprehensive Button story with all available variants..."
+Then describe what you want:
+```
+You: "Create a product card with image, title, price, and add to cart button"
 ```
 
-Result:
+Story UI generates:
 ```tsx
-export const AllVariants = {
+export const ProductCard = {
   render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="tertiary">Tertiary</Button>
-      <Button variant="plain">Plain</Button>
-    </div>
+    <Card shadow="sm" padding="lg" radius="md" withBorder>
+      <Card.Section>
+        <Image src="https://example.com/product.jpg" height={160} alt="Product" />
+      </Card.Section>
+      <Group justify="space-between" mt="md" mb="xs">
+        <Text fw={500}>Product Name</Text>
+        <Badge color="pink">On Sale</Badge>
+      </Group>
+      <Text size="sm" c="dimmed">$29.99</Text>
+      <Button color="blue" fullWidth mt="md" radius="md">
+        Add to Cart
+      </Button>
+    </Card>
   )
 };
 ```
 
-### Complex Layout Story
+### Iterating on Stories
 
+Continue the conversation to refine:
 ```
-You: "Create a product card with image, title, price, and add to cart button"
+You: "Make the button green and add a quantity selector"
+```
+
+Story UI modifies only what you requested, preserving the rest.
 
-AI: "I'll create a product card using your design system components..."
+### Using with Different Frameworks
+
+**Vue Example:**
+```
+You: "Create a user profile card with avatar, name, and edit button"
 ```
 
-### Iterating on Existing Stories
+Generates Vue template:
+```vue
+<template>
+  <v-card class="mx-auto" max-width="400">
+    <v-card-item>
+      <v-avatar size="80">
+        <v-img src="https://example.com/avatar.jpg" alt="User" />
+      </v-avatar>
+      <v-card-title>John Doe</v-card-title>
+      <v-card-subtitle>Software Engineer</v-card-subtitle>
+    </v-card-item>
+    <v-card-actions>
+      <v-btn color="primary" variant="outlined">Edit Profile</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+```
 
+**Angular Example:**
+```
+You: "Create a data table with sorting and pagination"
 ```
-You: "Make the buttons full width"
 
-AI: "I'll modify the existing story to make the buttons full width..."
+Generates Angular component:
+```typescript
+@Component({
+  selector: 'app-data-table',
+  template: `
+    <mat-table [dataSource]="dataSource" matSort>
+      <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+        <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
+      </ng-container>
+      <!-- Additional columns -->
+    </mat-table>
+    <mat-paginator [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons />
+  `
+})
+export class DataTableComponent { }
 ```
 
-The AI will preserve your existing code and only modify what you requested!
+---
 
-## 🤖 MCP Server Integration
+## MCP Server Integration
 
-Story UI can be used as a Model Context Protocol (MCP) server, allowing you to generate stories directly from Claude Desktop or other MCP-compatible clients.
+Story UI includes a Model Context Protocol (MCP) server, allowing direct integration with AI clients like Claude Desktop.
 
-### Quick Setup for Claude Desktop
+### Local MCP Setup
 
-1. Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
+Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
 
 ```json
 {
@@ -173,190 +267,233 @@ Story UI can be used as a Model Context Protocol (MCP) server, allowing you to g
       "command": "npx",
       "args": ["@tpitre/story-ui", "mcp"],
       "env": {
-        "CLAUDE_API_KEY": "your-claude-api-key-here"
+        "ANTHROPIC_API_KEY": "your-api-key"
       }
     }
   }
 }
 ```
 
-2. Start the Story UI HTTP server in your project:
+Then start the Story UI HTTP server:
 ```bash
-story-ui start
+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": {}
+    }
+  }
+}
 ```
 
-3. Restart Claude Desktop
+This allows you to generate stories in your production environment directly from Claude Desktop, with all your design system configurations loaded.
 
-Now you can generate stories directly in Claude Desktop! Just ask:
-- "Use Story UI to create a hero section with a title and CTA button"
+### Available MCP Commands
+
+Once connected, you can use these commands in Claude Desktop:
+- "Use Story UI to create a hero section with a CTA button"
 - "List all available components in Story UI"
+- "Generate a dashboard layout with sidebar navigation"
 - "Show me the stories I've generated"
 
-For detailed MCP setup instructions, see [docs/MCP_INTEGRATION.md](docs/MCP_INTEGRATION.md).
+---
 
-## 📖 Documentation Support
+## Production Deployment
 
-### Directory-Based Documentation (Recommended)
+Story UI v3 can be deployed as a standalone web application accessible from anywhere.
 
-Create a `story-ui-docs/` directory in your project root:
+### Architecture
 
 ```
-story-ui-docs/
-├── README.md                    # Overview and getting started
-├── guidelines/
-│   ├── accessibility.md         # Accessibility guidelines
-│   ├── responsive-design.md     # Responsive design rules
-│   └── brand-guidelines.md      # Brand usage
-├── tokens/
-│   ├── colors.json             # Color tokens
-│   ├── spacing.md              # Spacing system
-│   └── typography.json         # Typography tokens
-├── components/
-│   ├── button.md               # Button documentation
-│   └── forms.md                # Form component docs
-└── patterns/
-    ├── layouts.md              # Layout patterns
-    └── data-tables.md          # Table patterns
+┌─────────────────────────────────────────────────────────────┐
+│                    Cloudflare Pages                          │
+│                   (Your Frontend App)                        │
+│  ┌─────────────────────────────────────────────────────────┐│
+│  │  - Chat Interface                                        ││
+│  │  - Live Component Preview                                ││
+│  │  - Syntax Highlighted Code View                          ││
+│  │  - Provider/Model Selection                              ││
+│  └─────────────────────────────────────────────────────────┘│
+└──────────────────────────┬──────────────────────────────────┘
+                           │
+                           ▼
+┌─────────────────────────────────────────────────────────────┐
+│               Cloudflare Workers Edge                        │
+│  ┌─────────────────────────────────────────────────────────┐│
+│  │  - /story-ui/providers → Available providers/models      ││
+│  │  - /story-ui/claude → Claude API proxy                   ││
+│  │  - /story-ui/openai → OpenAI API proxy                   ││
+│  │  - /story-ui/gemini → Gemini API proxy                   ││
+│  │  - /mcp → MCP JSON-RPC endpoint                          ││
+│  └─────────────────────────────────────────────────────────┘│
+└─────────────────────────────────────────────────────────────┘
 ```
 
-Story UI will automatically discover and use this documentation to generate better stories.
+### Deploy to Cloudflare
 
-### Legacy Single-File Documentation
+**1. Deploy the Edge Worker (Backend)**
 
-You can still use a single `story-ui-considerations.md` file in your project root for simpler setups.
-
-## 🔧 Advanced Features
+```bash
+cd cloudflare-edge
+wrangler deploy
 
-### Story Version History
+# Set your API keys as secrets
+wrangler secret put ANTHROPIC_API_KEY
+wrangler secret put OPENAI_API_KEY    # optional
+wrangler secret put GEMINI_API_KEY    # optional
+```
 
-Every generated story is tracked with version history:
-- Each iteration is saved with a timestamp
-- Previous versions are linked for easy tracking
-- History is stored in `.story-ui-history/` (git-ignored)
+**2. Deploy the Frontend**
 
-### Component Validation
+```bash
+cd templates/production-app
+npm install
+npm run build
+wrangler pages deploy dist --project-name=your-app-name
+```
 
-All generated stories are validated to ensure:
-- ✅ Only existing components are imported
-- ✅ Props match component interfaces
-- ✅ Import paths are correct
-- ✅ TypeScript types are valid
+**3. Configure Environment**
 
-### Production Mode
+Update the frontend to point to your worker URL in the configuration.
 
-In production environments, Story UI operates in memory-only mode:
-- No files are written to disk
-- Stories are served from memory
-- Clean deployment without generated files
+### Alternative: Railway Backend
 
-## 🚀 CLI Commands
+For a full Node.js environment:
 
 ```bash
-# Initialize Story UI in a new project
-npx story-ui init
-
-# Start the Story UI server
-npx story-ui start
-
-# Start on a specific port
-npx story-ui start --port 4005
+cd mcp-server
+railway up
 
-# Use a specific config file
-npx story-ui start --config custom-config.js
+# Set environment variables in Railway dashboard:
+# - ANTHROPIC_API_KEY
+# - OPENAI_API_KEY (optional)
+# - GEMINI_API_KEY (optional)
 ```
 
-## 🚢 Production Deployment
+---
 
-Story UI v3 can be deployed as a standalone web application with multiple backend options.
+## Design System Documentation
 
-### Prerequisites
+Story UI can learn your design system conventions to generate better stories.
 
-Install the required CLI tools:
+### Directory-Based Documentation (Recommended)
 
-```bash
-# Railway CLI (for backend deployment)
-npm install -g @railway/cli
-railway login
+Create a `story-ui-docs/` directory:
 
-# Wrangler (for Cloudflare Workers - optional)
-npm install -g wrangler
-wrangler login
+```
+story-ui-docs/
+├── README.md                    # Overview
+├── guidelines/
+│   ├── accessibility.md         # A11y guidelines
+│   ├── responsive-design.md     # Responsive rules
+│   └── brand-guidelines.md      # Brand usage
+├── tokens/
+│   ├── colors.json             # Color tokens
+│   ├── spacing.md              # Spacing system
+│   └── typography.json         # Typography
+├── components/
+│   ├── button.md               # Button documentation
+│   └── forms.md                # Form patterns
+└── patterns/
+    ├── layouts.md              # Layout patterns
+    └── data-tables.md          # Table patterns
 ```
 
-### Option 1: Railway Backend (Recommended)
+### Single-File Documentation
 
-Deploy the backend to Railway for a fully managed Node.js environment:
+For simpler setups, use `story-ui-considerations.md`:
 
-```bash
-# From the project root
-cd mcp-server
-railway up
+```markdown
+# Design System Considerations
 
-# Set environment variables in Railway dashboard:
-# - ANTHROPIC_API_KEY (required for Claude)
-# - OPENAI_API_KEY (optional for OpenAI)
-# - GEMINI_API_KEY (optional for Gemini)
+## Color Usage
+- Primary actions: blue.6
+- Destructive actions: red.6
+- Success states: green.6
+
+## Component Preferences
+- Use Button with variant="filled" for primary actions
+- Use Card with shadow="sm" for content containers
 ```
 
-### Option 2: Cloudflare Workers Edge
+---
 
-Deploy an edge proxy to Cloudflare Workers:
+## CLI Reference
 
 ```bash
-# From the project root
-cd cloudflare-edge
-wrangler deploy
+# Initialize Story UI
+npx story-ui init
 
-# Set secrets:
-wrangler secret put ANTHROPIC_API_KEY
-wrangler secret put OPENAI_API_KEY  # optional
-wrangler secret put GEMINI_API_KEY  # optional
+# Start the development server
+npx story-ui start
+npx story-ui start --port 4005
+
+# Deploy to production
+npx story-ui deploy
+
+# Run MCP server
+npx story-ui mcp
 ```
 
-### Frontend Deployment
+---
+
+## API Reference
 
-Deploy the chat UI to Cloudflare Pages:
+### REST Endpoints
 
-```bash
-cd test-storybooks/mantine-storybook/.story-ui-build
-npm run build
-wrangler pages deploy dist --project-name=story-ui-app
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| `GET` | `/story-ui/providers` | List available LLM providers and models |
+| `POST` | `/story-ui/claude` | Generate with Claude |
+| `POST` | `/story-ui/openai` | Generate with OpenAI |
+| `POST` | `/story-ui/gemini` | Generate with Gemini |
+| `GET` | `/story-ui/considerations` | Get design system context |
+
+### Request Format
+
+```typescript
+{
+  prompt: string;           // User's request
+  model?: string;           // Specific model to use
+  previousCode?: string;    // For iterations
+  history?: Message[];      // Conversation history
+  imageData?: string;       // Base64 image for vision
+}
 ```
 
-### Environment Variables
+---
 
-| Variable | Required | Description |
-|----------|----------|-------------|
-| `ANTHROPIC_API_KEY` | Yes | Claude API key from Anthropic |
-| `OPENAI_API_KEY` | No | OpenAI API key for GPT models |
-| `GEMINI_API_KEY` | No | Google Gemini API key |
-| `DEFAULT_MODEL` | No | Default LLM model to use |
+## Upgrading from v2
 
-### REST API Endpoints
+Story UI v3 is backwards compatible with v2 configurations. However, to take advantage of new features:
 
-The backend provides these endpoints:
+1. **Multi-Provider Support**: Add `llmProvider` to your config
+2. **Framework Detection**: Add `framework` to your config for non-React projects
+3. **Production Deployment**: Use `npx story-ui deploy` for one-command deployment
 
-| Method | Endpoint | Description |
-|--------|----------|-------------|
-| `GET` | `/story-ui/providers` | List available LLM providers |
-| `POST` | `/story-ui/generate` | Generate a new story |
-| `GET` | `/story-ui/stories` | List all stories |
-| `GET` | `/story-ui/stories/:id` | Get a specific story |
-| `DELETE` | `/story-ui/stories/:id` | Delete a story |
+No breaking changes - existing stories and configurations will continue to work.
 
-## 🤝 Contributing
+---
+
+## Contributing
 
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+We welcome contributions! See our [Contributing Guide](CONTRIBUTING.md).
 
 ### Development Setup
 
 ```bash
-# Clone and install
 git clone https://github.com/southleft/story-ui.git
 cd story-ui
 npm install
-
-# Build and link for development
 npm run build
 npm link
 
@@ -365,17 +502,22 @@ cd your-project
 npm link @tpitre/story-ui
 ```
 
-## 📄 License
+---
+
+## License
 
 MIT © [Story UI Contributors](LICENSE)
 
-## 🔗 Links
+---
+
+## Links
 
 - [GitHub Repository](https://github.com/southleft/story-ui)
 - [NPM Package](https://www.npmjs.com/package/@tpitre/story-ui)
 - [Issues & Support](https://github.com/southleft/story-ui/issues)
+- [MCP Integration Guide](docs/MCP_INTEGRATION.md)
+- [Deployment Guide](DEPLOYMENT.md)
 
 ---
 
-*Story UI - Making component documentation delightful, one conversation at a time.* ✨
-
+*Story UI - Making component documentation delightful, one conversation at a time.*

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.5.0",
+  "version": "2.6.0",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",