Générer des widgets d’application MCP avec des outils de génération de code IA

[Cette rubrique fait partie de la documentation en version préliminaire et peut faire l’objet de modifications.]

Cet article explique comment utiliser des outils de génération de code IA tels que GitHub Copilot CLI ou Claude Code pour générer des applications MCP (Interactive Model Context Protocol) pour vos outils POWERP pilotés par modèle. Les applications MCP sont des fichiers HTML autonomes qui affichent visuellement la sortie JSON d’un outil sous forme de cartes, de graphiques, de tableaux de bord ou de cartes à l’intérieur d’un hôte compatible MCP Apps, y compris Microsoft 365 Copilot, Claude et Visual Studio Code.

Si vous disposez d’un outil MCP qui retourne des données JSON, la generate-mcp-app-ui compétence peut produire un widget à thème poli qui affiche ces données dans un format visuel compact directement à l’intérieur d’une conversation de conversation.

Important

  • Cette fonctionnalité est en version préliminaire.
  • Les fonctionnalités en version préliminaire ne sont pas destinées à une utilisation en production et peuvent être restreintes. Ces fonctionnalités sont disponibles avant une version officielle afin que les clients puissent obtenir un accès anticipé et fournir des commentaires.
  • La prise en charge des applications MCP dans Microsoft 365 Copilot Chat est généralement disponible à compter de mars 2026. La prise en charge des applications MCP dans les assistants déclaratifs par Power Apps est actuellement en version préliminaire publique. Pour obtenir l’annonce complète, consultez les applications MCP désormais disponibles dans Copilot Chat.

Ce que vous pouvez faire avec la compétence generate-mcp-app-ui

  • Créez des widgets visuels pour n’importe quel outil MCP en décrivant ce que vous souhaitez et collez la sortie JSON de l’outil.
  • Choisissez le visuel approprié pour vos données, tels que les graphiques pour les tendances numériques, les cartes pour les enregistrements structurés, les tables pour les comparaisons, les mappages pour les coordonnées, etc.
  • Prise en charge automatique des thèmes clairs et sombres par le biais de jetons de conception Fluent UI.
  • Ajoutez une interactivité pour que les widgets puissent appeler à nouveau votre outil au moment de l’exécution (par exemple, un bouton d’actualisation).
  • Affinez l’expérience utilisateur de manière itérative en décrivant les changements en langage naturel. Par exemple, « rendre la galerie compacte », « ajouter un graphique » ou « utiliser une disposition de carte ».

Prerequisites

Configuration logicielle requise

Composant Version minimale Plus d’informations
GitHub Copilot CLI, Claude Code ou un autre outil de génération de code Latest Claude Code, GitHub Copilot CLI
Un navigateur moderne N’importe lequel Pour afficher un aperçu local des widgets générés

Autres conditions requises

  • Outil MCP qui retourne la sortie JSON. Le type de sortie de votre outil doit être défini sur JSON.
  • Connexion Internet opérationnelle. Les widgets chargent l’interface utilisateur Fluent et d’autres bibliothèques à partir du réseau de distribution de contenu (CDN) au moment de l’exécution.

Installer le plug-in

Exécutez la commande d’installation suivante à partir de GitHub Copilot CLI ou de Claude Code. Le programme d’installation détecte automatiquement les outils disponibles et installe tous les plug-ins Power Platform, notamment generate-mcp-app-ui.

/plugin marketplace add microsoft/power-platform-skills

Pour installer uniquement la fonctionnalité de widget de l'application MCP :

/plugin install mcp-apps@power-platform-skills

Conseil / Astuce

Activez la mise à jour automatique pour recevoir automatiquement les mises à jour des compétences. Utilisez la /plugin commande, accédez aux Marketplaces, choisissez la Place de marché et activez la mise à jour automatique.

Vue d’ensemble des compétences

Qualification Commande Description
Générateur de widgets MCP Apps /generate-mcp-app-ui Générer un widget d’application MCP autonome (fichier HTML) pour la sortie JSON d’un outil MCP

La compétence est également déclenchée par des expressions en langage naturel telles que « créer un widget », « créer un widget pour mon outil » ou « créer une application MCP ».

Générer un widget

