21st.dev Magic AI Agent

Magic Component Platform (MCP), geliştiricilerin doğal dil açıklamaları aracılığıyla güzel, modern UI bileşenlerini anında oluşturmasına yardımcı olan güçlü bir yapay zeka destekli araçtır. Popüler IDE'lerle sorunsuzca entegre olur ve UI geliştirme için düzenli bir iş akışı sağlar.

🌟 Özellikler

• AI Destekli UI Oluşturma: UI bileşenlerini doğal dil kullanarak açıklamak suretiyle oluşturun
• Çok-IDE Desteği:
  • Cursor IDE entegrasyonu
  • Windsurf desteği
  • VSCode desteği
  • VSCode + Cline entegrasyonu (Beta)
• Modern Bileşen Kütüphanesi: 21st.dev tarafından ilham alınan geniş bir ön-inşa edilmiş, özelleştirilebilir bileşen koleksiyonuna erişim
• Gerçek Zamanlı Önizleme: Bileşenlerinizi oluştururken anında görüntüleyin
• TypeScript Desteği: Tip-güvenli geliştirme için tam TypeScript desteği
• SVGL Entegrasyonu: Profesyonel marka varlıkları ve logoların geniş koleksiyonuna erişim
• Bileşen İyileştirmesi: Mevcut bileşenleri gelişmiş özellikler ve animasyonlarla iyileştirin (Yakında Geliyor)

🎯 Nasıl Çalışır

1. Agent'e İhtiyacınız Olanı Söyleyin

   • AI Agent'inizin sohbet alanında /ui yazın ve aradığınız bileşeni açıklayın
   • Örnek: /ui create a modern navigation bar with responsive design

2. Magic'in Oluşturmasını Sağlayın

   • IDE'niz Magic'i kullanmanız için sizi yönlendirir
   • Magic anında parlak bir UI bileşeni oluşturur
   • Bileşenler 21st.dev'in kütüphanesinden ilham almıştır

3. Sorunsuz Entegrasyon

   • Bileşenler otomatik olarak projenize eklenir
   • Yeni UI bileşenlerinizi hemen kullanmaya başlayın
   • Tüm bileşenler tam olarak özelleştirilebilir

🚀 Başlangıç

Ön Koşullar

• Node.js (En son LTS sürümü önerilir)
• Desteklenen IDE'lerden biri:
  • Cursor
  • Windsurf
  • VSCode (Cline uzantısı ile)

Kurulum

1. API Anahtarı Oluşturun

   • 21st.dev Magic Console ziyaret edin
   • Yeni bir API anahtarı oluşturun

2. Kurulum Yöntemi Seçin

Yöntem 1: CLI Kurulum (Önerilir)

IDE'niz için MCP'yi kurulumu ve yapılandırılması için tek komut:

npx @21st-dev/cli@latest install <client> --api-key <key>

Desteklenen istemciler: cursor, windsurf, cline, claude

Yöntem 2: Manuel Yapılandırma

Manuel kurulumu tercih ediyorsanız, bunu IDE'nizin MCP config dosyasına ekleyin:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
    }
  }
}

Config dosyası konumları:

• Cursor: ~/.cursor/mcp.json
• Windsurf: ~/.codeium/windsurf/mcp_config.json
• Cline: ~/.cline/mcp_config.json
• Claude: ~/.claude/mcp_config.json

Yöntem 3: VS Code Kurulum

Tek tıklamayla kurulum için aşağıdaki kurulum düğmelerinden birine tıklayın:

VS Code Manuel Kurulum

Önce yukarıdaki kurulum düğmelerini tek tıklamayla kurulum için kontrol edin. Manuel kurulum için:

VS Code'daki User Settings (JSON) dosyanıza aşağıdaki JSON bloğunu ekleyin. Bunu Ctrl + Shift + P tuşlarına basarak ve Preferences: Open User Settings (JSON) yazarak yapabilirsiniz:

