@tpitre/story-ui 2.2.0 → 2.3.0

package/dist/mcp-server/routes/generateStory.js

@@ -1,12 +1,12 @@
-import fetch from 'node-fetch';
 import { generateStory } from '../../story-generator/generateStory.js';
 import * as crypto from 'crypto';
 import * as path from 'path';
-import { buildClaudePrompt as buildFlexiblePrompt } from '../../story-generator/promptGenerator.js';
+import { buildClaudePrompt as buildFlexiblePrompt, buildFrameworkAwarePrompt, detectProjectFramework, } from '../../story-generator/promptGenerator.js';
+import { getAdapter } from '../../story-generator/framework-adapters/index.js';
 import { loadUserConfig, validateConfig } from '../../story-generator/configLoader.js';
 import { setupProductionGitignore } from '../../story-generator/productionGitignoreManager.js';
 import { getInMemoryStoryService } from '../../story-generator/inMemoryStoryService.js';
-import { extractAndValidateCodeBlock, createFallbackStory } from '../../story-generator/validateStory.js';
+import { extractAndValidateCodeBlock, createFallbackStory, validateStoryCode } from '../../story-generator/validateStory.js';
 import { isBlacklistedComponent, isBlacklistedIcon, getBlacklistErrorMessage, ICON_CORRECTIONS } from '../../story-generator/componentBlacklist.js';
 import { StoryTracker } from '../../story-generator/storyTracker.js';
 import { EnhancedComponentDiscovery } from '../../story-generator/enhancedComponentDiscovery.js';
@@ -16,13 +16,9 @@ import { validateStory } from '../../story-generator/storyValidator.js';
 import { StoryHistoryManager } from '../../story-generator/storyHistory.js';
 import { logger } from '../../story-generator/logger.js';
 import { UrlRedirectService } from '../../story-generator/urlRedirectService.js';
