** 🚀 将 shadcn/ui 组件集成到你的 AI 工作流程中最快的方法**

一台模型上下文协议（MCP）服务器，为AI助手提供对shadcn/ui v4组件、模块、演示和元数据的全面访问。无缝检索React、Svelte、Vue和React Native实现，满足您的AI驱动开发流程。

✨ 主要特色

• ** 🎯 多框架支持** - React、Svelte、Vue 和 React Native 实现
• ** 📦 组件源代码** - 最新的 shadcn/ui v4 TypeScript 源代码
• ** 🎨 组件演示** - 示例实现和使用模式
• ** 🏗️ 块支持** - 完整的块实现（仪表盘、日历、表单）
• ** 📋 元数据访问** - 依赖关系、描述和配置细节
• ** 🔍 目录浏览** - 探索仓库结构
• ** ⚡ 智能缓存** - 高效的 GitHub API 集成，支持速率限制处理，并在列表和读取结果上提供协议缓存提示（ttlMs/cacheScope）
• ** ⌨️ 参数补全** - 提示词和资源模板参数（组件名称、包管理器、构建工具等）的自动补全

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, 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, plus protocol cache hints (ttlMs/cacheScope) on list and read results
• ⌨️ Argument Completion - Autocomplete for prompt and resource-template arguments (component names, package managers, build tools, and more)
• 🌐 Streamable HTTP Transport - Stateless /mcp endpoint for multi-client deployments (MCP spec 2026-07-28)
• 🐳 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.mcpb from 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