storybook-mcp-server

import { exec } from 'child_process'; import path from 'path'; // IMPORTANT: Ensure your Storybook is running before starting the MCP server. // For example, run `npm run storybook` in your project, typically on http://localhost:6006. console.log('--- Starting Storybook MCP Server Quickstart ---'); console.log('Please ensure your Storybook is running, e.g., on http://localhost:6006'); const storybookUrl = process.env.STORYBOOK_URL ?? 'http://localhost:6006'; const outputDir = path.resolve(process.cwd(), './mcp-screenshots'); console.log(`Configured to connect to Storybook at: ${storybookUrl}`); console.log(`Screenshots will be saved to: ${outputDir}`); const command = `storybook-mcp-server --storybook-url ${storybookUrl} --output-dir ${outputDir}`; console.log(`Executing command: ${command}\n`); // Execute the CLI command as a child process const childProcess = exec(command, (error, stdout, stderr) => { if (error) { console.error(`Error starting MCP server: ${error.message}`); console.error(`Stderr: ${stderr}`); return; } console.log(`MCP Server Stdout: ${stdout}`); if (stderr) { console.warn(`MCP Server Stderr: ${stderr}`); } console.log('\nStorybook MCP Server started successfully (or is attempting to connect).'); console.log('An AI assistant (e.g., Anthropic Claude) can now connect and interact via the Model Context Protocol.'); console.log('Example prompt for AI: "What components are available in my Storybook?"'); console.log('To stop the server, you would typically kill this process.'); }); // Optional: Add a listener for process exit for cleanup or logging childProcess.on('exit', (code) => { console.log(`\nStorybook MCP Server process exited with code ${code}.`); });