Shadcn UI v4 MCP Server

🚀 shadcn/ui komponentlerini AI iş akışınıza entegre etmenin en hızlı yolu

Yapay zeka asistanlarına shadcn/ui v4 komponentleri, blokları, demoları ve metadatalarına kapsamlı erişim sağlayan bir Model Context Protocol (MCP) sunucusu. AI destekli geliştirme iş akışınız için React, Svelte, Vue ve React Native uygulamalarını sorunsuzca alın.

✨ Temel Özellikler

• 🎯 Çoklu Framework Desteği - React, Svelte, Vue ve React Native uygulamaları
• 📦 Component Kaynak Kodu - En son shadcn/ui v4 TypeScript kaynağı
• 🎨 Component Demoları - Örnek uygulamalar ve kullanım desenleri
• 🏗️ Blocks Desteği - Tam blok uygulamaları (panolar, takvimler, formlar)
• 📋 Metadata Erişimi - Bağımlılıklar, açıklamalar ve yapılandırma detayları
• 🔍 Dizin Taraması - Repository yapılarını keşfetme
• ⚡ Akıllı Caching - Rate limit yönetimiyle etkili GitHub API entegrasyonu
• 🌐 SSE Transport - Çok istemcili dağıtımlar için Server-Sent Events desteği
• 🐳 Docker Ready - Docker Compose ile üretime hazır konteynerizasyon

🚀 Hızlı Başlangıç

# Temel kullanım (saatte 60 istek)
npx @jpisnice/shadcn-ui-mcp-server

# GitHub token ile (saatte 5000 istek) - Önerilen
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Framework değiştir
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

# Radix yerine Base UI kullan (yalnızca React)
npx @jpisnice/shadcn-ui-mcp-server --ui-library base

🎯 GitHub tokeninizi 2 dakikada alın: docs/getting-started/github-token.md

📦 Tek Tıkla Kurulum (Claude Desktop)

Anında kurulum için .mcpb dosyasını indirip çift tıklayın:

1. Releases sayfasından shadcn-ui-mcp-server.mcpb dosyasını indirin
2. Dosyaya çift tıklayın - Claude Desktop otomatik olarak açılır
3. GitHub tokeninizi girin (isteğe bağlı, daha yüksek rate limitler için)
4. Kur'u tıklayın - araçlar hemen kullanılabilir hale gelir

Manuel kurulum: Claude Desktop → Ayarlar → MCP → Sunucu Ekle → Gözat → .mcpb dosyasını seçin

Referanslar: Anthropic Desktop Extensions | MCPB Oluşturma

🌐 SSE Transport ve Docker Dağıtımı

Çok istemcili destek ve ürün dağıtımları için sunucuyu Server-Sent Events (SSE) transport ile çalıştırın:

SSE ile Hızlı Başlangıç

# SSE modu (birden fazla eşzamanlı bağlantıyı destekler)
node build/index.js --mode sse --port 7423

# Docker Compose (üretime hazır)
docker-compose up -d

# Claude Code ile bağlan
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse

Transport Modları

• stdio (varsayılan) - CLI kullanımı için standart giriş/çıkış
• sse - HTTP tabanlı bağlantılar için Server-Sent Events
• dual - Stdio ve SSE aynı anda

Docker Örnekleri

# Temel konteyner
docker run -p 7423:7423 shadcn-ui-mcp-server

# GitHub API token ile
docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server

# Docker Compose (önerilen)
docker-compose up -d
curl http://localhost:7423/health

Ortam Değişkenleri

• MCP_TRANSPORT_MODE - Transport modu (stdio|sse|dual)
• MCP_PORT - SSE sunucu portu (varsayılan: 7423 - SHADCN on keypad!)
• MCP_HOST - Ana bilgisayar bağlantısı (varsayılan: 0.0.0.0)
• MCP_CORS_ORIGINS - CORS kaynakları (virgülle ayrılmış)
• GITHUB_PERSONAL_ACCESS_TOKEN - GitHub API token
• UI_LIBRARY - UI primitive kütüphanesi: radix (varsayılan) veya base (yalnızca React)

📚 Dokümantasyon

Bölüm	Açıklama
🚀 Başlangıç	Kurulum, ayarlama ve ilk adımlar
⚙️ Yapılandırma	Framework seçimi, tokenler ve seçenekler
🔌 Entegrasyon	Editör ve araç entegrasyonları
📖 Kullanım	Örnekler, öğreticiler ve kullanım senaryoları
🎨 Frameworkler	Framework özel dokümantasyon
🐛 Sorun Giderme	Yaygın sorunlar ve çözümler
🔧 API Referansı	Araç referansı ve teknik detaylar

🎨 Framework Desteği

Bu MCP sunucusu dört popüler shadcn uygulamasını destekler:

