[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73802":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":44,"readmeContent":45,"aiSummary":46,"trendingCount":16,"starSnapshotCount":16,"syncStatus":47,"lastSyncTime":48,"discoverSource":49},73802,"shadcn-ui-mcp-server","Jpisnice\u002Fshadcn-ui-mcp-server","Jpisnice","A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native","",null,"TypeScript",2784,291,19,1,0,8,18,29.4,"MIT License",false,"master",true,[25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"ai","expo","mcp","modelcontextprotocol","nextjs","npm","npm-package","npx","react","react-native","shadcn-ui","svelte","sveltekit","ts","typescript","ui","vue","vuejs","webdev","2026-06-12 02:03:18","# Shadcn UI v4 MCP Server\n\n[![npm version](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@jpisnice%2Fshadcn-ui-mcp-server.svg)](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@jpisnice%2Fshadcn-ui-mcp-server)\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg)](https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n\n[![Trust Score](https:\u002F\u002Farchestra.ai\u002Fmcp-catalog\u002Fapi\u002Fbadge\u002Fquality\u002FJpisnice\u002Fshadcn-ui-mcp-server)](https:\u002F\u002Farchestra.ai\u002Fmcp-catalog\u002Fjpisnice__shadcn-ui-mcp-server)\n\n> **🚀 The fastest way to integrate shadcn\u002Fui components into your AI workflow**\n\nA Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to [shadcn\u002Fui v4](https:\u002F\u002Fui.shadcn.com\u002F) components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow.\n\n## ✨ Key Features\n\n- **🎯 Multi-Framework Support** - React, Svelte, Vue, and React Native implementations\n- **📦 Component Source Code** - Latest shadcn\u002Fui v4 TypeScript source\n- **🎨 Component Demos** - Example implementations and usage patterns  \n- **🏗️ Blocks Support** - Complete block implementations (dashboards, calendars, forms)\n- **📋 Metadata Access** - Dependencies, descriptions, and configuration details\n- **🔍 Directory Browsing** - Explore repository structures\n- **⚡ Smart Caching** - Efficient GitHub API integration with rate limit handling\n- **🌐 SSE Transport** - Server-Sent Events support for multi-client deployments\n- **🐳 Docker Ready** - Production-ready containerization with Docker Compose\n\n## 🚀 Quick Start\n\n```bash\n# Basic usage (60 requests\u002Fhour)\nnpx @jpisnice\u002Fshadcn-ui-mcp-server\n\n# With GitHub token (5000 requests\u002Fhour) - Recommended\nnpx @jpisnice\u002Fshadcn-ui-mcp-server --github-api-key ghp_your_token_here\n\n# Switch frameworks\nnpx @jpisnice\u002Fshadcn-ui-mcp-server --framework svelte\nnpx @jpisnice\u002Fshadcn-ui-mcp-server --framework vue\nnpx @jpisnice\u002Fshadcn-ui-mcp-server --framework react-native\n\n# Use Base UI instead of Radix (React only)\nnpx @jpisnice\u002Fshadcn-ui-mcp-server --ui-library base\n```\n\n**🎯 Get your GitHub token in 2 minutes**: [docs\u002Fgetting-started\u002Fgithub-token.md](docs\u002Fgetting-started\u002Fgithub-token.md)\n\n## 📦 One-Click Installation (Claude Desktop)\n\nDownload and double-click the `.mcpb` file for instant installation:\n\n1. Download `shadcn-ui-mcp-server.mcpb` from [Releases](https:\u002F\u002Fgithub.com\u002FJpisnice\u002Fshadcn-ui-mcp-server\u002Freleases)\n2. Double-click the file - Claude Desktop opens automatically\n3. Enter your GitHub token (optional, for higher rate limits)\n4. Click Install - tools are available immediately\n\n**Manual install:** Claude Desktop → Settings → MCP → Add Server → Browse → Select `.mcpb` file\n\n> **References:** [Anthropic Desktop Extensions](https:\u002F\u002Fwww.anthropic.com\u002Fengineering\u002Fdesktop-extensions) | [Building MCPB](https:\u002F\u002Fsupport.claude.com\u002Fen\u002Farticles\u002F12922929-building-desktop-extensions-with-mcpb)\n\n## 🌐 SSE Transport & Docker Deployment\n\nRun the server with **Server-Sent Events (SSE)** transport for multi-client support and production deployments:\n\n### Quick Start with SSE\n```bash\n# SSE mode (supports multiple concurrent connections)\nnode build\u002Findex.js --mode sse --port 7423\n\n# Docker Compose (production ready)\ndocker-compose up -d\n\n# Connect with Claude Code\nclaude mcp add --scope user --transport sse shadcn-mcp-server http:\u002F\u002Flocalhost:7423\u002Fsse\n```\n\n### Transport Modes\n- **`stdio`** (default) - Standard input\u002Foutput for CLI usage\n- **`sse`** - Server-Sent Events for HTTP-based connections\n- **`dual`** - Both stdio and SSE simultaneously\n\n### Docker Examples\n```bash\n# Basic container\ndocker run -p 7423:7423 shadcn-ui-mcp-server\n\n# With GitHub API token\ndocker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server\n\n# Docker Compose (recommended)\ndocker-compose up -d\ncurl http:\u002F\u002Flocalhost:7423\u002Fhealth\n```\n\n### Environment Variables\n- `MCP_TRANSPORT_MODE` - Transport mode (stdio|sse|dual)\n- `MCP_PORT` - SSE server port (default: 7423 - SHADCN on keypad!)\n- `MCP_HOST` - Host binding (default: 0.0.0.0)\n- `MCP_CORS_ORIGINS` - CORS origins (comma-separated)\n- `GITHUB_PERSONAL_ACCESS_TOKEN` - GitHub API token\n- `UI_LIBRARY` - UI primitive library: `radix` (default) or `base` (React only)\n\n## 📚 Documentation\n\n| Section | Description |\n|---------|-------------|\n| [🚀 Getting Started](docs\u002Fgetting-started\u002F) | Installation, setup, and first steps |\n| [⚙️ Configuration](docs\u002Fconfiguration\u002F) | Framework selection, tokens, and options |\n| [🔌 Integration](docs\u002Fintegration\u002F) | Editor and tool integrations |\n| [📖 Usage](docs\u002Fusage\u002F) | Examples, tutorials, and use cases |\n| [🎨 Frameworks](docs\u002Fframeworks\u002F) | Framework-specific documentation |\n| [🐛 Troubleshooting](docs\u002Ftroubleshooting\u002F) | Common issues and solutions |\n| [🔧 API Reference](docs\u002Fapi\u002F) | Tool reference and technical details |\n\n## 🎨 Framework Support\n\nThis MCP server supports four popular shadcn implementations:\n\n| Framework | Repository | Maintainer | Description |\n|-----------|------------|------------|-------------|\n| **React** (default) | [shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com\u002F) | [shadcn](https:\u002F\u002Fgithub.com\u002Fshadcn) | React components from shadcn\u002Fui v4 |\n| **Svelte** | [shadcn-svelte](https:\u002F\u002Fwww.shadcn-svelte.com\u002F) | [huntabyte](https:\u002F\u002Fgithub.com\u002Fhuntabyte) | Svelte components from shadcn-svelte |\n| **Vue** | [shadcn-vue](https:\u002F\u002Fwww.shadcn-vue.com\u002F) | [unovue](https:\u002F\u002Fgithub.com\u002Funovue) | Vue components from shadcn-vue |\n| **React Native** | [react-native-reusables](https:\u002F\u002Fgithub.com\u002Ffounded-labs\u002Freact-native-reusables) | [Founded Labs](https:\u002F\u002Fgithub.com\u002Ffounded-labs) | React Native components from react-native-reusables |\n\n### UI Library (React only)\n\nshadcn\u002Fui v4 supports two primitive libraries for React: **Radix UI** (default) and **Base UI**.\n\n```bash\n# Radix UI (default)\nnpx @jpisnice\u002Fshadcn-ui-mcp-server --framework react --ui-library radix\n\n# Base UI\nnpx @jpisnice\u002Fshadcn-ui-mcp-server --framework react --ui-library base\n\n# Or via environment variable\nUI_LIBRARY=base npx @jpisnice\u002Fshadcn-ui-mcp-server\n```\n\nClaude Desktop config example:\n```json\n{\n  \"args\": [\"--framework\", \"react\", \"--ui-library\", \"base\"]\n}\n```\n\n## 🛠️ Essential Setup\n\n### 1. Get GitHub Token (Recommended)\n```bash\n# Visit: https:\u002F\u002Fgithub.com\u002Fsettings\u002Ftokens\n# Generate token with no scopes needed\nexport GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here\n```\n\n### 2. Run Server\n```bash\n# React (default)\nnpx @jpisnice\u002Fshadcn-ui-mcp-server\n\n# Svelte\nnpx @jpisnice\u002Fshadcn-ui-mcp-server --framework svelte\n\n# Vue  \nnpx @jpisnice\u002Fshadcn-ui-mcp-server --framework vue\n\n# React Native\nnpx @jpisnice\u002Fshadcn-ui-mcp-server --framework react-native\n```\n\n### 3. Integrate with Your Editor\n- **Claude Code**: See [Claude Code Integration](#-claude-code-integration) below\n- **VS Code**: [docs\u002Fintegration\u002Fvscode.md](docs\u002Fintegration\u002Fvscode.md)\n- **Cursor**: [docs\u002Fintegration\u002Fcursor.md](docs\u002Fintegration\u002Fcursor.md)\n- **Claude Desktop**: [docs\u002Fintegration\u002Fclaude-desktop.md](docs\u002Fintegration\u002Fclaude-desktop.md)\n- **Continue.dev**: [docs\u002Fintegration\u002Fcontinue.md](docs\u002Fintegration\u002Fcontinue.md)\n\n## 💻 Claude Code Integration\n\n### Quick Add (CLI)\n\n```bash\n# Add the shadcn-ui MCP server\nclaude mcp add shadcn -- bunx -y @jpisnice\u002Fshadcn-ui-mcp-server --github-api-key YOUR_TOKEN\n```\n\n### SSE Transport\n\nFor production deployments with SSE transport:\n\n```bash\n# Start server in SSE mode\nnode build\u002Findex.js --mode sse --port 7423\n\n# Connect with Claude Code\nclaude mcp add --scope user --transport sse shadcn-mcp-server http:\u002F\u002Flocalhost:7423\u002Fsse\n```\n\n### Framework-Specific Commands\n\nSee [Claude Code Integration Guide](docs\u002Fintegration\u002Fclaude-code.md) for framework-specific commands (React, Svelte, Vue, React Native).\n\n> **Reference:** [Claude Code MCP Documentation](https:\u002F\u002Fcode.claude.com\u002Fdocs\u002Fen\u002Fmcp)\n\n## 🎯 Use Cases\n\n- **AI-Powered Development** - Let AI assistants build UIs with shadcn\u002Fui\n- **Multi-Client Deployments** - SSE transport supports multiple concurrent connections\n- **Production Environments** - Docker Compose ready with health checks and monitoring\n- **Component Discovery** - Explore available components and their usage\n- **Multi-Framework Learning** - Compare React, Svelte, Vue, and React Native implementations\n- **Rapid Prototyping** - Get complete block implementations for dashboards, forms, etc.\n- **Code Generation** - Generate component code with proper dependencies\n\n## 📦 Installation\n\n```bash\n# Global installation (optional)\nnpm install -g @jpisnice\u002Fshadcn-ui-mcp-server\n\n# Or use npx (recommended)\nnpx @jpisnice\u002Fshadcn-ui-mcp-server\n```\n\n## 🔨 Building from Source\n\n### Prerequisites\n\n- Node.js >= 18.0.0\n- npm or pnpm\n\n### Build Steps\n\n```bash\n# Clone the repository\ngit clone https:\u002F\u002Fgithub.com\u002FJpisnice\u002Fshadcn-ui-mcp-server.git\ncd shadcn-ui-mcp-server\n\n# Install dependencies\nnpm install\n\n# Build the project\nnpm run build\n\n# Run the server\nnode build\u002Findex.js --github-api-key YOUR_TOKEN\n```\n\n### Run Locally\n\n```bash\n# After building, run with options\nnode build\u002Findex.js --github-api-key YOUR_TOKEN\nnode build\u002Findex.js --framework svelte\n```\n\n### Building MCPB Package\n\nThe project includes a `manifest.json` following the [MCPB specification](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fmcpb). The `.mcpb` file is a ZIP archive containing the server, dependencies, and configuration.\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for detailed packaging instructions.\n\n> **Reference:** [Building Desktop Extensions with MCPB](https:\u002F\u002Fsupport.claude.com\u002Fen\u002Farticles\u002F12922929-building-desktop-extensions-with-mcpb)\n\n## 🔗 Quick Links\n\n- 📖 [Full Documentation](docs\u002F)\n- 🚀 [Getting Started Guide](docs\u002Fgetting-started\u002F)\n- 🌐 [SSE Transport & Docker Guide](SSE_IMPLEMENTATION.md)\n- 🎨 [Framework Comparison](docs\u002Fframeworks\u002F)\n- 🔧 [API Reference](docs\u002Fapi\u002F)\n- 🐛 [Troubleshooting](docs\u002Ftroubleshooting\u002F)\n- 💬 [Issues & Discussions](https:\u002F\u002Fgithub.com\u002FJpisnice\u002Fshadcn-ui-mcp-server)\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) for details.\n\n## 🙏 Acknowledgments\n\n- **[shadcn](https:\u002F\u002Fgithub.com\u002Fshadcn)** - For the amazing React UI component library\n- **[huntabyte](https:\u002F\u002Fgithub.com\u002Fhuntabyte)** - For the excellent Svelte implementation\n- **[unovue](https:\u002F\u002Fgithub.com\u002Funovue)** - For the comprehensive Vue implementation\n- **[Founded Labs](https:\u002F\u002Fgithub.com\u002Ffounded-labs)** - For the React Native implementation\n- **[Anthropic](https:\u002F\u002Fanthropic.com)** - For the Model Context Protocol specification\n\n---\n\n**Made with ❤️ by [Janardhan Polle](https:\u002F\u002Fgithub.com\u002FJpisnice)**\n\n**Star ⭐ this repo if you find it helpful!**\n","Jpisnice\u002Fshadcn-ui-mcp-server 是一个为AI助手提供shadcn\u002Fui组件结构、用法和安装信息的MCP服务器，兼容React、Svelte 5、Vue及React Native。其核心功能包括多框架支持、组件源代码访问、示例演示、块支持、元数据获取、目录浏览、智能缓存、SSE传输以及Docker容器化部署。该项目特别适用于希望将shadcn\u002Fui组件快速集成到基于AI的工作流中的开发者，无论是前端还是跨平台应用开发场景都能从中受益。",2,"2026-06-11 03:47:25","high_star"]