21st MCP nedir? Asistana hazır arayüz bileşeni getirtmek, kurulum, günlük limit ve ücret
Kod asistanına (Claude Code, Cursor gibi) bir bileşen ya da marka logosu istersin; 21st MCP 21st.dev kataloğunda hazır React ve Tailwind bileşeni arar, kodunu getirir, logoyu JSX olarak verir. 21st.dev'in uzak MCP sunucusu (eski adı Magic MCP), adres https://21st.dev/api/mcp; hesap ve API anahtarı gerekir, anonim kullanım yok. Arama ücretsiz ama bileşen kodu ücretsiz hesapta Web, MCP ve CLI toplamında günde 2 ile sınırlı; sınırsız kod Builder'da, yapay zekâ üretimi yalnız Builder + AI'da. Builder tek başına AI'yı açmaz.
- Ne yapar
- Asistana hazır React bileşeni ve logo kodu getirir
- Tür
- MCP sunucusu (uzak, 21st.dev'de barındırılan)
- Nerede
- Claude Code, Cursor, VS Code, Codex, Devin
- Hesap
- Gerekli; anonim kullanım yok
- Dosya yazar mı
- Hayır; kodu asistana döndürür
- Türkçe
- Resmî kaynak yazmıyor
- Ücret
- Ücretsiz: günde 2 bileşen kodu; sınırsız kod 6 $/ay
21st MCP ne işe yarar?
MCP, yapay zekâ programlarının dış araçlara bağlanma standardıdır. 21st MCP, 21st.dev'deki topluluk bileşen kataloğunu asistanına açar: "21st'te fiyat tablosu ara" dersin, asistan katalogda arar, seçtiğin bileşenin kodunu getirir ve projene uyarlar. Resmî belgeler kataloğu yaklaşık on bin ile on iki bin bileşen olarak anıyor (kaynaklar arasında sayı tutarsız).
Kodu asistana döndürür, dosyaya kendisi yazmaz. Ücretsiz hesapta günde 2 bileşen kodu.
Ayrıca bir şirketin logosunu yapıştırmaya hazır JSX olarak getirir (çağrı başına tek marka) ve hesabında yapay zekâ erişimi açıksa tarif ettiğin arayüzü 21st AI ile üretir. MCP sunucusu proje dosyanı yazmaz; kodu asistana döndürür, projeye yazan asistandır.
Kime yarar: React ve Tailwind (shadcn uyumlu) ile arayüz geliştirenlere. Kod yazmıyorsan işine yaramaz.
21st MCP nasıl kurulur?
Önce 21st.dev hesabı aç ve https://21st.dev/mcp sayfasından API anahtarı al. Sonra tek komutla ya da elle kurarsın. Komutlar resmî belgelerden aynen alındı.
› npx @21st-dev/cli@latest init --client claudeKomut istemcinin MCP ayarını yazdırır; --write eklersen mevcut yapılandırmayla birleştirerek yazar. Anahtarı üretmez, yer tutucu bırakır: anahtarı sen yapıştırırsın.
› { "mcpServers": { "21st": { "url": "https://21st.dev/api/mcp", "headers": { "x-api-key": "YOUR_21ST_API_KEY" } } } }README sunucunun düz bir HTTP MCP sunucusu olduğunu yazıyor. Salt okunur bir adres de var: https://21st.dev/api/mcp/readonly.
› claude plugin marketplace add 21st-dev/magic-mcpSonra /plugin install 21st yaz ve API anahtarını API_KEY_21ST ortam değişkenine koy.
!Açık bir hata kaydı (issue #82, 16.09.2026) bazı Claude Code sürümlerinde eklentinin sunucuyu atladığını söylüyor: .mcp.json dosyasında type alanı yok. Böyle olursa "Tek komut" sekmesindeki CLI yolunu kullan.
Cursor Marketplace'ten "21st" eklentisini kurup anahtarı Plugins › Configure altına girebilirsin. Codex için:
› codex plugin marketplace add 21st-dev/magic-mcpSonra Codex'te /plugins içinden "21st"i kur. Grok Build için README ayrı bir eklenti komutu veriyor.
Eski Magic MCP ayarın varsa çalışmayabilir: eski anahtarlar sıfırlandı. 21st.dev/mcp sayfasından yeni anahtar al.
21st MCP nasıl kullanılır?
Kurduktan sonra isteğini normal yazarsın ve 21st'i anarsın. Asistan önce arar (ücretsiz), sen seçince kodu getirir (ücretsizde günlük kotaya sayılır).
› 21st search "pricing table"Kalan hakkını 21st usage --json ile görürsün. Günlük 2 hakkı arama değil, kod alma harcar; önce ara, sonra yalnız beğendiğini getir.
21st MCP hangi programlarda çalışır?
| Claude CodeVar | CLI ile kurulum ve eklenti yolu var; eklentide açık bir hata kaydı var. |
|---|---|
| CursorVar | CLI ve Cursor Marketplace eklentisi. |
| VS CodeVar | CLI: init --client vscode. |
| CodexVar | CLI ve eklenti komutu. |
| Devin (eski adıyla Windsurf), Grok BuildVar | CLI'da devin seçeneği, Grok için eklenti komutu belgede. |
| LovableNet değil | Sayfada sekmesi görünüyor; kurulum adımı resmî kaynakta net değil. |
| ChatGPT, Claude webNet değil | Belge OAuth'u genel olarak anlatıyor; 21st'e özel adım belgede yer almıyor. |
"Belgede yok" çalışmaz demek değildir. Liste 21st belgelerinden derlendi.
21st MCP neye erişir, hangi veri dışarı gider?
Projene dosya yazmaz. Sunucu 21st.dev'de çalışır; kodu asistana döndürür, projeye yazan asistan olur.
Arama sorguların ve istemin 21st.dev sunucusuna gider. İlham aracını ya da --context seçeneğini kullanırsan proje tasarım bağlamı da gidebilir; tam olarak hangi verinin gittiği resmî kaynakta net değil.
Yer imi, takım kütüphanesi ve profil yönetimi araçları var. Yapay zekâ üretimi kredi harcar. Araç adlarının ve okuma-yazma ayrımının tam listesi belgede yok.
Belgede MCP aracı olarak silme yazmıyor. CLI'da yayımladığın bileşeni silen komutlar var (21st delete ... --yes).
!Eski @21st-dev/magic aktarıcısı, anahtarı bulamazsa genel adlı API_KEY ortam değişkenini de okuyup 21st.dev'e gönderiyor (kaynak kodunda: src/index.ts). Eski kurulumun varsa, başka bir hizmetin API_KEY değişkenini bu yolla paylaşmadığından emin ol ya da yeni kurulum aracına geç. GitHub Security Advisories'te kayıtlı uyarı görünmüyor. Bu "güvenli" demek değildir.
21st MCP ücretsiz mi? Planlar ve günlük limit
Kısmen. Ücretsiz hesapta katalog ve logo araması serbest; bileşen kodu alma, kopyalama ve kurma Web, MCP ve CLI toplamında günde 2 ile sınırlı. "Ücretli" tek kademe değil: sınırsız kod Builder'da, yapay zekâ üretimi ise yalnız Builder + AI ve Team + AI'da. Fiyatlar dolar ve yıllık faturalanırsa geçerli; TL fiyatı yok.
- Katalog ve logo araması
- Günde 2 bileşen kodu (toplam)
- Sınırsız kod
- Yapay zekâ üretimi
- Sınırsız kod ve kurulum
- Yapay zekâ kredisi
- Sınırsız kod
- Ayda 500, 1.000 ya da 2.000 kredi
- Ek 100 kredi 5 $
- Merkezî fatura
- Paylaşılan koleksiyon
- Yönetici denetimi
- Yapay zekâ (Team + AI ayrı seçenek)
Kaynak: 21st fiyat sayfası ve llms.txt. Sayfada "Cancel anytime. Payments are non-refundable." yazıyor. Ticari kullanım için hizmet şartlarını kendin oku. Bu bir hukuki görüş değildir.
Sık sorunlar ve çözümleri
| Ne oluyor | Ne yapmalı |
|---|---|
| Eski Magic MCP ayarı çalışmayı bıraktı, kimlik hatası | Eski anahtarlar sıfırlandı; 21st.dev/mcp sayfasından yeni anahtar al ve ayara yaz. |
| generate ve iterate araçları listede yok ya da ai_subscription_required hatası | Hesapta yapay zekâ erişimi kapalı. Planı yükselt ve araç listesini yenile; erişim yokken arama ve bileşen alma çalışır. |
| Kullanıcıların bildirdiği Claude Code eklentisi kuruldu ama sunucu görünmüyor | Açık issue #82: eklentinin .mcp.json dosyasında type alanı yok. Geçici yol: npx @21st-dev/cli@latest init --client claude. |
21st MCP nasıl kaldırılır?
- Anahtarı iptal et: 21st.dev/mcp sayfasından; belgeye göre iptal edilen anahtar anında 401 döner.
- İstemcide: MCP ayarından
21stkaydını sil; eklenti kurduysan eklentiyi kaldır. - CLI oturumu:
21st logoutkomutunu çalıştır.
Sık sorulan sorular
Magic MCP ile 21st MCP aynı şey mi?
Evet. Resmî belge Magic MCP'nin artık 21st MCP olduğunu yazıyor. Eski @21st-dev/magic paketi geriye uyumluluk için ince bir aktarıcı olarak duruyor ama eski anahtarlar sıfırlandığı için yeni anahtar gerekir.
21st MCP ücretsiz mi?
Kısmen. Arama ve logo araması ücretsiz; bileşen kodu ücretsiz hesapta günde 2 ile sınırlı. Sınırsız kod için Builder (yıllık faturalanırsa ayda 6 $), yapay zekâ üretimi için Builder + AI (ayda 15 $) gerekir.
Hesap açmadan kullanılır mı?
Hayır. Belgeye göre her kimlik bilgisi bir 21st hesabına bağlı; anonim kullanım desteklenmiyor.
Bileşenleri doğrudan projeme yazar mı?
Hayır. MCP sunucusu proje dosyası yazmaz; kodu asistana döndürür, asistan projeye yazar. Yazılanı kontrol etmek sana düşer.
İlgili rehberler
Kaynaklar
Resmî kaynaklarda net olmayanlar: Lovable, ChatGPT ve Claude web için kurulum adımları · araçların tam listesi ve okuma-yazma ayrımı · ilham aracıyla sunucuya giden proje verisi · Node.js sürüm koşulu · üç aylık plan fiyatları · TL fiyatı ve Türkçe arayüz · hizmet şartları · OSV taraması. Her biri ilgili bölümde yazılı.