-const CLAUDE_API_URL = 'https://api.anthropic.com/v1/messages';
-const CLAUDE_MODEL = process.env.CLAUDE_MODEL || 'claude-sonnet-4-20250514';
-// Legacy constants - now using dynamic discovery
-const COMPONENT_LIST = [];
-const SAMPLE_STORY = '';
-// Legacy component reference - now using dynamic discovery
-const COMPONENT_REFERENCE = '';
+import { chatCompletion, generateTitle as llmGenerateTitle, isProviderConfigured, getProviderInfo, chatCompletionWithImages, buildMessageWithImages } from '../../story-generator/llm-providers/story-llm-service.js';
+import { processImageInputs } from '../../story-generator/imageProcessor.js';
+import { buildVisionAwarePrompt } from '../../story-generator/visionPrompts.js';
 // Legacy function - now uses flexible system with enhanced discovery
 async function buildClaudePrompt(userPrompt) {
     const config = loadUserConfig();
@@ -31,15 +27,58 @@ async function buildClaudePrompt(userPrompt) {
     return await buildFlexiblePrompt(userPrompt, config, components);
 }
 // Enhanced function that includes conversation context and previous code
-async function buildClaudePromptWithContext(userPrompt, config, conversation, previousCode) {
+// Now supports multi-framework prompt generation and vision-aware prompts
+async function buildClaudePromptWithContext(userPrompt, config, conversation, previousCode, options) {
     const discovery = new EnhancedComponentDiscovery(config);
     const components = await discovery.discoverAll();
+    // Determine if we should use framework-aware prompts
+    let useFrameworkAware = false;
+    let frameworkOptions;
+    if (options?.framework) {
+        // Explicit framework specified
+        useFrameworkAware = true;
+        frameworkOptions = { framework: options.framework };
+        logger.log(`📦 Using specified framework: ${options.framework}`);
+    }
+    else if (options?.autoDetectFramework) {
+        // Auto-detect framework from project
+        try {
+            const detectedFramework = await detectProjectFramework(process.cwd());
+            useFrameworkAware = true;
+            frameworkOptions = { framework: detectedFramework };
+            logger.log(`📦 Auto-detected framework: ${detectedFramework}`);
+        }
+        catch (error) {
+            logger.warn('Failed to auto-detect framework, using React default', { error });
+        }
+    }
     // Always start with component discovery as the authoritative source
     logger.log(`📦 Discovered ${components.length} components from ${config.importPath}`);
     const availableComponents = components.map(c => c.name).join(', ');
     logger.log(`✅ Available components: ${availableComponents}`);
     // Build base prompt with discovered components (always required)
-    let prompt = await buildFlexiblePrompt(userPrompt, config, components);
+    // Use framework-aware prompt if configured, otherwise use legacy React prompt
+    let prompt;
+    if (useFrameworkAware && frameworkOptions) {
+        prompt = await buildFrameworkAwarePrompt(userPrompt, config, components, frameworkOptions);
+        logger.log(`🔧 Built framework-aware prompt for ${frameworkOptions.framework}`);
+    }
+    else {
+        prompt = await buildFlexiblePrompt(userPrompt, config, components);
+    }
+    // Enhance prompt with vision-aware context if vision mode is provided
+    if (options?.visionMode) {
+        logger.log(`🔍 Enhancing prompt with vision mode: ${options.visionMode}`);
+        const visionPrompts = buildVisionAwarePrompt({
+            promptType: options.visionMode,
+            userDescription: userPrompt,
+            availableComponents: components.map(c => c.name),
+            framework: frameworkOptions?.framework || 'react',
+            designSystem: options.designSystem,
+        });
+        // Combine the vision system prompt with the existing prompt and add the user prompt
+        prompt = `${visionPrompts.systemPrompt}\n\n---\n\n${prompt}\n\n---\n\n${visionPrompts.userPrompt}`;
+    }
     // Try to enhance with bundled documentation for usage patterns and design tokens
     logger.log('📋 Using bundled documentation for enhancement');
     const documentation = getDocumentation(config.importPath);
@@ -115,26 +154,32 @@ function extractCodeBlock(text) {
     const codeBlock = text.match(/```(?:tsx|jsx|typescript|ts|js|javascript)?([\s\S]*?)```/i);
     return codeBlock ? codeBlock[1].trim() : null;
 }
-async function callClaude(messages) {
-    const apiKey = process.env.CLAUDE_API_KEY;
-    if (!apiKey)
-        throw new Error('Claude API key not set');
-    const response = await fetch(CLAUDE_API_URL, {
-        method: 'POST',
-        headers: {
-            'x-api-key': apiKey,
-            'content-type': 'application/json',
-            'anthropic-version': '2023-06-01',
-        },
-        body: JSON.stringify({
-            model: CLAUDE_MODEL,
-            max_tokens: 8192,
-            messages,
-        }),
-    });
-    const data = await response.json();
-    // Try to extract the main content
-    return data?.content?.[0]?.text || data?.completion || '';
+async function callLLM(messages, images) {
+    // Check if any provider is configured
+    if (!isProviderConfigured()) {
+        throw new Error('No LLM provider configured. Please set CLAUDE_API_KEY, OPENAI_API_KEY, or GEMINI_API_KEY.');
+    }
+    const providerInfo = getProviderInfo();
+    logger.debug(`Using ${providerInfo.currentProvider} (${providerInfo.currentModel}) for story generation`);
+    // If images are provided, use vision-capable chat
+    if (images && images.length > 0) {
+        if (!providerInfo.supportsVision) {
+            throw new Error(`${providerInfo.currentProvider} does not support vision. Please configure a vision-capable provider.`);
+        }
+        logger.log(`🖼️ Using vision-capable chat with ${images.length} image(s)`);
+        // Convert messages to include images in the first user message
+        const messagesWithImages = messages.map((msg, index) => {
+            if (msg.role === 'user' && index === 0) {
+                return {
+                    role: msg.role,
+                    content: buildMessageWithImages(msg.content, images)
+                };
+            }
+            return msg;
+        });
+        return await chatCompletionWithImages(messagesWithImages, { maxTokens: 8192 });
+    }
+    return await chatCompletion(messages, { maxTokens: 8192 });
 }
 function cleanPromptForTitle(prompt) {
     if (!prompt || typeof prompt !== 'string') {
@@ -171,34 +216,15 @@ function cleanPromptForTitle(prompt) {
         .trim()
         .replace(/\b\w/g, c => c.toUpperCase()); // Capitalize words
 }
-async function getClaudeTitle(userPrompt) {
-    const titlePrompt = [
-        "Given the following UI description, generate a short, clear, human-friendly title suitable for a Storybook navigation item.",
-        "Requirements:",
-        "- Do not include words like 'Generate', 'Build', or 'Create'",
-        "- Keep it under 50 characters",
-        "- Use simple, clear language",
-        "- Avoid special characters that could break code (use letters, numbers, spaces, hyphens, and basic punctuation only)",
-        '',
-        'UI description:',
-        userPrompt,
-        '',
-        'Title:'
-    ].join('\n');
-    const aiText = await callClaude([{ role: 'user', content: titlePrompt }]);
-    // Take the first non-empty line, trim, and remove quotes if present
-    const lines = aiText.split('\n').map(l => l.trim()).filter(Boolean);
-    if (lines.length > 0) {
-        let title = lines[0].replace(/^['\"]|['\"]$/g, '').trim();
-        // Additional sanitization for safety
-        title = title
-            .replace(/[^\w\s'"?!-]/g, ' ') // Remove problematic characters
-            .replace(/\s+/g, ' ') // Normalize whitespace
-            .trim()
-            .slice(0, 50); // Limit length
-        return title;
+async function getLLMTitle(userPrompt) {
+    // Use the LLM service's built-in title generation
+    try {
+        return await llmGenerateTitle(userPrompt);
+    }
+    catch (error) {
+        logger.warn('Failed to generate title via LLM, using fallback', { error });
+        return '';
     }
-    return '';
 }
 function escapeTitleForTS(title) {
     // Escape all characters that could break TypeScript string literals
@@ -316,7 +342,12 @@ function fileNameFromTitle(title, hash) {
     return `${base}-${hash}.stories.tsx`;
 }
 export async function generateStoryFromPrompt(req, res) {
-    const { prompt, fileName, conversation, isUpdate, originalTitle, storyId: providedStoryId } = req.body;
+    const { prompt, fileName, conversation, isUpdate, originalTitle, storyId: providedStoryId, framework, // Explicit framework (react, vue, angular, svelte, web-components)
+    autoDetectFramework, // Auto-detect from project (default: false)
+    images, // Array of images for vision-based generation
+    visionMode, // Vision mode: 'screenshot_to_story', 'design_to_story', 'component_analysis', 'layout_analysis'
+    designSystem // Design system being used (chakra-ui, mantine, etc.)
+     } = req.body;
     if (!prompt)
         return res.status(400).json({ error: 'Missing prompt' });
     try {
@@ -329,6 +360,21 @@ export async function generateStoryFromPrompt(req, res) {
                 details: validation.errors
             });
         }
+        // Process images if provided
+        let processedImages = [];
+        if (images && Array.isArray(images) && images.length > 0) {
+            logger.log(`📸 Processing ${images.length} image(s) for vision-based story generation`);
+            try {
+                processedImages = await processImageInputs(images);
+                logger.log(`✅ Successfully processed ${processedImages.length} image(s)`);
+            }
+            catch (imageError) {
+                return res.status(400).json({
+                    error: 'Image processing failed',
+                    details: imageError instanceof Error ? imageError.message : String(imageError)
+                });
+            }
+        }
         // Set up production-ready environment
         const gitignoreManager = setupProductionGitignore(config);
         const storyService = getInMemoryStoryService(config);
@@ -374,12 +420,19 @@ export async function generateStoryFromPrompt(req, res) {
         let validationErrors = [];
         const maxRetries = 3;
         let attempts = 0;
-        const initialPrompt = await buildClaudePromptWithContext(prompt, config, conversation, previousCode);
+        // Build framework-aware options with vision support
+        const frameworkOptions = {
+            framework: framework,
+            autoDetectFramework: autoDetectFramework === true,
+            visionMode: visionMode,
+            designSystem: designSystem,
+        };
+        const initialPrompt = await buildClaudePromptWithContext(prompt, config, conversation, previousCode, frameworkOptions);
         const messages = [{ role: 'user', content: initialPrompt }];
         while (attempts < maxRetries) {
             attempts++;
             logger.log(`--- Story Generation Attempt ${attempts} ---`);
-            const claudeResponse = await callClaude(messages);
+            const claudeResponse = await callLLM(messages, processedImages.length > 0 ? processedImages : undefined);
             const extractedCode = extractCodeBlock(claudeResponse);
             if (!extractedCode) {
                 aiText = claudeResponse; // Use raw response if no code block
@@ -484,12 +537,24 @@ export async function generateStoryFromPrompt(req, res) {
             console.error('No valid code could be extracted or generated.');
             return res.status(500).json({ error: 'Failed to generate valid TypeScript code.' });
         }
-        // CRITICAL: Ensure React import exists but avoid duplicates
-        if (!fileContents.includes("import React from 'react';")) {
+        // Determine the framework being used (priority: request > config > auto-detect > default)
+        const detectedFramework = frameworkOptions.framework ||
+            config.framework ||
+            (frameworkOptions.autoDetectFramework ? await detectProjectFramework(process.cwd()).catch(() => 'react') : 'react');
+        logger.log(`🎯 Framework detection: request=${frameworkOptions.framework}, config=${config.framework}, detected=${detectedFramework}`);
+        // Get the framework adapter for post-processing
+        const frameworkAdapter = getAdapter(detectedFramework);
+        // Only add React import for React framework
+        if (detectedFramework === 'react' && !fileContents.includes("import React from 'react';")) {
             fileContents = "import React from 'react';\n" + fileContents;
         }
         // Post-processing is now consolidated to run once on the final code
         let fixedFileContents = postProcessStory(fileContents, config.importPath);
+        // Apply framework-specific post-processing if adapter is available
+        if (frameworkAdapter) {
+            logger.log(`🔧 Applying ${detectedFramework} framework post-processing`);
+            fixedFileContents = frameworkAdapter.postProcess(fixedFileContents);
+        }
         // Generate title based on conversation context
         let aiTitle;
         if (isActualUpdate && originalTitle) {
@@ -500,11 +565,11 @@ export async function generateStoryFromPrompt(req, res) {
         else if (isActualUpdate) {
             // For updates without original title, try to keep the original title or modify it slightly
             const originalPrompt = conversation.find((msg) => msg.role === 'user')?.content || prompt;
-            aiTitle = await getClaudeTitle(originalPrompt);
+            aiTitle = await getLLMTitle(originalPrompt);
         }
         else {
             // For new stories, generate a new title
-            aiTitle = await getClaudeTitle(prompt);
+            aiTitle = await getLLMTitle(prompt);
         }
         if (!aiTitle || aiTitle.length < 2) {
             // Fallback to cleaned prompt if Claude fails
@@ -530,6 +595,35 @@ export async function generateStoryFromPrompt(req, res) {
                 return p1 + titleToUse + p3;
             });
         }
+        // FIX #5: Final validation after ALL post-processing
+        // This catches any syntax errors introduced by post-processing (e.g., buggy regex replacements)
+        const finalValidation = validateStoryCode(fixedFileContents, 'story.tsx', config);
+        if (!finalValidation.isValid) {
+            logger.log('⚠️ Post-processing introduced syntax errors:', finalValidation.errors);
+            // If we have fixed code from validation, use it
+            if (finalValidation.fixedCode) {
+                logger.log('✅ Auto-fixed post-processing errors');
+                fixedFileContents = finalValidation.fixedCode;
+            }
+            else {
+                // Post-processing broke the code and we can't fix it
+                // Return an error rather than serving broken code
+                console.error('Post-processing introduced unfixable syntax errors:', finalValidation.errors);
+                return res.status(500).json({
+                    error: 'Story generation failed due to post-processing errors',
+                    details: finalValidation.errors,
+                    suggestion: 'This is a bug in Story UI. Please report this issue with your prompt.',
+                    validation: {
+                        hasWarnings: true,
+                        errors: finalValidation.errors,
+                        warnings: ['Post-processing introduced syntax errors that could not be automatically fixed']
+                    }
+                });
+            }
+        }
+        else {
+            logger.log('✅ Final validation passed after post-processing');
+        }
         // Check if this is an update to an existing story
         // ONLY consider it an update if we're in the same conversation context
         let existingStory = null;
@@ -688,16 +782,6 @@ export async function generateStoryFromPrompt(req, res) {
         res.status(500).json({ error: err.message || 'Story generation failed' });
     }
 }
-/**
- * Fixes inline styles in the generated story content
- * Converts React camelCase style properties to kebab-case CSS properties
- */
-function fixInlineStyles(content) {
-    // This function is now superseded by the validator and postProcessStory
-    // but can be kept for other potential style cleanups if needed.
-    // For now, the main logic is in the validator.
-    return content;
-}
 /**
  * Extracts component names from story content
  */

package/dist/mcp-server/routes/generateStoryStream.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Streaming Story Generation with Two-Way Communication
+ *
+ * This endpoint provides real-time feedback during story generation via SSE.
+ * It enables the chat to show:
+ * 1. Intent preview - what the AI plans to do
+ * 2. Progress updates - step-by-step execution
+ * 3. Execution feedback - detailed completion with reasoning
+ */
+import { Request, Response } from 'express';
+export declare function generateStoryFromPromptStream(req: Request, res: Response): Promise<void>;
+//# sourceMappingURL=generateStoryStream.d.ts.map

package/dist/mcp-server/routes/generateStoryStream.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateStoryStream.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStoryStream.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAqa5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBAge9E"}