frontend-mcp-design-system
Verified Safeby EliseuSantos
Overview
Provides a Micro-Copilot (MCP) HTTP server for AI agents to discover, query, and suggest React components from a centralized Storybook-documented design system in a monorepo architecture.
Installation
pnpm --filter @org/design-system mcp:devEnvironment Variables
- PORT
- LOG_LEVEL
- POLL_INTERVAL
- STORYBOOK_STATIC_PATH
- STORYBOOK_URL
- NODE_ENV
- MCP_STORYBOOK_URL
Security Notes
The server uses standard `express` practices. No `eval()` or code obfuscation was found. It relies on environment variables for sensitive paths/URLs, which is good practice. CORS is set to `*` (allow all origins), which is acceptable for a local/internal development tool but should be locked down to specific origins in a production deployment exposed externally. Input validation for tool arguments is basic string matching, which is sufficient for the current toolset, but should be carefully reviewed if new tools involving more complex operations (e.g., file paths, database queries) are added.
Similar Servers
f2c-mcp
A Model Context Protocol server for Figma Design to Code, enabling AI tools to convert Figma designs into production-ready frontend code.
penpot-mcp
The Penpot MCP server enables LLMs to perform data queries, transformation, and creation operations on Penpot design files by allowing LLMs to execute JavaScript code via a Penpot plugin.
heroui-mcp
Provides HeroUI design system component documentation and theme data to AI assistants/coding agents.
mcp-design-system-extractor
Extracts UI component information, HTML, CSS, and design tokens from Storybook instances for analysis and integration into development workflows.