خادم 21st-dev Magic MCP

ماذا يفعل خادم “21st-dev Magic” MCP؟

يُعد خادم 21st-dev Magic MCP منصة مدعومة بالذكاء الاصطناعي لمساعدة المطورين على إنشاء مكونات واجهة مستخدم حديثة وجذابة فوراً عبر أوصاف لغوية طبيعية. يعمل كحلقة وصل بين مساعدي الذكاء الاصطناعي وبيئة التطوير لديك، مما يتيح توليد واجهات مستخدم سلسة، ومعاينة فورية، ودمج أصول العلامة التجارية والشعارات الاحترافية. مع دعمه لبيئات التطوير الشهيرة مثل Cursor وWindsurf وVSCode وCline، يبسّط سير العمل في الواجهة الأمامية حيث يكفي أن يصف المستخدم ما يريد ليقوم الخادم بإنشاء وإدراج مكونات أنيقة وقابلة للتخصيص مباشرة في المشروع. هدفه هو تعزيز إنتاجية المطور عبر أتمتة المهام المتكررة ودمج الإبداع المدعوم بالذكاء الاصطناعي في سير العمل اليومي.

قائمة الأوامر (Prompts)

لا توجد قوالب أوامر محددة مذكورة في وثائق المستودع المقدمة.

قائمة المصادر (Resources)

لا توجد مصادر محددة مذكورة في وثائق المستودع المقدمة.

قائمة الأدوات (Tools)

لا توجد أدوات محددة مذكورة في وثائق المستودع المقدمة أو في server.py (أو ما يعادله).

استخدامات هذا الخادم MCP

• توليد واجهة مستخدم مدعوم بالذكاء الاصطناعي: أنشئ مكونات واجهة مستخدم حديثة فوراً عبر وصفها باللغة الطبيعية، مما يوفر الكثير من الوقت في العمل الروتيني والتصميم.
• تحسين المكونات: حسّن مكونات واجهة المستخدم الحالية بإضافة ميزات متقدمة وحركات (ميزة قادمة قريباً)، مما يسهل التطوير المتكرر.
• دمج أصول العلامة التجارية: الوصول السهل ودمج أصول العلامة التجارية والشعارات الاحترافية في الواجهة، مع الحفاظ على تناسق التصميم واحترافيته.
• معاينة فورية: شاهد المكونات أثناء إنشائها، مما يمكّن من النمذجة السريعة ودورات المراجعة الفعّالة.
• دعم متعدد لبيئات التطوير: استخدم نفس سير عمل توليد واجهة المستخدم بالذكاء الاصطناعي عبر Cursor وWindsurf وVSCode وCline لضمان تجربة تطوير متسقة.

كيفية الإعداد

Windsurf

1. المتطلب الأساسي: تثبيت Node.js (آخر إصدار LTS).
2. الحصول على مفتاح API: أنشئه من وحدة تحكم 21st.dev Magic.
3. فتح ملف الإعدادات: عدّل ~/.codeium/windsurf/mcp_config.json.
4. إضافة خادم Magic MCP:

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

5. احفظ وأعد تشغيل Windsurf لتطبيق التغييرات.

تأمين مفاتيح API: استخدم متغيرات البيئة في الإعدادات:

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

Claude

1. المتطلب الأساسي: تثبيت Node.js (آخر إصدار LTS).
2. الحصول على مفتاح API: أنشئه من وحدة تحكم 21st.dev Magic.
3. فتح ملف الإعدادات: عدّل ~/.claude/mcp_config.json.
4. إضافة خادم Magic MCP:

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

5. احفظ وأعد تشغيل Claude لتطبيق التغييرات.

تأمين مفاتيح API:

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

Cursor

1. المتطلب الأساسي: تثبيت Node.js (آخر إصدار LTS).
2. الحصول على مفتاح API: أنشئه من وحدة تحكم 21st.dev Magic.
3. فتح ملف الإعدادات: عدّل ~/.cursor/mcp.json.
4. إضافة خادم Magic MCP:

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

5. احفظ وأعد تشغيل Cursor لتطبيق التغييرات.

تأمين مفاتيح API:

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

Cline

1. المتطلب الأساسي: تثبيت Node.js (آخر إصدار LTS).
2. الحصول على مفتاح API: أنشئه من وحدة تحكم 21st.dev Magic.
3. فتح ملف الإعدادات: عدّل ~/.cline/mcp_config.json.
4. إضافة خادم Magic MCP:

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

5. احفظ وأعد تشغيل Cline لتطبيق التغييرات.

تأمين مفاتيح API:

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

كيفية استخدام هذا الخادم MCP داخل التدفقات

استخدام MCP في FlowHunt

لدمج خوادم MCP في سير عمل FlowHunt، ابدأ بإضافة مكون MCP إلى التدفق وربطه بوكيل الذكاء الاصطناعي الخاص بك:

انقر على مكون MCP لفتح لوحة الإعدادات. في قسم إعدادات النظام لمكون MCP، أدخل تفاصيل خادم MCP بصيغة JSON التالية:

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

بعد الإعداد، سيتمكن وكيل الذكاء الاصطناعي من استخدام هذا الخادم MCP كأداة مع إمكانية الوصول إلى جميع وظائفه وقدراته. تذكّر تغيير "magic-mcp" إلى اسم خادم MCP الفعلي الخاص بك واستبدال الرابط بالرابط الخاص بك.

نظرة عامة

دعم Roots غير محدد في المستودع.

رأينا

يمتاز خادم 21st-dev Magic MCP بوثائق ممتازة لعملية التثبيت والإعداد عبر منصات متعددة، مع حالات استخدام حقيقية واضحة وقاعدة مستخدمين نشطة وكبيرة. ومع ذلك، فإن غياب وثائق واضحة حول أوامر MCP أو الموارد أو الأدوات أو مفاهيم MCP المتقدمة مثل Roots وSampling يحد من الشفافية للمستخدمين المتقدمين والمُدمجين.

درجة MCP

التقييم: 6/10

يحصل خادم 21st-dev Magic MCP على تقييم مرتفع من حيث سهولة الاستخدام، والنشاط، ووضوح الإعداد، لكنه يفقد نقاطًا بسبب نقص التفاصيل التقنية المتقدمة وغياب مفاهيم MCP الأساسية بشكل صريح في الوثائق العامة.