@tpitre/story-ui 1.0.0

package/dist/cli/index.js

@@ -0,0 +1,250 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { spawn } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { setupProductionGitignore } from '../story-generator/productionGitignoreManager.js';
+import { createStoryUIConfig } from '../story-ui.config.js';
+import { setupCommand } from './setup.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const program = new Command();
+program
+    .name('story-ui')
+    .description('AI-powered Storybook story generator for React component libraries')
+    .version('1.0.0');
+program
+    .command('init')
+    .description('Initialize Story UI configuration with interactive setup')
+    .action(async () => {
+    await setupCommand();
+});
+program
+    .command('start')
+    .description('Start the Story UI server')
+    .option('-p, --port <port>', 'Port to run the server on', '4001')
+    .option('-c, --config <config>', 'Path to configuration file')
+    .action((options) => {
+    console.log('🚀 Starting Story UI server...');
+    const serverPath = path.resolve(__dirname, '../dist/mcp-server/index.js');
+    const env = { ...process.env };
+    if (options.port) {
+        env.PORT = options.port;
+    }
+    if (options.config) {
+        env.STORY_UI_CONFIG_PATH = options.config;
+    }
+    const server = spawn('node', [serverPath], {
+        stdio: 'inherit',
+        env
+    });
+    server.on('close', (code) => {
+        console.log(`Server exited with code ${code}`);
+    });
+    process.on('SIGINT', () => {
+        server.kill('SIGINT');
+    });
+});
+program
+    .command('config')
+    .description('Configuration utilities')
+    .option('--generate', 'Generate a sample configuration file')
+    .option('--type <type>', 'Configuration file type (json|js)', 'js')
+    .action((options) => {
+    if (options.generate) {
+        const filename = `story-ui.config.${options.type}`;
+        generateSampleConfig(filename, options.type);
+        console.log(`✅ Sample configuration generated: ${filename}`);
+    }
+});
+program
+    .command('setup-gitignore')
+    .description('Set up .gitignore for Story UI generated stories')
+    .option('-c, --config <path>', 'Path to Story UI config file', 'story-ui.config.js')
+    .action(async (options) => {
+    console.log('🔧 Setting up .gitignore for Story UI...');
+    try {
+        const configPath = path.resolve(process.cwd(), options.config);
+        const configModule = await import(configPath);
+        const userConfig = configModule.default;
+        const fullConfig = createStoryUIConfig(userConfig);
+        const manager = setupProductionGitignore(fullConfig);
+        if (manager.isProductionMode()) {
+            console.log('🌐 Production environment detected');
+            console.log('✅ Gitignore validation completed');
+        }
+        else {
+            console.log('🔧 Development environment - gitignore updated');
+        }
+        console.log('✅ Gitignore setup completed successfully!');
+    }
+    catch (error) {
+        console.error('❌ Failed to set up gitignore:', error);
+        console.log('💡 Make sure you have a valid story-ui.config.js file');
+        process.exit(1);
+    }
+});
+async function autoDetectAndCreateConfig() {
+    const cwd = process.cwd();
+    const config = {
+        generatedStoriesPath: './src/stories/generated',
+        storyPrefix: 'Generated/',
+        defaultAuthor: 'Story UI AI',
+        componentPrefix: '',
+        layoutRules: {
+            multiColumnWrapper: 'div',
+            columnComponent: 'div',
+            layoutExamples: {
+                twoColumn: `<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem'}}>
+  <div>Column 1 content</div>
+  <div>Column 2 content</div>
+</div>`
+            },
+            prohibitedElements: []
+        }
+    };
+    // Try to detect package.json
+    const packageJsonPath = path.join(cwd, 'package.json');
+    if (fs.existsSync(packageJsonPath)) {
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+        config.importPath = packageJson.name || 'your-component-library';
+    }
+    // Try to detect components directory
+    const possibleComponentPaths = [
+        './src/components',
+        './lib/components',
+        './components',
+        './src'
+    ];
+    for (const possiblePath of possibleComponentPaths) {
+        if (fs.existsSync(path.join(cwd, possiblePath))) {
+            config.componentsPath = possiblePath;
+            break;
+        }
+    }
+    writeConfig(config, 'js');
+}
+async function createTemplateConfig(template) {
+    let config;
+    switch (template) {
+        case 'material-ui':
+            config = {
+                importPath: '@mui/material',
+                componentPrefix: '',
+                layoutRules: {
+                    multiColumnWrapper: 'Grid',
+                    columnComponent: 'Grid',
+                    layoutExamples: {
+                        twoColumn: `<Grid container spacing={2}>
+  <Grid item xs={6}>
+    <Card>Left content</Card>
+  </Grid>
+  <Grid item xs={6}>
+    <Card>Right content</Card>
+  </Grid>
+</Grid>`
+                    }
+                }
+            };
+            break;
+        case 'chakra-ui':
+            config = {
+                importPath: '@chakra-ui/react',
+                componentPrefix: '',
+                layoutRules: {
+                    multiColumnWrapper: 'SimpleGrid',
+                    columnComponent: 'Box',
+                    layoutExamples: {
+                        twoColumn: `<SimpleGrid columns={2} spacing={4}>
+  <Box><Card>Left content</Card></Box>
+  <Box><Card>Right content</Card></Box>
+</SimpleGrid>`
+                    }
+                }
+            };
+            break;
+        case 'ant-design':
+            config = {
+                importPath: 'antd',
+                componentPrefix: '',
+                layoutRules: {
+                    multiColumnWrapper: 'Row',
+                    columnComponent: 'Col',
+                    layoutExamples: {
+                        twoColumn: `<Row gutter={16}>
+  <Col span={12}><Card>Left content</Card></Col>
+  <Col span={12}><Card>Right content</Card></Col>
+</Row>`
+                    }
+                }
+            };
+            break;
+        default:
+            throw new Error(`Unknown template: ${template}`);
+    }
+    // Add common defaults
+    config = {
+        generatedStoriesPath: './src/stories/generated',
+        componentsPath: './src/components',
+        storyPrefix: 'Generated/',
+        defaultAuthor: 'Story UI AI',
+        ...config
+    };
+    writeConfig(config, 'js');
+}
+async function createBasicConfig() {
+    const config = {
+        generatedStoriesPath: './src/stories/generated',
+        componentsPath: './src/components',
+        storyPrefix: 'Generated/',
+        defaultAuthor: 'Story UI AI',
+        importPath: 'your-component-library',
+        componentPrefix: '',
+        layoutRules: {
+            multiColumnWrapper: 'div',
+            columnComponent: 'div',
+            layoutExamples: {
+                twoColumn: `<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem'}}>
+  <div>Column 1 content</div>
+  <div>Column 2 content</div>
+</div>`
+            },
+            prohibitedElements: []
+        }
+    };
+    writeConfig(config, 'js');
+}
+function generateSampleConfig(filename, type) {
+    const config = {
+        generatedStoriesPath: './src/stories/generated',
+        componentsPath: './src/components',
+        storyPrefix: 'Generated/',
+        defaultAuthor: 'Story UI AI',
+        importPath: 'your-component-library',
+        componentPrefix: 'UI',
+        layoutRules: {
+            multiColumnWrapper: 'UIGrid',
+            columnComponent: 'UIColumn',
+            layoutExamples: {
+                twoColumn: `<UIGrid columns={2}>
+  <UIColumn><UICard>Left content</UICard></UIColumn>
+  <UIColumn><UICard>Right content</UICard></UIColumn>
+</UIGrid>`
+            },
+            prohibitedElements: []
+        }
+    };
+    writeConfig(config, type, filename);
+}
+function writeConfig(config, type, filename) {
+    const outputFile = filename || `story-ui.config.${type}`;
+    if (type === 'json') {
+        fs.writeFileSync(outputFile, JSON.stringify(config, null, 2));
+    }
+    else {
+        const jsContent = `export default ${JSON.stringify(config, null, 2)};`;
+        fs.writeFileSync(outputFile, jsContent);
+    }
+}
+program.parse(process.argv);