{
  "mcp": {
    "inputs": [
      {
        "type": "promptString",
        "id": "apiKey",
        "description": "21st.dev Magic API Key",
        "password": true
      }
    ],
    "servers": {
      "@21st-dev/magic": {
        "command": "npx",
        "args": ["-y", "@21st-dev/magic@latest"],
        "env": {
          "API_KEY": "${input:apiKey}"
        }
      }
    }
  }
}

İsteğe bağlı olarak, bunu çalışma alanınızda .vscode/mcp.json adlı bir dosyaya ekleyebilirsiniz:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "apiKey",
      "description": "21st.dev Magic API Key",
      "password": true
    }
  ],
  "servers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}

❓ Sık Sorulan Sorular

Magic AI Agent kod tabanımı nasıl işler?

Magic AI Agent yalnızca oluşturduğu bileşenlerle ilgili dosyaları yazar veya değiştirir. Projenizin kod stilini ve yapısını izler ve uygulamanızın diğer bölümlerini etkilemeden mevcut kod tabanınızla sorunsuzca entegre olur.

Oluşturulan bileşenleri özelleştirebilir miyim?

Evet! Tüm oluşturulan bileşenler tam olarak düzenlenebilir ve iyi yapılandırılmış kodla gelir. Stil, işlevsellik ve davranışı, kod tabanınızdaki diğer herhangi bir React bileşeni gibi değiştirebilirsiniz.

İşlemlerim bitmişse ne olur?

Aylık oluşturma limitinizi aşarsanız, planınızı yükseltmeye davet edilirsiniz. Bileşen oluşturmaya devam etmek için istediğiniz zaman yükseltebilirsiniz. Mevcut bileşenleriniz tam olarak işlevsel kalacaktır.

21st.dev'in kütüphanesine yeni bileşenler ne kadar sürede eklenir?

Yazarlar herhangi bir zamanda 21st.dev'e bileşen yayınlayabilir ve Magic Agent bunlara anında erişebilir. Bu, topluluktaki en son bileşenlere ve tasarım desenlerine her zaman erişebileceğiniz anlamına gelir.

Bileşen karmaşıklığının bir sınırı var mı?

Magic AI Agent, basit düğmelerden karmaşık etkileşimli formlara kadar değişen karmaşıklıktaki bileşenleri işleyebilir. Ancak en iyi sonuçlar için, çok karmaşık UI'ları daha küçük, yönetilebilir bileşenlere ayırmanızı öneririz.

🛠️ Geliştirme

Proje Yapısı

mcp/
├── app/
│   └── components/     # Core UI components
├── types/             # TypeScript type definitions
├── lib/              # Utility functions
└── public/           # Static assets

Önemli Bileşenler

• IdeInstructions: Farklı IDE'ler için kurulum talimatları
• ApiKeySection: API anahtarı yönetim arayüzü
• WelcomeOnboarding: Yeni kullanıcılar için onboarding akışı

🤝 Katkıda Bulunun

Katkıları bekliyoruz! Lütfen Discord topluluğumuza katılın ve Magic Agent'i iyileştirmeye yardımcı olmak için geri bildirim sağlayın. Kaynak kod GitHub'da mevcuttur.

👥 Topluluk & Destek

• Discord Topluluğu - Aktif topluluğumuza katılın
• Twitter - Güncellemeler için bizi takip edin

⚠️ Beta Notu

Magic Agent şu anda beta aşamasındadır. Bu dönem boyunca tüm özellikler ücretsizdir. Platform'u iyileştirmeye devam ederken geri bildiriminiz ve sabırınız için minnettarız.

📝 Lisans

MIT License

🙏 Teşekkürler

• Beta test etçilerimiz ve topluluk üyelerimize teşekkürler
• Cursor, Windsurf ve Cline ekiplerine işbirliği için özel teşekkürler
• Bileşen ilhamı için 21st.dev ile entegrasyon
• Logo ve marka varlığı entegrasyonu için SVGL

---

Daha fazla bilgi için Discord topluluğumuza katılın veya 21st.dev/magic ziyaret edin.