C✳CODEZ.WIN
🌐 Français

Guide de lecture localisé

ui-widget-developerObjectif, utilisation et source

Créez des serveurs MCP pour Copilot Chat à l'aide du SDK OpenAI Apps ou du support de rendu de widgets du SDK MCP Apps (tous langages confondus). Utilisez cette compétence lorsque : - Vous créez des serveurs MCP qui s'intègrent à M365Agents déclaratifs Copilot - Création de widgets interactifs riches (React + Fluent UI) s'affichant dans Copilot Chat - Implémentation d'outils renvoyant du contenu structuré pour l'affichage des widgets - Adaptation d'un serveur MCP existant pour la prise en charge de l'affichage des widgets Copilot - Configuration de tunnels de développement pour l'exposition du serveur MCP local - ConfigurationmcpPlugin.jsConcernant les manifestes avec l'environnement d'exécution RemoteMCPServer : n'utilisez PAS cette compétence pour le développement général d'agents (génération, manifestes, déploiement) ; utilisez plutôt declarative-agent-developer. Cette compétence est UNIQUEMENT destinée au développement de serveurs MCP et de widgets. Déclencheurs : « Serveur MCP pour Copilot », « SDK OpenAI Apps », « Widget Copilot », « Contenu structuré », « Plugin MCP », « devtunnels MCP », « Application OAI », « Rendu de widget », « Widget d'interface utilisateur ».

Source récupérée:

Dépôt source
microsoft/skills
SKILL.md
.github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer/SKILL.md
Étoiles du dépôt
3,157
Mise à jour du dépôt
2026-10-31
Catégories de capacités
Flux de travail de l'agent
Dernière collecte

Licence : MIT

SKILL.md original

Les extraits de flux de travail sont des outils de lecture et non des instructions exécutables de Codez. Aucune compétence tierce n'a été utilisée pour générer cette page.

Les passages relatifs à l'objectif et au flux de travail ci-dessous constituent le contenu original, organisé et traduit pour la lecture. Ils sont distincts de l'analyse éditoriale de Codez, qui est étiquetée séparément.

À quoi sert cette compétence ?

Créez des serveurs MCP pour Copilot Chat à l'aide du SDK OpenAI Apps ou du support de rendu de widgets du SDK MCP Apps (tous langages confondus). Utilisez cette compétence lorsque : - Vous créez des serveurs MCP qui s'intègrent à M365Agents déclaratifs Copilot - Création de widgets interactifs riches (React + Fluent UI) s'affichant dans Copilot Chat - Implémentation d'outils renvoyant du contenu structuré pour l'affichage des widgets - Adaptation d'un serveur MCP existant pour la prise en charge de l'affichage des widgets Copilot - Configuration de tunnels de développement pour l'exposition du serveur MCP local - ConfigurationmcpPlugin.jsConcernant les manifestes avec l'environnement d'exécution RemoteMCPServer : n'utilisez PAS cette compétence pour le développement général d'agents (génération, manifestes, déploiement) ; utilisez plutôt declarative-agent-developer. Cette compétence est UNIQUEMENT destinée au développement de serveurs MCP et de widgets. Déclencheurs : « Serveur MCP pour Copilot », « SDK OpenAI Apps », « Widget Copilot », « Contenu structuré », « Plugin MCP », « devtunnels MCP », « Application OAI », « Rendu de widget », « Widget d'interface utilisateur ».

Comment fonctionne le flux de travail en amont

Démarrage rapide

Terminal1- Démarrer le serveur MCP : Terminal2- Démarrer DevTunnel : lors de la première exécution, provisionnez l’agent une fois le tunnel établi (voir la règle de provisionnement de l’agent). Lors des exécutions suivantes, l’URL du tunnel est stable ; aucun nouveau provisionnement n’est nécessaire, sauf si le manifeste de l’agent est modifié.

passage en amont · L384 ↗

Flux de travail de développement