package/dist/cli/setup.js

@@ -0,0 +1,289 @@
+import fs from 'fs';
+import path from 'path';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import { autoDetectDesignSystem } from '../story-generator/configLoader.js';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+export async function setupCommand() {
+    console.log(chalk.blue.bold('\n🎨 Story UI Setup\n'));
+    console.log('This will help you configure Story UI for your design system.\n');
+    // Check if we're in a valid project
+    const packageJsonPath = path.join(process.cwd(), 'package.json');
+    if (!fs.existsSync(packageJsonPath)) {
+        console.error(chalk.red('❌ No package.json found. Please run this command in your project root.'));
+        process.exit(1);
+    }
+    // Check if Storybook is installed
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+    const hasStorybook = packageJson.devDependencies?.['@storybook/react'] ||
+        packageJson.dependencies?.['@storybook/react'] ||
+        fs.existsSync(path.join(process.cwd(), '.storybook'));
+    if (!hasStorybook) {
+        console.warn(chalk.yellow('⚠️  Storybook not detected. Story UI works best with Storybook installed.'));
+        console.log('Install Storybook first: npx storybook@latest init\n');
+    }
+    // Auto-detect design system
+    const autoDetected = autoDetectDesignSystem();
+    if (autoDetected) {
+        console.log(chalk.green(`✅ Auto-detected design system:`));
+        console.log(`   📦 Import path: ${autoDetected.importPath}`);
+        if (autoDetected.componentPrefix) {
+            console.log(`   🏷️  Component prefix: ${autoDetected.componentPrefix}`);
+        }
+        if (autoDetected.componentsPath) {
+            console.log(`   📁 Components path: ${autoDetected.componentsPath}`);
+        }
+    }
+    const answers = await inquirer.prompt([
+        {
+            type: 'list',
+            name: 'designSystem',
+            message: 'Which design system are you using?',
+            choices: [
+                { name: '🤖 Auto-detect from package.json', value: 'auto' },
+                { name: '🎨 Material-UI (@mui/material)', value: 'mui' },
+                { name: '⚡ Chakra UI (@chakra-ui/react)', value: 'chakra' },
+                { name: '🐜 Ant Design (antd)', value: 'antd' },
+                { name: '🎯 Mantine (@mantine/core)', value: 'mantine' },
+                { name: '🔧 Custom/Other', value: 'custom' }
+            ],
+            default: autoDetected ? 'auto' : 'custom'
+        },
+        {
+            type: 'input',
+            name: 'importPath',
+            message: 'What is the import path for your components?',
+            when: (answers) => answers.designSystem === 'custom',
+            validate: (input) => input.trim() ? true : 'Import path is required'
+        },
+        {
+            type: 'input',
+            name: 'componentPrefix',
+            message: 'Do your components have a prefix? (e.g., "AL" for ALButton)',
+            when: (answers) => answers.designSystem === 'custom',
+            default: ''
+        },
+        {
+            type: 'input',
+            name: 'generatedStoriesPath',
+            message: 'Where should generated stories be saved?',
+            default: './src/stories/generated/',
+            validate: (input) => input.trim() ? true : 'Path is required'
+        },
+        {
+            type: 'input',
+            name: 'componentsPath',
+            message: 'Where are your component files located?',
+            default: './src/components',
+            when: (answers) => answers.designSystem === 'custom'
+        },
+        {
+            type: 'confirm',
+            name: 'hasApiKey',
+            message: 'Do you have a Claude API key? (You can add it later)',
+            default: false
+        },
+        {
+            type: 'password',
+            name: 'apiKey',
+            message: 'Enter your Claude API key:',
+            when: (answers) => answers.hasApiKey,
+            validate: (input) => input.trim() ? true : 'API key is required'
+        }
+    ]);
+    // Generate configuration
+    let config = {};
+    if (answers.designSystem === 'auto' && autoDetected) {
+        config = autoDetected;
+    }
+    else if (answers.designSystem === 'mui') {
+        config = {
+            importPath: '@mui/material',
+            componentPrefix: '',
+            layoutRules: {
+                multiColumnWrapper: 'Grid',
+                columnComponent: 'Grid',
+                containerComponent: 'Container',
+                layoutExamples: {
+                    twoColumn: `<Grid container spacing={2}>
+  <Grid item xs={6}>
+    <Card>
+      <CardContent>
+        <Typography variant="h5">Left Card</Typography>
+        <Typography>Left content</Typography>
+      </CardContent>
+    </Card>
+  </Grid>
+  <Grid item xs={6}>
+    <Card>
+      <CardContent>
+        <Typography variant="h5">Right Card</Typography>
+        <Typography>Right content</Typography>
+      </CardContent>
+    </Card>
+  </Grid>
+</Grid>`
+                }
+            }
+        };
+    }
+    else if (answers.designSystem === 'chakra') {
+        config = {
+            importPath: '@chakra-ui/react',
+            componentPrefix: '',
+            layoutRules: {
+                multiColumnWrapper: 'SimpleGrid',
+                columnComponent: 'Box',
+                containerComponent: 'Container'
+            }
+        };
+    }
+    else if (answers.designSystem === 'antd') {
+        config = {
+            importPath: 'antd',
+            componentPrefix: '',
+            layoutRules: {
+                multiColumnWrapper: 'Row',
+                columnComponent: 'Col',
+                containerComponent: 'div'
+            }
+        };
+    }
+    else if (answers.designSystem === 'mantine') {
+        config = {
+            importPath: '@mantine/core',
+            componentPrefix: '',
+            layoutRules: {
+                multiColumnWrapper: 'SimpleGrid',
+                columnComponent: 'div',
+                containerComponent: 'Container'
+            }
+        };
+    }
+    else {
+        // Custom configuration
+        config = {
+            importPath: answers.importPath,
+            componentPrefix: answers.componentPrefix || '',
+            componentsPath: answers.componentsPath ? path.resolve(answers.componentsPath) : undefined,
+            layoutRules: {
+                multiColumnWrapper: 'div',
+                columnComponent: 'div',
+                containerComponent: 'div',
+                layoutExamples: {
+                    twoColumn: `<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem'}}>
+  <div>Column 1 content</div>
+  <div>Column 2 content</div>
+</div>`
+                }
+            }
+        };
+    }
+    // Add common configuration
+    config.generatedStoriesPath = path.resolve(answers.generatedStoriesPath || './src/stories/generated/');
+    config.storyPrefix = 'Generated/';
+    config.defaultAuthor = 'Story UI AI';
+    // Create configuration file
+    const configContent = `module.exports = ${JSON.stringify(config, null, 2)};`;
+    const configPath = path.join(process.cwd(), 'story-ui.config.js');
+    fs.writeFileSync(configPath, configContent);
+    // Create generated stories directory
+    const storiesDir = path.dirname(config.generatedStoriesPath);
+    if (!fs.existsSync(storiesDir)) {
+        fs.mkdirSync(storiesDir, { recursive: true });
+    }
+    // Copy StoryUI component to the project
+    const storyUITargetDir = path.join(storiesDir, 'StoryUI');
+    if (!fs.existsSync(storyUITargetDir)) {
+        fs.mkdirSync(storyUITargetDir, { recursive: true });
+    }
+    // Copy component files
+    const templatesDir = path.resolve(__dirname, '../../templates/StoryUI');
+    const componentFiles = ['StoryUIPanel.tsx', 'StoryUIPanel.stories.tsx'];
+    console.log(chalk.blue('\n📦 Installing Story UI component...'));
+    for (const file of componentFiles) {
+        const sourcePath = path.join(templatesDir, file);
+        const targetPath = path.join(storyUITargetDir, file);
+        if (fs.existsSync(sourcePath)) {
+            fs.copyFileSync(sourcePath, targetPath);
+            console.log(chalk.green(`✅ Copied ${file}`));
+        }
+        else {
+            console.warn(chalk.yellow(`⚠️  Template file not found: ${file}`));
+        }
+    }
+    // Create .env file from template
+    const envSamplePath = path.resolve(__dirname, '../../.env.sample');
+    const envPath = path.join(process.cwd(), '.env');
+    if (!fs.existsSync(envPath)) {
+        if (fs.existsSync(envSamplePath)) {
+            let envContent = fs.readFileSync(envSamplePath, 'utf-8');
+            // If user provided API key, update the template
+            if (answers.apiKey) {
+                envContent = envContent.replace('your-claude-api-key-here', answers.apiKey);
+            }
+            fs.writeFileSync(envPath, envContent);
+            console.log(chalk.green(`✅ Created .env file${answers.apiKey ? ' with your API key' : ''}`));
+        }
+    }
+    else {
+        console.log(chalk.yellow('⚠️  .env file already exists, skipping'));
+    }
+    // Add .env to .gitignore if not already there
+    const gitignorePath = path.join(process.cwd(), '.gitignore');
+    if (fs.existsSync(gitignorePath)) {
+        const gitignoreContent = fs.readFileSync(gitignorePath, 'utf-8');
+        const patterns = [
+            '.env',
+            path.relative(process.cwd(), config.generatedStoriesPath),
+            `${path.relative(process.cwd(), storiesDir)}/StoryUI/`
+        ];
+        let gitignoreUpdated = false;
+        for (const pattern of patterns) {
+            if (!gitignoreContent.includes(pattern)) {
+                fs.appendFileSync(gitignorePath, `\n${pattern}`);
+                gitignoreUpdated = true;
+            }
+        }
+        if (gitignoreUpdated) {
+            fs.appendFileSync(gitignorePath, '\n');
+            console.log(chalk.green(`✅ Updated .gitignore with Story UI patterns`));
+        }
+    }
+    // Update package.json with convenience scripts
+    if (packageJson) {
+        const scripts = packageJson.scripts || {};
+        if (!scripts['story-ui']) {
+            scripts['story-ui'] = 'story-ui start';
+        }
+        if (!scripts['storybook-with-ui'] && scripts['storybook']) {
+            scripts['storybook-with-ui'] = 'concurrently "npm run storybook" "npm run story-ui"';
+        }
+        packageJson.scripts = scripts;
+        fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
+        console.log(chalk.green('✅ Added convenience scripts to package.json'));
+    }
+    console.log(chalk.green.bold('\n🎉 Setup complete!\n'));
+    console.log(`📁 Configuration saved to: ${chalk.cyan(configPath)}`);
+    console.log(`📁 Generated stories will be saved to: ${chalk.cyan(config.generatedStoriesPath)}`);
+    console.log(`📁 Story UI component installed to: ${chalk.cyan(path.relative(process.cwd(), storyUITargetDir))}`);
+    if (config.importPath) {
+        console.log(`📦 Import path: ${chalk.cyan(config.importPath)}`);
+    }
+    if (!answers.apiKey) {
+        console.log(chalk.yellow('\n⚠️  Don\'t forget to add your Claude API key to .env file!'));
+        console.log('   Get your key from: https://console.anthropic.com/');
+    }
+    console.log('\n🚀 Next steps:');
+    console.log('1. ' + (answers.apiKey ? 'Start' : 'Add your Claude API key to .env, then start') + ' Story UI: npm run story-ui');
+    console.log('2. Start Storybook: npm run storybook');
+    console.log('3. Navigate to "Story UI > Story Generator" in your Storybook sidebar');
+    console.log('4. Start generating UI with natural language prompts!');
+    console.log('\n💡 Tips:');
+    console.log('- Run both together: npm run storybook-with-ui');
+    console.log('- Generated stories are automatically excluded from git');
+    console.log('- The Story UI panel is in your stories under "Story UI/Story Generator"');
+    console.log('- You can modify story-ui.config.js to customize the configuration');
+}

