Ajouter des applications MCP aux agents déclaratifs dans Microsoft 365 Copilot

Les applications MCP sont des widgets d’interface utilisateur interactifs qui s’exécutent dans Microsoft 365 Copilot, alimentés par des serveurs MCP (Model Context Protocol). Elles permettent aux agents déclaratifs d’aller au-delà des réponses textuelles et de fournir des expériences riches et exploitables directement dans la conversation Copilot. Vous pouvez ajouter des applications MCP à vos agents déclaratifs en ajoutant un plug-in basé sur un serveur MCP dont les outils retournent une interface utilisateur interactive. Microsoft 365 Copilot prend en charge les widgets d’interface utilisateur créés à l’aide des méthodes suivantes.

  • Applications MCP : extension de MCP qui permet aux serveurs MCP de fournir des interfaces utilisateur interactives aux hôtes.
  • SDK OpenAI Apps : outils pour créer des applications ChatGPT basées sur la norme MCP Apps avec des fonctionnalités ChatGPT supplémentaires.

Pour des exemples de plug-ins de serveur MCP, consultez les exemples d’interface utilisateur interactive basés sur MCP pour Microsoft 365 Copilot sur GitHub.

Pour plus d’informations sur les fonctionnalités MCP Apps ou OpenAI Apps SDK prises en charge, consultez Fonctionnalités MCP Apps prises en charge dans Copilot.

Capture d’écran d’une application MCP affichant un widget de tâches de sprint en ligne dans Microsoft 365 Copilot

Capture d’écran d’une application MCP affichant un widget Tâches de sprint en mode plein écran dans Microsoft 365 Copilot

Conditions préalables pour les applications MCP

Configuration requise du serveur MCP pour les applications MCP

  • Authentification : Copilot prend en charge OAuth 2.1 et l’authentification unique (SSO) Microsoft Entra. À des fins de développement, Copilot prend en charge l’authentification anonyme à l’aide de l’option Aucun dans Agents Toolkit. Pour plus d’informations sur l’authentification, consultez Configurer l’authentification pour les plug-ins d’API dans les agents.
  • URL autorisées : votre serveur MCP et votre fournisseur d’identité doivent autoriser les URL suivantes.
    • URL hôte du widget pour CORS : Copilot affiche l’interface utilisateur du widget sous un hôte spécifique au serveur MCP avec l’URL suivante : {hashed-mcp-domain}.widget-renderer.usercontent.microsoft.com, où {hashed-mcp-domain} se trouve le hachage SHA-256 du domaine de votre serveur MCP. Vous pouvez utiliser le générateur d’URL hôte de widget pour générer l’URL hôte en fonction de l’URL de votre serveur MCP.
    • URI de redirection OAuth 2.1 :
      • https://teams.microsoft.com/api/platform/v1.0/oAuthRedirect pour Copilot
      • https://vscode.dev/redirectpour que Visual Studio Code récupère des outils à l’aide d’Agents Toolkit
    • URI de redirection SSO de Microsoft Entra :
      • https://teams.microsoft.com/api/platform/v1.0/oAuthConsentRedirect pour Copilot
      • Visual Studio Code ne prend actuellement pas en charge l’authentification unique pour les outils de récupération
  • Widgets d’interface utilisateur - Implémentez des widgets d’interface utilisateur conformément aux exigences du SDK MCP Apps ou OpenAI Apps.

Meilleures pratiques pour les applications MCP dans Copilot

Conception de l’expérience utilisateur

Pour plus d’informations sur les meilleures pratiques en matière de conception d’expérience utilisateur, consultez Recommandations relatives à l’expérience utilisateur pour les applications MCP dans les agents déclaratifs pour Microsoft 365 Copilot.

Vérifier la disponibilité de l’API

Toutes les window.openai.* API ne sont pas disponibles sur toutes les plateformes ou tous les hébergeurs. Les API non prises en charge sont undefined. Vérifiez toujours la disponibilité de l’API dans une case activée et fournissez une solution de secours si l’API n’est pas disponible.

Exemples

Ce modèle simple évite les erreurs d’exécution en vérifiant avant d’appeler l’API.

if (window.openai.callTool) {
  const result = await window.openai.callTool({ name: 'myTool', params: {} });
} else {
  // Handle unsupported case — show fallback UI, skip the feature, etc.
}

Dans cet exemple, un bouton permettant d’entrer en mode plein écran n’est rendu que si l’hôte prend en charge l’API requestDisplayMode .

