نظرة عامة

Storybook MCP هو التكامل الرسمي من فريق Storybook الذي يجلب قوة بروتوكول سياق النموذج (MCP) إلى تطوير واجهات المستخدم المعتمدة على المكونات. يحول Storybook الحالي الخاص بك إلى مصدر بيانات غني ومركب يمكن لعوامل الذكاء الاصطناعي الاستعلام عنه في الوقت الحقيقي.

من خلال كشف بيانات تعريف المكونات، القصص، أنواع الخصائص، أمثلة الاستخدام، والتوثيق بتنسيق محسن وكفء من حيث الرموز، يتيح Storybook MCP لعوامل الذكاء الاصطناعي بناء واجهات مستخدم تتوافق مع نظام التصميم الخاص بفريقك بدلاً من إنشاء كود عام أو غير متسق.

الميزات الرئيسية

• اكتشاف المكونات والسياق: يمكن للعوامل سرد المكونات، واسترداد الخصائص التفصيلية، القصص، عناصر التحكم، والتوثيق.
• الملفات التعريفية المحسنة: يوفر حمولات مُنتقاة وقابلة للقراءة الآلية (بيان المكون) مع واجهات برمجة التطبيقات، المتغيرات، رموز التصميم، ومقتطفات الاستخدام—أكثر كفاءة بكثير من الكود المصدر الخام.
• إنشاء القصص والاختبار: يمكن للعوامل كتابة قصص جديدة للمكونات وإجراء الاختبارات بشكل مستقل، مع دوائر رد فعل مدمجة للتصحيح الذاتي.
• تكامل سلس: التثبيت عبر حزمة @storybook/addon-mcp؛ يعمل خادم MCP جنبًا إلى جنب مع خادم التطوير الخاص بـ Storybook (عادة عند نقطة النهاية /mcp).
• مكتبة مستقلة: استخدم @storybook/mcp بشكل مستقل لإعدادات مخصصة.
• دعم React (الإصدار 10.3+): محسن حاليًا لـ React، مع تخطيط لدعم أطر عمل إضافية.

آلية العمل

1. قم بتثبيت الإضافة: npx storybook add @storybook/addon-mcp
2. شغّل خادم تطوير Storybook الخاص بك.
3. وصّل أي عامل ذكاء اصطناعي متوافق مع MCP (Claude، Cursor، إلخ) بنقطة نهاية MCP.
4. أصبح لدى العوامل الآن وصول مباشر إلى نظام التصميم الحي الخاص بك من أجل إنشاء كود واعي بالسياق.

هذا يخلق سير عمل تكراري حيث تقوم العوامل بتوليد الكود، ومعاينته عبر القصص، وإجراء الاختبارات، وإصلاح المشكلات دون تدخل بشري مستمر.

فوائد للمطورين

• ناتج ذكاء اصطناعي عالي الجودة: تتبع العوامل الأنماط المعتادة وواجهات برمجة التطبيقات للمكونات، مما يقلل من الأوهام وإعادة العمل.
• كفاءة الرموز: حمولات سياق أصغر ومركزة تعني أداءً أفضل وتكاليف أقل.
• حواجز وقاية لواجهات الإنتاج: تساعد دوائر رد فعل الاختبار العوامل على إرسال كود يتوافق مع معاييرك. Italic text indicating a key benefit
• تسريع تطوير الواجهات الأمامية: مثالي لفرق أنظمة التصميم، قواعد الكود الكبيرة، وسير العمل المستند إلى العوامل.

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

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

التثبيت والبدء

يتطلب Storybook 10.3+ (عرض React).

# ترقية Storybook
npx storybook@latest upgrade

إضافة مكوّن MCP

npx storybook add @storybook/addon-mcp

ثم نفّذ `storybook dev` وقم بتوصيل وكيلك إلى `http://localhost:6006/mcp` (قد يختلف المنفذ).

للحصول على الوثائق الكاملة، قم بزيارة [الوثائق الرسمية لـ Storybook AI / MCP](https://storybook.js.org/docs/ai/mcp/overview).

## موارد ذات صلة

- المدونة الرسمية: [Storybook MCP لـ React](https://storybook.js.org/blog/storybook-mcp-for-react/)
- GitHub: [storybookjs/mcp](https://github.com/storybookjs/mcp)
- npm: [@storybook/addon-mcp](https://www.npmjs.com/package/@storybook/addon-mcp)