Suivez ces étapes pour créer un widget pour un outil MCP.

  1. Créez et testez un outil personnalisé à partir de concepteurs d’applications basés sur des modèles et copiez la sortie JSON complète. Vérifiez que le type de sortie de l’outil est défini sur JSON. Plus d’informations : Créer des outils personnalisés

  2. Appelez la compétence et décrivez ce que vous souhaitez afficher, en collant la sortie JSON dans la conversation :

    /generate-mcp-app-ui Visualizes flights using an animated arc map for routes and a synchronized Gantt timeline for departure and arrival schedules, enabling quick understanding of flight coverage, timing, and overlaps. Here's an example of the tool's output: {"flight_records":[{"Departure Time":"2024-07-02T05:00:00Z","Arrival Time":"2024-07-02T07:30:00Z","Flight Name":"Zava 1001","Status":"Active","Airport":"Seattle-Tacoma","Airport1":"Los Angeles Intl"},{"Departure Time":"2024-07-02T03:00:00Z","Arrival Time":"2024-07-02T10:00:00Z","Flight Name":"Zava 103","Status":"Active","Airport":"Seattle-Tacoma","Airport1":"Hartsfield-Jackson"}]}

  3. Passez en revue le fichier HTML généré. La compétence écrit un fichier HTML autonome, par exemple, flight-map.htmldans votre répertoire de travail.

  4. Aperçu dans un navigateur. Ouvrez le fichier HTML localement, car le widget a une option de secours pour les tests. Vous pouvez demander à l’agent de conversation d’ajouter une préversion HTML autonome si elle est manquante.

  5. Itérer. Décrire les modifications directement dans la conversation :

    • « Rendre la carte plus grande »
    • « Ajouter des info-bulles sur le graphique »
    • Réduire la hauteur pour s’adapter à 250 pixels avec une disposition réactive et sans barres de défilement.

Note

La compétence nécessite un JSON réel à partir de votre outil, pas d’exemples ou de données fictifs. La forme de données pilote la génération du widget. Si vous collez des données fictives, le widget généré peut ne pas fonctionner correctement lors de la connexion à l’outil réel.

Déployer votre widget

Une fois que votre widget est prêt, copiez le fichier HTML vers l'entrée UX prévue pour l'outil concerné et il sera restitué comme la réponse de l'interface utilisateur de l'outil. Pour plus d’informations, reportez-vous à la documentation de création d’outils personnalisés .

Ajouter une interactivité avec callServerTool

Si vous fournissez également le nom de votre outil lors de l’appel de la compétence, le widget généré peut inclure l’intégration interactive des appels d’outils. Cela permet au widget d’appeler à nouveau votre outil au moment de l’exécution. Par exemple, un bouton d’actualisation dans l’interface utilisateur de l’outil peut s’invoquer lui-même.

/generate-mcp-app-ui Show the current weather conditions with a refresh button. Tool name: get_weather. Tool output: {"city":"Seattle","temp_f":54,"condition":"Overcast","humidity":78,"forecast":[...]}

La fonctionnalité intègre le app.callServerTool dans le widget afin que lorsque les utilisateurs sélectionnent Actualiser, le widget récupère les données mises à jour directement depuis votre outil. Si vous ne fournissez pas de nom d’outil, le widget est en lecture seule et affiche uniquement les données fournies via le ontoolresult rappel.

  • Chat Microsoft 365 Copilot : consultez les applications MCP dans Copilot Chat pour explorer les chemins de déploiement, notamment le chargement latéral pour les tests, le déploiement via le centre d'administration Microsoft 365 pour une utilisation organisationnelle et la publication dans le magasin d'agents Microsoft 365.
  • Agents déclaratifs Power Apps : consultez la documentation de l’agent déclaratif Power Apps MCP pour savoir comment connecter des outils MCP avec des applications basées sur des modèles.
  • Autres hôtes MCP : consultez la documentation de votre hôte pour connaître le processus d’inscription du widget d’applications MCP.

Détails techniques du widget

Protocole d’applications MCP

Les widgets communiquent avec l’hôte de conversation à l’aide de la App classe à partir du @modelcontextprotocol/ext-apps package. Le protocole gère ces rappels et méthodes.

Rappel/méthode Description
app.ontoolresult Se déclenche lorsque l’hôte fournit des données d’outil. Vos données sont toujours à l’adresse result.structuredContent— pas result.data ou result lui-même.
app.onhostcontextchanged Se déclenche lorsque le contexte de l’hôte change, y compris le thème (ctx.theme est 'light' ou 'dark').
app.onteardown Se déclenche lorsque le widget est supprimé de la conversation.
app.connect() Établit la communication avec l’hôte. Tous les gestionnaires d’événements doivent être inscrits avant d’appeler connect().
app.getHostContext() Retourne le contexte hôte actuel (y compris le thème initial) une fois connect() terminé.
app.callServerTool({ name, arguments }) Appelle un outil de manière interactive. Renvoie result.isError et result.structuredContent.

