21st-dev Magic MCP Sunucusu

“21st-dev Magic” MCP Sunucusu ne işe yarar?

21st-dev Magic MCP Sunucusu, geliştiricilerin doğal dil açıklamalarıyla anında modern ve göz alıcı UI bileşenleri oluşturmasını sağlayan yapay zeka destekli bir platformdur. Yapay zeka asistanları ile geliştirme ortamınız arasında köprü görevi görerek, kusursuz UI üretimi, gerçek zamanlı önizlemeler ve profesyonel marka varlıkları ile logoların entegrasyonunu mümkün kılar. Cursor, Windsurf, VSCode ve Cline gibi popüler IDE’leri destekleyerek, kullanıcıların istedikleri UI’yı tarif etmesini ve Magic MCP Sunucusunun bu bileşenleri projeye doğrudan ve özelleştirilebilir şekilde eklemesini sağlar. Amacı, tekrarlayan UI görevlerini otomatikleştirerek geliştirici verimliliğini artırmak ve günlük geliştirme süreçlerine yapay zeka gücünü katmaktır.

Prompt Listesi

Sunulan depo dokümantasyonunda açıkça tanımlanmış prompt şablonları bulunmamaktadır.

Kaynak Listesi

Sunulan depo dokümantasyonunda açıkça tanımlanmış kaynak bulunmamaktadır.

Araç Listesi

Sunulan depo dokümantasyonunda veya server.py (veya dengi) içinde açıkça tanımlanmış araç bulunmamaktadır.

Bu MCP Sunucusu’nun Kullanım Alanları

• Yapay Zeka Destekli UI Üretimi: Modern UI bileşenlerini doğal dil ile tarif ederek anında oluşturun; tekrar eden kod ve tasarım işlerinde büyük zaman kazanın.
• Bileşen Geliştirme: Mevcut UI bileşenlerini ileri düzey özellikler ve animasyonlarla (yakında gelecek) geliştirin, iteratif geliştirmeyi kolaylaştırın.
• Marka Varlık Entegrasyonu: Profesyonel marka varlıklarına ve logolara kolayca erişin ve frontend’inize entegre ederek tasarım tutarlılığı ve profesyonellik sağlayın.
• Gerçek Zamanlı Önizleme: Oluşturulan bileşenleri anında görün, hızlı prototipleme ve geri bildirim döngüleri oluşturun.
• Çoklu IDE Desteği: Cursor, Windsurf, VSCode ve Cline ile aynı yapay zeka UI üretim iş akışını kullanın; tutarlı geliştirme deneyimi elde edin.

Kurulum Nasıl Yapılır

Windsurf

1. Önkoşul: Node.js’in (en güncel LTS) yüklü olması gerekir.
2. API anahtarınızı alın: 21st.dev Magic Console üzerinden oluşturun.
3. Yapılandırma dosyasını açın: ~/.codeium/windsurf/mcp_config.json dosyasını düzenleyin.
4. Magic MCP Sunucusunu ekleyin:

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

5. Değişikliklerin geçerli olması için Windsurf’u kaydedin ve yeniden başlatın.

API Anahtarlarını Güvenli Saklamak için: Yapılandırmanızda ortam değişkeni kullanın:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Claude

1. Önkoşul: Node.js’in (en güncel LTS) yüklü olması gerekir.
2. API anahtarınızı alın: 21st.dev Magic Console üzerinden oluşturun.
3. Yapılandırma dosyasını açın: ~/.claude/mcp_config.json dosyasını düzenleyin.
4. Magic MCP Sunucusunu ekleyin:

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

5. Değişikliklerin geçerli olması için Claude’u kaydedin ve yeniden başlatın.

API Anahtarlarını Güvenli Saklamak için:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cursor

1. Önkoşul: Node.js’in (en güncel LTS) yüklü olması gerekir.
2. API anahtarınızı alın: 21st.dev Magic Console üzerinden oluşturun.
3. Yapılandırma dosyasını açın: ~/.cursor/mcp.json dosyasını düzenleyin.
4. Magic MCP Sunucusunu ekleyin:

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

5. Değişikliklerin geçerli olması için Cursor’ı kaydedin ve yeniden başlatın.

API Anahtarlarını Güvenli Saklamak için:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cline

1. Önkoşul: Node.js’in (en güncel LTS) yüklü olması gerekir.
2. API anahtarınızı alın: 21st.dev Magic Console üzerinden oluşturun.
3. Yapılandırma dosyasını açın: ~/.cline/mcp_config.json dosyasını düzenleyin.
4. Magic MCP Sunucusunu ekleyin:

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

5. Değişikliklerin geçerli olması için Cline’ı kaydedin ve yeniden başlatın.

API Anahtarlarını Güvenli Saklamak için:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Bu MCP Nasıl Akışlarda Kullanılır

FlowHunt’ta MCP kullanımı

MCP sunucularını FlowHunt iş akışınıza entegre etmek için, öncelikle MCP bileşenini akışınıza ekleyin ve AI ajanınıza bağlayın:

MCP bileşenine tıklayarak yapılandırma panelini açın. Sistem MCP yapılandırma bölümüne, aşağıdaki JSON formatında MCP sunucu bilgilerinizi girin:

{
  "magic-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Yapılandırma tamamlandığında, AI ajanı artık bu MCP’yi bir araç olarak kullanabilir ve tüm işlevlerine erişebilir. "magic-mcp" kısmını kendi MCP sunucunuzun adı ile, URL’yi ise kendi MCP sunucu adresiniz ile değiştirmeniz gerektiğini unutmayın.

Genel Bakış

Depoda Roots desteği belirtilmemiştir.

Bizim görüşümüz

21st-dev Magic MCP Sunucusu, çoklu platformda kurulum ve kullanım için mükemmel dokümantasyona, net gerçek dünya kullanım senaryolarına ve geniş, aktif bir kullanıcı kitlesine sahip. Ancak, MCP prompt’ları, kaynakları, araçları ve Roots ile Sampling gibi ileri düzey MCP kavramlarına dair açık belge eksikliği, ileri düzey kullanıcılar ve entegratörler açısından şeffaflığını azaltmaktadır.

MCP Skoru

Puan: 6/10

21st-dev Magic MCP Sunucusu; kullanılabilirliği, topluluk etkinliği ve kurulum netliğiyle yüksek puan alırken, ileri teknik detaylar ve halka açık belgelerde açık MCP primitifleri eksikliği nedeniyle puan kaybediyor.