package/dist/index.js

@@ -0,0 +1,12 @@
+// Main exports for Story UI package
+export * from './story-ui.config.js';
+export * from './story-ui.config.loader.js';
+export * from './story-generator/componentDiscovery.js';
+export * from './story-generator/promptGenerator.js';
+export { createStoryUIConfig, DEFAULT_CONFIG, GENERIC_CONFIG_TEMPLATE } from './story-ui.config.js';
+export { configLoader, loadStoryUIConfig } from './story-ui.config.loader.js';
+export { discoverComponents, discoverComponentsFromDirectory, discoverComponentsFromCustomElements, discoverComponentsFromPackage } from './story-generator/componentDiscovery.js';
+export { generatePrompt, buildClaudePrompt } from './story-generator/promptGenerator.js';
+export { ProductionGitignoreManager, setupProductionGitignore } from './story-generator/productionGitignoreManager.js';
+export { InMemoryStoryService, getInMemoryStoryService } from './story-generator/inMemoryStoryService.js';
+export { StorySyncService, getStorySyncService } from './story-generator/storySync.js';

package/dist/mcp-server/index.js

@@ -0,0 +1,64 @@
+import dotenv from 'dotenv';
+import path from 'path';
+import { fileURLToPath } from 'url';
+// Get __dirname equivalent for ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// Load .env from current working directory (where the MCP server is run from)
+// This allows each environment to have its own API key configuration
+dotenv.config({ path: path.resolve(process.cwd(), '.env') });
+import express from 'express';
+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 { 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';
+const app = express();
+app.use(cors());
+app.use(express.json());
+// 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);
+// In-memory story management routes (production)
+app.get('/mcp/stories', getStoriesMetadata);
+app.get('/mcp/stories/:id', getStoryById);
+app.get('/mcp/stories/:id/content', getStoryContent);
+app.delete('/mcp/stories/:id', deleteStory);
+app.delete('/mcp/stories', clearAllStories);
+app.get('/mcp/memory-stats', getMemoryStats);
+// Synchronized story management routes (works in both dev and production)
+app.get('/mcp/sync/stories', getSyncedStories);
+app.get('/mcp/sync/stories/:id', getSyncedStoryById);
+app.delete('/mcp/sync/stories/:id', deleteSyncedStory);
+app.delete('/mcp/sync/stories', clearAllSyncedStories);
+app.get('/mcp/sync/chat-history', syncChatHistory);
+app.get('/mcp/sync/validate/:id', validateChatSession);
+const PORT = process.env.PORT || 4001;
+// Set up production-ready gitignore and directory structure on startup
+const config = loadUserConfig();
+const gitignoreManager = setupProductionGitignore(config);
+const storyService = getInMemoryStoryService(config);
+// Add memory stats endpoint for production monitoring
+app.get('/mcp/stats', (req, res) => {
+    const memoryStats = storyService.getMemoryStats();
+    const isProduction = gitignoreManager.isProductionMode();
+    res.json({
+        environment: isProduction ? 'production' : 'development',
+        storyGeneration: isProduction ? 'in-memory' : 'file-system',
+        memoryStats,
+        uptime: process.uptime(),
+        nodeVersion: process.version
+    });
+});
+app.listen(PORT, () => {
+    console.log(`MCP server running on port ${PORT}`);
+    console.log(`Environment: ${gitignoreManager.isProductionMode() ? 'Production' : 'Development'}`);
+    console.log(`Story generation: ${gitignoreManager.isProductionMode() ? 'In-memory' : 'File-system'}`);
+});

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

@@ -0,0 +1,30 @@
+import fetch from 'node-fetch';
+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' });
+    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-3-opus-20240229',
+                max_tokens: 1024,
+                messages: [{ role: 'user', content: prompt }],
+            }),
+        });
+        const data = await response.json();
+        res.json(data);
+    }
+    catch (err) {
+        res.status(500).json({ error: 'Claude API error', details: err });
+    }
+}

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

@@ -0,0 +1,26 @@
+import fs from 'fs';
+import path from 'path';
+import { STORY_UI_CONFIG } from '../../story-ui.config.js';
+const metadataPath = STORY_UI_CONFIG.componentsMetadataPath ?
+    path.resolve(process.cwd(), STORY_UI_CONFIG.componentsMetadataPath) :
+    null;
+export function getComponents(req, res) {
+    if (!metadataPath || !fs.existsSync(metadataPath)) {
+        return res.json([]);
+    }
+    const data = JSON.parse(fs.readFileSync(metadataPath, 'utf-8'));
+    const components = data?.tags?.map((tag) => ({
+        name: tag.name,
+        description: tag.description,
+    })) || [];
+    res.json(components);
+}
+export function getProps(req, res) {
+    if (!metadataPath || !fs.existsSync(metadataPath)) {
+        return res.json([]);
+    }
+    const { component } = req.query;
+    const data = JSON.parse(fs.readFileSync(metadataPath, 'utf-8'));
+    const tag = data?.tags?.find((t) => t.name === component);
+    res.json(tag?.attributes || []);
+}