DocumentationAEMTutoriels d’AEM as a Cloud Service

Créer du contenu de test sans quitter votre IDE

Dernière mise à jour : 11 septembre 2026
  • S'applique à :
  • Experience Manager as a Cloud Service

Créé pour :

  • Beginner
  • Leader
  • User
  • Developer

Utilisez le serveur AEM MCP à partir d’un IDE optimisé par l’IA tel que Cursor IDE pour utiliser des pages AEM, des fragments de contenu et des ressources en langage naturel, sans code d’API de bas niveau ni navigation dans l’interface utilisateur.

Dans ce tutoriel, vous examiner les détails du fragment de contenu Adventure, mettre à jour un fragment (par exemple, le prix d’une Adventure) et vérifier la modification dans l’application React WKND Adventures le tout à partir de votre IDE par rapport à un environnement AEM inférieur (RDE ou développement) sans quitter le flux MCP.

https://video.tv.adobe.com/v/3480897/?captions=fre_fr&learn=on&enablevpops
https://video.tv.adobe.com/vc/3480897/fre_fr.json

Ajouter le serveur AEM MCP

Ce tutoriel utilise Cursor IDE comme exemple d’IDE agentic. Le même enregistrement de serveur MCP AEM fonctionne dans tout IDE ou application de chat compatible MCP. Connectez votre IDE au serveur MCP AEM et exécutez le scénario ci-dessous.

Voici comment le configurer dans le curseur :

  1. Ouvrez Cursor sur votre ordinateur.

  2. Accédez à Paramètres > Paramètres du curseur à partir du menu Curseur pour ouvrir la fenêtre des paramètres.
    Paramètres du curseur

  3. Dans la barre latérale gauche, cliquez sur Outils et MCP pour ouvrir ce panneau.
    ​ Outils et MCP ​

  4. Cliquez sur Ajouter un MCP personnalisé ou Nouveau serveur MCP pour ouvrir le mcp.json, puis collez cette configuration :

    code language-json 
    {
    "mcpServers": {
        "AEM": {
            "url": "https://mcp.adobeaemcloud.com/adobe/mcp/aem"
        }
    }
}
    note
    NOTE
    L’accès par le biais du serveur MCP AEM suit les autorisations de votre utilisateur AEM connecté : vous ne pouvez faire que ce que vous êtes déjà autorisé à faire dans AEM. Si votre entreprise a besoin d’une définition de la portée plus étroite au niveau de l’organisation (par exemple, en se limitant à la lecture seule), contactez Adobe à l’adresse aemcs-mcp-feedback@adobe.com.

    Ajouter un serveur MCP AEM

  5. Dans la fenêtre Paramètres du curseur , cliquez sur Connexion pour lancer le processus d’authentification. Il utilise le flux PKCE OAuth 2.0 pour obtenir le jeton d’accès spécifique à l’utilisateur pour accéder au serveur MCP AEM.
    Connexion au serveur AEM MCP

  6. Connectez-vous avec votre Adobe ID, puis revenez à la fenêtre Paramètres du curseur .
    Connexion avec Adobe ID

  7. Vérifiez que ​​s’affiche comme étant connecté. Vous pouvez développer le serveur pour afficher ses outils.

    Serveur AEM MCP

Installer l’exemple d’application web AEM

Ensuite, configurez l’application React WKND Adventures dans votre IDE.

  1. Clonez ces deux référentiels sur votre ordinateur :

    code language-bash 
    ## WKND GraphQL repo, the `react-app` folder is the WKND Adventures app
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

## WKND Site repo, you deploy this to RDE so the app can use its content fragments data via GraphQL
$ git clone git@github.com:adobe/aem-guides-wknd.git

  2. Déployez le projet WKND Site sur votre RDE. Pour obtenir des instructions détaillées, voir Utilisation de l’environnement de développement rapide.

  3. Ouvrez le dossier react-app dans votre IDE.

  4. Modifiez le .env.development et définissez :

    • REACT_APP_HOST_URI : votre URL d’auteur RDE
    • REACT_APP_AUTH_METHOD : à basic
    • REACT_APP_BASIC_AUTH_USER et REACT_APP_AEM_AUTH_PASSWORD : à aem-headless (créez cet utilisateur dans le RDE et ajoutez-le au groupe administrators)

  5. À partir du terminal IDE, exécutez :

    code language-bash 
    $ cd aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

  6. Dans votre navigateur, accédez à 🔗 pour afficher l’application WKND Adventures.

    Application React - WKND Adventures

