@tpitre/story-ui 2.2.0 → 2.3.0

package/dist/mcp-server/index.js

@@ -12,23 +12,76 @@ import cors from 'cors';
 import { getComponents, getProps } from './routes/components.js';
 import { claudeProxy } from './routes/claude.js';
 import { generateStoryFromPrompt } from './routes/generateStory.js';
+import { generateStoryFromPromptStream } from './routes/generateStoryStream.js';
 import { clearAllStories, getMemoryStats } from './routes/memoryStories.js';
 import { getAllStories, getStoryById, getStoryContent, deleteStory } from './routes/hybridStories.js';
 import { getSyncedStories, deleteSyncedStory, clearAllSyncedStories, syncChatHistory, validateChatSession, getSyncedStoryById } from './routes/storySync.js';
 import { setupProductionGitignore } from '../story-generator/productionGitignoreManager.js';
 import { getInMemoryStoryService } from '../story-generator/inMemoryStoryService.js';
 import { loadUserConfig } from '../story-generator/configLoader.js';
+import { loadConsiderations, considerationsToPrompt } from '../story-generator/considerationsLoader.js';
+import { DocumentationLoader } from '../story-generator/documentationLoader.js';
 import fs from 'fs';
 import { UrlRedirectService } from '../story-generator/urlRedirectService.js';
+import { getProviders, getModels, configureProviderRoute, validateApiKey, setDefaultProvider, setModel, getUISettings, applyUISettings, getSettingsConfig } from './routes/providers.js';
+import { listFrameworks, detectCurrentFramework, getFrameworkDetails, validateStoryForFramework, postProcessStoryForFramework, } from './routes/frameworks.js';
+import mcpRemoteRouter from './routes/mcpRemote.js';
 const app = express();
-app.use(cors());
-app.use(express.json());
+// CORS configuration
+// - Allow all origins for /story-ui/* routes (public API for production Storybooks)
+// - Restrict to localhost + configured origins for other routes
+const corsOptions = {
+    origin: (origin, callback) => {
+        // Allow requests with no origin (like mobile apps or curl)
+        if (!origin)
+            return callback(null, true);
+        // Allow localhost on any port (development)
+        const localhostPattern = /^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/;
+        if (localhostPattern.test(origin)) {
+            return callback(null, true);
+        }
+        // Allow Cloudflare Pages domains (*.pages.dev)
+        const cloudflarePattern = /^https:\/\/[a-z0-9-]+\.pages\.dev$/;
+        if (cloudflarePattern.test(origin)) {
+            return callback(null, true);
+        }
+        // Allow custom origins from environment
+        const allowedOrigins = process.env.STORY_UI_ALLOWED_ORIGINS?.split(',') || [];
+        if (allowedOrigins.includes(origin)) {
+            return callback(null, true);
+        }
+        // For production, allow any origin to access /story-ui/* endpoints
+        // These are public read-only endpoints for accessing generated stories
+        callback(null, true);
+    },
+    credentials: true,
+};
+app.use(cors(corsOptions));
+app.use(express.json({ limit: '10mb' })); // Increased limit for file uploads
 // Component discovery routes
 app.get('/mcp/components', getComponents);
 app.get('/mcp/props', getProps);
 // AI generation routes
 app.post('/mcp/claude', claudeProxy);
 app.post('/mcp/generate-story', generateStoryFromPrompt);
+app.post('/mcp/generate-story-stream', generateStoryFromPromptStream);
+// LLM Provider management routes
+app.get('/mcp/providers', getProviders);
+app.get('/mcp/providers/models', getModels);
+app.post('/mcp/providers/configure', configureProviderRoute);
+app.post('/mcp/providers/validate', validateApiKey);
+app.post('/mcp/providers/default', setDefaultProvider);
+app.post('/mcp/providers/model', setModel);
+// UI Settings routes (hybrid model selection for non-technical users)
+app.get('/mcp/providers/settings', getUISettings);
+app.post('/mcp/providers/settings', applyUISettings);
+app.get('/mcp/providers/config', getSettingsConfig);
+// Framework detection and adapter routes
+app.get('/mcp/frameworks', listFrameworks);
+app.get('/mcp/frameworks/detect', detectCurrentFramework);
+app.get('/mcp/frameworks/:type', getFrameworkDetails);
+app.post('/mcp/frameworks/validate', validateStoryForFramework);
+app.post('/mcp/frameworks/post-process', postProcessStoryForFramework);
 // Hybrid story management routes (works in both dev and production)
 app.get('/mcp/stories', getAllStories);
 app.get('/mcp/stories/:id', getStoryById);
