21st.dev Magic

resmi

En iyi 21st.dev tasarım mühendislerinden ilham alarak özenle hazırlanmış UI bileşenleri oluşturun.

GitHub

5.6k

21st Dev Magic MCP ile neler yapabilirsiniz?

21st.dev kataloğunda arama yapın — ihtiyacınızı search aracıyla tanımlayarak bileşenler, temalar veya şablonlar bulun.
Bir istemden UI bileşenleri oluşturun — bir açıklamaya uygun React bileşeni isteyin ve generate aracılığıyla kullanıma hazır kod alın.
Bileşen ilhamı alın — belirli bir kullanım durumu için get_inspiration ile seçilmiş bileşen örneklerini alın.
Şirket logolarını bulun — search_logo kullanarak şirket adına göre SVG logoları bulun (her çağrıda bir sorgu).
Ücretli kodu alın — platform üzerinden satın aldığınız premium bileşenlere erişin.

Dokümantasyon

Magic MCP → 21st MCP

Magic MCP artık 21st MCP. Magic MCP sunucusu (@21st-dev/magic), 21st CLI aracılığıyla kurulan birleşik 21st MCP ile değiştirildi — kurulum için 21st.dev/mcp. Bu paket, eski yapılandırmaların çalışmaya devam etmesi için ince bir uyumluluk proxy'si olarak yayımlanmaya devam etmektedir.

21st MCP'yi Kurun (önerilir)

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex

Veya manuel olarak ekleyin — basit bir HTTP MCP sunucusudur:

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

21st.dev/mcp adresinden bir API anahtarı alın.

Eski Magic API anahtarları sıfırlandı. Eski Magic konsolu tarafından verilen anahtarlar artık hiçbir yerde çalışmaz. 21st.dev/mcp adresinden yeni bir anahtar oluşturun.

Bu paket şimdi ne yapıyor (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." hala çalışır: v0.2.0 sürümünden itibaren, her MCP mesajını 21st MCP sunucusuna ileten küçük bir stdio proxy'sidir. @21st-dev/magic'a referans veren mevcut mcp.json girdileri çalışmaya devam eder — ancak artık 21st CLI ile aynı sunucuyla, tam güncel araç setiyle konuşurlar.

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.

Eski araç adları → yeni araç adları

21st MCP, eski Magic araç adlarını hala kabul eder ve çevirir, böylece eski adları hatırlayan aracılar ç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 nesil)
`logo_search`	`search_logo` (çağrı başına bir sorgu)

Mevcut sunucu, eski dört araçtan çok daha fazlasını sunar: bileşenler/temalar/şablonlar arasında katalog araması, ücretli kod alımı, yer imleri, ekip kütüphaneleri, varyantlarla UI oluşturma, profil yönetimi ve daha fazlası. Bağlanın ve tam seti görmek için tools/list çağrısı yapın.

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ımlayın ve oluşturun: https://21st.dev

SSS

Eski Magic MCP'im neden çalışmayı durdurdu? Magic arka ucu (magic.21st.dev), birleşik 21st MCP ile değiştirildi ve tüm eski API anahtarları güvenlik için 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'e geçmenizi öneririz.

/ui hala geçerli mi? Doğal dil kullanın: aracınızdan bileşenler için 21st'te arama yapmasını (search) veya yeni UI oluşturmasını (generate) isteyin. Eski /ui, /21 tetikleyici ifadeleri, protokolün değil, eski araçların açıklamalarının bir geleneğiydi.