Shadcn Ui Mcp Server
A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,c
Rating
Votes
0
score
Downloads
0
total
Price
Free
Access token required
Works With
About
Shadcn UI v4 MCP Server
](https://badge.fury.io/js/@jpisnice%2Fshadcn-ui-mcp-server) [
[](https://archestra.ai/mcp-catalog/jpisnice__shadcn-ui-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
- 🌐 SSE Transport - Server-Sent Events support for multi-client deployments
- 🐳 Docker Ready - Production-ready containerization with Docker Compose
🚀 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
# 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
📦 One-Click Installation (Claude Desktop)
Download and double-click the .mcpb file for instant installation:
- 1.Download
shadcn-ui-mcp-server.mcpbfrom Releases - 2.Double-click the file - Claude Desktop opens automatically
- 3.Enter your GitHub token (optional, for higher rate limits)
- 4.Click Install - tools are available immediately
Manual install: Claude Desktop → Settings → MCP → Add Server → Browse → Select .mcpb file
References: Anthropic Desktop Extensions | Building MCPB
🌐 SSE Transport & Docker Deployment
Run the server with Server-Sent Events (SSE) transport for multi-client support and production deployments:
Quick Start with SSE
# SSE mode (supports multiple concurrent connections)
node build/index.js --mode sse --port 7423
# Docker Compose (production ready)
docker-compose up -dDon't lose this
Three weeks from now, you'll want Shadcn Ui Mcp Server again. Will you remember where to find it?
Save it to your library and the next time you need Shadcn Ui Mcp Server, it’s one tap away — from any AI app you use. Group it into a bench with the rest of the team for that kind of task and you can pull the whole stack at once.
⚡ Pro tip for geeks: add a-gnt 🤵🏻♂️ as a custom connector in Claude or a custom GPT in ChatGPT — one click and your library is right there in the chat. Or, if you’re in an editor, install the a-gnt MCP server and say “use my [bench name]” in Claude Code, Cursor, VS Code, or Windsurf.
a-gnt's Take
Our honest review
This plugs directly into your AI and gives it new abilities it didn't have before. A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,c. Once connected, just ask your AI to use it. It's completely free and works across most major AI apps. This one just landed in the catalog — worth trying while it's fresh.
Tips for getting started
Tap "Get" above, pick your AI app, and follow the steps. Most installs take under 30 seconds.
What's New
Imported from GitHub
Ratings & Reviews
0.0
out of 5
0 ratings
No reviews yet. Be the first to share your experience.