@@ -50,10 +103,71 @@ app.get('/story-ui/stories/:id/content', getStoryContent);
 app.delete('/story-ui/stories/:id', deleteStory);
 app.delete('/story-ui/stories', clearAllStories);
 app.post('/story-ui/generate', generateStoryFromPrompt);
+app.post('/story-ui/generate-stream', generateStoryFromPromptStream);
 app.post('/story-ui/claude', claudeProxy);
 app.get('/story-ui/components', getComponents);
 app.get('/story-ui/props', getProps);
 app.get('/story-ui/memory-stats', getMemoryStats);
+// Design system considerations endpoint - serves considerations for environment parity
+app.get('/story-ui/considerations', async (req, res) => {
+    try {
+        const projectRoot = process.cwd();
+        // First try directory-based documentation (story-ui-docs/)
+        const docLoader = new DocumentationLoader(projectRoot);
+        if (docLoader.hasDocumentation()) {
+            const docs = await docLoader.loadDocumentation();
+            // Use the formatForPrompt method to properly format all documentation
+            const considerationsText = docLoader.formatForPrompt(docs);
+            return res.json({
+                hasConsiderations: considerationsText.length > 0,
+                source: 'story-ui-docs',
+                considerations: considerationsText
+            });
+        }
+        // Fall back to legacy single-file considerations
+        const considerations = loadConsiderations(config.considerationsPath);
+        if (considerations) {
+            const considerationsText = considerationsToPrompt(considerations);
+            return res.json({
+                hasConsiderations: true,
+                source: 'story-ui-considerations',
+                considerations: considerationsText
+            });
+        }
+        // No considerations found
+        return res.json({
+            hasConsiderations: false,
+            source: null,
+            considerations: ''
+        });
+    }
+    catch (error) {
+        console.error('Error loading considerations:', error);
+        return res.json({
+            hasConsiderations: false,
+            source: null,
+            considerations: '',
+            error: error instanceof Error ? error.message : 'Unknown error'
+        });
+    }
+});
+// Provider management proxy routes
+app.get('/story-ui/providers', getProviders);
+app.get('/story-ui/providers/models', getModels);
+app.post('/story-ui/providers/configure', configureProviderRoute);
+app.post('/story-ui/providers/validate', validateApiKey);
+app.post('/story-ui/providers/default', setDefaultProvider);
+app.post('/story-ui/providers/model', setModel);
+// UI Settings proxy routes (for non-technical users)
+app.get('/story-ui/providers/settings', getUISettings);
+app.post('/story-ui/providers/settings', applyUISettings);
+app.get('/story-ui/providers/config', getSettingsConfig);
+// Framework management proxy routes
+app.get('/story-ui/frameworks', listFrameworks);
+app.get('/story-ui/frameworks/detect', detectCurrentFramework);
+app.get('/story-ui/frameworks/:type', getFrameworkDetails);
+app.post('/story-ui/frameworks/validate', validateStoryForFramework);
+app.post('/story-ui/frameworks/post-process', postProcessStoryForFramework);
 // Legacy delete route for backwards compatibility
 app.post('/story-ui/delete', async (req, res) => {
     try {
@@ -109,6 +223,10 @@ app.delete('/story-ui/sync/stories/:id', deleteSyncedStory);
 app.delete('/story-ui/sync/stories', clearAllSyncedStories);
 app.get('/story-ui/sync/chat-history', syncChatHistory);
 app.get('/story-ui/sync/validate/:id', validateChatSession);
+// MCP Remote HTTP transport routes (for Claude Desktop remote connections)
+// Provides Streamable HTTP and legacy SSE endpoints for remote MCP access
+app.use('/mcp-remote', mcpRemoteRouter);
+app.use('/story-ui/mcp-remote', mcpRemoteRouter); // Also available at story-ui prefix
 // Redirect service endpoint
 app.get('/mcp/redirects.js', (req, res) => {
     res.set('Content-Type', 'application/javascript');

package/dist/mcp-server/mcp-stdio-server.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=mcp-stdio-server.d.ts.map

package/dist/mcp-server/mcp-stdio-server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-stdio-server.d.ts","sourceRoot":"","sources":["../../mcp-server/mcp-stdio-server.ts"],"names":[],"mappings":""}

package/dist/mcp-server/mcp-stdio-server.js

@@ -11,6 +11,13 @@ import dotenv from 'dotenv';
 import path from 'path';
 import fs from 'fs';
 import crypto from 'crypto';
+import { fileURLToPath } from 'url';
+// Get package version dynamically
+const __filename_mcp = fileURLToPath(import.meta.url);
+const __dirname_mcp = path.dirname(__filename_mcp);
+const packageJsonPath = path.resolve(__dirname_mcp, '../package.json');
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+const PACKAGE_VERSION = packageJson.version;
 // Check for working directory override from environment or command line
 const workingDir = process.env.STORY_UI_CWD || process.argv.find(arg => arg.startsWith('--cwd='))?.split('=')[1];
 if (workingDir) {
@@ -34,7 +41,7 @@ console.error(`[MCP] Session ID: ${sessionId}`);
 // Create MCP server instance
 const server = new Server({
     name: "story-ui",
-    version: "2.1.5",
+    version: PACKAGE_VERSION,
 }, {
     capabilities: {
         tools: {},

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

@@ -0,0 +1,3 @@
+import { Request, Response } from 'express';
+export declare function claudeProxy(req: Request, res: Response): Promise<Response<any, Record<string, any>> | undefined>;
+//# sourceMappingURL=claude.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"claude.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/claude.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAI5C,wBAAsB,WAAW,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAwE5D"}

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

@@ -1,30 +1,67 @@
-import fetch from 'node-fetch';
+import { chatCompletion, isProviderConfigured, getProviderInfo } from '../../story-generator/llm-providers/story-llm-service.js';
+import { logger } from '../../story-generator/logger.js';
 export async function claudeProxy(req, res) {
-    const { prompt } = req.body;
-    if (!prompt)
-        return res.status(400).json({ error: 'Missing prompt' });
-    const apiKey = process.env.CLAUDE_API_KEY;
-    if (!apiKey)
-        return res.status(500).json({ error: 'Claude API key not set' });
+    const { prompt, messages, model, maxTokens, systemPrompt, prefillAssistant } = req.body;
+    // Support both single prompt and messages array
+    if (!prompt && (!messages || messages.length === 0)) {
+        return res.status(400).json({ error: 'Missing prompt or messages' });
+    }
+    // Check if any provider is configured
+    if (!isProviderConfigured()) {
+        return res.status(500).json({
+            error: 'No LLM provider configured',
+            message: 'Please set CLAUDE_API_KEY, OPENAI_API_KEY, or GEMINI_API_KEY in your environment'
+        });
+    }
     try {
-        // Example Claude API call (adjust endpoint/model as needed)
-        const response = await fetch('https://api.anthropic.com/v1/messages', {
-            method: 'POST',
-            headers: {
-                'x-api-key': apiKey,
-                'content-type': 'application/json',
-                'anthropic-version': '2023-06-01',
-            },
-            body: JSON.stringify({
-                model: process.env.CLAUDE_MODEL || 'claude-sonnet-4-20250514',
-                max_tokens: 4096,
-                messages: [{ role: 'user', content: prompt }],
-            }),
+        const providerInfo = getProviderInfo();
+        logger.debug('LLM proxy request', {
+            provider: providerInfo.currentProvider,
+            model: providerInfo.currentModel,
+            hasPrompt: !!prompt,
+            messageCount: messages?.length || 1,
+            hasPrefill: !!prefillAssistant
+        });
+        // Convert single prompt to messages format if needed
+        // Handle both undefined messages and empty array
+        let chatMessages = (messages && messages.length > 0)
+            ? messages
+            : [{ role: 'user', content: prompt }];
+        // Prepend system prompt as a system message if provided
+        if (systemPrompt) {
+            chatMessages = [
+                { role: 'system', content: systemPrompt },
+                ...chatMessages
+            ];
+        }
+        // Add assistant prefill if provided (forces Claude to continue from this point)
+        // This is a powerful technique to control output format
+        if (prefillAssistant) {
+            chatMessages = [
+                ...chatMessages,
+                { role: 'assistant', content: prefillAssistant }
+            ];
+        }
+        const response = await chatCompletion(chatMessages, {
+            model,
+            maxTokens: maxTokens || 4096
+        });
+        // If we used a prefill, prepend it to the response so the client gets the full output
+        const fullResponse = prefillAssistant ? prefillAssistant + response : response;
+        // Return response in a format compatible with the old Claude API
+        res.json({
+            content: [{ type: 'text', text: fullResponse }],
+            provider: providerInfo.currentProvider,
+            model: providerInfo.currentModel
         });
-        const data = await response.json();
-        res.json(data);
     }
     catch (err) {
-        res.status(500).json({ error: 'Claude API error', details: err });
+        logger.error('LLM proxy error', {
+            error: err instanceof Error ? err.message : String(err)
+        });
+        res.status(500).json({
+            error: 'LLM API error',
+            message: err instanceof Error ? err.message : 'An unexpected error occurred'
+        });
     }
 }

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

@@ -0,0 +1,4 @@
+import { Request, Response } from 'express';
+export declare function getComponents(req: Request, res: Response): Promise<Response<any, Record<string, any>> | undefined>;
+export declare function getProps(req: Request, res: Response): Promise<Response<any, Record<string, any>> | undefined>;
+//# sourceMappingURL=components.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAW5C,wBAAsB,aAAa,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAkC9D;AAED,wBAAsB,QAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DA8CzD"}

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

@@ -0,0 +1,38 @@
+/**
+ * Framework Management Routes
+ *
+ * API endpoints for framework detection and adapter management.
+ * Supports multi-framework story generation.
+ */
+import { Request, Response } from 'express';
+/**
+ * GET /mcp/frameworks
+ *
+ * List all available frameworks and their adapters.
+ */
+export declare function listFrameworks(req: Request, res: Response): Promise<void>;
+/**
+ * GET /mcp/frameworks/detect
+ *
+ * Auto-detect the framework used in the current project.
+ */
+export declare function detectCurrentFramework(req: Request, res: Response): Promise<void>;
+/**
+ * GET /mcp/frameworks/:type
+ *
+ * Get details about a specific framework adapter.
+ */
+export declare function getFrameworkDetails(req: Request, res: Response): Promise<Response<any, Record<string, any>> | undefined>;
+/**
+ * POST /mcp/frameworks/validate
+ *
+ * Validate generated story content against framework rules.
+ */
+export declare function validateStoryForFramework(req: Request, res: Response): Promise<Response<any, Record<string, any>> | undefined>;
+/**
+ * POST /mcp/frameworks/post-process
+ *
+ * Post-process generated story content for a specific framework.
+ */
+export declare function postProcessStoryForFramework(req: Request, res: Response): Promise<Response<any, Record<string, any>> | undefined>;
+//# sourceMappingURL=frameworks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frameworks.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/frameworks.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAS5C;;;;GAIG;AACH,wBAAsB,cAAc,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBA0B/D;AAED;;;;GAIG;AACH,wBAAsB,sBAAsB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBAwBvE;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DA+BpE;AAED;;;;GAIG;AACH,wBAAsB,yBAAyB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAsC1E;AAED;;;;GAIG;AACH,wBAAsB,4BAA4B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAmC7E"}

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

@@ -0,0 +1,183 @@
+/**
+ * Framework Management Routes
+ *
+ * API endpoints for framework detection and adapter management.
+ * Supports multi-framework story generation.
+ */
+import { getAvailableFrameworks, getFrameworkAdapter, } from '../../story-generator/promptGenerator.js';
+import { detectFramework } from '../../story-generator/framework-adapters/index.js';
+import { logger } from '../../story-generator/logger.js';
+/**
+ * GET /mcp/frameworks
+ *
+ * List all available frameworks and their adapters.
+ */
+export async function listFrameworks(req, res) {
+    try {
+        const frameworks = getAvailableFrameworks();
+        const frameworkDetails = frameworks.map(framework => {
+            const adapter = getFrameworkAdapter(framework);
+            return {
+                type: framework,
+                name: adapter.name,
+                supportedStoryFrameworks: adapter.supportedStoryFrameworks,
+                defaultExtension: adapter.defaultExtension,
+            };
+        });
+        res.json({
+            success: true,
+            frameworks: frameworkDetails,
+            count: frameworks.length,
+        });
+    }
+    catch (error) {
+        logger.error('Failed to list frameworks', { error: error.message });
+        res.status(500).json({
+            error: 'Failed to list frameworks',
+            message: error.message,
+        });
+    }
+}
+/**
+ * GET /mcp/frameworks/detect
+ *
+ * Auto-detect the framework used in the current project.
+ */
+export async function detectCurrentFramework(req, res) {
+    try {
+        const projectRoot = req.query.path || process.cwd();
+        const result = await detectFramework(projectRoot);
+        res.json({
+            success: true,
+            detected: {
+                primary: result.primary,
+                alternatives: result.frameworks.slice(1),
+            },
+            projectInfo: {
+                dependencies: result.dependencies,
+                configFiles: result.configFiles,
+            },
+        });
+    }
+    catch (error) {
+        logger.error('Failed to detect framework', { error: error.message });
+        res.status(500).json({
+            error: 'Failed to detect framework',
+            message: error.message,
+        });
+    }
+}
+/**
+ * GET /mcp/frameworks/:type
+ *
+ * Get details about a specific framework adapter.
+ */
+export async function getFrameworkDetails(req, res) {
+    try {
+        const { type } = req.params;
+        const availableFrameworks = getAvailableFrameworks();
+        if (!availableFrameworks.includes(type)) {
+            return res.status(404).json({
+                error: 'Framework not found',
+                message: `Framework "${type}" is not supported`,
+                available: availableFrameworks,
+            });
+        }
+        const adapter = getFrameworkAdapter(type);
+        res.json({
+            success: true,
+            framework: {
+                type: adapter.type,
+                name: adapter.name,
+                supportedStoryFrameworks: adapter.supportedStoryFrameworks,
+                defaultExtension: adapter.defaultExtension,
+            },
+        });
+    }
+    catch (error) {
+        logger.error('Failed to get framework details', { error: error.message });
+        res.status(500).json({
+            error: 'Failed to get framework details',
+            message: error.message,
+        });
+    }
+}
+/**
+ * POST /mcp/frameworks/validate
+ *
+ * Validate generated story content against framework rules.
+ */
+export async function validateStoryForFramework(req, res) {
+    try {
+        const { framework, content } = req.body;
+        if (!framework || !content) {
+            return res.status(400).json({
+                error: 'Missing required fields',
+                message: 'Both "framework" and "content" are required',
+            });
+        }
+        const availableFrameworks = getAvailableFrameworks();
+        if (!availableFrameworks.includes(framework)) {
+            return res.status(400).json({
+                error: 'Invalid framework',
+                message: `Framework "${framework}" is not supported`,
+                available: availableFrameworks,
+            });
+        }
+        const adapter = getFrameworkAdapter(framework);
+        const validation = adapter.validate(content);
+        res.json({
+            success: true,
+            validation: {
+                isValid: validation.valid,
+                errors: validation.errors,
+                framework: adapter.type,
+            },
+        });
+    }
+    catch (error) {
+        logger.error('Failed to validate story', { error: error.message });
+        res.status(500).json({
+            error: 'Failed to validate story',
+            message: error.message,
+        });
+    }
+}
+/**
+ * POST /mcp/frameworks/post-process
+ *
+ * Post-process generated story content for a specific framework.
+ */
+export async function postProcessStoryForFramework(req, res) {
+    try {
+        const { framework, content } = req.body;
+        if (!framework || !content) {
+            return res.status(400).json({
+                error: 'Missing required fields',
+                message: 'Both "framework" and "content" are required',
+            });
+        }
+        const availableFrameworks = getAvailableFrameworks();
+        if (!availableFrameworks.includes(framework)) {
+            return res.status(400).json({
+                error: 'Invalid framework',
+                message: `Framework "${framework}" is not supported`,
+                available: availableFrameworks,
+            });
+        }
+        const adapter = getFrameworkAdapter(framework);
+        const processed = adapter.postProcess(content);
+        res.json({
+            success: true,
+            content: processed,
+            framework: adapter.type,
+        });
+    }
+    catch (error) {
+        logger.error('Failed to post-process story', { error: error.message });
+        res.status(500).json({
+            error: 'Failed to post-process story',
+            message: error.message,
+        });
+    }
+}

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

@@ -0,0 +1,3 @@
+import { Request, Response } from 'express';
+export declare function generateStoryFromPrompt(req: Request, res: Response): Promise<Response<any, Record<string, any>> | undefined>;
+//# sourceMappingURL=generateStory.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generateStory.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAuZ5C,wBAAsB,uBAAuB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAigBxE"}