تبسيط نظام التصميم الخاص بك: دليل لاستخدام shadcn Registry MCP

مقدمة إلى shadcn Registry MCP

shadcn Registry MCP هو أداة تغير قواعد اللعبة للمطورين الذين يتطلعون إلى تبسيط سير عمل نظام التصميم. من خلال الجمع بين shadcn - مكتبة مكونات وأداة CLI شائعة - مع بروتوكول سياق النموذج (MCP)، وهو معيار مفتوح لتكامل البيانات مع الذكاء الاصطناعي، تتيح لك هذه الميزة أتمتة إعداد وتهيئة وصيانة أنظمة التصميم في مشاريع React. في هذا الدليل، سنمر عبر كيفية إعداد واستخدام Registry MCP في مشروع Next.js، مستفيدين من الذكاء الاصطناعي للتعامل مع العمل الثقيل.

هذا الدليل مصمم للمطورين ذوي الخبرة المتوسطة في React و Next.js. سنغطي كل شيء من إعداد بيئتك إلى استخدام المكونات والحفاظ على مزامنة مشروعك مع التحديثات البعيدة.

ما هو Registry MCP؟

shadcn هو أداة CLI تساعدك في إنشاء وإدارة مكونات React القابلة لإعادة الاستخدام والخطافات وأصول نظام التصميم. يدعم سجلات مخصصة، وهي مجموعات من المكونات والأنماط والتهيئات التي يمكن مشاركتها عبر المشاريع. بروتوكول سياق النموذج (MCP)، الذي طورته Anthropic، هو معيار مفتوح يمكّن نماذج الذكاء الاصطناعي من التفاعل مع الأنظمة الخارجية بطريقة موحدة.

عندما تجعل سجل shadcn "متوافقاً مع MCP" باستخدام أمر registry:mcp، يمكن لأداة ذكاء اصطناعي (مثل Cursor AI) التفاعل مع السجل لأتمتة مهام مثل:

• تهيئة shadcn في مشروعك.
• تثبيت الرموز المخصصة والخطوط والتبعيات.
• سحب وتكييف المكونات من سجلات متعددة.
• مزامنة مشروعك مع تحديثات السجل البعيد.

يهدف هذا التكامل إلى تجربة "بدون تهيئة"، حيث يتعامل الذكاء الاصطناعي مع معظم الإعداد، مما يتيح لك التركيز على بناء تطبيقك.

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

قبل أن نبدأ، تأكد من توفر الأدوات والمعرفة التالية:

الخطوة 1: إعداد مشروع Next.js

إذا لم يكن لديك مشروع Next.js بالفعل، دعنا ننشئ واحداً. شغّل الأمر التالي لإعداد مشروع جديد:

npx create-next-app@latest my-shadcn-project
cd my-shadcn-project

اتبع المطالبات لتهيئة مشروعك. لهذا الدليل، نوصي باستخدام TypeScript و Tailwind CSS و App Router، حيث تعمل بسلاسة مع shadcn.

الخطوة 2: تثبيت وتهيئة shadcn

بعد ذلك، ثبّت shadcn CLI عالمياً (إذا لم يكن مثبتاً بالفعل) وهيئه في مشروعك.

npm install -g @shadcn/cli
npx shadcn-ui@latest init

اتبع المطالبات لإعداد shadcn. سيهيئ هذا Tailwind CSS، وينشئ ملف components.json، ويجهز مشروعك لمكونات shadcn.

الخطوة 3: إنشاء أو استخدام سجل مخصص

سجل shadcn هو مجموعة من المكونات والأنماط والتهيئات. لهذا الدليل، سننشئ سجلاً بسيطاً يسمى "Alpine Design System."

أنشئ ملف registry.json بالمحتوى التالي واستضفه في مكان يمكن الوصول إليه (مثل مستودع GitHub):

{
  "name": "alpine-design-system",
  "components": [
    {
      "name": "Button",
      "files": ["button.tsx"],
      "dependencies": ["react"]
    }
  ],
  "style": {
    "tokens": {
      "--primary": "#1a73e8",
      "--background": "#ffffff"
    },
    "fonts": [
      {
        "name": "DM_Sans",
        "url": "https://fonts.google.com/specimen/DM+Sans"
      }
    ]
  }
}

الخطوة 4: جعل السجل متوافقاً مع MCP

استخدم أمر registry:mcp لجعل سجلك متوافقاً مع MCP، مما يمكّن الأتمتة المدفوعة بالذكاء الاصطناعي:

npx shadcn-ui@latest registry:mcp --url https://my-registry.com/registry.json

يعالج هذا الأمر السجل ويجهزه للتفاعل مع أداة ذكاء اصطناعي عبر MCP.

الخطوة 5: إعداد Cursor AI

يستخدم الدليل Cursor AI، وهي أداة ذكاء اصطناعي متوافقة مع MCP، لأتمتة الإعداد. اتبع هذه الخطوات لإعداده:

1. قم بتنزيل وتثبيت Cursor AI من موقعه الرسمي.
2. هيئ دعم MCP في Cursor AI (راجع الوثائق للتفاصيل).
3. قدم رابط سجلك المتوافق مع MCP في Cursor AI حتى يتمكن من التفاعل معه.

الخطوة 6: استخدام Registry MCP لإعداد مشروعك

مع جعل السجل متوافقاً مع MCP، استخدم Cursor AI لتهيئة مشروعك. في Cursor AI، اكتب المطالبة التالية:

"Set up my Next.js project with the Alpine Design System registry at https://my-registry.com/registry.json"

سيقوم الذكاء الاصطناعي بـ:

• تهيئة shadcn (إذا لم يتم بالفعل).
• تثبيت الرموز المخصصة والخطوط.
• تهيئة ملفات مشروعك.

الخطوة 7: البدء باستخدام المكونات

الآن بعد إعداد مشروعك، يمكنك البدء باستخدام المكونات من السجل. لإضافة مكون Button، شغّل:

npx shadcn-ui@latest add button

بدلاً من ذلك، اطلب من Cursor AI إضافة المكون: "Add a Button component from the Alpine Design System registry to my project."

سيسحب الذكاء الاصطناعي المكون ويضيفه إلى قاعدة الكود الخاصة بك.

مثال: استخدام مكون في مشروع Next.js

دعنا نرى كيفية استخدام مكون Button في صفحة Next.js. افتح app/page.tsx وأضف الكود التالي:

import { Button } from "@/components/ui/button";
 
export default function Home() {
  return (
    <div>
      <h1>My Next.js Project</h1>
      <Button>Click me</Button>
    </div>
  );
}

شغّل خادم التطوير لرؤية النتيجة:

npm run dev

قم بزيارة http://localhost:3000 في متصفحك لرؤية الصفحة مع الزر المنسق.

الخلاصة

shadcn Registry MCP هي أداة قوية لأتمتة سير عمل نظام التصميم في مشاريع React. من خلال الاستفادة من الذكاء الاصطناعي و MCP، يمكنك إعداد مشروعك وإضافة مكونات والحفاظ على كل شيء متزامناً بأقل جهد. أوضح هذا الدليل كيفية دمج Registry MCP في مشروع Next.js، لكن يمكن تطبيق المفاهيم على أطر React الأخرى أيضاً.

إذا واجهت أي مشاكل، راجع وثائق shadcn أو أدلة Cursor AI للحصول على دعم إضافي. برمجة سعيدة!

المراجع المصدر: سلسلة تغريدات shadcn على X حول Registry MCP، المؤلف: shadcn، الرابط: https://x.com/shadcn/status/191759722851385360