@tpitre/story-ui 2.1.5 → 2.3.0

package/.env.sample

@@ -1,20 +1,91 @@
 # Story UI Configuration
-# Copy this file to .env and add your Claude API key
+# Copy this file to .env and configure your API keys
 
-# Claude API Configuration
+# =============================================================================
+# LLM Provider API Keys
+# =============================================================================
+# Configure one or more providers. Story UI will use the first available.
+
+# Claude (Anthropic)
 # Get your API key from: https://console.anthropic.com/
-CLAUDE_API_KEY=your-claude-api-key-here
+CLAUDE_API_KEY=your-claude-api-key
+# Alternative key name also supported:
+# ANTHROPIC_API_KEY=your-claude-api-key
+
+# OpenAI
+# Get your API key from: https://platform.openai.com/api-keys
+OPENAI_API_KEY=your-openai-api-key
+# Optional: Organization ID for team accounts
+# OPENAI_ORG_ID=your-org-id
+
+# Google Gemini
+# Get your API key from: https://aistudio.google.com/apikey
+GEMINI_API_KEY=your-gemini-api-key
+# Alternative key name also supported:
+# GOOGLE_API_KEY=your-gemini-api-key
+
+# =============================================================================
+# Default Model Selection
+# =============================================================================
+# These settings define the default provider and model for story generation.
 
-# Optional: Specify Claude model (defaults to claude-sonnet-4-20250514)
-# Available models:
-#   claude-opus-4-20250514     - Most capable, highest quality
-#   claude-sonnet-4-20250514   - Great balance of speed and quality (recommended)
+# Default LLM provider (claude, openai, gemini)
+DEFAULT_PROVIDER=claude
+
+# Default model ID
+# Claude models:
+#   claude-opus-4-5-20251101   - Most capable, highest quality
+#   claude-sonnet-4-5-20250514 - Great balance of speed and quality (recommended)
 #   claude-3-7-sonnet-20250219 - Fast and efficient
 #   claude-3-5-haiku-20241022  - Fastest, good for simple tasks
-CLAUDE_MODEL=claude-sonnet-4-20250514
+# OpenAI models:
+#   gpt-5.1                    - Latest GPT-5 with adaptive reasoning
+#   gpt-5.1-thinking           - Extended thinking for complex tasks
+#   gpt-5                      - Original GPT-5
+#   gpt-4o                     - Fast multimodal (recommended)
+#   gpt-4o-mini                - Budget option
+#   o1                         - Reasoning model
+# Gemini models:
+#   gemini-3-pro               - Most intelligent Gemini (recommended)
+#   gemini-2.0-flash           - Fast and efficient
+#   gemini-1.5-pro             - Legacy, large context
+DEFAULT_MODEL=claude-sonnet-4-5-20250514
 
+# Legacy model config (still supported):
+# CLAUDE_MODEL=claude-sonnet-4-20250514
+# OPENAI_MODEL=gpt-4o
+# GEMINI_MODEL=gemini-2.0-flash
 
-# Optional: Story UI configuration file path
-# STORY_UI_CONFIG_PATH=./story-ui.config.js
+# =============================================================================
+# DevOps Guardrails (Optional)
+# =============================================================================
+# These settings restrict which providers and models users can select in the UI.
+# Useful for enterprise deployments or cost control.
+
+# Allowed providers (comma-separated)
+# If not set, all configured providers are available
+# ALLOWED_PROVIDERS=claude,openai,gemini
 
-VITE_STORY_UI_PORT=4001
+# Allowed models (comma-separated)
+# If not set, all models from allowed providers are available
+# ALLOWED_MODELS=claude-sonnet-4-5-20250514,gpt-4o,gemini-2.0-flash
+
+# Single provider mode - hide provider selection in UI
+# Set to 'true' to lock users to the default provider
+# SINGLE_PROVIDER_MODE=false
+
+# =============================================================================
+# Server Configuration
+# =============================================================================
+
+# MCP server port (default: 4001)
+# PORT=4001
+
+# Production mode - use in-memory story storage
+# STORY_UI_PRODUCTION=true
+
+# CORS allowed origins (comma-separated) for external access
+# STORY_UI_ALLOWED_ORIGINS=https://your-domain.com,https://storybook.your-domain.com
+
+# Optional: Custom config file path
+# STORY_UI_CONFIG_PATH=./story-ui.config.js

package/README.md

