shadcn MCP nedir? Asistana shadcn/ui bileşenlerini aratmak, kurulum, hangi programlarda çalışır ve güvenlik

Projende tek komut çalıştırırsın (`npx shadcn@latest mcp init --client claude`; istemciye göre claude, cursor, vscode, codex, opencode); kodlama asistanın `components.json` dosyasında tanımlı bileşen kataloglarında (registry) arama yapar, bileşenin kodunu ve örneklerini okur, eklemek için gereken komutu hazırlar. shadcn/ui kütüphanesinin kendi MCP sunucusu; MIT lisanslı, hesap, anahtar ya da ücret yok, Node.js ve `components.json` olan bir proje yeter. Sunucunun yedi aracından hiçbiri dosya yazmaz; ama asistan ekleme komutunu çalıştırınca bileşen dosyaları projene yazılır. Kod yazmayan biri için bir işi yok.

Ne yapar: Asistana shadcn bileşen kataloglarında arama ve ekleme yaptırır
Tür: MCP sunucusu (bilgisayarında çalışır)
Nerede: Claude Code, Cursor, VS Code, Codex, OpenCode
Gerekenler: Node.js 20.18.1+ ve components.json olan proje
Dikkat: Eklenen bileşen kodu projene yazılır
Son sürüm: shadcn 4.21.5 (14.10.2026)
Ücret: Ücretsiz, MIT açık kaynak

shadcn MCP ne işe yarar?

MCP, yapay zekâ programlarının dış araçlara ve veriye bağlanması için kullanılan ortak bir standarttır; bir asistana yeni araçlar eklemenin yolu. Başka MCP'leri Rehber'in Eklentiler sayfasında (yapay-zeka/eklentiler) görebilirsin. shadcn MCP, bu standartla çalışan küçük bir programdır ve shadcn/ui'nin bileşen kataloglarını asistanına açar.

SenBileşen istersin

AsistanClaude Code, Cursor, VS Code, Codex, OpenCode

shadcn MCPBilgisayarında çalışır

Bileşen kataloglarıcomponents.json'daki registry'ler

Sunucu dosya yazmaz; asistan ekleme komutunu çalıştırınca bileşen projene yazılır.

shadcn/ui, kendi arayüzünü kuran geliştiricilerin kullandığı bir bileşen kütüphanesi (buton, form, tablo gibi); resmî tanımı, özelleştirebileceğin kodla kendi bileşen kütüphaneni kurmak üzerine. Bileşenlerin durduğu kataloğa registry denir. Asistan, "buton, dialog ve card bileşenlerini projeye ekle" dediğinde bileşeni kafadan yazmak yerine registry'deki gerçek koddan başlayabilir.

Katalogda bileşen aratmakNe alırsın: Öğe adı, türü, açıklaması ve ekleme komutuAyrı kurulum gerekir Bileşenin örnek kodunu görmekNe alırsın: Tam örnek kodu ve bağımlılıklarıAyrı kurulum gerekir Bileşeni projeye eklettirmekNe alırsın: Projeye yazılan bileşen dosyaları ve kurulan bağımlılıklarAyrı kurulum gerekir

Araç (kaynak koddaki ad)	Ne yapar	Okur / yazar
`get_project_registries`	components.json'da tanımlı registry adlarını verir.	Okur
`list_items_in_registries`	Registry'lerdeki öğeleri listeler (tür süzgeci, sayfalama).	Okur (ağdan)
`search_items_in_registries`	Öğe adı ve açıklamasında bulanık arama yapar.	Okur (ağdan)
`view_items_in_registries`	Öğenin adı, açıklaması, türü ve dosya içeriğini gösterir.	Okur (ağdan)
`get_item_examples_from_registries`	Kullanım örneklerini ve demoları tam koduyla bulur.	Okur (ağdan)
`get_add_command_for_items`	Öğeleri eklemek için `shadcn add` komut metnini döndürür; komutu kendisi çalıştırmaz.	Yalnız komut metni
`get_audit_checklist`	Yeni bileşen eklendikten sonra kontrol listesi verir.	Okur

Resmî belge araç listesi vermiyor; yedi araç shadcn-ui/ui deposundaki mcp/index.ts dosyasından alındı (ham dosya, 15.10.2026). Bu yedi araçtan hiçbiri dosya yazmıyor; dosyaları, asistanın çalıştırdığı shadcn add komutu yazar.