function FullScreenButton() {
  // Don't render the button if the host doesn't support it
  if (!window.openai.requestDisplayMode) {
    return null;
  }

  return (
    <button onClick={() => window.openai.requestDisplayMode({ mode: 'fullscreen' })}>
      Enter Fullscreen
    </button>
  );
}

Votre widget peut également case activée la disponibilité de toutes les API qu’il utilise au démarrage et activer ou désactiver des fonctionnalités en conséquence.

interface PlatformCapabilities {
  canCallTools: boolean;
  canChangeDisplayMode: boolean;
  canSendMessages: boolean;
}

function detectCapabilities(): PlatformCapabilities {
  return {
    canCallTools: !!window.openai.callTool,
    canChangeDisplayMode: !!window.openai.requestDisplayMode,
    canSendMessages: !!window.openai.sendMessage,
  };
}

// Use at widget startup
const capabilities = detectCapabilities();

if (!capabilities.canCallTools) {
  // Show a reduced-functionality experience
}

Créer et charger une version test de l’agent

La création d’un agent déclaratif à partir d’un serveur MCP, la configuration de l’authentification et son chargement indépendant sont identiques, que le serveur renvoie ou non des widgets d’interface utilisateur. Pour la procédure pas à pas complète, consultez Créer un plug-in pour un agent déclaratif à partir d’un serveur MCP.

Gardez à l’esprit les considérations suivantes relatives aux applications MCP lorsque vous suivez cette procédure pas à pas :

  • Votre serveur MCP doit retourner les widgets d’interface utilisateur conformément aux exigences du SDK MCP Apps ou OpenAI Apps. Consultez Configuration requise du serveur MCP pour les applications MCP.
  • Par défaut, l’agent utilise la découverte d’outils dynamique et résout les outils de votre serveur, y compris les outils qui renvoient des widgets d’interface utilisateur, au moment de l’exécution, de sorte que vous n’avez pas besoin d’ajouter des outils manuellement. Si vous épinglez un ensemble fixe d’outils à la place, veillez à inclure au moins un outil qui renvoie un widget d’interface utilisateur.
  • Si votre serveur MCP est encore en cours de développement et n’implémente pas l’authentification, sélectionnez Aucun comme type d’authentification. Ajoutez une authentification avant de déployer en production.

Tester l’agent

  1. Ouvrez votre navigateur, puis accédez à https://m365.cloud.microsoft/chat.
  2. Sélectionnez votre agent dans la barre latérale gauche. Si vous ne voyez pas votre agent, sélectionnez Tous les agents.
  3. Demandez à l’agent de faire quelque chose qui appelle votre serveur MCP.
  4. Autorisez l’agent à se connecter au serveur MCP lorsque vous y êtes invité.
  5. Vérifiez que l’agent restitue le widget d’interface utilisateur.

Si le widget n’apparaît pas ou ne se comporte pas comme prévu, consultez Résoudre les problèmes liés aux applications MCP dans Microsoft 365 Copilot.

Fonctionnalités d’applications MCP prises en charge dans Copilot

Microsoft 365 Copilot prend en charge les fonctionnalités suivantes.

Pont de composant

SDK Applications OpenAI Équivalent d’applications MCP Pris en charge ?
window.openai.toolInput app.ontoolinput ✅
window.openai.toolOutput app.ontoolresult ✅
window.openai.toolResponseMetadata app.ontoolresult → params._meta ✅
window.openai.widgetState — ✅
window.openai.setWidgetState(state) Pas directement disponible. Utilisez d’autres mécanismes, notamment app.updateModelContext() ✅
window.openai.callTool(name, args) app.callServerTool({ name, arguments }) ✅
window.openai.sendFollowUpMessage({ prompt }) app.sendMessage({ ... }) ✅
window.openai.uploadFile(file) — ❌
window.openai.getFileDownloadUrl({ fileId }) — ❌
window.openai.requestDisplayMode(...) app.requestDisplayMode({ mode }) ✅ (Plein écran uniquement)
window.openai.requestModal(...) — ❌
window.openai.notifyIntrinsicHeight(...) app.sendSizeChanged({ width, height }) ✅
window.openai.openExternal({ href }) app.openLink({ url }) ✅
window.openai.setOpenInAppUrl({ href }) — ✅
window.openai.theme app.getHostContext()?.theme ✅
window.openai.displayMode app.getHostContext()?.displayMode ✅
window.openai.maxHeight app.getHostContext()?.viewport?.maxHeight ✅
window.openai.safeArea app.getHostContext()?.safeAreaInsets ✅
window.openai.view — ✅
window.openai.userAgent app.getHostContext()?.userAgent ✅
window.openai.locale app.getHostContext()?.locale ✅
— app.ontoolinputpartial ❌
— app.ontoolcancelled ❌
— app.getHostContext()?.availableDisplayModes ❌
— app.getHostContext()?.toolInfo ❌
— app.onhostcontextchanged ❌
— app.onteardown ❌
— app.sendLog({ level, data }) ❌
— app.getHostVersion() ❌
— app.getHostCapabilities() ✅