Framework	Repository	Bakıcı	Açıklama
React (varsayılan)	shadcn/ui	shadcn	shadcn/ui v4 React komponentleri
Svelte	shadcn-svelte	huntabyte	shadcn-svelte Svelte komponentleri
Vue	shadcn-vue	unovue	shadcn-vue Vue komponentleri
React Native	react-native-reusables	Founded Labs	react-native-reusables React Native komponentleri

UI Kütüphanesi (yalnızca React)

shadcn/ui v4, React için iki primitive kütüphanesi destekler: Radix UI (varsayılan) ve Base UI.

# Radix UI (varsayılan)
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library radix

# Base UI
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library base

# Veya ortam değişkeni aracılığıyla
UI_LIBRARY=base npx @jpisnice/shadcn-ui-mcp-server

Claude Desktop config örneği:

{
  "args": ["--framework", "react", "--ui-library", "base"]
}

🛠️ Gerekli Kurulum

1. GitHub Token Alın (Önerilen)

# Ziyaret edin: https://github.com/settings/tokens
# Hiçbir kapsam gerekli olmadan token oluşturun
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here

2. Sunucuyu Çalıştırın

# React (varsayılan)
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

3. Editörünüzle Entegre Edin

• Claude Code: Aşağıdaki Claude Code Entegrasyonu bölümüne bakın
• VS Code: docs/integration/vscode.md
• Cursor: docs/integration/cursor.md
• Claude Desktop: docs/integration/claude-desktop.md
• Continue.dev: docs/integration/continue.md

💻 Claude Code Entegrasyonu

Hızlı Ekleme (CLI)

# shadcn-ui MCP sunucusunu ekle
claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

SSE Transport

Ürün dağıtımları için SSE transport ile:

# Sunucuyu SSE modunda başlat
node build/index.js --mode sse --port 7423

# Claude Code ile bağlan
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse

Framework Özel Komutlar

Framework özel komutlar (React, Svelte, Vue, React Native) için Claude Code Entegrasyon Rehberi sayfasına bakın.

Referans: Claude Code MCP Dokümantasyonu

🎯 Kullanım Senaryoları

• AI Destekli Geliştirme - AI asistanlarının shadcn/ui ile UI'lar oluşturmasını sağlayın
• Çok İstemcili Dağıtımlar - SSE transport birden fazla eşzamanlı bağlantıyı destekler
• Ürün Ortamları - Sağlık kontrolleri ve izlemeyle Docker Compose hazır
• Component Keşfi - Kullanılabilir komponentleri ve kullanımlarını keşfedin
• Çoklu Framework Öğrenme - React, Svelte, Vue ve React Native uygulamalarını karşılaştırın
• Hızlı Prototipleme - Panolar, formlar vb. için tam blok uygulamaları alın
• Kod Oluşturma - Uygun bağımlılıklarla component kodu oluşturun

📦 Kurulum

# Global kurulum (isteğe bağlı)
npm install -g @jpisnice/shadcn-ui-mcp-server

# Veya npx kullanın (önerilen)
npx @jpisnice/shadcn-ui-mcp-server

🔨 Kaynaktan Derleme

Ön Gereksinimler

• Node.js >= 18.0.0
• npm veya pnpm

Derleme Adımları

# Repository'yi klonlayın
git clone https://github.com/Jpisnice/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server

# Bağımlılıkları yükleyin
npm install

# Projeyi derleyin
npm run build

# Sunucuyu çalıştırın
node build/index.js --github-api-key YOUR_TOKEN

Yerel Olarak Çalıştırın

# Derlendikten sonra seçenekler ile çalıştırın
node build/index.js --github-api-key YOUR_TOKEN
node build/index.js --framework svelte

MCPB Paketi Oluşturma

Proje, MCPB specifikasyonuna uyan bir manifest.json içerir. .mcpb dosyası, sunucuyu, bağımlılıkları ve yapılandırmayı içeren bir ZIP arşividir.

Ayrıntılı paketleme talimatları için CONTRIBUTING.md sayfasına bakın.

Referans: MCPB ile Desktop Extensions Oluşturma

🔗 Hızlı Bağlantılar

• 📖 Tam Dokümantasyon
• 🚀 Başlangıç Rehberi
• 🌐 SSE Transport ve Docker Rehberi
• 🎨 Framework Karşılaştırması
• 🔧 API Referansı
• 🐛 Sorun Giderme
• 💬 İssues ve Tartışmalar

📄 Lisans

MIT Lisansı - detaylar için LICENSE dosyasına bakın.

🙏 Teşekkürler

• shadcn - Harika React UI component kütüphanesi için
• huntabyte - Mükemmel Svelte uygulaması için
• unovue - Kapsamlı Vue uygulaması için
• Founded Labs - React Native uygulaması için
• Anthropic - Model Context Protocol spesifikasyonu için

---

Janardhan Polle tarafından ❤️ ile yapılmıştır

Bu repo'yu yararlı bulursanız yıldız ⭐ verin!