mcp-design-system-extractor
Verified Safeby freema
Overview
Extracts UI component information and design system metadata (HTML, styles, props, dependencies, theme tokens) from Storybook instances for AI agent use.
Installation
node dist/index.jsEnvironment Variables
- STORYBOOK_URL
Security Notes
The server uses Puppeteer (headless Chrome) for dynamic content rendering, which is configured with several security-hardening arguments (e.g., --no-sandbox, --disable-web-security). Network requests for Storybook content are primarily directed to the configured `STORYBOOK_URL`. The `get_external_css` tool includes a critical security check (`isDomainAllowed`) to ensure that external CSS URLs are restricted to the same domain as the Storybook, preventing arbitrary external file fetches. The setup script uses `execSync` but only for local build and environment detection purposes, not runtime operations. Overall, a good effort has been made to mitigate common risks for a tool interacting with external web content, but inherent risks of running external processes and interacting with untrusted web content (if the Storybook itself is compromised) remain.
Similar Servers
shadcn-ui-mcp-server
Provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata across React, Svelte, Vue, and React Native for enhanced development workflows.
figma-console-mcp
Provides AI assistants with real-time console access, visual debugging, and design system extraction for Figma plugin development and design analysis.
heroui-mcp
Provides HeroUI component documentation and theme data to AI assistants via Model Context Protocol (MCP).
ExpoSnap
Enables AI assistants to view and analyze screenshots from React Native/Expo applications for AI-powered mobile UI development.