Démarrer le serveur MCP (mode développement avec rechargement à chaud) : TypeScript :cd mcp-server && npm install && npm run devPython:cd mcp-server && pip install -r requirements.txt && python server.pyC# :cd mcp-server && dotnet run

passage en amont · L402 ↗

🚨 RÈGLES D'EXÉCUTION CRITIQUES 🚨

APPLICATION DE FLUENT UI (OBLIGATOIRE) : Les implémentations de widgets DOIVENT utiliser React et des composants Fluent UI. Avant d’écrire du code pour un widget, l’agent DOIT lire et respecter les consignes suivantes :references/best-practices.mdEXIGENCE RELATIVE AU PACKAGE FLUENT UI (OBLIGATOIRE) : Le projet de widget DOIT inclure les dépendances Fluent UI avant son implémentation. Installez et conservez au minimum les éléments suivants dans les dépendances du package du widget : Si l’un de ces packages est manquant, installez-le automatiquement avant de poursuivre la génération du code du widget. Si le widget généré n’inclut pas les fichiers d’entrée React (par exemple,widgets/src//main.tsxet un fichier de composant React) et des importations Fluent depuis@fluentui/react-componentsLa tâche est incomplète et DOIT être corrigée avant le retour des résultats.

passage en amont · L95 ↗
passage en amont · bash ↗
export ATK_CLI_SKILL=true

Configuration requise

Configuration de DevTunnels

> Tests locaux uniquement. Les tunnels de développement sont destinés au développement et aux tests sur votre machine. Avant de diffuser l'agent plus largement, déployez le serveur MCP et les ressources du widget dans un environnement hébergé (par exemple, Azure App Service, Azure Static Web Apps ou un autre fournisseur d'hébergement) et mettez à jour les URL du manifeste de l'agent en conséquence. Les tunnels de développement exposent votre serveur MCP local à M365Copilot utilise des tunnels nommés pour les URL stables. Voirreferences/devtunnels.mdpour les scripts d'installation, la référence des commandes et le dépannage.

passage en amont · L372 ↗

Limites et contrôles de qualité

Aucun passage de limite distinct n'a été sélectionné dans ce fichier. Cela ne signifie pas que la compétence est sûre pour toutes les entrées ou tous les environnements. Consultez le code source complet et validez vos résultats.

Commencez par un essai sans danger

  1. Vérifiez l'hôte pris en charge et les instructions d'installation du dépôt. Conservez le répertoire Skill ainsi que ses scripts, ressources et documentation référencés ;SKILL.mdSeul, il peut omettre les dépendances.
  2. Indiquez à l'agent vos paramètres d'entrée réels, le résultat souhaité et les critères d'acceptation. La syntaxe d'appel et les outils disponibles dépendent du système hôte ; ce site ne propose pas de commande d'installation universelle.
  3. Testez le flux de travail source dans un projet temporaire ou sur une copie. Avant d'autoriser les opérations qui modifient des fichiers, des services distants ou des ressources facturables, examinez-les attentivement.
  4. Vérifiez la conformité du résultat avec les contrôles qualité sources et vos propres exigences. Un déclenchement réussi ou un nombre élevé d'étoiles dans le dépôt ne garantissent pas un résultat correct.

Spécifications du format et du répertoire des compétences ↗

Pour en savoir plus, consultez la source.

Traduction et étendue

Ce guide de lecture sélectionne des passages de l'amont épingléSKILL.mdCette traduction est assistée. Elle ne constitue pas un manuel complet et ne garantit pas une compatibilité testée. Veuillez lire le document original et les fichiers auxquels il fait référence avant utilisation.

Cette introduction fait référence à la version épinglée ci-dessous ; l’activité actuelle du dépôt et la durée de la collecte sont indiquées séparément.

Source épinglée
Lire l'original ↗
Source récupérée
Commit source
00d66a64919edca5bca2c673373444e36a4b5461
Source SHA-256
b24d0babae9e85054d30765abca0043a2c310ba7dc980d1da258c39b87f8cd12
Retour au catalogue complet des compétences