@@ -17,6 +17,16 @@ Story UI revolutionizes component documentation by automatically generating Stor
 - **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
@@ -30,6 +40,7 @@ Story UI revolutionizes component documentation by automatically generating Stor
 - **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
 
@@ -72,17 +83,17 @@ Story UI uses advanced AI to understand your component library and generate appr
 export default {
   // Component library import path
   importPath: 'your-component-library',
-  
+
   // Path to your local components (for custom libraries)
   componentsPath: './src/components',
-  
+
   // Generated stories location
   generatedStoriesPath: './src/stories/generated/',
-  
+
   // Story configuration
   storyPrefix: 'Generated/',
   defaultAuthor: 'Story UI AI',
-  
+
   // Layout rules for multi-column layouts
   layoutRules: {
     multiColumnWrapper: 'div',
@@ -147,6 +158,42 @@ AI: "I'll modify the existing story to make the buttons full width..."
 
 The AI will preserve your existing code and only modify what you requested!
 
+## 🤖 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.
+
+### Quick Setup for Claude Desktop
+
+1. Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
+
+```json
+{
+  "mcpServers": {
+    "story-ui": {
+      "command": "npx",
+      "args": ["@tpitre/story-ui", "mcp"],
+      "env": {
+        "CLAUDE_API_KEY": "your-claude-api-key-here"
+      }
+    }
+  }
+}
+```
+
+2. Start the Story UI HTTP server in your project:
+```bash
+story-ui start
+```
+
+3. Restart Claude Desktop
+
+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"
+- "List all available components in Story UI"
+- "Show me the stories I've generated"
+
+For detailed MCP setup instructions, see [docs/MCP_INTEGRATION.md](docs/MCP_INTEGRATION.md).
+
 ## 📖 Documentation Support
 
 ### Directory-Based Documentation (Recommended)
@@ -218,6 +265,85 @@ npx story-ui start --port 4005
 npx story-ui start --config custom-config.js
 ```
 
+## 🚢 Production Deployment
+
+Story UI v3 can be deployed as a standalone web application with multiple backend options.
+
+### Prerequisites
+
+Install the required CLI tools:
+
+```bash
+# Railway CLI (for backend deployment)
+npm install -g @railway/cli
+railway login
+
+# Wrangler (for Cloudflare Workers - optional)
+npm install -g wrangler
+wrangler login
+```
+
+### Option 1: Railway Backend (Recommended)
+
+Deploy the backend to Railway for a fully managed Node.js environment:
+
+```bash
+# From the project root
+cd mcp-server
+railway up
+
+# Set environment variables in Railway dashboard:
+# - ANTHROPIC_API_KEY (required for Claude)
+# - OPENAI_API_KEY (optional for OpenAI)
+# - GEMINI_API_KEY (optional for Gemini)
+```
+
+### Option 2: Cloudflare Workers Edge
+
+Deploy an edge proxy to Cloudflare Workers:
+
+```bash
+# From the project root
+cd cloudflare-edge
+wrangler deploy
+
+# Set secrets:
+wrangler secret put ANTHROPIC_API_KEY
+wrangler secret put OPENAI_API_KEY  # optional
+wrangler secret put GEMINI_API_KEY  # optional
+```
+
+### Frontend Deployment
+
+Deploy the chat UI to Cloudflare Pages:
+
+```bash
+cd test-storybooks/mantine-storybook/.story-ui-build
+npm run build
+wrangler pages deploy dist --project-name=story-ui-app
+```
+
+### 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 |
+
+### REST API Endpoints
+
+The backend provides these endpoints:
+
+| 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 |
+
 ## 🤝 Contributing
 
 We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

package/dist/cli/deploy.d.ts

@@ -0,0 +1,17 @@
+interface DeployOptions {
+    backend?: boolean;
+    frontend?: boolean;
+    app?: boolean;
+    platform?: 'railway' | 'render' | 'fly';
+    backendUrl?: string;
+    storybookDir?: string;
+    projectName?: string;
+    dryRun?: boolean;
+    init?: boolean;
+    edge?: boolean;
+    pages?: boolean;
+    all?: boolean;
+}
+export declare function deployCommand(options: DeployOptions): Promise<void>;
+export {};
+//# sourceMappingURL=deploy.d.ts.map

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

@@ -0,0 +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;AAqpBD,wBAAsB,aAAa,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CAwHzE"}