MCP server
by jpisnice
Access shadcn/ui v4 components, blocks, and demos for rapid React UI library development. Seamless integration and sourc
Installs and manages shadcn/ui components and blocks through AI assistants. Lists available components, retrieves documentation, and generates installation commands for your preferred package manager.
shadcn/ui is a community-built MCP server published by jpisnice that provides AI assistants with tools and capabilities via the Model Context Protocol. Access shadcn/ui v4 components, blocks, and demos for rapid React UI library development. Seamless integration and sourc It is categorized under developer tools, design. This server exposes 7 tools that AI clients can invoke during conversations and coding sessions.
You can install shadcn/ui in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport. This server supports remote connections over HTTP, so no local installation is required.
MIT
shadcn/ui is released under the MIT license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.
Add new capabilities to Claude beyond text generation
Example
Access external data sources, execute code, interact with tools and services
Transform Claude from chatbot to action-taking agent
Provide Claude with access to relevant context and data
Example
Load project documentation, access knowledge bases, query databases
Get more accurate, context-aware responses
Automate multi-step workflows combining AI and external tools
Example
Research → Summarize → Create document → Send notification
Complete complex tasks end-to-end without manual steps
Share your MCP server with the developer community
Useful MCP listing: shadcn/ui is the kind of server we cite when onboarding engineers to host + tool permissions.
We wired shadcn/ui into a staging workspace; the listing’s GitHub and npm pointers saved time versus hunting across READMEs.
shadcn/ui has been reliable for tool-calling workflows; the MCP profile page is a good permalink for internal docs.
shadcn/ui reduced integration guesswork — categories and install configs on the listing matched the upstream repo.
Strong directory entry: shadcn/ui surfaces stars and publisher context so we could sanity-check maintenance before adopting.
shadcn/ui reduced integration guesswork — categories and install configs on the listing matched the upstream repo.
According to our notes, shadcn/ui benefits from clear Model Context Protocol framing — fewer ambiguous “AI plugin” claims.
According to our notes, shadcn/ui benefits from clear Model Context Protocol framing — fewer ambiguous “AI plugin” claims.
Strong directory entry: shadcn/ui surfaces stars and publisher context so we could sanity-check maintenance before adopting.
We evaluated shadcn/ui against two servers with overlapping tools; this profile had the clearer scope statement.
showing 1-10 of 59
🚀 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.
# 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
# Use Base UI instead of Radix (React only)
npx @jpisnice/shadcn-ui-mcp-server --ui-library base
🎯 Get your GitHub token in 2 minutes: docs/getting-started/github-token.md
Download and double-click the .mcpb file for instant installation:
shadcn-ui-mcp-server.mcpb from ReleasesManual install: Claude Desktop → Settings → MCP → Add Server → Browse → Select .mcpb file
References: Anthropic Desktop Extensions | Building MCPB
Run the server with Server-Sent Events (SSE) transport for multi-client support and production deployments:
# SSE mode (supports multiple concurrent connections)
node build/index.js --mode sse --port 7423
# Docker Compose (production ready)
docker-compose up -d
# Connect with Claude Code
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse
stdio (default) - Standard input/output for CLI usagesse - Server-Sent Events for HTTP-based connectionsdual - Both stdio and SSE simultaneously# Basic container
docker run -p 7423:7423 shadcn-ui-mcp-server
# With GitHub API token
docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server
# Docker Compose (recommended)
docker-compose up -d
curl http://localhost:7423/health
MCP_TRANSPORT_MODE - Transport mode (stdio|sse|dual)MCP_PORT - SSE server port (default: 7423 - SHADCN on keypad!)MCP_HOST - Host binding (default: 0.0.0.0)MCP_CORS_ORIGINS - CORS origins (comma-separated)GITHUB_PERSONAL_ACCESS_TOKEN - GitHub API tokenUI_LIBRARY - UI primitive library: radix (default) or base (React only)| 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 |
This MCP server supports four 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 |
| React Native | react-native-reusables | Founded Labs | React Native components from react-native-reusables |
shadcn/ui v4 supports two primitive libraries for React: Radix UI (default) and Base UI.
# Radix UI (default)
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library radix
# Base UI
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library base
# Or via environment variable
UI_LIBRARY=base npx @jpisnice/shadcn-ui-mcp-server
Claude Desktop config example:
{
"args": ["--framework", "react", "--ui-library", "base"]
}
# Visit: https://github.com/settings/tokens
# Generate token with no scopes needed
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here
# 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
# Add the shadcn-ui MCP server
claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN
For production deployments with SSE transport:
# Start server in SSE mode
node build/index.js --mode sse --port 7423
# Connect with Claude Code
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse
See Claude Code Integration Guide for framework-specific commands (React, Svelte, Vue, React Native).
Reference: Claude Code MCP Documentation
# Global installation (optional)
npm install -g @jpisnice/shadcn-ui-mcp-server
# Or use npx (recommended)
npx @jpisnice/shadcn-ui-mcp-server
# Clone the repository
git clone https://github.com/Jpisnice/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server
# Install dependencies
npm install
# Build the project
npm run build
# Run the server
node build/index.js --github-api-key YOUR_TOKEN
# After building, run with options
node build/index.js --github-api-key YOUR_TOKEN
node build/index.js --framework svelte
The project includes a manifest.json following the MCPB specification. The .mcpb file is a ZIP archive containing the server, dependencies, and configuration.
See CONTRIBUTING.md for detailed packaging instructions.
Reference: Building Desktop Extensions with MCPB
MIT License - see LICENSE for details.
Prerequisites
Time Estimate
15-60 minutes depending on server complexity
Steps
Troubleshooting
✓ Do
✗ Don't
💡 Pro Tips
Architecture
Model Context Protocol standardizes how AI hosts (Claude, Cursor) communicate with external tools and data sources through server implementations.
Protocols
Compatibility
✓ Use when
Use when you need Claude to access external data, execute actions, or integrate with tools. Best for extending AI capabilities beyond conversation.
✗ Avoid when
Avoid when native integrations exist (use official APIs directly), for real-time critical systems, or when security/compliance requires zero external dependencies.