Importations de CDN

Les widgets chargent toutes les dépendances à partir du CDN. Aucune étape de génération ou installation locale n’est requise. Les dépendances existent en deux formats :

  • Modules ECMAScript (ESM) : importés à l’intérieur à l’aide <script type="module"> d’une URL se terminant par /+esm

  • Universal Module Definition (UMD) : chargé via une balise simple <script src> ; s’inscrit globalement en tant qu’effet secondaire

    Bibliothèque Formats URL Objectif
    @modelcontextprotocol/ext-apps ESM cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm Classe d’applications MCP App
    @fluentui/tokens ESM cdn.jsdelivr.net/npm/@fluentui/tokens/+esm Jeux de jetons webLightTheme / webDarkTheme
    @fluentui/web-components@beta UMD unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js Éléments personnalisés Fluent UI

États visuels

Chaque widget gère trois états :

État Conseils
Chargement en cours Afficher un message contextuel <fluent-spinner> (« Recherche d’attractions... », et pas seulement « Chargement... »).
Chargé Affichez le contenu de manière compacte. Utilisez la largeur disponible complète.
Erreur Affichez un message convivial et un bouton « Réessayer ». Si le widget utilise callServerTool, le bouton appelle à nouveau l’outil.

Composants Fluent UI

Les composants web Fluent UI suivants sont disponibles dans les widgets :

<fluent-card>, <fluent-button>, <fluent-text-input>, <fluent-textarea>, <fluent-dropdown>, <fluent-listbox>, <fluent-option>, <fluent-checkbox>, <fluent-spinner>, <fluent-divider>, <fluent-badge>, <fluent-switch>, <fluent-tooltip>

Prise en charge du thème

Les widgets prennent en charge les thèmes clairs et sombres par le biais de jetons de conception Fluent UI. Le widget applique les valeurs de jeton correctes lorsque le thème de l’hôte change via onhostcontextchanged. Utilisez toujours des variables de jeton, par exemple, var(--colorNeutralForeground1)plutôt que des valeurs de couleur codées en dur pour garantir un rendu correct dans les deux thèmes.

Jetons de couleur

Utiliser Jeton
Texte principal var(--colorNeutralForeground1)
Texte secondaire var(--colorNeutralForeground2)
Arrière-plan principal var(--colorNeutralBackground1)
Arrière-plan de la carte (au survol) var(--colorNeutralBackground2)
Marque/couleurs d’accent var(--colorBrandBackground)
Texte sur la surface de marque var(--colorNeutralForegroundOnBrand)
Bordures var(--colorNeutralStroke1)
Texte d’erreur var(--colorStatusDangerForeground1)
Texte de réussite var(--colorStatusSuccessForeground1)

N’utilisez jamais de valeurs hexidecimal ou RVB codées en dur. N’inventez pas de noms de jetons non répertoriés ici.

Meilleures pratiques

  • Fournissez des données de test réelles. La compétence analyse la structure JSON réelle pour sélectionner le visuel approprié. Les données fictives produisent des widgets qui s’arrêtent lorsqu’ils sont connectés à l’outil réel.
  • Soyez précis concernant le visuel. Décrivez le format souhaité, tel que la carte, le graphique, la table ou la disposition de carte. Les descriptions vagues mènent à des résultats génériques.
  • Commencez par une vue. Les widgets sont des cartes de conversation compactes, pas des applications complètes. Aucun onglet, navigation sur la page ou barre de recherche qui dupliquent le champ de saisie.
  • Testez avec les deux thèmes. Aperçu en mode clair et sombre pour vérifier le contraste et la lisibilité.
  • Mettre en correspondance le visuel aux données. Cartes pour les coordonnées, les graphiques pour les données numériques ou de tendance, les cartes pour les enregistrements structurés, les tables pour les comparaisons.

Limites

  • Les widgets doivent charger toutes les bibliothèques externes à partir du CDN. Une connexion Internet est requise au moment de l’exécution.
  • Le mode d’affichage plein écran nécessite une implémentation supplémentaire au-delà de ce que la compétence génère.
  • La compétence ne gère pas l’inscription ou le déploiement du serveur MCP dans le Centre d’administration Microsoft 365. Vous devez effectuer ces étapes séparément.
  • L’authentification (OAuth 2.1, Microsoft Entra SSO) est gérée par l’environnement hôte MCP, et non par le code HTML du widget lui-même.

Documentation du développeur Microsoft 365

Documentation de Power Platform

Références externes

  • Last updated on