21st.dev Magic
resmiEn iyi 21st.dev tasarım mühendislerinden ilham alarak özenle hazırlanmış UI bileşenleri oluşturun.
21st Dev Magic MCP ile neler yapabilirsiniz?
- UI bileşenleri oluşturun — Yapay zekanızdan
generateile yeni bir bileşen oluşturmasını isteyin; AI erişimi etkin olduğunda doğal dil isteminden varyantlar üretir. - Bileşen kataloğunu arayın — 21st.dev üzerinde bileşen, tema veya şablon bulmak için
searchkullanın, ardındanget_componentile tam kodu getirin. - Mevcut tasarımları iyileştirin — Önceki taslak bağlamınızı taşıyarak
generateile bir iyileştirme isteminden yeni bir üretim talep edin. - Ücretli kodu alın — Hesabınızda ücretli erişim etkin olduğunda
get_componentaracılığıyla premium bileşen kodunu isteyin. - AI erişim durumunu kontrol edin — Barındırılan üretimi denemeden önce
aiGenerationEnableddeğerinin doğru olup olmadığını doğrulamak içinget_usagesorgulayın.
Dokümantasyon
Magic MCP → 21st MCP
Magic MCP artık 21st MCP oldu. Magic MCP sunucusu (
@21st-dev/magic), 21st CLI üzerinden kurulan birleşik 21st MCP ile değiştirildi — kurulum: 21st.dev/mcp. Bu paket, eski yapılandırmaların çalışmaya devam etmesi için ince bir uyumluluk proxy'si olarak yayınlanmaya devam ediyor.
21st MCP'yi Kurun (önerilir)
npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codex
Veya manuel olarak ekleyin — düz bir HTTP MCP sunucusudur:
{
"mcpServers": {
"21st": {
"url": "https://21st.dev/api/mcp",
"headers": { "x-api-key": "YOUR_21ST_API_KEY" }
}
}
}
API anahtarınızı 21st.dev/mcp adresinden alın.
Eski Magic API anahtarları sıfırlandı. Eski Magic konsolu tarafından verilen anahtarlar artık hiçbir yerde çalışmıyor. 21st.dev/mcp adresinden yeni bir anahtar oluşturun.
Bu paket artık ne yapıyor (v0.2.0+)
npx -y @21st-dev/magic@latest API_KEY="..." hâlâ çalışıyor: v0.2.0'dan itibaren her MCP mesajını 21st MCP sunucusuna ileten küçük bir stdio proxy'sidir. mcp.json referans veren mevcut @21st-dev/magic girdileri çalışmaya devam ediyor — ancak artık 21st CLI ile aynı sunucuya bağlanıyorlar ve kimliği doğrulanmış hesabın kullanabileceği araçlara erişiyorlar.
API anahtarı tüm tarihsel biçimlerde kabul edilir: konumsal API_KEY="...", --API_KEY=..., /API_KEY:..., -API_KEY ... veya TWENTY_FIRST_API_KEY / API_KEY_21ST ortam değişkenleri.
AI erişimi
Builder bileşen erişimi, barındırılan 21st AI'yı etkinleştirmez. Sunucu, generate ve iterate_generation yalnızca AI erişimi etkinleştirildiğinde listeler. get_usage.aiGenerationEnabled kontrol edin; bu, erişimi bildirir, kalan AI kredi bakiyesini değil. AI kapalıyken, search ve get_component kullanın, ardından kodu kendi kodlama ajanınızla uyarlayın. Mevcut taslaklar okunabilir durumda kalır.
Önbelleğe alınmış veya eski bir üretim çağrısı ai_subscription_required döndürebilir. AI etkinleştirilene kadar yeniden denemeyin. AI'yı etkinleştirdikten sonra istemci araç listesini yenileyin veya yeniden bağlanın. Proxy, keşfi sunucuya iletir, bu nedenle mevcut proxy sürümleri npm güncellemesi olmadan bu davranışı alır.
server.json, resmi dev.21st/mcp kayıt listesini yansıtır. Kayıt sürümü, bu uyumluluk paketi sürümünden bağımsızdır.
Eski araç adları → yeni araç adları
21st MCP, eski Magic araç adlarını hâlâ kabul eder ve çevirir, böylece eski adları hatırlayan ajanlar çalışmaya devam eder. Yeni adları tercih edin:
| Eski Magic aracı | 21st MCP aracı |
|---|---|
21st_magic_component_builder | generate |
21st_magic_component_inspiration | get_inspiration |
21st_magic_component_refiner | generate (iyileştirme isteminden yeni üretim) |
logo_search | search_logo (çağrı başına bir sorgu) |
Mevcut sunucu, eski dört araçtan çok daha fazlasını sunar: bileşen/tema/şablonlarda katalog araması, ücretli kod alma, yer imleri, ekip kütüphaneleri, varyantlarla UI üretimi, profil yönetimi ve daha fazlası. Hesabınızın kullanabileceği araçları görmek için bağlanın ve tools/list çağırın.
Eklenti olarak kurun
Bu depo ayrıca bir ajan eklentisi olarak paketlenmiştir (MCP sunucusu + bir UI becerisi). Herhangi bir mağazayı beklemenize gerek yok — bu depo bir pazaryeridir, doğrudan ekleyin:
# Claude Code
claude plugin marketplace add 21st-dev/magic-mcp # then: /plugin install 21st
# Grok Build
grok plugin marketplace add 21st-dev/magic-mcp && grok plugin install 21st --trust
# Codex CLI
codex plugin marketplace add 21st-dev/magic-mcp # then install "21st" from /plugins
API anahtarınızı API_KEY_21ST değişkeninde ayarlayın (ücretsiz anahtar: 21st.dev/mcp).
Mağaza listeleri:
- Cursor / Grok Bot — Cursor Marketplace üzerinden "21st" kurun, ardından
API_KEY_21STdeğerini Eklentiler → Yapılandır altında ayarlayın. 21st.dev/mcp adresinden anahtar alın. - Grok Build —
grok plugin install 21st --trust(resmi xAI marketplace üzerinden), ardındanAPI_KEY_21STdışa aktarın. - Claude Code — depo bir
.claude-plugin/manifesti taşır: bu depoyu listeleyen herhangi bir pazaryerinden/plugin installyapın veyaclaude --plugin-dir .ile yerel olarak yükleyin veAPI_KEY_21STdışa aktarın.
Eklenti yapılandırması, API anahtarını her istemcide API_KEY_21ST değişkeninde bekler.
Bağlantılar
- 21st MCP kurulumu ve API anahtarları: https://21st.dev/mcp
- npm'de 21st CLI: https://www.npmjs.com/package/@21st-dev/cli
- 21st.dev — UI bileşenlerini keşfedin, yayınlayın ve üretin: https://21st.dev
SSS
Eski Magic MCP'm neden çalışmayı bıraktı?
Magic arka ucu (magic.21st.dev), birleşik 21st MCP ile değiştirildi ve güvenlik için tüm eski API anahtarları sıfırlandı. 21st.dev/mcp adresinden yeni bir anahtarla güncelleyin — mevcut @21st-dev/magic yapılandırmanız bu uyumluluk proxy'si aracılığıyla tekrar çalışacaktır, ancak npx @21st-dev/cli@latest init geçiş yapmanızı öneririz.
/ui hâlâ geçerli mi?
Doğal dil kullanın: ajanınızdan 21st'te bileşen aramasını isteyin (search) veya AI etkinleştirildiğinde barındırılan UI üretimini kullanın (generate). Eski /ui, /21 tetik ifadeleri, protokolün değil, eski araçların açıklamalarının bir kuralıydı.