स्थानीयकृत पठन मार्गदर्शिका
ui-widget-developerउद्देश्य, उपयोग और स्रोत
कोपायलट चैट के लिए OpenAI Apps SDK या MCP Apps SDK विजेट रेंडरिंग सपोर्ट (किसी भी भाषा में) का उपयोग करके MCP सर्वर बनाएं। इस कौशल का उपयोग तब करें जब: - M के साथ एकीकृत होने वाले MCP सर्वर बना रहे हों।365कोपायलट डिक्लेरेटिव एजेंट - कोपायलट चैट में प्रदर्शित होने वाले रिच इंटरैक्टिव विजेट्स (रिएक्ट + फ्लुएंट यूआई) का निर्माण - विजेट रेंडरिंग के लिए स्ट्रक्चर्ड कंटेंट लौटाने वाले टूल्स को लागू करना - कोपायलट विजेट रेंडरिंग का समर्थन करने के लिए मौजूदा एमसीपी सर्वर को अनुकूलित करना - लोकलहोस्ट एमसीपी सर्वर एक्सपोजर के लिए डेवटunnel सेट अप करना - कॉन्फ़िगरेशन करनाmcpPlugin.jsRemoteMCPServer रनटाइम वाले मैनिफेस्ट पर इस स्किल का उपयोग सामान्य एजेंट डेवलपमेंट (स्काफोल्डिंग, मैनिफेस्ट, डिप्लॉयमेंट) के लिए न करें — इसके बजाय डिक्लेरेटिव-एजेंट-डेवलपर का उपयोग करें। यह स्किल केवल MCP सर्वर + विजेट डेवलपमेंट के लिए है। ट्रिगर्स: "Copilot के लिए MCP सर्वर", "OpenAI ऐप्स SDK", "Copilot विजेट", "structuredContent", "MCP प्लगइन", "devtunnels MCP", "OAI ऐप", "विजेट रेंडरिंग", "UI विजेट"
स्रोत प्राप्त किया गया:
- स्रोत रिपॉज़िटरी
- microsoft/skills
- SKILL.md
.github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer/SKILL.md- रिपॉज़िटरी Star
- 3,157
- रिपॉज़िटरी का अंतिम अपडेट
- 2026-10-31
- क्षमता वर्गीकरण
- एजेंट वर्कफ़्लो
- अंतिम संग्रह समय
लाइसेंस: MIT
वर्कफ़्लो के अंश केवल पढ़ने में सहायता के लिए हैं, कोडेज़ से निष्पादन योग्य निर्देश नहीं हैं। इस पृष्ठ को बनाने के लिए किसी तृतीय-पक्ष स्किल का उपयोग नहीं किया गया है।
नीचे दिए गए उद्देश्य और कार्यप्रणाली संबंधी अंश प्रारंभिक सामग्री हैं, जिन्हें पढ़ने के लिए व्यवस्थित और अनुवादित किया गया है। ये अलग से लेबल किए गए कोडेज़ संपादकीय विश्लेषण से भिन्न हैं।
यह कौशल क्या करता है
कोपायलट चैट के लिए OpenAI Apps SDK या MCP Apps SDK विजेट रेंडरिंग सपोर्ट (किसी भी भाषा में) का उपयोग करके MCP सर्वर बनाएं। इस कौशल का उपयोग तब करें जब: - M के साथ एकीकृत होने वाले MCP सर्वर बना रहे हों।365कोपायलट डिक्लेरेटिव एजेंट - कोपायलट चैट में प्रदर्शित होने वाले रिच इंटरैक्टिव विजेट्स (रिएक्ट + फ्लुएंट यूआई) का निर्माण - विजेट रेंडरिंग के लिए स्ट्रक्चर्ड कंटेंट लौटाने वाले टूल्स को लागू करना - कोपायलट विजेट रेंडरिंग का समर्थन करने के लिए मौजूदा एमसीपी सर्वर को अनुकूलित करना - लोकलहोस्ट एमसीपी सर्वर एक्सपोजर के लिए डेवटunnel सेट अप करना - कॉन्फ़िगरेशन करनाmcpPlugin.jsRemoteMCPServer रनटाइम वाले मैनिफेस्ट पर इस स्किल का उपयोग सामान्य एजेंट डेवलपमेंट (स्काफोल्डिंग, मैनिफेस्ट, डिप्लॉयमेंट) के लिए न करें — इसके बजाय डिक्लेरेटिव-एजेंट-डेवलपर का उपयोग करें। यह स्किल केवल MCP सर्वर + विजेट डेवलपमेंट के लिए है। ट्रिगर्स: "Copilot के लिए MCP सर्वर", "OpenAI ऐप्स SDK", "Copilot विजेट", "structuredContent", "MCP प्लगइन", "devtunnels MCP", "OAI ऐप", "विजेट रेंडरिंग", "UI विजेट"
अपस्ट्रीम वर्कफ़्लो कैसे काम करता है
त्वरित शुरुआत
टर्मिनल1- एमसीपी सर्वर प्रारंभ करें: टर्मिनल2- DevTunnel शुरू करें: पहली बार चलाने पर, टनल चालू होने के बाद एजेंट को प्रोविज़न करें (एजेंट प्रोविज़निंग नियम देखें)। बाद के रन में टनल URL स्थिर रहता है - एजेंट मैनिफेस्ट में बदलाव होने पर ही पुनः प्रोविज़निंग की आवश्यकता होती है।
ऊपर की ओर मार्ग · L384 ↗विकास कार्यप्रवाह
एमसीपी सर्वर प्रारंभ करें (हॉट रीलोड के साथ देव मोड): टाइपस्क्रिप्ट:cd mcp-server && npm install && npm run devपायथन:cd mcp-server && pip install -r requirements.txt && python server.pyसी#:cd mcp-server && dotnet run
🚨 महत्वपूर्ण निष्पादन नियम 🚨
फ़्लूएंट यूआई का पालन अनिवार्य: विजेट कार्यान्वयन में रिएक्ट + फ़्लूएंट यूआई घटकों का उपयोग अनिवार्य है। विजेट कोड लिखने से पहले, एजेंट को निम्नलिखित पढ़ना और पालन करना होगा:references/best-practices.mdफ्लुएंट यूआई पैकेज की आवश्यकता (अनिवार्य): विजेट प्रोजेक्ट में कार्यान्वयन से पहले फ्लुएंट यूआई निर्भरताएँ शामिल होनी चाहिए। कम से कम, इन्हें इंस्टॉल करें और विजेट पैकेज निर्भरताओं में रखें: यदि इनमें से कोई भी पैकेज अनुपस्थित है, तो विजेट कोड जनरेशन जारी रखने से पहले उन्हें स्वचालित रूप से इंस्टॉल करें। यदि जनरेट किए गए विजेट में रिएक्ट एंट्री फ़ाइलें शामिल नहीं हैं (उदाहरण के लिएwidgets/src//main.tsxऔर एक रिएक्ट कंपोनेंट फ़ाइल) और फ़्लूएंट से आयात@fluentui/react-componentsकार्य अधूरा है और परिणाम लौटाने से पहले इसे ठीक करना आवश्यक है।
export ATK_CLI_SKILL=trueआवश्यकताएँ और सेटअप
देव टनल सेटअप
> केवल स्थानीय परीक्षण के लिए। DevTunnels का उपयोग आपकी मशीन पर विकास और परीक्षण के लिए किया जाता है। एजेंट को व्यापक रूप से साझा करने से पहले, MCP सर्वर और विजेट एसेट्स दोनों को किसी होस्टेड वातावरण (जैसे Azure App Service, Azure Static Web Apps, या कोई अन्य होस्टिंग प्रदाता) पर तैनात करें और तदनुसार एजेंट मैनिफेस्ट URL को अपडेट करें। DevTunnels आपके लोकलहोस्ट MCP सर्वर को M के लिए उपलब्ध कराते हैं।365कोपायलट स्थिर यूआरएल के लिए नामित सुरंगों का उपयोग कर रहा है। देखेंreferences/devtunnels.mdसेटअप स्क्रिप्ट, कमांड संदर्भ और समस्या निवारण के लिए।
ऊपर की ओर मार्ग · L372 ↗सीमाएं और गुणवत्ता जांच
इस फ़ाइल से कोई अलग सीमा अंश नहीं चुना गया है। इसका मतलब यह नहीं है कि यह स्किल हर इनपुट या वातावरण के लिए सुरक्षित है। संपूर्ण स्रोत की समीक्षा करें और अपने परिणाम की पुष्टि करें।
सुरक्षित परीक्षण से शुरुआत करें
- समर्थित होस्ट और रिपॉजिटरी इंस्टॉलेशन निर्देशों की जाँच करें। स्किल डायरेक्टरी और उससे संबंधित स्क्रिप्ट, एसेट्स और डॉक्यूमेंटेशन को एक साथ रखें;SKILL.mdअकेले होने पर निर्भरताओं को छोड़ा जा सकता है।
- एजेंट को अपना वास्तविक इनपुट, अपेक्षित आउटपुट और स्वीकृति मानदंड प्रदान करें। इनवोकेशन सिंटैक्स और उपलब्ध उपकरण होस्ट पर निर्भर करते हैं; यह साइट किसी सार्वभौमिक इंस्टॉलेशन कमांड को नहीं मानती है।
- डिस्पोजेबल प्रोजेक्ट या उसकी कॉपी पर मूल वर्कफ़्लो को आज़माएँ। फ़ाइलों, रिमोट सेवाओं या बिल योग्य संसाधनों में परिवर्तन करने वाले कार्यों की अनुमति देने से पहले उनकी समीक्षा करें।
- स्रोत गुणवत्ता जांच और अपनी आवश्यकताओं के आधार पर आउटपुट को सत्यापित करें। सफल ट्रिगर या उच्च रिपॉजिटरी स्टार संख्या सही परिणाम की गारंटी नहीं देते।
मूल लेख में आगे पढ़ें
- टेलीमेट्री टैगिंग
- 🔀 पथ चयन
- MCP ऐप्स: ext-apps प्लगइन इंस्टॉल करें
- 📛 प्रोजेक्ट डिटेक्शन 📛
- 🚨 महत्वपूर्ण निष्पादन नियम 🚨
- ⚠️ एमसीपी टूल कॉन्फ़िगरेशन नियम ⚠️
- परियोजना संरचना
- कोपायलट विजेट प्रोटोकॉल
- एमसीपी सर्वर पैटर्न (टाइपस्क्रिप्ट संदर्भ)
- आंशिक डेटा को संभालना
- विजेट पैटर्न
- प्लगइन स्कीमा
- देव टनल सेटअप
- त्वरित शुरुआत
- विकास कार्यप्रवाह
- सर्वोत्तम प्रथाएं
सम्बंधित योग्यता
अनुवाद और दायरा
यह पठन मार्गदर्शिका ऊपर पिन किए गए अंशों में से चयनित अंशों को प्रस्तुत करती है।SKILL.mdयह अनुवाद सहायता से किया गया है। यह कोई संपूर्ण नियमावली या परीक्षित संगतता का दावा नहीं है। उपयोग करने से पहले मूल दस्तावेज़ और उससे संबंधित फ़ाइलों को पढ़ें।
यह परिचय नीचे पिन किए गए संस्करण को संदर्भित करता है; वर्तमान रिपॉजिटरी गतिविधि और संग्रह समय अलग से दिखाए गए हैं।
- पिन किया गया स्रोत
- मूल लेख पढ़ें ↗
- स्रोत प्राप्त किया गया
- स्रोत कमिट
00d66a64919edca5bca2c673373444e36a4b5461- स्रोत SHA-256
b24d0babae9e85054d30765abca0043a2c310ba7dc980d1da258c39b87f8cd12