A
securityA
licenseA
qualityAn MCP server that provides LLMs access to other LLMs
Last updated -
15
66
MIT License
The @jpisnice/shadcn-ui-mcp-server provides AI assistants with comprehensive access to shadcn/ui (React) and shadcn-svelte (Svelte) components, blocks, and metadata via the Model Context Protocol (MCP).
Retrieve Component Source Code: Fetch TypeScript/Svelte source for shadcn/ui components (e.g.,
button,accordion)Access Component Demos: Get example implementations and usage patterns
List Available Components: Discover all shadcn/ui components
Retrieve Component Metadata: Get dependencies, descriptions, and configuration details
Retrieve Block Implementations: Get complete UI blocks (dashboards, calendars, login forms) with optional dependent component files
Filter Blocks by Category: List blocks by type (calendar, dashboard, login, sidebar, products)
Browse Repository Structure: Explore the shadcn/ui or shadcn-svelte repository directories
Switch Frameworks: Toggle between React (default) and Svelte implementations
Improve API Rate Limits: Use GitHub Personal Access Token to increase limits from 60 to 5,000 requests per hour
Integrate with AI Clients: Configure with Claude Desktop, Continue.dev, VS Code, and Cursor for seamless AI assistant interaction
Integrates with GitHub API for efficient caching and rate limit handling, enabling the server to access and retrieve shadcn/ui component resources from the GitHub repository.
Provides comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata, allowing AI assistants to retrieve component source code, example implementations, block implementations, dependencies, and repository structure information.
Shadcn UI v4 MCP Server
🚀 The fastest way to integrate shadcn/ui components into your AI workflow
A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow.
✨ Key Features
🎯 Multi-Framework Support - React, Svelte, Vue, and React Native implementations
📦 Component Source Code - Latest shadcn/ui v4 TypeScript source
🎨 Component Demos - Example implementations and usage patterns
🏗️ Blocks Support - Complete block implementations (dashboards, calendars, forms)
📋 Metadata Access - Dependencies, descriptions, and configuration details
🔍 Directory Browsing - Explore repository structures
⚡ Smart Caching - Efficient GitHub API integration with rate limit handling
🚀 Quick Start
# Basic usage (60 requests/hour)
npx @jpisnice/shadcn-ui-mcp-server
# With GitHub token (5000 requests/hour) - Recommended
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
# Switch frameworks
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
🎯 Get your GitHub token in 2 minutes: docs/getting-started/github-token.md
📚 Documentation
Section | Description |
Installation, setup, and first steps | |
Framework selection, tokens, and options | |
Editor and tool integrations | |
Examples, tutorials, and use cases | |
Framework-specific documentation | |
Common issues and solutions | |
Tool reference and technical details |
🎨 Framework Support
This MCP server supports four popular shadcn implementations:
Framework | Repository | Maintainer | Description |
React (default) | React components from shadcn/ui v4 | ||
Svelte | Svelte components from shadcn-svelte | ||
Vue | Vue components from shadcn-vue | ||
React Native | React Native components from react-native-reusables |
🛠️ Essential Setup
1. Get GitHub Token (Recommended)
# Visit: https://github.com/settings/tokens
# Generate token with no scopes needed
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here
2. Run Server
# React (default)
npx @jpisnice/shadcn-ui-mcp-server
# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
# Vue
npx @jpisnice/shadcn-ui-mcp-server --framework vue
# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
3. Integrate with Your Editor
VS Code: docs/integration/vscode.md
Cursor: docs/integration/cursor.md
Claude Desktop: docs/integration/claude-desktop.md
Continue.dev: docs/integration/continue.md
🎯 Use Cases
AI-Powered Development - Let AI assistants build UIs with shadcn/ui
Component Discovery - Explore available components and their usage
Multi-Framework Learning - Compare React, Svelte, Vue, and React Native implementations
Rapid Prototyping - Get complete block implementations for dashboards, forms, etc.
Code Generation - Generate component code with proper dependencies
📦 Installation
# Global installation (optional)
npm install -g @jpisnice/shadcn-ui-mcp-server
# Or use npx (recommended)
npx @jpisnice/shadcn-ui-mcp-server
🔗 Quick Links
📄 License
MIT License - see LICENSE for details.
🙏 Acknowledgments
shadcn - For the amazing React UI component library
huntabyte - For the excellent Svelte implementation
unovue - For the comprehensive Vue implementation
Founded Labs - For the React Native implementation
Anthropic - For the Model Context Protocol specification
Made with ❤️ by
Star ⭐ this repo if you find it helpful!
remote-capable server
The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.
Tools
A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation
- ✨ Key Features
- 🚀 Quick Start
- 📚 Documentation
- 🎨 Framework Support
- 🛠️ Essential Setup
- 🎯 Use Cases
- 📦 Installation
- 🔗 Quick Links
- 📄 License
- 🙏 Acknowledgments
Related Resources
Related MCP Servers
- -securityAlicense-qualityAn MCP server that provides tools to load and fetch documentation from any llms.txt source, giving users full control over context retrieval for LLMs in IDE agents and applications.Last updated -752MIT License
- AsecurityFlicenseAqualityAn MCP server that fetches real-time documentation for popular libraries like Langchain, Llama-Index, MCP, and OpenAI, allowing LLMs to access updated library information beyond their knowledge cut-off dates.Last updated -12
- AsecurityAlicenseAqualityHelps AI assistants access shadcn/ui component documentation and examples through a TypeScript-based MCP server that provides reference information for component details, usage examples, and search capabilities.Last updated -427260MIT License