Vérifier et mettre à jour le contenu

Supposons que vous deviez afficher une bannière HOT DEAL sur les cartes Adventure lorsqu’une règle simple est remplie. L’approche habituelle serait la suivante :

  • Examinez le code du composant Cartes d’Adventure .
  • Ajoutez la logique pour savoir quand afficher la bannière
  • Vérifier le modèle de fragment de contenu Adventure dans AEM
  • Modifier une ou plusieurs propriétés de fragment d’Adventure pour tester la règle

Pour garder les choses simples, affichons la bannière HOT DEAL lorsque le prix de l’aventure est inférieur à 100 $.

Comme l’application React récupère ses données de votre environnement RDE, vous devez connaître le modèle de fragment de contenu Adventure, puis mettre à jour les propriétés de fragment appropriées. C’est exactement ce à quoi le serveur AEM MCP peut répondre. Voici comment procéder.

  1. Dans la conversation de votre IDE, saisissez :

    code language-text 
    I want to review my Content Fragment Models from AEM RDE, can you list the Adventure Content Fragment details.

    Vérifier les modèles de fragment de contenu

    Avant d’appeler le serveur MCP AEM, il demande confirmation pour continuer. Vous gardez ainsi le contrôle des opérations de contenu.

    L’IA utilise le serveur MCP AEM pour récupérer les données, puis les présente de manière claire et structurée. Il comprend des détails sur le modèle de fragment de contenu, le nombre de fragments et des informations récapitulatives.

  2. Pour déclencher la bannière HOT DEAL, mettez à jour le prix d’une Adventure. Dans la même conversation, essayez :

    code language-text 
    Can you update adventure Beervana in Portland's price to 99.99

    Mettre à jour le prix de l’Adventure

    De même, l’IA demande confirmation avant de mettre à jour le contenu. Il résume également l’opération de contenu avant et après la mise à jour.

  3. Dans l’application React, vérifiez que la carte Beervana affiche désormais la bannière HOT DEAL.

    Vérifier la bannière HOT DEAL

Invites supplémentaires

Essayez ces invites axées sur le contenu dans votre IDE (avec le serveur MCP AEM connecté) pour explorer d’autres workflows et fonctionnalités.

  • Découvrir le contenu :

    code language-text 
    List all content fragments in the WKND Adventures folder

List all WKND Site pages from US English site

Can you give me page metadata for Tahoe Skiing English page?

List assets of Bali Surf camp

What Content Fragment models are available in this environment?

  • Recherche de contenu :

    code language-text 
    Search for content fragments that mention 'cycling'

Do we have a magazine page in US English site with "Camping" in it

  • Mettre à jour le contenu :

    code language-text 
    In WKND US English create a copy of Downhill Skiing Wyoming as "Test Downhill Skiing Wyoming"

In newly created "Test Downhill Skiing Wyoming" please change title to "Duplicated Page"

  • Publier ou dépublier :

    code language-text 
    Can you publish the page at /us/en/adventures/test-downhill-skiing-wyoming and give me publish page URL

Can you unpublish the test-downhill-skiing-wyoming page

Félicitations !

Vous avez configuré le serveur AEM MCP dans un IDE agentique (Cursor, dans cet exemple) et l’avez connecté à votre environnement RDE (ou de développement). Vous avez ensuite utilisé l’application React WKND Adventures et discuté en langage naturel pour consulter les détails du fragment de contenu d’Adventure. Vous avez également mis à jour le prix d’un fragment avec l’API vous demandant une confirmation avant chaque opération de contenu. Vous avez vérifié la modification dans l’application active. Vous pouvez utiliser le même flux orienté humain à partir de votre IDE pour réviser, mettre à jour et créer du contenu AEM sans passer par l’interface utilisateur d’AEM ni écrire de code d’API de bas niveau.

recommendation-more-help
experience-manager-learn-help-cloud-service