Les Copilot UX components transforment une réponse conversationnelle en interface interactive : formulaire, graphique, approbation ou tableau de bord s’affichent directement dans Microsoft 365 Copilot. Avec l’exemple RH Zava, vous allez tester ce modèle localement, déployer son package SPFx et vérifier le routage d’une demande de congé.
Prérequis
Depuis le 28 octobre 2026, les Copilot UX components sont en disponibilité générale avec SharePoint Framework 1.24. Cette appellation remplace les noms de travail SharePoint Copilot Apps et Copilot Components employés pendant la préversion.
Un composant accompagne un agent déclaratif dans une même solution SPFx. Il implémente le modèle MCP Apps, mais Microsoft l’héberge et l’enregistre automatiquement dans le tenant : aucun point de terminaison MCP externe ni hébergement Azure n’est nécessaire pour exécuter l’interface elle-même.
Avant de télécharger l’exemple Zava
- Un tenant Microsoft 365 avec un catalogue d’applications SharePoint opérationnel
- Un compte autorisé par votre organisation à charger et déployer des packages dans ce catalogue
- Une licence complémentaire Microsoft Copilot pour chaque utilisateur qui doit afficher le composant en disponibilité générale
- Microsoft 365 Copilot dans le navigateur ou sur le poste de travail, y compris son accès depuis Teams
- Node.js 24 ou 26 et npm pour créer ou migrer une solution basée sur SPFx 1.24
- SharePoint Framework 1.24 pour toute nouvelle version destinée à la production
- Le code ou le package disponible sur la page Zava Employee Agent de la galerie PnP
- Aucun module PowerShell requis pour le test local présenté dans ce guide
L’exemple Zava a été publié pour la préversion avec SPFx 1.24.0-beta.2 et React 17. Les nouvelles solutions SPFx 1.24 utilisent React 18 par défaut : ne considérez donc pas cet exemple comme un package de production final sans contrôler ses dépendances et son manifeste.
Déployer et tester l’agent RH Zava
Le scénario contient 20 composants RH routés selon l’intention détectée. Les données sont simulées : le résultat fonctionnel attendu est une interface interactive dans Copilot, pas la création d’une demande dans votre système de gestion des ressources humaines.
Téléchargez l’exemple Zava
Ouvrez la page Zava Employee Agent – exemple PnP, puis récupérez le code source ou le package précompilé proposé par le projet. Décompressez le code dans un dossier de travail si vous souhaitez commencer par le banc d’essai local.
Vous devez obtenir un projet contenant un fichier package.json. Pour le déploiement dans Microsoft 365, vérifiez également que le téléchargement comprend un fichier portant l’extension .sppkg.
Contrôlez l’environnement Node.js
Ouvrez un terminal dans le dossier du projet et affichez les versions installées :
1node --version2npm --versionPour une solution finalisée avec SPFx 1.24, utilisez Node.js 24 ou 26. Si le fichier package.json de l’exemple de préversion impose une autre plage, ne changez pas ses dépendances au hasard : exécutez d’abord le banc d’essai avec l’environnement déclaré par le projet, puis planifiez sa migration.
Lancez le banc d’essai local
Installez les dépendances et démarrez le mode de revue dédié aux composants Copilot :
1npm install2npm run start:ux-reviewLa commande npm run start:ux-review fonctionne sans tenant. Vous devez voir le banc d’essai local et pouvoir parcourir les composants RH ; si le processus s’arrête avant son ouverture, consultez la section de dépannage.
Examinez les composants avant le déploiement
Testez au minimum le formulaire de congé, le calendrier d’absence, les demandes d’approbation et la vue RH étendue. Vérifiez que les champs, boutons et états s’affichent correctement dans la taille disponible.
Cette étape permet de distinguer un défaut du composant d’un problème de licence ou de publication dans Microsoft 365 Copilot. Les valeurs affichées restent fictives, même lorsque les boutons semblent exécuter une approbation.
Chargez le package dans le catalogue d’applications
Accédez à Centre d’administration SharePoint > Plus de fonctionnalités > Applications > Ouvrir > Distribuer des applications pour SharePoint. Chargez le fichier .sppkg fourni ou généré après votre migration.
Une boîte de dialogue de déploiement doit s’ouvrir et présenter les informations de la solution. Si SharePoint refuse immédiatement le package, ne forcez pas son installation : contrôlez sa version SPFx et la validité du manifeste de l’agent déclaratif.
Le déploiement concerne le tenant ciblé
Confirmez le déploiement de la solution
Sélectionnez l’action de déploiement proposée par le catalogue, puis attendez la fin du traitement. L’agent déclaratif et ses composants sont livrés ensemble dans cette solution SPFx.
La solution doit apparaître dans le catalogue sans erreur de déploiement. L’exemple n’exige pas d’autorisation supplémentaire pour accéder à un véritable système RH, puisqu’il utilise uniquement des données simulées.
Ouvrez l’agent dans Microsoft 365 Copilot
Accédez à Microsoft 365 Copilot > volet Agents > Zava Employee Agent, puis sélectionnez l’agent RH. Selon la politique de distribution de votre organisation, il peut être nécessaire de le rechercher avant de l’épingler dans le volet latéral.
Vous devez voir l’agent dans Microsoft 365 Copilot sur le Web ou le client de bureau. S’il n’apparaît pas, vérifiez d’abord la licence Microsoft Copilot de l’utilisateur et l’état du package dans le catalogue.
Demandez un congé en langage naturel
Saisissez une demande explicite, par exemple :
1Je souhaite poser des congés du 4 au 12 août pour un voyage en famille dans les Alpes.Copilot doit reconnaître l’intention, sélectionner le composant correspondant et remplir le type de demande, les dates et le motif à partir du texte. Vous devez pouvoir examiner le formulaire et utiliser ses actions sans quitter la conversation.
Ouvrez la vue RH étendue
Depuis le composant ou l’agent, ouvrez le mode offrant davantage de contexte. Cette interface React peut regrouper les congés, avantages, données de rémunération fictives, formations et actions RH dans un même canevas.
Vous devez obtenir une application interactive et redimensionnable dans Microsoft 365 Copilot, et non une page SharePoint ou une simple carte HTML statique.
Vérifier le résultat
Une installation réussie doit valider séparément la distribution de l’agent, le routage par intention et le rendu du composant. Utilisez plusieurs formulations : Copilot ne doit pas dépendre d’une phrase saisie mot pour mot.
| Contrôle | Résultat attendu | Échec probable |
|---|---|---|
| Découverte de l’agent | Zava est visible dans le volet Agents | Licence ou déploiement à contrôler |
| Demande de congé | Formulaire prérempli avec dates et motif | Intention non reconnue ou composant absent |
| Calendrier d’équipe | Vue adaptée à la période demandée | Propriétés temporelles mal transmises |
| Action interactive | Boutons utilisables dans le canevas | Erreur JavaScript ou état du composant |
| Vue RH étendue | Interface complète rendue dans Copilot | Composant étendu non enregistré |
| Écriture dans un SIRH | Non inclus dans cet exemple | Comportement normal avec les données simulées |
Le critère principal n’est pas la beauté du formulaire, mais la continuité du parcours : l’utilisateur exprime une intention, Copilot transmet les propriétés utiles, puis le composant permet d’agir sans ouvrir une autre application. Ce modèle complète les possibilités décrites dans notre présentation des MCP Apps dans Microsoft 365 Copilot.
Mise en œuvre
Le script suivant automatise le contrôle et le lancement du banc d’essai local. Il est utile avant de réutiliser le même package pour plusieurs tenants, car il détecte immédiatement un dossier incorrect, l’absence de Node.js ou la disparition du script start:ux-review.
Prérequis : aucun module PowerShell ; Node.js et npm doivent être installés. La commande npm install installe les dépendances déclarées par le projet. Aucun rôle Microsoft 365 ni scope Graph n’est requis, car le script ne se connecte à aucun tenant. Il affiche les versions détectées, puis lance le banc d’essai lorsque $DryRun vaut $false.
1param(2 [Parameter(Mandatory = $true)]3 [string]$SourcePath,4 5 [bool]$DryRun = $true6)7 8Set-StrictMode -Version Latest9$ErrorActionPreference = 'Stop'10 11# Vérifie que le dossier et le manifeste npm du projet existent.12$projectPath = (Resolve-Path -Path $SourcePath).Path13$packageJsonPath = Join-Path -Path $projectPath -ChildPath 'package.json'14 15if (-not (Test-Path -Path $packageJsonPath -PathType Leaf)) {16 throw 'Le dossier ne contient pas de fichier package.json.'17}18 19# Vérifie la présence des exécutables nécessaires sans modifier le poste.20if (-not (Get-Command node -ErrorAction SilentlyContinue)) {21 throw 'Node.js est introuvable dans la variable PATH.'22}23 24if (-not (Get-Command npm -ErrorAction SilentlyContinue)) {25 throw 'npm est introuvable dans la variable PATH.'26}27 28$nodeVersion = & node --version29$npmVersion = & npm --version30$packageJson = Get-Content -Path $packageJsonPath -Raw | ConvertFrom-Json31$reviewCommand = $packageJson.scripts.'start:ux-review'32 33if ([string]::IsNullOrWhiteSpace([string]$reviewCommand)) {34 throw 'Le script npm start:ux-review est absent du projet.'35}36 37Write-Host "Projet : $projectPath"38Write-Host "Node.js : $nodeVersion"39Write-Host "npm : $npmVersion"40Write-Host "Commande de revue : $reviewCommand"41 42if ($DryRun) {43 Write-Host 'Simulation terminée. Relancez avec -DryRun $false pour installer et démarrer.'44 return45}46 47Push-Location -Path $projectPath48try {49 # Installe les dépendances déclarées par le projet.50 & npm install51 if ($LASTEXITCODE -ne 0) {52 throw 'Échec de npm install.'53 }54 55 # Démarre le banc de revue local des Copilot UX components.56 & npm run 'start:ux-review'57 if ($LASTEXITCODE -ne 0) {58 throw 'Échec du banc de revue local.'59 }60}61finally {62 Pop-Location63}Exécutez d’abord le mode simulation, puis autorisez le lancement :
1./Test-ZavaUx.ps1 -SourcePath '/chemin/vers/zava' -DryRun $true2./Test-ZavaUx.ps1 -SourcePath '/chemin/vers/zava' -DryRun $falseLe déploiement dans chaque tenant reste volontairement séparé du test local. Cette séparation évite qu’un package de préversion ou insuffisamment contrôlé soit propagé automatiquement à plusieurs environnements.
Sécuriser la connexion à un véritable système RH
L’exemple Zava n’apporte ni modèle d’autorisation métier ni intégration prête à l’emploi avec un système d’information des ressources humaines. Pour passer en production, traitez le composant comme une interface cliente : une action visible ne doit jamais suffire à autoriser une opération sensible.
Appliquez au minimum les contrôles suivants :
- vérification de l’identité et des droits côté API, et pas seulement dans React ;
- séparation entre consultation, soumission et approbation ;
- validation serveur des dates, montants et identifiants reçus ;
- journalisation des opérations sensibles et des refus ;
- absence de données personnelles inutiles dans les propriétés transmises au composant ;
- test des états d’erreur, d’expiration de session et d’autorisation insuffisante.
Les Copilot UX components ne génèrent pas eux-mêmes de frais de consommation. En revanche, une API facturée à l’usage, comme Work IQ, peut ajouter des coûts : inventoriez les services appelés avant de généraliser le déploiement.
Questions fréquentes
Une licence Microsoft Copilot est-elle obligatoire ?
Oui, en disponibilité générale, l’utilisateur doit disposer d’une licence complémentaire Microsoft Copilot. Sans cette licence, le composant ne s’affiche pas et un message indique l’exigence correspondante.
React est-il obligatoire pour créer un Copilot UX component ?
Non. SPFx 1.24 propose les modèles Minimal, No framework et React, avec React 18 par défaut pour les nouvelles solutions React. Tout framework Web compatible peut servir à construire l’interface.
Faut-il héberger une application MCP dans Azure ?
Non pour ce modèle SPFx : Microsoft héberge et enregistre automatiquement le composant dans le tenant client. Une infrastructure distincte reste toutefois nécessaire si votre solution appelle un système métier ou une API que vous exploitez vous-même.
Dans quels clients le composant peut-il apparaître ?
La disponibilité générale couvre Microsoft 365 Copilot dans le navigateur et sur le poste de travail, y compris l’accès à Copilot depuis Teams. Les surfaces natives supplémentaires dans Teams, Word, Excel, PowerPoint et Outlook suivent une feuille de route distincte.
Déployer d’abord sur un tenant pilote
Ne commencez pas par connecter Zava à des données RH réelles. Utilisez l’exemple pour valider le rendu, choisissez deux ou trois intentions métier mesurables, puis remplacez progressivement les données simulées par une API protégée.
Avant le passage en production
- Migrer ou reconstruire l’exemple avec la version finale de SPFx 1.24
- Vérifier le manifeste v1.8 de l’agent déclaratif lors du build
- Tester les licences avec un utilisateur pilote représentatif
- Faire valider chaque action sensible par l’équipe sécurité ou conformité
- Prévoir un mécanisme de retour arrière pour le package SPFx
- Documenter les API à l’usage susceptibles de générer des coûts
Pour cadrer le projet au-delà de la démonstration, utilisez également notre modèle des quatre niveaux de maîtrise des agents Microsoft 365 Copilot.
En cas de problème
L’agent Zava n’apparaît pas dans Microsoft 365 Copilot
Contrôlez que la solution est bien déployée dans le catalogue du tenant où l’utilisateur est connecté. Vérifiez ensuite sa licence complémentaire Microsoft Copilot et testez dans un client pris en charge ; l’absence de licence empêche l’affichage du composant.
npm install ou le banc d’essai échoue
L’exemple PnP a été créé avec SPFx 1.24.0-beta.2 et React 17, tandis que SPFx 1.24 final s’appuie par défaut sur React 18 et prend en charge Node.js 24 et 26. Consultez la plage Node déclarée dans package.json, restaurez les dépendances attendues par l’exemple ou migrez le projet vers la version finale avant de le reconstruire.
Les boutons fonctionnent, mais aucune donnée RH ne change
C’est le comportement attendu de l’exemple : ses données sont simulées et aucune connexion à un système RH n’est configurée. Il faut développer une API métier, son authentification et ses contrôles d’autorisation avant qu’une soumission ou une approbation ait un effet réel.
Pour aller plus loin
- Annonce de disponibilité générale des Copilot UX components — licences, clients pris en charge et architecture de distribution.
- Notes de version SharePoint Framework 1.24 — versions, manifestes, ressources de développement et dépannage.
- Zava Employee Agent dans la galerie PnP — code, package et banc d’essai local du scénario RH.
- Feuille de route SPFx de septembre 2026 — historique des noms et évolution des surfaces Copilot.
