En iyi 21st.dev tasarım mühendislerinden ilham alarak özenle hazırlanmış UI bileşenleri oluşturun. Claude, Cursor, VS Code ve diğer yapay zeka ajanları…
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.
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.
Kurulum
npx -y @21st-dev/magic@latestKaynak: mcpservers.org