@tpitre/story-ui 4.2.0 → 4.3.0

package/README.md

@@ -10,7 +10,7 @@ Story UI revolutionizes component documentation by automatically generating Stor
 ## Why Story UI?
 
 - **Framework Agnostic**: Works with React, Vue, Angular, Svelte, and Web Components
-- **Multi-Provider AI**: Choose between Claude (Anthropic), GPT-5 (OpenAI), or Gemini (Google)
+- **Multi-Provider AI**: Choose between Claude (Anthropic), GPT-4o (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
@@ -47,6 +47,12 @@ Story UI will guide you through:
 - **TypeScript Support**: Full type-aware story generation
 - **Vision Support**: Attach screenshots for visual component requests
 
+### Story Management
+- **Edit Existing Stories**: Modify any generated story through conversation
+- **Delete Stories**: Remove stories directly from the Story UI panel
+- **Orphan Detection**: Find and clean up stories without associated chat history
+- **Full MCP Integration**: Manage stories via Claude Desktop or any MCP-compatible client
+
 ### Multi-Framework Support
 
 | Framework | Design Systems | Status |
@@ -54,16 +60,16 @@ Story UI will guide you through:
 | React | Mantine, Chakra UI, Material UI, Custom | Fully Supported |
 | Vue | Vuetify, Custom | Fully Supported |
 | Angular | Angular Material, Custom | Fully Supported |
-| Svelte | Skeleton UI, Custom | Fully Supported |
+| Svelte | Flowbite-Svelte, Custom | Fully Supported |
 | Web Components | Shoelace, Custom | Fully Supported |
 
 ### Multi-Provider LLM Support
 
 | Provider | Models | Best For |
 |----------|--------|----------|
-| **Claude** (Anthropic) | Opus 4.5, Sonnet 4.5, Haiku 4.5 | Complex reasoning, code quality |
-| **GPT** (OpenAI) | GPT-5.1, GPT-5.1 Thinking, GPT-4o, GPT-4o Mini | Versatility, speed |
-| **Gemini** (Google) | Gemini 3 Pro, Gemini 2.0 Flash, Gemini 1.5 Pro | Fast generation, cost efficiency |
+| **Claude** (Anthropic) | claude-opus-4-5, claude-sonnet-4-5, claude-haiku-4-5 | Complex reasoning, code quality |
+| **GPT** (OpenAI) | gpt-4o, gpt-4o-mini, o1 | Versatility, speed |
+| **Gemini** (Google) | gemini-2.0-flash, gemini-1.5-pro | Fast generation, cost efficiency |
 
 ### Production Deployment
 - **Railway**: Node.js backend with file-based story persistence
@@ -115,7 +121,7 @@ The interactive installer will ask:
    ```
    ? Which AI provider do you prefer?
      > Claude (Anthropic) - Recommended
-       OpenAI (GPT-5)
+       OpenAI (GPT-4o)
        Google Gemini
 
    ? Enter your API key:
@@ -319,7 +325,7 @@ Once connected, you can use these commands in Claude Desktop:
 
 ## Production Deployment
 
-Story UI v3 can be deployed as a standalone web application accessible from anywhere.
+Story UI can be deployed as a standalone web application accessible from anywhere.
 
 ### Architecture
 
@@ -461,7 +467,7 @@ npx story-ui mcp
 
 ## Upgrading from v2
 
-Story UI v3 is backwards compatible with v2 configurations. However, to take advantage of new features:
+Story UI v4 is backwards compatible with previous configurations. However, to take advantage of new features:
 
 1. **Multi-Provider Support**: Add `llmProvider` to your config
 2. **Framework Detection**: Add `framework` to your config for non-React projects

package/dist/mcp-server/index.js

@@ -78,6 +78,176 @@ 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);
+// MCP story management routes - for Claude Desktop and other MCP clients
+// List all stories
+app.get('/mcp/stories', async (req, res) => {
+    try {
+        const storiesPath = config.generatedStoriesPath;
+        if (!fs.existsSync(storiesPath)) {
+            return res.json({ stories: [] });
+        }
+        const files = fs.readdirSync(storiesPath);
+        const stories = files
+            .filter(file => file.endsWith('.stories.tsx') || file.endsWith('.stories.ts') || file.endsWith('.stories.svelte'))
+            .map(file => {
+            const filePath = path.join(storiesPath, file);
+            const stats = fs.statSync(filePath);
+            const content = fs.readFileSync(filePath, 'utf-8');
+            // Extract title from story file
+            const titleMatch = content.match(/title:\s*['"]([^'"]+)['"]/);
+            let title = titleMatch ? titleMatch[1].replace('Generated/', '') : file.replace(/\.stories\.(tsx|ts|svelte)$/, '');
+            // Remove hash suffix from display title
+            title = title.replace(/\s*\([a-f0-9]{8}\)$/i, '');
+            return {
+                id: file.replace(/\.stories\.(tsx|ts|svelte)$/, ''),
+                storyId: file.replace(/\.stories\.(tsx|ts|svelte)$/, ''),
+                fileName: file,
+                title,
+                lastUpdated: stats.mtime.getTime(),
+                createdAt: stats.birthtime.getTime(),
+                content
+            };
+        })
+            .sort((a, b) => b.lastUpdated - a.lastUpdated);
+        return res.json({ stories });
+    }
+    catch (error) {
+        console.error('Error listing stories:', error);
+        return res.status(500).json({ error: 'Failed to list stories' });
+    }
+});
+// Get a specific story by ID
+app.get('/mcp/stories/:storyId', async (req, res) => {
+    try {
+        const { storyId } = req.params;
+        const storiesPath = config.generatedStoriesPath;
+        if (!fs.existsSync(storiesPath)) {
+            return res.status(404).json({ error: 'Stories directory not found' });
+        }
+        const files = fs.readdirSync(storiesPath);
+        // Extract hash from story ID if in legacy format (story-a1b2c3d4)
+        const hashMatch = storyId.match(/^story-([a-f0-9]{8})$/);
+        const hash = hashMatch ? hashMatch[1] : null;
+        // Find matching file
+        const matchingFile = files.find(file => {
+            // Match by hash suffix
+            if (hash && file.includes(`-${hash}.stories.`))
+                return true;
+            // Match by exact ID
+            if (file.startsWith(`${storyId}.stories.`))
+                return true;
+            // Match by fileName
+            if (file === storyId)
+                return true;
+            // Match by ID without extension
+            if (file.replace(/\.stories\.(tsx|ts|svelte)$/, '') === storyId)
+                return true;
+            return false;
+        });
+        if (!matchingFile) {
+            return res.status(404).json({ error: `Story with ID ${storyId} not found` });
+        }
+        const filePath = path.join(storiesPath, matchingFile);
+        const stats = fs.statSync(filePath);
+        const content = fs.readFileSync(filePath, 'utf-8');
+        // Extract title from story file
+        const titleMatch = content.match(/title:\s*['"]([^'"]+)['"]/);
+        let title = titleMatch ? titleMatch[1].replace('Generated/', '') : matchingFile.replace(/\.stories\.(tsx|ts|svelte)$/, '');
+        title = title.replace(/\s*\([a-f0-9]{8}\)$/i, '');
+        return res.json({
+            id: matchingFile.replace(/\.stories\.(tsx|ts|svelte)$/, ''),
+            storyId: matchingFile.replace(/\.stories\.(tsx|ts|svelte)$/, ''),
+            fileName: matchingFile,
+            title,
+            lastUpdated: stats.mtime.getTime(),
+            createdAt: stats.birthtime.getTime(),
+            timestamp: stats.mtime.getTime(),
+            content,
+            story: content
+        });
+    }
+    catch (error) {
+        console.error('Error getting story:', error);
+        return res.status(500).json({ error: 'Failed to get story' });
+    }
+});
+// Get story content (raw code)
+app.get('/mcp/stories/:storyId/content', async (req, res) => {
+    try {
+        const { storyId } = req.params;
+        const storiesPath = config.generatedStoriesPath;
+        if (!fs.existsSync(storiesPath)) {
+            return res.status(404).send('Stories directory not found');
+        }
+        const files = fs.readdirSync(storiesPath);
+        // Extract hash from story ID if in legacy format
+        const hashMatch = storyId.match(/^story-([a-f0-9]{8})$/);
+        const hash = hashMatch ? hashMatch[1] : null;
+        // Find matching file
+        const matchingFile = files.find(file => {
+            if (hash && file.includes(`-${hash}.stories.`))
+                return true;
+            if (file.startsWith(`${storyId}.stories.`))
+                return true;
+            if (file === storyId)
+                return true;
+            if (file.replace(/\.stories\.(tsx|ts|svelte)$/, '') === storyId)
+                return true;
+            return false;
+        });
+        if (!matchingFile) {
+            return res.status(404).send(`Story with ID ${storyId} not found`);
+        }
+        const filePath = path.join(storiesPath, matchingFile);
+        const content = fs.readFileSync(filePath, 'utf-8');
+        res.type('text/plain').send(content);
+    }
+    catch (error) {
+        console.error('Error getting story content:', error);
+        return res.status(500).send('Failed to get story content');
+    }
+});
+// Delete a story by ID
+app.delete('/mcp/stories/:storyId', async (req, res) => {
+    try {
+        const { storyId } = req.params;
+        const storiesPath = config.generatedStoriesPath;
+        if (!fs.existsSync(storiesPath)) {
+            return res.status(404).json({ error: 'Stories directory not found' });
+        }
+        const files = fs.readdirSync(storiesPath);
+        // Extract hash from story ID if in legacy format
+        const hashMatch = storyId.match(/^story-([a-f0-9]{8})$/);
+        const hash = hashMatch ? hashMatch[1] : null;
+        // Find matching file
+        const matchingFile = files.find(file => {
+            if (hash && file.includes(`-${hash}.stories.`))
+                return true;
+            if (file.startsWith(`${storyId}.stories.`))
+                return true;
+            if (file === storyId)
+                return true;
+            if (file.replace(/\.stories\.(tsx|ts|svelte)$/, '') === storyId)
+                return true;
+            return false;
+        });
+        if (!matchingFile) {
+            return res.status(404).json({ error: `Story with ID ${storyId} not found` });
+        }
+        const filePath = path.join(storiesPath, matchingFile);
+        fs.unlinkSync(filePath);
+        console.log(`🗑️ Deleted story via MCP endpoint: ${matchingFile}`);
+        return res.json({
+            success: true,
+            deleted: matchingFile,
+            message: `Story "${matchingFile}" has been deleted successfully.`
+        });
+    }
+    catch (error) {
+        console.error('Error deleting story:', error);
+        return res.status(500).json({ error: 'Failed to delete story' });
+    }
+});
 // File-based story routes - stories are generated as .stories.tsx files
 // Storybook discovers these automatically via its native file system watching
 // Proxy routes for frontend compatibility (maps /story-ui/ to /mcp/)

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

@@ -27,7 +27,8 @@ dotenv.config({ path: path.resolve(process.cwd(), '.env') });
 process.env.STORY_UI_MCP_MODE = 'true';
 // Get HTTP server port from environment variables (check multiple possible names)
 const HTTP_PORT = process.env.VITE_STORY_UI_PORT || process.env.STORY_UI_HTTP_PORT || process.env.PORT || '4001';
-const HTTP_BASE_URL = `http://localhost:${HTTP_PORT}`;
+// Allow configurable base URL for Railway/cloud deployments, fallback to localhost for local dev
+const HTTP_BASE_URL = process.env.STORY_UI_HTTP_BASE_URL || `http://localhost:${HTTP_PORT}`;
 // Initialize configuration
 const config = loadUserConfig();
 // Create MCP server instance
@@ -181,8 +182,6 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                     throw new Error(`Failed to generate story: ${error}`);
                 }
                 const result = await response.json();
-                // Debug log to see what we're getting
-                console.error('Story generation result:', JSON.stringify(result, null, 2));
                 return {
                     content: [{
                             type: "text",
@@ -509,8 +508,6 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                         throw new Error(`Failed to update story: ${error}`);
                     }
                     const result = await response.json();
-                    // Debug log to see what we're getting
-                    console.error('Story update result:', JSON.stringify(result, null, 2));
                     return {
                         content: [{
                                 type: "text",

package/dist/story-generator/framework-adapters/index.js

@@ -150,7 +150,7 @@ class AdapterRegistry {
         return {
             systemPrompt: adapter.generateSystemPrompt(config, options),
             componentReference: adapter.generateComponentReference(components, config),
-            layoutInstructions: '', // TODO: Implement layout instructions
+            layoutInstructions: '',
             examples: adapter.generateExamples(config),
             sampleStory: adapter.generateSampleStory(config, components),
             framework: this.detectedFramework || {

package/package.json

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