Champs _meta descripteur d’outil

SDK Applications OpenAI Équivalent d’applications MCP Pris en charge ?
_meta["openai/outputTemplate"] _meta.ui.resourceUri ✅
_meta["openai/widgetAccessible"] _meta.ui.visibility (string[]) ❌
_meta["openai/visibility"] _meta.ui.visibility (string[]) ✅
_meta["openai/toolInvocation/invoking"] — ❌
_meta["openai/toolInvocation/invoked"] — ❌
_meta["openai/fileParams"] — ❌
_meta["securitySchemes"] — ❌

Annotations du descripteur d’outil

SDK Applications OpenAI Équivalent d’applications MCP Pris en charge ?
readOnlyHint readOnlyHint ✅
destructiveHint destructiveHint ❌
openWorldHint openWorldHint ❌
idempotentHint idempotentHint ❌

Champs _meta des ressources de composant

SDK Applications OpenAI Équivalent d’applications MCP Pris en charge ?
_meta["openai/widgetDescription"] — ❌
_meta["openai/widgetPrefersBorder"] _meta.ui.prefersBorder ❌
_meta["openai/widgetCSP"] _meta.ui.csp ✅
_meta["openai/widgetDomain"] _meta.ui.domain ❌
— _meta.ui.permissions ❌

Propriétés dans l’objet CSP

SDK Applications OpenAI Équivalent d’applications MCP Pris en charge ?
connect_domains connectDomains ✅
resource_domains resourceDomains ✅
frame_domains frameDomains ❌
redirect_domains — ❌
— baseUriDomains ❌

Champs de _meta de résultats de l’outil fourni par l’hôte

SDK Applications OpenAI Équivalent d’applications MCP Pris en charge ?
_meta["openai/widgetSessionId"] — ❌

Champs _meta fournis par le client

SDK Applications OpenAI Équivalent d’applications MCP Pris en charge ?
_meta["openai/locale"] _meta["openai/locale"] ✅
_meta["openai/userAgent"] _meta["openai/userAgent"] ✅
_meta["openai/userLocation"] _meta["openai/userLocation"] ✅
_meta["openai/subject"] — ❌

Forum aux questions sur les applications MCP dans Copilot

Que sont les applications MCP ?

Les applications MCP sont des widgets d’interface utilisateur interactifs fournis par des serveurs MCP qui s’affichent directement dans Microsoft 365 Copilot. Ils étendent les agents déclaratifs au-delà des réponses textuelles uniquement, permettant des expériences riches telles que des visualisations de données, des formulaires et des interfaces de gestion des tâches.

Quelle est la différence entre MCP Apps et OpenAI Apps SDK ?

Applications MCP est une extension ouverte de la norme MCP qui permet aux serveurs MCP de fournir des interfaces utilisateur interactives à n’importe quel hôte compatible. Le SDK OpenAI Apps s’appuie sur la norme MCP Apps et ajoute des fonctionnalités supplémentaires spécifiques à ChatGPT. Microsoft 365 Copilot prend en charge les deux, bien que toutes les fonctionnalités ne soient pas disponibles. Pour plus d’informations, consultez Fonctionnalités d’applications MCP prises en charge dans Copilot .

Puis-je utiliser des applications MCP sans authentification pendant le développement ?

Oui. L’authentification anonyme est prise en charge à des fins de développement. Toutefois, vous devez ajouter l’authentification avant d’effectuer le déploiement en production. OAuth 2.1 et Microsoft Entra authentification unique (SSO) sont les méthodes d’authentification prises en charge. Pour plus d’informations, consultez Configurer l’authentification pour les plug-ins d’API dans les agents.

Contenu connexe

  • Last updated on