/ الدليل / الملعب / Magic UI MCP
← كل الخوادم ↗ GitHub
● رسمي magicuidesign ⚡ فوري

Magic UI MCP

بواسطة magicuidesign · magicuidesign/mcp

المكونات المتحركة لـ Magic UI - التلاشي الضبابي، والشاشة الاسمية، والشفق القطبي، والتألق - يمكن اكتشافها من خلال الدردشة ويمكن تثبيتها في تطبيق React/Next الخاص بك بطلب واحد.

Magic-ui-mcp هو MCP الرسمي لـ Magic UI، وهي مكتبة من المكونات المتحركة المستخدمة في الصفحات المقصودة الحديثة. ثلاث أدوات — listRegistryItems، وsearchRegistryItems، وgetRegistryItem — تتيح للوكيل تصفح سجل Magic UI المباشر، ومطابقة أحد المكونات باللغة الطبيعية، واسترداد أوامر التثبيت + أمثلة الاستخدام. تصبح عبارة "إضافة رسم متحرك لنص ضبابي باهت" هي: ابحث عن المكون، واعرض المقتطف، وانسخه إلى تطبيقك. يعمل مع Cursor وClaude Desktop وWindsurf وCline وRoo-Cline.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

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

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

magic-ui-mcp.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "magic-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "magic-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@magicuidesign/mcp@latest"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add magic-ui-mcp -- npx -y @magicuidesign/mcp@latest

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: Magic UI MCP

قم بإضافة قسم البطل المتحرك إلى الصفحة المقصودة لـ Next.js

👤 يقوم مطورو ومصممو الواجهة الأمامية ببناء صفحات تسويقية ⏱ ~15 min beginner

متى تستخدمه: أنت بحاجة إلى رسم متحرك بطل مصقول ولا تريد تصفح المستندات بنفسك.

المتطلبات الأساسية
  • Next.js أو مشروع React — npx create-next-app@latest
  • Tailwind + shadcn/ui — تعتمد واجهة المستخدم السحرية على هذه العناصر؛ تثبيت إذا كان في عداد المفقودين
الخطوات
  1. اطلب ذلك بشكل طبيعي
    أضف رسمًا متحركًا غير واضح المعالم لـ H1 وCTA في قسم البطل الخاص بي.✓ تم النسخ
    → يقوم الوكيل باستدعاء searchRegistryItems من أجل 'blur Fade' وإرجاع المكون
  2. تركيب + سلك في
    قم بتثبيت المكون ولصقه في app/page.tsx ليحل محل البطل الحالي.✓ تم النسخ
    → يتم تشغيل أمر التثبيت؛ تمت إضافة الواردات؛ تم تحديث البطل
  3. توقيت القرص
    دخول أبطأ — تأخير قدره 600 مللي ثانية بين H1 وCTA.✓ تم النسخ
    → تم تحديث الدعائم مضمنة

النتيجة: رسوم متحركة بطلة تستحق السفينة دون مغادرة المحرر.

المزالق
  • مزج Magic UI مع إعداد غير Tailwind — تفترض معظم المكونات فئات Tailwind؛ المنفذ إلى وحدات CSS فقط إذا كنت مستعدًا لهذا العمل
اجمعها مع: mcp-echarts

تصفح جميع مكونات Magic UI حسب الفئة

👤 المصممون يستكشفون المكتبة ⏱ ~10 min beginner

متى تستخدمه: أنت في مرحلة مبكرة من التصميم وتريد مسح ما هو متاح.

الخطوات
  1. قائمة حسب النوع
    قم بإدراج جميع مكونات Magic UI من النوع "الرسوم المتحركة" - بحد أقصى 30.✓ تم النسخ
    → listRegistryItems يُرجع الأسماء + العناوين
  2. قم بتوسيع الأشياء المثيرة للاهتمام
    أرني تفاصيل الشاشة الاسمية والنص الشفقي والحدود اللامعة.✓ تم النسخ
    → التفاصيل الكاملة بما في ذلك. التثبيت + الاستخدام لكل مكون

النتيجة: قائمة قصيرة بالمكونات التي تستحق التجربة في صفحتك التالية.

استبدل صف الشعار الثابت بإطار من الشعارات

👤 أصحاب التسويق/الصفحات المقصودة ⏱ ~10 min beginner

