@tpitre/story-ui 2.1.5 → 2.2.0

package/README.md

@@ -30,6 +30,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 +73,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 +148,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)

package/dist/cli/index.js

@@ -257,4 +257,33 @@ program
     cleanupDefaultStorybookComponents();
     console.log('✅ Cleanup complete! Component discovery should now work properly.');
 });
+program
+    .command('mcp')
+    .description('Start Story UI as an MCP server (for use with Claude Desktop and other MCP clients)')
+    .option('--http-port <port>', 'Port for the HTTP server', '4001')
+    .action(async (options) => {
+    // For MCP mode, DO NOT output anything to stdout - it's reserved for JSON-RPC
+    // Use stderr for all logging
+    console.error('🚀 Starting Story UI as MCP server...');
+    console.error('📡 This server uses stdio transport for MCP communication');
+    console.error('⚠️  Note: The HTTP server must be running on port ' + options.httpPort);
+    console.error('    Run "story-ui start" in another terminal if not already running.\n');
+    // Use absolute path to MCP stdio server
+    const pkgRoot = path.resolve(__dirname, '..');
+    const mcpServerPath = path.join(pkgRoot, 'mcp-server/mcp-stdio-server.js');
+    const env = {
+        ...process.env,
+        STORY_UI_HTTP_PORT: options.httpPort
+    };
+    const mcpServer = spawn('node', [mcpServerPath], {
+        stdio: 'inherit',
+        env
+    });
+    mcpServer.on('close', (code) => {
+        console.error(`MCP server exited with code ${code}`);
+    });
+    process.on('SIGINT', () => {
+        mcpServer.kill('SIGINT');
+    });
+});
 program.parse(process.argv);

package/dist/mcp-server/index.js

@@ -12,12 +12,14 @@ import cors from 'cors';
 import { getComponents, getProps } from './routes/components.js';
 import { claudeProxy } from './routes/claude.js';
 import { generateStoryFromPrompt } from './routes/generateStory.js';
-import { getStoriesMetadata, getStoryById, getStoryContent, deleteStory, clearAllStories, getMemoryStats } from './routes/memoryStories.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 fs from 'fs';
+import { UrlRedirectService } from '../story-generator/urlRedirectService.js';
 const app = express();
 app.use(cors());
 app.use(express.json());
@@ -27,8 +29,8 @@ app.get('/mcp/props', getProps);
 // AI generation routes
 app.post('/mcp/claude', claudeProxy);
 app.post('/mcp/generate-story', generateStoryFromPrompt);
-// In-memory story management routes (production)
-app.get('/mcp/stories', getStoriesMetadata);
+// Hybrid story management routes (works in both dev and production)
+app.get('/mcp/stories', getAllStories);
 app.get('/mcp/stories/:id', getStoryById);
 app.get('/mcp/stories/:id/content', getStoryContent);
 app.delete('/mcp/stories/:id', deleteStory);
@@ -42,7 +44,7 @@ app.delete('/mcp/sync/stories', clearAllSyncedStories);
 app.get('/mcp/sync/chat-history', syncChatHistory);
 app.get('/mcp/sync/validate/:id', validateChatSession);
 // Proxy routes for frontend compatibility (maps /story-ui/ to /mcp/)
-app.get('/story-ui/stories', getStoriesMetadata);
+app.get('/story-ui/stories', getAllStories);
 app.get('/story-ui/stories/:id', getStoryById);
 app.get('/story-ui/stories/:id/content', getStoryContent);
 app.delete('/story-ui/stories/:id', deleteStory);
@@ -107,10 +109,22 @@ 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);
+// Redirect service endpoint
+app.get('/mcp/redirects.js', (req, res) => {
+    res.set('Content-Type', 'application/javascript');
+    res.send(redirectService.getRedirectScript());
+});
+// Also serve at story-ui path for compatibility
+app.get('/story-ui/redirects.js', (req, res) => {
+    res.set('Content-Type', 'application/javascript');
+    res.send(redirectService.getRedirectScript());
+});
 // Set up production-ready gitignore and directory structure on startup
 const config = loadUserConfig();
 const gitignoreManager = setupProductionGitignore(config);
 const storyService = getInMemoryStoryService(config);
+// Initialize URL redirect service
+const redirectService = new UrlRedirectService(process.cwd());
 const PORT = parseInt(process.env.PORT || '4001', 10);
 // Start server
 app.listen(PORT, () => {