shadcn-ui-mcp-server and mcp-design-system-extractor
These are complements: one provides pre-built component knowledge for shadcn/ui specifically, while the other extracts and analyzes components from any Storybook-based design system, allowing developers to leverage AI assistance across different design system sources.
About shadcn-ui-mcp-server
Jpisnice/shadcn-ui-mcp-server
A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native
Implements the Model Context Protocol (MCP) with direct GitHub API access to shadcn/ui repositories, providing AI assistants with real-time component source code, demos, and block implementations. Supports dual transport modes—stdio for CLI and SSE for HTTP-based multi-client deployments—with intelligent caching and configurable GitHub token authentication for rate limit optimization. Enables framework-agnostic component integration with switchable primitive libraries (Radix UI or Base UI) and one-click installation via `.mcpb` bundles for Claude Desktop.
About mcp-design-system-extractor
freema/mcp-design-system-extractor
MCP (Model Context Protocol) server that enables AI assistants to interact with Storybook design systems. Extract component HTML, analyze styles, and help with design system adoption and refactoring.
Uses Puppeteer to headlessly render Storybook components and extract rendered HTML with computed styles, supporting both async job queuing for large components and synchronous extraction. Provides nine MCP tools including component discovery, dependency analysis, and design token extraction from CSS, with configurable Storybook URL and optional SSL bypass for self-signed certificates. Integrates directly with Claude Desktop via the Claude CLI and works with any built Storybook instance.
Related comparisons
Scores updated daily from GitHub, PyPI, and npm data. How scores work