21st.dev Magic

21st.dev Magic AI Agent

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

🌟 Özellikler

• Yapay Zeka Destekli UI Oluşturma: UI bileşenlerini doğal dilde tanımlayarak oluşturun
• Çoklu 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, önceden oluşturulmuş, özelleştirilebilir geniş bir bileşen koleksiyonuna erişim
• Gerçek Zamanlı Önizleme: Bileşenlerinizi oluştururken anında görün
• TypeScript Desteği: Tip güvenli geliştirme için tam TypeScript desteği
• SVGL Entegrasyonu: Profesyonel marka varlıkları ve logolardan oluşan geniş bir koleksiyona erişim
• Bileşen Geliştirme: Mevcut bileşenleri gelişmiş özellikler ve animasyonlarla iyileştirin (Çok Yakında)

🎯 Nasıl Çalışır

1. Ajansa Ne İstediğinizi Söyleyin

   • Yapay zeka ajanınızın sohbetinde, sadece /ui yazın ve aradığınız bileşeni tanımlayın
   • Örnek: /ui create a modern navigation bar with responsive design

2. Magic'in Oluşturmasına İzin Verin

   • IDE'niz sizi Magic'i kullanmaya yönlendirir
   • Magic anında gösterişli bir UI bileşeni oluşturur
   • Bileşenler 21st.dev'in kütüphanesinden ilham alır

3. Sorunsuz Entegrasyon

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

🚀 Başlarken

Ön Koşullar

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

Kurulum

1. API Anahtarı Oluşturun

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

2. Kurulum Yöntemini Seçin

Yöntem 1: CLI Kurulumu (Önerilir)

IDE'niz için MCP'yi kurmak ve yapılandırmak için tek bir 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 ederseniz, IDE'nizin MCP yapılandırma dosyasına şunu ekleyin:

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

Yapılandırma 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 Kurulumu

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

Manuel VS Code Kurulumu

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

VS Code'da Kullanıcı Ayarları (JSON) dosyanıza aşağıdaki JSON bloğunu ekleyin. Bunu Ctrl + Shift + P tuşlarına basıp 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, çalışma alanınızdaki .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}"
      }
    }
  }
}

❓ SSS

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 stiline ve yapısına uyar ve uygulamanızın diğer bölümlerini etkilemeden mevcut kod tabanınızla sorunsuz bir şekilde bütünleşir.

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

Evet! Oluşturulan tüm bileşenler tamamen düzenlenebilir ve iyi yapılandırılmış kodla gelir. Kod tabanınızdaki diğer herhangi bir React bileşeni gibi stil, işlevsellik ve davranışı değiştirebilirsiniz.

Oluşturma hakkım biterse ne olur?

Aylık oluşturma limitinizi aşarsanız, planınızı yükseltmeniz istenir. Bileşen oluşturmaya devam etmek için istediğiniz zaman yükseltme yapabilirsiniz. Mevcut bileşenleriniz tamamen işlevsel kalmaya devam eder.

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

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

Bileşen karmaşıklığı için 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

Anahtar Bileşenler

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

🤝 Katkıda Bulunma

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

👥 Topluluk ve Destek

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

⚠️ Beta Bildirimi

Magic Agent şu anda beta aşamasındadır. Bu dönem boyunca tüm özellikler ücretsizdir. Platformu geliştirmeye devam ederken geri bildirimleriniz ve sabrınız için teşekkür ederiz.

📝 Lisans

MIT Lisansı

🙏 Teşekkürler

• Beta test kullanıcılarımıza ve topluluk üyelerimize teşekkürler
• İş birlikleri için Cursor, Windsurf ve Cline ekiplerine ö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 adresini ziyaret edin.