دليل قراءة متعدد اللغات للمهارة
ui-widget-developerالغرض والاستخدام والمصدر
أنشئ خوادم MCP لتطبيق Copilot Chat باستخدام دعم عرض عناصر واجهة المستخدم في OpenAI Apps SDK أو MCP Apps SDK (بأي لغة). استخدم هذه المهارة عند: - إنشاء خوادم MCP تتكامل مع M365وكلاء Copilot التصريحيون - بناء أدوات تفاعلية غنية (React + Fluent UI) يتم عرضها في Copilot Chat - تنفيذ أدوات تُعيد محتوى مُهيكل لعرض الأدوات - تكييف خادم MCP موجود لدعم عرض أدوات Copilot - إعداد أنفاق التطوير لعرض خادم MCP المحلي - التكوينmcpPlugin.jsلا تستخدم هذه المهارة لتطوير الوكلاء بشكل عام (إنشاء الهياكل، والبيانات، والنشر) عند استخدام ملفات البيان مع بيئة تشغيل RemoteMCPServer، بل استخدم declarative-agent-developer بدلاً منها. هذه المهارة مخصصة فقط لتطوير خادم MCP والأدوات. المحفزات: "خادم MCP لـ Copilot"، و"OpenAI Apps SDK"، و"أداة Copilot"، و"structuredContent"، و"مكون MCP الإضافي"، و"devtunnels MCP"، و"تطبيق OAI"، و"عرض الأداة"، و"أداة واجهة المستخدم".
تم استرجاع المصدر:
- مستودع المصدر
- microsoft/skills
- SKILL.md
.github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer/SKILL.md- نجوم المستودع
- 3,157
- آخر تحديث للمستودع
- 2026-10-31
- تصنيف القدرات
- سير عمل الوكيل
- وقت التجميع الأخير
الترخيص: MIT
مقتطفات سير العمل هي أدوات مساعدة للقراءة، وليست تعليمات تنفيذية من Codez. لم يتم تشغيل أي مهارة تابعة لجهة خارجية لإنتاج هذه الصفحة.
تُعدّ فقرات الغرض وسير العمل الواردة أدناه موادًا أساسية، مُنظّمة ومترجمة لتسهيل القراءة. وهي تختلف عن التحليل التحريري لـ Codez المُصنّف بشكل منفصل.
ما تفعله هذه المهارة
أنشئ خوادم MCP لتطبيق Copilot Chat باستخدام دعم عرض عناصر واجهة المستخدم في OpenAI Apps SDK أو MCP Apps SDK (بأي لغة). استخدم هذه المهارة عند: - إنشاء خوادم MCP تتكامل مع M365وكلاء Copilot التصريحيون - بناء أدوات تفاعلية غنية (React + Fluent UI) يتم عرضها في Copilot Chat - تنفيذ أدوات تُعيد محتوى مُهيكل لعرض الأدوات - تكييف خادم MCP موجود لدعم عرض أدوات Copilot - إعداد أنفاق التطوير لعرض خادم MCP المحلي - التكوينmcpPlugin.jsلا تستخدم هذه المهارة لتطوير الوكلاء بشكل عام (إنشاء الهياكل، والبيانات، والنشر) عند استخدام ملفات البيان مع بيئة تشغيل RemoteMCPServer، بل استخدم declarative-agent-developer بدلاً منها. هذه المهارة مخصصة فقط لتطوير خادم MCP والأدوات. المحفزات: "خادم MCP لـ Copilot"، و"OpenAI Apps SDK"، و"أداة Copilot"، و"structuredContent"، و"مكون MCP الإضافي"، و"devtunnels MCP"، و"تطبيق OAI"، و"عرض الأداة"، و"أداة واجهة المستخدم".
طريقة الاستخدام وفق المستند الأصلي
بداية سريعة
صالة1- بدء تشغيل خادم MCP: الطرفية2- بدء تشغيل DevTunnel: عند التشغيل الأول، قم بتوفير الوكيل بمجرد إنشاء النفق (راجع قاعدة توفير الوكيل). في عمليات التشغيل اللاحقة، يكون عنوان URL للنفق ثابتًا - لا حاجة لإعادة التوفير إلا إذا تغير بيان الوكيل.
مقتطف من المصدر · L384 ↗سير عمل التطوير
تشغيل خادم MCP (وضع المطور مع إعادة التحميل السريع): TypeScript:cd mcp-server && npm install && npm run devبايثون:cd mcp-server && pip install -r requirements.txt && python server.pyسي شارب:cd mcp-server && dotnet run
🚨 قواعد التنفيذ الحاسمة 🚨
تطبيق واجهة المستخدم السلسة (إلزامي): يجب أن تستخدم تطبيقات الأدوات React ومكونات واجهة المستخدم السلسة. قبل كتابة أي كود للأدوات، يجب على الوكيل قراءة واتباع ما يلي:references/best-practices.mdمتطلبات حزمة Fluent UI (إلزامي): يجب أن يتضمن مشروع الأداة تبعيات Fluent UI قبل التنفيذ. كحد أدنى، قم بتثبيت هذه الحزم والاحتفاظ بها ضمن تبعيات حزمة الأداة: إذا كانت أي من هذه الحزم مفقودة، فقم بتثبيتها تلقائيًا قبل متابعة إنشاء كود الأداة. إذا لم تتضمن الأداة المُنشأة ملفات إدخال React (على سبيل المثال،widgets/src//main.tsxوملف مكون React) وعمليات استيراد Fluent من@fluentui/react-components، المهمة غير مكتملة ويجب تصحيحها قبل إرجاع النتائج.
export ATK_CLI_SKILL=trueالمتطلبات والإعداد
إعداد DevTunnels
> للاختبار المحلي فقط. تُستخدم DevTunnels للتطوير والاختبار على جهازك. قبل مشاركة الوكيل على نطاق أوسع، انشر كلاً من خادم MCP وأصول الأدوات في بيئة استضافة (مثل Azure App Service أو Azure Static Web Apps أو أي مزود استضافة آخر) وقم بتحديث عناوين URL لبيان الوكيل وفقًا لذلك. تعرض DevTunnels خادم MCP المحلي الخاص بك لـ M365يستخدم برنامج Copilot أنفاقًا مُسماة للحصول على عناوين URL مستقرة. انظرreferences/devtunnels.mdللحصول على نصوص الإعداد، ومراجعة الأوامر، واستكشاف الأخطاء وإصلاحها.
مقتطف من المصدر · L372 ↗الحدود وفحوصات الجودة
لم يتم تحديد أي مقطع حدود منفصل من هذا الملف. هذا لا يعني أن المهارة آمنة لكل مدخلات أو بيئة. راجع المصدر بالكامل وتحقق من صحة النتيجة بنفسك.
ابدأ بتجربة آمنة
- تحقق من المضيف المدعوم وتعليمات تثبيت المستودع. احتفظ بمجلد المهارات والبرامج النصية والأصول والوثائق المشار إليها معًا؛SKILL.mdقد يؤدي وجود شخص واحد فقط إلى إغفال بعض التبعيات.
- زوّد البرنامج ببياناتك الفعلية، والمخرجات المطلوبة، ومعايير القبول. يعتمد بناء جملة الاستدعاء والأدوات المتاحة على النظام المضيف؛ ولا يفترض هذا الموقع وجود أمر تثبيت موحد.
- جرّب سير العمل الأصلي في مشروع مؤقت أو على نسخة احتياطية. راجع العمليات التي تُغيّر الملفات أو الخدمات البعيدة أو الموارد القابلة للفوترة قبل السماح بها.
- تحقق من صحة المخرجات بمقارنتها بفحوصات جودة المصدر ومتطلباتك الخاصة. لا يُعدّ نجاح عملية التشغيل أو ارتفاع عدد النجوم في المستودع دليلاً على صحة النتيجة.
اقرأ المزيد في المصدر
- وضع علامات القياس عن بعد
- 🔀 اختيار المسار
- تطبيقات MCP: تثبيت إضافة ext-apps
- 📛 كشف المشاريع 📛
- 🚨 قواعد التنفيذ الحاسمة 🚨
- ⚠️ قاعدة تكوين أداة MCP ⚠️
- هيكل المشروع
- بروتوكول أداة مساعد الطيار
- نمط خادم MCP (مرجع TypeScript)
- معالجة البيانات الجزئية
- نمط الأداة
- مخطط المكون الإضافي
- إعداد DevTunnels
- بداية سريعة
- سير عمل التطوير
- أفضل الممارسات
المهارات ذات الصلة
الترجمة والنطاق
يختار دليل القراءة هذا مقاطع من المصدر الرئيسي المثبتSKILL.mdهذه الترجمة مساعدة. وهي ليست دليلاً كاملاً ولا تضمن التوافق المُختَبَر. يُرجى قراءة النص الأصلي والملفات المُشار إليها قبل الاستخدام.
تشير هذه المقدمة إلى النسخة المثبتة أدناه؛ ويتم عرض نشاط المستودع الحالي ووقت التجميع بشكل منفصل.
- المصدر بإصدار ثابت
- اقرأ الأصل ↗
- تم استرجاع المصدر
- معرّف نسخة Git
00d66a64919edca5bca2c673373444e36a4b5461- المصدر SHA-256
b24d0babae9e85054d30765abca0043a2c310ba7dc980d1da258c39b87f8cd12