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
A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. This server enables AI tools like Claude Desktop, Continue.dev, VS Code, Cursor, and other MCP-compatible clients to retrieve and work with shadcn/ui components seamlessly.
🚀 Key Features
- Component Source Code: Get the latest shadcn/ui v4 component TypeScript source
- Component Demos: Access example implementations and usage patterns
- Blocks Support: Retrieve complete block implementations (dashboards, calendars, login forms, etc.)
- Metadata Access: Get component dependencies, descriptions, and configuration details
- Directory Browsing: Explore the shadcn/ui repository structure
- GitHub API Integration: Efficient caching and intelligent rate limit handling
📦 Quick Start
⚡ Using npx (Recommended)
The fastest way to get started - no installation required!
🎯 Try it now: Run npx @jpisnice/shadcn-ui-mcp-server --help
to see all options!
🔧 Command Line Options
🔑 GitHub API Token Setup
Why do you need a token?
- Without token: Limited to 60 API requests per hour
- With token: Up to 5,000 requests per hour
- Better reliability and faster responses
📝 Getting Your Token (2 minutes)
- Go to GitHub Settings:
- Visit GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)
- Or: GitHub Profile → Settings → Developer settings → Personal access tokens
- Generate New Token:
- Click "Generate new token (classic)"
- Add a note: "shadcn-ui MCP server"
- Expiration: Choose your preference (90 days recommended)
- Scopes: ✅ No scopes needed! (public repository access is sufficient)
- Copy Your Token:
- Copy the generated token (starts with
ghp_
) - ⚠️ Save it securely - you won't see it again!
- Copy the generated token (starts with
🚀 Using Your Token
Method 1: Command Line (Quick testing)
Method 2: Environment Variable (Recommended)
🛠️ Editor Integration
VS Code Integration
Method 1: Using Continue Extension
- Install Continue Extension:
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "Continue" and install it
- Configure MCP Server:
- Open Command Palette (Ctrl+Shift+P)
- Type "Continue: Configure" and select it
- Add this configuration to your settings:
Method 2: Using Claude Extension
- Install Claude Extension:
- Search for "Claude" in VS Code extensions
- Install the official Claude extension
- Configure MCP Server:
- Add to your VS Code settings.json:
Cursor Integration
Method 1: Global Configuration
- Open Cursor Settings:
- Go to Settings (Cmd/Ctrl + ,)
- Search for "MCP" or "Model Context Protocol"
- Add MCP Server Configuration:
Method 2: Workspace Configuration
Create a .cursorrules
file in your project root:
Claude Desktop Integration
Add to your Claude Desktop configuration (~/.config/Claude/claude_desktop_config.json
):
Or with environment variable:
Continue.dev Integration
- Install Continue.dev:
- Download from continue.dev
- Install the application
- Configure MCP Server:
- Open Continue.dev
- Go to Settings → MCP Servers
- Add new server:
🎯 Usage Examples
Getting Component Source Code
Ask your AI assistant:
The AI can now access the complete TypeScript source code for the button component.
Creating a Dashboard
Ask your AI assistant:
The AI can retrieve the complete dashboard block implementation and customize it for your needs.
Building a Login Form
Ask your AI assistant:
The AI can list all available components and help you build the form.
🛠️ Available Tools
The MCP server provides these tools for AI assistants:
Component Tools
get_component
- Get component source codeget_component_demo
- Get component usage exampleslist_components
- List all available componentsget_component_metadata
- Get component dependencies and info
Block Tools
get_block
- Get complete block implementations (dashboard-01, calendar-01, etc.)list_blocks
- List all available blocks with categories
Repository Tools
get_directory_structure
- Explore the shadcn/ui repository structure
Example Tool Usage
🐛 Troubleshooting
Common Issues
"Rate limit exceeded" errors:
"Command not found" errors:
Component not found:
Network/proxy issues:
Editor not recognizing MCP server:
Debug Mode
Enable verbose logging:
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🤝 Contributing
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
📞 Support
🔗 Related Projects
- shadcn/ui - The component library this server provides access to
- Model Context Protocol - The protocol specification
- MCP TypeScript SDK - Official MCP SDK
⭐ Acknowledgments
- shadcn for the amazing UI component library
- Anthropic for the Model Context Protocol specification
- The open source community for inspiration and contributions
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
- 🔑 GitHub API Token Setup
- 🛠️ Editor Integration
- 🎯 Usage Examples
- 🛠️ Available Tools
- 🐛 Troubleshooting
- 📄 License
- 🤝 Contributing
- 📞 Support
- 🔗 Related Projects
- ⭐ Acknowledgments
Related Resources
Related MCP Servers
- AsecurityAlicenseAqualityAn MCP server that provides LLMs access to other LLMsLast updated -455957JavaScriptMIT License
- -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 -553PythonMIT License
- -securityFlicense-qualityAn 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 -2Python
- 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 -435256JavaScriptMIT License