shadcn/ui MCP Server

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

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

جلب حي لمصادر المكونات من سجل shadcn/ui
دعم متعدد الأطر: React وVue وSvelte 5 وReact Native
رسم بياني لتبعيات المكونات (مثلاً Dialog يحتاج Portal)
أمر التثبيت لكل مدير حزم (npm/pnpm/yarn/bun)
أمثلة + مصدر عرض توضيحي، لا مجرد المكوِّن الأساسي
قوالب Block (صفحات auth، dashboards) مُضمَّنة

عرض مباشر

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

shadcn-ui-mcp.replay ▶ جاهز

0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "shadcn-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "shadcn-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@jpisnice/shadcn-ui-mcp-server"
        ]
      }
    }
  }
}

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

claude mcp add shadcn-ui-mcp -- npx -y @jpisnice/shadcn-ui-mcp-server

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

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

استخدامات عملية: shadcn/ui MCP Server

بناء نموذج shadcn/ui بدون انجراف API

👤 مطورو الواجهة الأمامية الذين يبنون تطبيقات React/Next ⏱ ~20 min intermediate

متى تستخدمه: تريد Form + react-hook-form + Zod، لكن Claude يستمر في استخدام استيرادات shadcn قديمة.

المتطلبات الأساسية

تطبيق Next.js / Vite مع تهيئة shadcn/ui — npx shadcn@latest init

الخطوات

الحصول على مصدر Form الحالي

shadcn-ui MCP: get the current source for form (React) plus its dependencies. Show me the install command.✓ تم النسخ

→ أحدث مصدر مُعاد؛ قائمة التبعيات تشمل react-hook-form وzod
بناء نموذجي

Now build a SignupForm using these exact APIs. Email + password + terms checkbox; Zod schema with validation messages. No invented imports.✓ تم النسخ

→ المكوِّن يتجمَّع مع إصدار shadcn الحالي
التحقق

Run tsc --noEmit and report any unresolved imports.✓ تم النسخ

→ فحص TypeScript نظيف

النتيجة: Form يعمل مع API shadcn/ui الحالي — بلا أخطاء import { ... } from '@/components/ui/old-name'.

المزالق

المشروع على إصدار shadcn أقدم — قيِّد عبر --registry أو قبِل الترقية وشغِّل shadcn upgrade

اجمعها مع: filesystem

إدراج block من shadcn (auth/dashboard)

👤 المطورون الذين يحتاجون تخطيطات جاهزة ⏱ ~15 min beginner

متى تستخدمه: تحتاج صفحة تسجيل دخول كاملة أو تخطيط dashboard، لا مجرد مكوِّن.

الخطوات

تصفح الـ blocks

shadcn-ui: list available blocks. I want a sidebar dashboard layout.✓ تم النسخ

→ قائمة blocks مع الأسماء + المعاينات
سحب وتكييف

Pull the source for sidebar-07. Adapt it to my routes — replace the demo links with /dashboard, /clients, /settings.✓ تم النسخ

→ كود block مُعاد؛ مساراتي مُبدَّلة

النتيجة: تخطيط dashboard كامل يعمل، مُخصَّص لتطبيقي، في أقل من 10 دقائق.

المزالق

الـ block يعتمد على مكونات غير مُثبَّتة — يُعيد MCP قائمة التبعيات؛ ثبِّت المفقودة أولاً

اجمعها مع: filesystem

نقل استخدام shadcn في تطبيق React إلى Svelte

👤 المطورون الذين يهاجرون الأطر ⏱ ~30 min advanced

متى تستخدمه: تنتقل من Next إلى SvelteKit وتريد مكافئات shadcn-svelte.

الخطوات

رسم خريطة المكونات

List the components my app imports from @/components/ui. For each, get the Svelte 5 equivalent from shadcn-ui MCP.✓ تم النسخ

→ تعيين مكوِّن لمكوِّن مع ملاحظات حول فروق API
ترجمة مثال واحد

Translate this React Form usage to the Svelte version using the actual current API.✓ تم النسخ

→ كود Svelte 5 محلي الأسلوب

النتيجة: خطة ترحيل + ترجمة مرجعية للفريق.

المزالق

بعض المكونات غير موجودة في نسخة Svelte بعد — سيقول MCP 'not found'؛ علِّم هذه للترجمة اليدوية

التركيبات

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

shadcn-ui-mcp + filesystem

توليد المكونات مباشرة في المستودع

shadcn: get Form. Filesystem: write the code into src/components/SignupForm.tsx with my schema.✓ تم النسخ

shadcn-ui-mcp + github

PR لإعادة هيكلة UI تستخدم API shadcn الحالي

Pull the current Dialog API. Refactor src/components/Modal.tsx to match. Open a PR.✓ تم النسخ

الأدوات

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

الأداة	المدخلات	متى تستدعيها	التكلفة
list_components	framework?: react\|vue\|svelte\|react-native	الاستكشاف	1 fetch
get_component	name: str, framework?: str	قبل كتابة الكود	1 fetch
get_component_demo	name: str, framework?: str	مشاهدة استخدام حقيقي	1 fetch
list_blocks	framework?: str	إيجاد تخطيطات جاهزة	1 fetch
get_block	name: str	إدراج تخطيط	1 fetch

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

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

حصة API: جلب GitHub raw (60/ساعة بلا مصادقة، 5000/ساعة مع مصادقة)
الرموز لكل استدعاء: 300–4000 (مصادر المكونات قد تكون كبيرة)
التكلفة المالية: مجاني مفتوح المصدر
نصيحة: مرِّر GITHUB_PERSONAL_ACCESS_TOKEN لتجنب الحد 60/ساعة

الأمان

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

تخزين بيانات الاعتماد: token GitHub اختياري لرفع حد المعدل

نقل البيانات الخارجي: github.com (raw and api)

لا تمنح أبدًا: repo:write

يجلب MCP الكود العام فقط — لا يكتب في مستودعك إلا إذا اقترن بـ filesystem

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

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

Rate limit exceeded

اضبط متغير البيئة GITHUB_PERSONAL_ACCESS_TOKEN

Component not found in framework

نسخ Vue/Svelte تتأخر عن React؛ تحقق من list_components لذلك الإطار

Returned source uses different API than my project

المشروع على إصدار shadcn أقدم؛ إما ترقية أو تثبيت على إصدار سجل قديم

البدائل