Kime yarar: shadcn/ui ile React arayüzü kuran ve asistanın bileşeni uydurmak yerine katalogdaki gerçek koddan başlamasını isteyen geliştiricilere. Kime yaramaz: kod yazmayana; araç yalnız katalogdaki bileşenleri bulup getirir, ne yapacağına asistanın kendi modeli karar verir.

shadcn MCP nasıl kurulur?

Kurulum, projenin klasöründe tek komutla yapılır; komut seçtiğin programın ayar dosyasını senin yerine yazar. Gereken: Node.js (npm paketi 20.18.1 ve üstünü istiyor), bir MCP istemcisi ve projende components.json dosyası. Komutlar shadcn belgesinden aynen alındı.

Projede çalıştır› npx shadcn@latest mcp init --client claude

Claude Code'u yeniden başlat.
/mcp yaz; shadcn listede Connected görünüyorsa hazır.

Elle: proje .mcp.json dosyası› { "mcpServers": { "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] } } }

Açık bir kayıt (issue #9181) Claude Code'un bu ayarda "type": "stdio" beklediğini bildiriyor; belge örneğinde bu alan yok. Çalışmazsa Sık sorunlar bölümüne bak.

Projede çalıştır› npx shadcn@latest mcp init --client cursor

Cursor Settings'i aç ve shadcn MCP sunucusunu etkinleştir.
Listede sunucunun yanında yeşil nokta ve araç listesi görünür (belge).

Elle: .cursor/mcp.json dosyası› { "mcpServers": { "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] } } }

Projede çalıştır› npx shadcn@latest mcp init --client vscode

.vscode/mcp.json dosyasını aç ve shadcn sunucusunun yanındaki Start'a tıkla.
Belge denemeyi GitHub Copilot ile yapmanı söylüyor.

Elle: .vscode/mcp.json dosyası (anahtar "servers")› { "servers": { "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] } } }

Belge: shadcn komutu Codex'in ~/.codex/config.toml dosyasını kendiliğinden güncelleyemez; ayarı elle eklemen gerekir.

Projede çalıştır› npx shadcn@latest mcp init --client codex

~/.codex/config.toml dosyasına ekle

› [mcp_servers.shadcn]
command = "npx"
args = ["shadcn@latest", "mcp"]

Sonra Codex'i yeniden başlat.

Projede çalıştır› npx shadcn@latest mcp init --client opencode

Sonra OpenCode'u yeniden başlat.

OpenCode yalnız belgenin hızlı başlangıç bölümünde var; elle yapılandırma bölümünde yok.

Belge her yerde shadcn@latest yazıyor: sunucu sabit bir sürüme değil, yayındaki en son sürüme bağlı. Sürümü sabitlemek için belgede ayrı bir yol yok.

shadcn MCP nasıl kullanılır?

Bağlandıktan sonra asistana doğal dille yazarsın; hangi aracı çağıracağına kendisi karar verir. Aşağıdaki istekler belgenin örnek isteklerinin Türkçesidir; asistan Türkçe yazdığında da çalışması bağladığın asistana bağlıdır.

Katalogda neler var"shadcn registry'sindeki bileşenleri listele ve her birinin ne işe yaradığını bir cümleyle yaz."Belgenin örneği: "Show me all available components in the shadcn registry".

Bileşenleri projeye ekle"Projeme button, dialog ve card bileşenlerini ekle."Asistan shadcn add komutunu çalıştırır; dosyalar projene yazılır. Çalıştırmadan önce komutu oku.

Katalogdaki parçalarla form kur"shadcn registry'sindeki bileşenleri kullanarak bir iletişim formu oluştur."

Özel ya da üçüncü taraf bir katalog kullanmak için components.json dosyasına registries eklersin. Belgenin örneği:

components.json

› { "registries": { "@acme": "https://registry.acme.com/{name}.json", "@internal": { "url": "https://internal.company.com/{name}.json", "headers": { "Authorization": "Bearer ${REGISTRY_TOKEN}" } } } }

.env.local (özel registry için; değeri sen yaz)› REGISTRY_TOKEN=your_token_here

Özel katalogdan sayfa kur"acme registry'sindeki hero, features ve testimonials bölümlerini kullanarak bir açılış sayfası kur."Belgenin örneği: "Build me a landing page using hero, features and testimonials sections from the acme registry".

Standart shadcn/ui katalogu için ek ayar gerekmiyor (belge). Özel katalogdaki parça için adı @isimalani/bileşen biçiminde yazılır (örneğin @internal/auth-form).

shadcn MCP hangi programlarda çalışır?

Belge, "herhangi bir MCP istemcisiyle kullanabilirsin" diyor ve en yaygın olanlar için adım gösteriyor. Aşağıdaki tablo yalnız belgede adı geçenleri "var" sayar.

Claude CodeVar	Hızlı başlangıç komutu (`--client claude`) ve proje .mcp.json örneği belgede.
CursorVar	Komut (`--client cursor`) ve .cursor/mcp.json örneği belgede; sunucuyu Cursor Settings'ten etkinleştirirsin.
VS Code (GitHub Copilot ile)Var	Komut (`--client vscode`) ve .vscode/mcp.json örneği belgede.
CodexVar	Belgede var; ayar dosyası (~/.codex/config.toml) elle düzenlenir.
OpenCodeVar	Yalnız hızlı başlangıçta (`--client opencode`); elle yapılandırma bölümünde yok.
Claude Desktop, ChatGPT, Windsurf, Gemini CLI, AntigravityNet değil	Belgede adları geçmiyor. "Belgede yok" çalışmaz demek değildir; programın elle MCP sunucusu eklemeyi destekliyorsa belgedeki `npx shadcn@latest mcp` komutunu kendi ayar biçimine uyarlamak gerekir.

Codex (VS Code eklentisi) ve Cursor için açık kayıtlar var; Sık sorunlar bölümüne bak.

Claude Code nedir? Detaylı rehber

shadcn MCP neye erişir? Güvenlik

Okur

Projendeki components.json (registry adresleri) ve o adreslerdeki katalog dosyaları: öğe listesi, açıklama, kaynak kod ve örnekler. Varsayılan katalog ui.shadcn.com'dan gelir.

Yazar

MCP araçlarının hiçbiri dosya yazmaz. mcp init komutu seçtiğin programın ayar dosyasını yazar (.mcp.json, .cursor/mcp.json, .vscode/mcp.json, opencode.json). Asistan shadcn add komutunu çalıştırırsa katalogdaki dosyalar projene yazılır ve bağımlılıklar kurulur.

Veri nereye gider

Sunucu bilgisayarında çalışır, uzak bir hizmet değildir. Katalog adreslerine istek atar; özel katalog için token'ı başlıkta gönderirsin. Kullanım verisi toplayıp toplamadığını resmî belge yazmıyor.

Güven

Üçüncü taraf ya da özel katalogdan gelen bileşen kodu ve bağımlılıklar projene girer. Kataloğu kimin işlettiğine bak ve eklenen dosyaları gözden geçir. Bu uyarı DijiKoçum'un tavsiyesi; belge ayrıca uyarı yazmıyor.

Güvenlik taraması (15.10.2026): GitHub Security Advisories (shadcn-ui/ui) boş döndü ve OSV'de shadcn npm paketi için kayıt yok; iki tarama da tamamlandı. Depoda SECURITY.md var (özel bildirim kanalı). Paketin kurulum sırasında çalışan preinstall, install ya da postinstall betiği yok. Kayıtlı uyarı görünmüyor; bu "güvenli" demek değildir. Komut shadcn@latest yazdığı için sunucu sabit bir sürüme bağlı değildir.

shadcn MCP ücretsiz mi?

Evet. shadcn MCP, shadcn paketinin MIT lisanslı bir parçası; hesap, plan ya da API anahtarı istemez ve resmî belge bir ücret anmıyor. Standart shadcn/ui katalogu ek ayar gerektirmeden kullanılıyor. Özel ya da üçüncü taraf katalogların kendi koşulları ve ücretleri olabilir; onları katalog sahibi belirler. Bağladığın asistanın (Claude Code, Cursor, Copilot, Codex) kendi planı ve limiti ayrıca geçerli. Ücretli plan olmadığı için TL fiyatı yok.

Yapabilirsin

MIT: kullanmak, değiştirmek ve dağıtmak serbest; telif ve lisans notu korunur
Ticari projede kullanılabilir

Yasak

Katalogdan gelen bir bileşenin kendi lisansı olabilir; eklemeden önce o katalogdaki lisans notuna bak

Kaynak: shadcn-ui/ui LICENSE.md ve npm kaydı (15.10.2026). Bu bir hukuki görüş değildir.

Sık sorunlar ve çözümleri

Ne oluyor	Ne yapmalı
Sunucu isteklere yanıt vermiyor	Belgenin sırası: programda sunucunun yapılandırılıp etkinleştirildiğini kontrol et, programı yeniden başlat, projede shadcn'ın kurulu olduğunu doğrula, katalog adreslerine ağ erişimini kontrol et.
"No tools or prompts" mesajı	Belge: `npx clear-npx-cache` çalıştır, sunucuyu programda yeniden etkinleştir. Cursor'da View › Output altında "MCP: project-*" kaydına bak.
Bileşenler katalogdan gelmiyor	components.json'daki adresleri, özel katalog için .env.local'daki token'ı, kataloğun çevrimiçi olduğunu ve @isimalani/bileşen yazımını kontrol et.
Bileşen kurulmuyor	Geçerli bir components.json olduğunu, hedef klasörlerin var ve yazılabilir olduğunu, bağımlılıkların kurulabildiğini kontrol et.
Kullanıcıların bildirdiği Claude Code .mcp.json ile bağlanamıyor	Açık issue #9181 (22.12.2025'ten): Claude Code sunucu için "type": "stdio" bekliyor, belge örneğinde yok. Resmî çözüm yok; bağlantıyı `/mcp` ile kontrol et.
Kullanıcıların bildirdiği Monorepo'da alt klasördeki components.json bulunmuyor	Açık issue #10055 (15.03.2026'dan): MCP'nin CLI'daki `-c` gibi bir seçeneği yok; özel katalog "tanımlı değil" hatası veriyor.
Kullanıcıların bildirdiği Codex (VS Code eklentisi) özel katalogları görmüyor	Açık issue #9730 (25.02.2026'dan): yalnız varsayılan @shadcn görünüyor; bildirene göre Codex CLI ve Claude tarafında sorun yok.

shadcn MCP nasıl kaldırılır?

Programda: Ayar dosyasından shadcn girdisini sil: Claude Code'da .mcp.json, Cursor'da .cursor/mcp.json, VS Code'da .vscode/mcp.json, Codex'te ~/.codex/config.toml içindeki [mcp_servers.shadcn] bloğu, OpenCode'da opencode.json.
Özel katalog token'ı kullandıysan: .env.local içindeki REGISTRY_TOKEN satırını sil. components.json'daki registries girdileri CLI'ın da kullandığı ayarlardır, MCP'ye özel değildir.
Eklenen bileşenler: Projene yazılan bileşen dosyaları senin kodundur, kalır. İstemezsen elle sil.

Resmî belgede kaldırma bölümü yok; adımlar kurulum dosyalarından çıkarıldı.

Sık sorulan sorular

shadcn MCP hangi programlarda çalışır?

Resmî belge Claude Code, Cursor, VS Code (GitHub Copilot ile), Codex ve OpenCode için kurulum anlatıyor ve herhangi bir MCP istemcisiyle kullanılabileceğini söylüyor. Claude Desktop, Windsurf, Gemini CLI gibi programlar belgede anılmıyor; bu çalışmaz demek değildir.

shadcn MCP nasıl kurulur?

Projenin klasöründe programına göre bir komut çalıştırılır, örneğin Claude Code için npx shadcn@latest mcp init --client claude. Komut ayar dosyasını yazar; sonra program yeniden başlatılır. Codex'te ayar dosyası elle düzenlenir. Node.js ve projede components.json gerekir.

shadcn MCP ile registry'den bileşen nasıl eklenir?

Asistana "button, dialog ve card bileşenlerini projeme ekle" gibi yazarsın. Asistan katalogda arar, örneğe bakar ve shadcn add komutunu çalıştırır; dosyalar projene yazılır. Özel katalog için components.json dosyasına registries eklenir.

shadcn MCP çalışmıyor, ne yapmalı?

Belgenin sırası: sunucunun programda etkin olduğunu kontrol et, programı yeniden başlat, projede shadcn kurulu mu bak, katalog adreslerine erişimi doğrula. "No tools or prompts" görürsen npx clear-npx-cache çalıştırıp sunucuyu yeniden etkinleştir.

İlgili rehberler

shadcn/ui skill

21st MCP

ai-memory awwwards-animations

Brave Search MCP

Chrome DevTools MCP

Kaynaklar

Resmî kaynaklarda net olmayanlar: Kullanım verisi toplayıp toplamadığı (belgede ifade yok) · Claude Desktop, ChatGPT, Windsurf, Gemini CLI ve Antigravity için resmî kurulum adımı (belgede yok) · OpenCode için elle yapılandırma (yalnız hızlı başlangıçta var) · Türkçe destek (belge yalnız İngilizce) · kaldırma adımları (belgede ayrı bölüm yok) · açık issue'ların güncel durumu (çözülüp çözülmedikleri kayıtlarda net değil). Her biri ilgili bölümde yazılı.