متى تستخدمه: يبدو الصف "موثوق به" قديمًا - تضيف شاشة التحديد القابلة للتمرير الحركة.

الخطوات
  1. ابحث عن الشاشة الاسمية
    اجعل الصف "موثوق به" عبارة عن شريط مستطيل من الشعارات.✓ تم النسخ
    → يختار الوكيل مكون الشاشة الاسمية ويقوم بتكييفه
  2. توقف مؤقتًا عند التمرير
    قم بإيقاف شاشة التحديد مؤقتًا عند التمرير لسهولة الوصول.✓ تم النسخ
    → قرص الدعامة/الفئة؛ يحافظ على المستخدمين ذوي الحركة المنخفضة

النتيجة: صف مستطيل يبدو حديثًا ويحترم تفضيلات الحركة.

المزالق
  • تجاهل يفضل-خفض-الحركة — عادةً ما تحترمها مكونات Magic UI؛ لا تتجاوز إلا إذا كنت تعرف المستخدمين
اجمعها مع: motion-dev-animations-skill

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

magic-ui-mcp + motion-dev-animations-skill

واجهة مستخدم Magic UI للمكونات المعدة مسبقًا، وmotion.dev للرسوم المتحركة المخصصة

استخدم التمويه الضبابي لـ Magic UI للبطل، ثمmotion.dev للحصول على المنظر المخصص المرتبط بالتمرير أدناه.✓ تم النسخ
magic-ui-mcp + figma

خذ تصميم Figma وتوصل إلى أقرب مكون لـ Magic UI

يشبه قسم بطاقة Figma هذا شبكة Bento الخاصة بـ Magic UI. تثبيته وملء النص.✓ تم النسخ
magic-ui-mcp + claude-code-design-skills

تدفق الشكل إلى الكود + تحسينات واجهة المستخدم السحرية

تحويل Figma إلى React؛ حيثما كان ذلك منطقيًا، استخدم مكونات Magic UI بدلاً من المكونات المؤقتة.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
listRegistryItems kind?, query?, limit?, offset? تصفح أو ترقيم الصفحات المكونات المتاحة 1 registry fetch
searchRegistryItems query + pagination البحث عن مكونات اللغة الطبيعية 1 registry fetch
getRegistryItem id/name قبل التثبيت، لنرى بالضبط ما ستحصل عليه 1 registry fetch

التكلفة والحدود

تكلفة التشغيل

حصة API
التسجيل هو جلب عام - لا توجد مشكلات في السعر في الاستخدام العادي
الرموز لكل استدعاء
البيانات الوصفية الصغيرة لكل مكالمة
التكلفة المالية
حر
نصيحة
استخدم listRegistryItems مع مرشح النوع؛ لا تجلب كل عنصر للتصفح فقط.

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: لا أوراق اعتماد
نقل البيانات الخارجي: يتم جلب القراءة فقط إلى سجل Magic UI. لا يكتب في أي مكان.

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

تقوم الأداة بإرجاع مجموعة فارغة

قد تكون إمكانية الوصول إلى السجل محظورة في شبكتك؛ أعد المحاولة، وأكد DNS على حل Magicui.design.

تحقق: curl -I https://magicui.design/r/index.json
يتم تثبيت المكون ولكنه يبدو غير مرتب

تكوين Tailwind أو متغيرات CSS مفقودة - اتبع إعداد Magic UI لمرة واحدة (globals.css + tailwind.config.ts).

تحقق: Check tailwind.config.ts for magicui plugin
الرسوم المتحركة تتلعثم

من المحتمل إعادة تقديم سلسلة. حفظ المكونات الأم. تأكيد عدم وجود سحق التخطيط.

تحقق: Chrome DevTools Performance → Frames

البدائل

Magic UI MCP مقابل البدائل

البديلمتى تستخدمهاالمقايضة
motion-dev-animations-skillتريد منطق حركة مخصص، وليس مكتبة مكوناتالمزيد من العمل؛ المزيد من السيطرة
figmaلديك تصميمات موجودة في Figma للمنفذاتجاه مختلف: التصميم → الكود، وليس المكتبة أولاً
claude-code-design-skillsأنت تقوم بـ Figma-to-code، وليس اعتماد المكتبةيغطي جزءًا مختلفًا من خط الأنابيب

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills