21st.dev Magic

resmi

En 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 generate ile 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 search kullanın, ardından get_component ile tam kodu getirin.
  • Mevcut tasarımları iyileştirin — Önceki taslak bağlamınızı taşıyarak generate ile bir iyileştirme isteminden yeni bir üretim talep edin.
  • Ücretli kodu alın — Hesabınızda ücretli erişim etkin olduğunda get_component aracılığıyla premium bileşen kodunu isteyin.
  • AI erişim durumunu kontrol edin — Barındırılan üretimi denemeden önce aiGenerationEnabled değerinin doğru olup olmadığını doğrulamak için get_usage sorgulayı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_buildergenerate
21st_magic_component_inspirationget_inspiration
21st_magic_component_refinergenerate (iyileştirme isteminden yeni üretim)
logo_searchsearch_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 BotCursor Marketplace üzerinden "21st" kurun, ardından API_KEY_21ST değerini Eklentiler → Yapılandır altında ayarlayın. 21st.dev/mcp adresinden anahtar alın.
  • Grok Buildgrok plugin install 21st --trust (resmi xAI marketplace üzerinden), ardından API_KEY_21ST dışa aktarın.
  • Claude Code — depo bir .claude-plugin/ manifesti taşır: bu depoyu listeleyen herhangi bir pazaryerinden /plugin install yapın veya claude --plugin-dir . ile yerel olarak yükleyin ve API_KEY_21ST dışa aktarın.

Eklenti yapılandırması, API anahtarını her istemcide API_KEY_21ST değişkeninde bekler.

Bağlantılar

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ı.