A
securityA
licenseA
qualityAn MCP server that provides LLMs access to other LLMs
Last updated -
4
625
60
JavaScript
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, and Vue implementations for your AI-powered development workflow.
✨ Key Features
- 🎯 Multi-Framework Support - React, Svelte, and Vue 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
🎯 Get your GitHub token in 2 minutes: docs/getting-started/github-token.md
📚 Documentation
| Section | Description |
|---|---|
| 🚀 Getting Started | Installation, setup, and first steps |
| ⚙️ Configuration | Framework selection, tokens, and options |
| 🔌 Integration | Editor and tool integrations |
| 📖 Usage | Examples, tutorials, and use cases |
| 🎨 Frameworks | Framework-specific documentation |
| 🐛 Troubleshooting | Common issues and solutions |
| 🔧 API Reference | Tool reference and technical details |
🎨 Framework Support
This MCP server supports three popular shadcn implementations:
| Framework | Repository | Maintainer | Description |
|---|---|---|---|
| React (default) | shadcn/ui | shadcn | React components from shadcn/ui v4 |
| Svelte | shadcn-svelte | huntabyte | Svelte components from shadcn-svelte |
| Vue | shadcn-vue | unovue | Vue components from shadcn-vue |
🛠️ Essential Setup
1. Get GitHub Token (Recommended)
2. Run Server
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, and Vue implementations
- Rapid Prototyping - Get complete block implementations for dashboards, forms, etc.
- Code Generation - Generate component code with proper dependencies
📦 Installation
🔗 Quick Links
- 📖 Full Documentation
- 🚀 Getting Started Guide
- 🎨 Framework Comparison
- 🔧 API Reference
- 🐛 Troubleshooting
- 💬 Issues & Discussions
📄 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
- Anthropic - For the Model Context Protocol specification
Made with ❤️ by Janardhan Polle
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 -588PythonMIT 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 -12Python
- 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 -456658JavaScriptMIT License