{"library":"storybook-mcp-server","title":"Storybook MCP Server","type":"library","description":"storybook-mcp-server is a TypeScript-based Model Context Protocol (MCP) server that enables AI assistants to interact comprehensively with Storybook instances. It allows AI agents to discover components, list and filter stories, retrieve detailed story information (including props and args), and capture screenshots across various viewports. The current stable version is 0.1.3, indicating it's in early development with a focus on feature completion and documentation. Release cadence appears to be driven by documentation updates and initial feature set completion rather than strict timeboxes, with all releases to date being pre-1.0. Key differentiators include its adherence to the MCP standard, direct integration with Storybook for metadata extraction, and leveraging Puppeteer for robust visual testing capabilities, making it a specialized tool for AI-driven component interaction and analysis.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install storybook-mcp-server"],"cli":{"name":"storybook-mcp-server","version":null}},"imports":["import { startServer } from 'storybook-mcp-server';","import { StorybookMcpServer } from 'storybook-mcp-server';","import type { ServerConfig } from 'storybook-mcp-server';"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/stefanoamorelli/storybook-mcp-server","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-mcp-server","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import { exec } from 'child_process';\nimport path from 'path';\n\n// IMPORTANT: Ensure your Storybook is running before starting the MCP server.\n// For example, run `npm run storybook` in your project, typically on http://localhost:6006.\nconsole.log('--- Starting Storybook MCP Server Quickstart ---');\nconsole.log('Please ensure your Storybook is running, e.g., on http://localhost:6006');\n\nconst storybookUrl = process.env.STORYBOOK_URL ?? 'http://localhost:6006';\nconst outputDir = path.resolve(process.cwd(), './mcp-screenshots');\n\nconsole.log(`Configured to connect to Storybook at: ${storybookUrl}`);\nconsole.log(`Screenshots will be saved to: ${outputDir}`);\n\nconst command = `storybook-mcp-server --storybook-url ${storybookUrl} --output-dir ${outputDir}`;\n\nconsole.log(`Executing command: ${command}\\n`);\n\n// Execute the CLI command as a child process\nconst childProcess = exec(command, (error, stdout, stderr) => {\n  if (error) {\n    console.error(`Error starting MCP server: ${error.message}`);\n    console.error(`Stderr: ${stderr}`);\n    return;\n  }\n  console.log(`MCP Server Stdout: ${stdout}`);\n  if (stderr) {\n    console.warn(`MCP Server Stderr: ${stderr}`);\n  }\n  console.log('\\nStorybook MCP Server started successfully (or is attempting to connect).');\n  console.log('An AI assistant (e.g., Anthropic Claude) can now connect and interact via the Model Context Protocol.');\n  console.log('Example prompt for AI: \"What components are available in my Storybook?\"');\n  console.log('To stop the server, you would typically kill this process.');\n});\n\n// Optional: Add a listener for process exit for cleanup or logging\nchildProcess.on('exit', (code) => {\n  console.log(`\\nStorybook MCP Server process exited with code ${code}.`);\n});","lang":"typescript","description":"Demonstrates how to launch the `storybook-mcp-server` as a command-line utility, connecting it to a specified Storybook instance and configuring an output directory for captured screenshots. This showcases the primary way developers interact with the server, enabling AI assistants to access Storybook content.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}