DocumentationCommerceAdobe Commerce as a Cloud Service

[SaaS uniquement]{class="badge positive" title="S’applique uniquement aux projets Adobe Commerce as a Cloud Service et Adobe Commerce Optimizer (infrastructure SaaS gérée par Adobe)."}

Outils de développement du codage de l’IA pour Adobe Commerce App Builder

Last update: Tue Mar 03 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Intermédiaire
  • Développeur

Lors de la migration vers Adobe Commerce as a Cloud Service, vous pouvez utiliser les outils de codage de l’IA pour convertir les extensions PHP existantes Adobe Commerce en applications Adobe Developer App Builder. Vous pouvez également utiliser ces outils pour créer de nouvelles applications App Builder.

Les outils de codage de l’IA offrent les avantages suivants :

  • Workflow de développement amélioré : outils de développement Adobe Commerce intégrés.
  • Assistance optimisée par l’IA : génération et débogage de code contextuel.
  • Fonctionnalités spécifiques à Commerce : outils spécialisés pour le développement d’Adobe Commerce App Builder.
  • Workflows automatisés : processus de développement et de déploiement rationalisés.

En installant les outils de codage de l’IA, vous avez accès aux éléments suivants :

  • Compétences - Un ensemble de compétences spécifiques à Adobe Commerce et App Builder conçu pour guider et informer votre développement d’applications.
  • Serveur MCP pour les développeurs
  • Serveur MCP App Builder

Mise à jour vers la dernière version

Après avoir installé l’outil de développement de codage d’IA, vous pouvez mettre à jour vers la dernière version en exécutant la commande suivante :

aio commerce extensibility tools-setup

Les outils seront mis à jour vers la dernière version.

Conditions préalables

Installation

  1. Installez globalement la dernière ligne de commande Adobe I/O :

    code language-bash 
    npm install -g @adobe/aio-cli

  2. Installez les modules externes suivants :

    code language-bash 
    aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce @adobe/aio-cli-plugin-app-dev @adobe/aio-cli-plugin-runtime

  3. Clonez l’un des éléments suivants :

    • Commerce kit de démarrage de l’intégration - pour la création d’intégrations back-office.

      code language-bash 
      git clone git@github.com:adobe/commerce-integration-starter-kit.git

    • Commerce kit de démarrage de passage en caisse pour créer ou étendre l’expérience de passage en caisse, y compris les paiements, l’expédition et les taxes.

      code language-bash 
      git clone git@github.com:adobe/commerce-checkout-starter-kit.git

  4. Accédez au répertoire du kit de démarrage :

    code language-bash 
    cd commerce-integration-starter-kit

  5. Installez les outils d’extensibilité de l’IA Commerce en exécutant la commande de configuration interactive :

    code language-bash 
    aio commerce extensibility tools-setup

    Le processus de configuration vous invite à spécifier les options de configuration. Suivez les invites pour terminer l'installation. Les outils seront installés dans le répertoire sélectionné.

    • Sélectionnez le kit de démarrage que vous souhaitez utiliser pour votre projet.

      code language-shell-session 
      ? Which starter kit would you like to use?
❯ Integration starter kit
   Checkout starter kit

    • Sélectionnez l’agent de codage de votre choix. Plus de 40 agents de codage sont pris en charge, mais si vous ne voyez pas votre agent préféré, vous pouvez utiliser l’option Other pour installer des compétences pour n’importe quel agent de codage. Reportez-vous à la documentation de votre agent de codage pour obtenir des instructions sur la configuration des compétences.

      code language-shell-session 
      ? Which coding agent would you like to install skills for?
❯ Cursor
   Claude Code
   GithubCopilot
   Windsurf
   Gemini CLI
   OpenAI Codex
   Cline
   ...

    • Le programme d’installation détecte si NPM ou Yarn est installé et effectue automatiquement la sélection appropriée. Cependant, si aucun des deux n’est installé, vous êtes invité à sélectionner votre gestionnaire de packages. Adobe recommande d’utiliser npm par souci de cohérence :

      code language-shell-session 
      ? Which package manager would you like to use?
❯ npm
   yarn

  6. Une fois les outils de codage installés, le processus d’installation configure :

    • Intégration du serveur MCP pour le développement d’Adobe Commerce
    • Compétences des agents pour une expérience de développement améliorée
    • Outils et workflows de développement spécifiques à Commerce

    Les compétences et les outils MCP sont maintenant installés. Si vous ne voyez pas les compétences et les outils MCP, redémarrez votre agent de codage.

NOTE
Avant de déployer votre projet, vous devez effectuer les tâches de configuration suivantes :
Vous pouvez effectuer ces étapes de configuration manuellement ou utiliser les outils de codage de l’IA pour vous guider tout au long du processus. Voir Création d’une intégration pour obtenir des instructions de configuration détaillées.

Configuration post-installation

Connexion à l’interface de ligne de commande d’Adobe I/O

Après avoir installé le Adobe I/O CLI, vous devez vous connecter à chaque fois que vous souhaitez utiliser le serveur MCP.

aio auth login

Pour vérifier que vous êtes connecté, exécutez la commande suivante :

aio where

Si vous rencontrez des problèmes, essayez de vous déconnecter puis de vous reconnecter :

aio auth logout
aio auth login
NOTE
Certaines fonctionnalités du serveur MCP fonctionnent sans connexion, mais le service RAG (Retrieval-Augmentated Generation) ne fonctionne pas. Le service RAG fournit à l’agent de codage de l’IA un accès en temps réel à l’ensemble de la documentation d’Adobe Commerce, ce qui lui permet de répondre aux questions et de générer du code en fonction des pratiques de développement, des API et des modèles architecturaux Commerce actuels.

Curseur

  1. Redémarrez l’IDE Cursor pour charger les nouveaux outils et la nouvelle configuration MCP.

  2. Vérifiez l’installation en vous assurant que les compétences sont bien présentes dans le dossier .cursor/skills/ .

  3. Activez le serveur MCP :

    • Ouvrez les paramètres MCP du curseur à l’aide des commandes Cmd+Maj+P (macOS) ou Ctrl+Maj+P (Windows et Linux).
    • Type Affichage : ouvrir les paramètres MCP
    • Localisez serveur MCP d’extensibilité de commerce dans la liste
    • Activez/désactivez le serveur ON pour activer les outils de codage

  4. Vérifiez l’état du serveur : le serveur MCP d’extensibilité de Commerce doit apparaître comme suit :

    code language-shell-session 
    Status: Connected/Active
Server: commerce-extensibility
Configuration: Automatically configured via .cursor/mcp.json

  5. Utilisez l’invite suivante pour voir si l’agent utilise le serveur MCP. Si ce n’est pas le cas, demandez explicitement à l’agent d’utiliser les outils MCP disponibles.

    code language-shell-session 
    What are the differences between Adobe Commerce PaaS and Adobe Commerce as a Cloud Service when configuring a webhook that activates an App Builder runtime action?

Copilote

  1. Redémarrez Visual Studio Code pour charger les nouveaux outils et la nouvelle configuration MCP.

  2. Vérifiez l’installation en vous assurant que le fichier copilot-instructions.md existe dans le dossier .github.

  3. Activez le serveur MCP :

    • Ouvrez le panneau Extensions en cliquant sur l’icône Extensions dans la barre d’activités située sur la barre latérale gauche, ou à l’aide des combinaisons Cmd+Maj+X (macOs) ou Ctrl+Maj+X (Windows et Linux).
    • Cliquez sur SERVEURS MCP - INSTALLÉS.
    • Cliquez sur l’icône d’engrenage en regard de Serveur MCP d’extensibilité de commerce et sélectionnez Démarrer le serveur, si le serveur est arrêté.
    • Cliquez à nouveau sur l’icône d’engrenage, puis sélectionnez Afficher la sortie.

  4. Vérifiez l’état du serveur. La sortie MCP:commerce-extensibility doit correspondre aux éléments suivants :

    code language-shell-session 
    2025-11-13 12:58:50.652 [info] Starting server commerce-extensibility
2025-11-13 12:58:50.652 [info] Connection state: Starting
2025-11-13 12:58:50.652 [info] Starting server from LocalProcess extension host
2025-11-13 12:58:50.657 [info] Connection state: Starting
2025-11-13 12:58:50.657 [info] Connection state: Running

(...)

2025-11-13 12:58:50.753 [info] Discovered 10 tools

  5. Utilisez l’invite suivante pour voir si l’agent utilise le serveur MCP. Si ce n’est pas le cas, demandez explicitement à l’agent d’utiliser les outils MCP disponibles.

    code language-shell-session 
    What are the differences between Adobe Commerce PaaS and SaaS when configuring a webhook that activates an App Builder runtime action?

Exemple d’invite

L’exemple d’invite suivant utilise le kit de démarrage de l’intégration pour créer une application afin d’envoyer des notifications lorsqu’une commande est passée.

Implement an Adobe Commerce SaaS application that will send an ERP notification when a customer places an order. The ERP notification must be sent as a POST HTTP call to <ERP URL> with the following details in the request JSON body:

Order ID -> orderID
Order Total -> total
Customer Email ID -> emailID
Payment Type -> pType

L’exemple d’invite suivant utilise le kit de démarrage de passage en caisse pour créer une application qui fournit des méthodes d’expédition personnalisées.

Implement an Adobe Commerce SaaS application that provides custom shipping methods.
The extension should:
1. Return shipping options based on the destination postal code
2. If postal code is in California, add an "Express California" option for $15
3. If postal code is outside US, add an "International Standard" option for $25
4. The carrier code should be "MYSHIP"

Commandes d’invite

Outre l’invite, vous pouvez utiliser la commande /search-commerce-docs pour rechercher de la documentation dans les conversations avec votre agent. Par exemple :

/search-commerce-docs "How do I subscribe to Commerce events?"

Compétences

Bien que les compétences soient automatiquement appelées lorsque vous discutez avec votre agent de codage, vous pouvez également les appeler manuellement à l’aide des commandes suivantes :

  • /architect - Conçoit l’architecture des extensions d’Adobe Commerce à l’aide de App Builder et du kit de démarrage sélectionné. À utiliser lors de la planification des intégrations, de la sélection des événements, de la conception des flux de données ou de la prise de décisions architecturales.
  • /developer - Implémente les extensions Adobe Commerce en suivant les modèles de App Builder et la structure de fichiers. À utiliser lors de la génération de code, la mise à jour de fichiers de configuration ou l’implémentation d’actions d’exécution.
  • /devops-engineer - Déploie et utilise des extensions App Builder. À utiliser lors du déploiement d’applications, de la configuration d’environnements, de la résolution de problèmes de déploiement, de la configuration de CI/CD ou de la résolution d’erreurs d’intégration.
  • /product-manager - Collecte et documente les exigences relatives aux extensions Adobe Commerce. À utiliser lors du démarrage d’un nouveau projet, pour définir des critères d’acceptation, clarifier des objectifs commerciaux ou créer une documentation REQUIREMENTS.md.
  • /technical-writer : crée une documentation complète pour les applications App Builder. À utiliser lors de la rédaction de README.md, de guides d’utilisation, de documentation API, de journaux de modifications ou pour garantir l’exhaustivité de la documentation.
  • /tester : crée des tests complets pour les applications App Builder. À utiliser lors de l’écriture de tests unitaires et d’intégration, de la validation de la sécurité ou du contrôle de la qualité et de la couverture du code.
  • /tutor (expérimental) - Enseigne Adobe Commerce concepts de développement d’applications avec des explications et des exemples clairs. À utiliser lorsque vous apprenez App Builder, comprenez des événements ou avez besoin de conseils sur des modèles de développement.

Bonnes pratiques

Adobe recommande de suivre les bonnes pratiques suivantes lors de l’utilisation des outils de codage de l’IA :

Mode Plan

Lorsque vous discutez avec votre agent de codage, vous devez sélectionner le mode Plan pour créer un plan d’implémentation détaillé pour votre projet.

La méthode de sélection du mode Plan varie en fonction de l’agent que vous utilisez. Consultez la documentation de votre agent pour obtenir des instructions. Par exemple :

Checklist

Avant de commencer une session de développement :

  • Vérifier les REQUIREMENTS.md
  • Vérification du fonctionnement des outils MCP
  • Examiner la phase et les objectifs actuels
  • Commencez par l’exemple de code ou les projets structurés

Pendant le développement :

  • Approuvez le protocole en quatre phases
  • Demander des plans de mise en œuvre pour un développement complexe
  • Utilisation des outils MCP, le cas échéant
  • Tester chaque fonctionnalité après l’implémentation
  • Testez d’abord localement, puis déployez et testez à nouveau
  • Utilisation des outils de codage pour la prise en charge des tests
  • Remettre en question une complexité inutile
  • Déploiement incrémentiel pour un développement plus rapide

Lors du démarrage d’une nouvelle conversation :

  • Fournir une remise de session appropriée
  • Fichiers de clé de référence avec @
  • Fixer des objectifs clairs pour la session
  • Utiliser des limites basées sur les phases

Workflow

Lors du développement avec les outils de codage de l’IA, commencez par utiliser un exemple de code ou des projets structurés. Cette approche vous assure de construire sur une base solide plutôt que de partir de rien, tout en optimisant votre workflow de développement d’IA.

Cela vous permet également d’exploiter les modèles Adobe et de tirer parti de modèles et d’architectures éprouvés, tout en conservant les structures et conventions de répertoires établies.

Consultez les ressources suivantes pour commencer :

Pourquoi utiliser ces ressources ?

  • Modèles éprouvés : les kits de démarrage incarnent les bonnes pratiques et les décisions architecturales d’Adobe
  • Développement plus rapide : réduit le temps consacré à la conception standard et à la configuration
  • Cohérence : garantit que votre application respecte les conventions établies.
  • Maintenabilité : facilité de maintenance et de mise à jour selon les schémas standard
  • Documentation : les kits de démarrage sont fournis avec des exemples et de la documentation
  • Soutien de la communauté : aide plus facile à obtenir lorsque vous utilisez des approches standard
  • Efficacité du contexte de l’IA : utilisez des modèles et des structures familiers, ce qui réduit le besoin d’explications détaillées et améliore la précision de la génération du code
  • Utilisation réduite des jetons : référencez les modèles existants au lieu de tout générer de A à Z, ce qui entraîne des conversations plus efficaces et moins de résumés de contexte

Protocole

Le protocole en quatre phases suivant est automatiquement appliqué par les compétences installées. Les outils doivent suivre automatiquement ce protocole lors du développement d’applications :

  • Phase 1 : analyse et clarification des exigences
    • Lorsqu’on vous pose des questions pour clarifier les choses, donnez des réponses complètes.
  • Phase 2 : planification architecturale et approbation des utilisateurs
    • Lorsqu’un plan est présenté, examinez-le attentivement avant de l’approuver.
  • Phase 3 : génération et mise en œuvre du code
  • Phase 4 : documentation et validation

Demander des plans de mise en œuvre pour un développement complexe

Pour un développement complexe impliquant plusieurs actions d’exécution, points de contact ou intégrations, demandez explicitement aux outils d’IA de créer un plan de mise en œuvre détaillé. Lorsque vous voyez un plan général en Phase 2 qui implique plusieurs composants, demandez un plan d’implémentation détaillé pour le diviser en tâches gérables :

Create a detailed implementation plan for this complex development.

Les applications Adobe Commerce complexes impliquent souvent :

  • Plusieurs actions d’exécution
  • Configuration d’événement sur plusieurs points de contact
  • Intégration avec des systèmes externes
  • Exigences de gestion des états
  • Test sur plusieurs composants

Utilisation des outils MCP

NOTE
Avant d’utiliser les outils MCP, vérifiez que vous êtes connecté à l’interface de ligne de commande Adobe I/O.

L’outil est défini par défaut sur les outils MCP, mais dans certains cas, il peut utiliser des commandes d’interface de ligne de commande à la place. Pour garantir l’utilisation de l’outil MCP, demandez-le explicitement à l’invite.

Si des commandes d’interface de ligne de commande sont utilisées et que vous souhaitez utiliser des outils MCP à la place, utilisez l’invite suivante :

Use only MCP tools and not CLI commands
  • Outils MCP : aio-app-deploy, aio-app-dev, aio-dev-invoke
  • Commandes de l’interface de ligne de commande : déploiement d’application aio, développement d’application aio

Les commandes de l’interface de ligne de commande peuvent être utilisées dans les scénarios suivants :

  • Scénarios de déploiement complexes
  • Débogage de problèmes spécifiques
  • Lorsque les outils de MCP présentent des limites
  • Opérations ponctuelles qui ne bénéficient pas de l’intégration MCP

Développement

Remettez en question la complexité inutile créée par les outils d’IA.

Lorsque des fichiers inutiles sont ajoutés (validator.js, transformer.js, sender.js) pour des points d’entrée en lecture seule simples, utilisez les invites suivantes :

Why do we need these files for a simple read-only endpoint?
Perform a root cause analysis before adding complexity
Verify if simpler solutions exist

Test

Appliquez les bonnes pratiques suivantes lors du test :

Tester chaque fonctionnalité après l’implémentation

Une fois le développement d’une fonctionnalité de votre plan d’implémentation terminé, testez-la immédiatement. Les tests précoces évitent les problèmes complexes et facilitent le débogage.

  • N’attendez pas que toutes les fonctionnalités soient terminées
  • Test incrémentiel pour détecter les problèmes dès le début
  • Valider la fonctionnalité avant de passer à la fonctionnalité suivante

Tester localement en premier

Effectuez toujours d’abord un test local à l’aide de l’outil aio-app-dev. Vous obtenez ainsi un retour d’informations immédiat et pouvez accélérer les cycles d’itération, faciliter le débogage et supprimer les frais de déploiement.

  1. Démarrez le serveur de développement local :

    code language-bash 
    aio-app-dev

  2. Tester les actions localement :

    code language-bash 
    aio-dev-invoke action-name --parameters '{"test": "data"}'

Déployer et tester à nouveau

Une fois le test local réussi, déployez et testez-le dans l’environnement d’exécution. Les environnements d’exécution peuvent avoir un comportement différent de celui du développement local.

  1. Déployer au moment de l’exécution :

    code language-bash 
    aio-app-deploy

  2. Test des actions déployées

  3. Utiliser un navigateur web ou des requêtes HTTP directes

  4. Vérifier les journaux d’activation pour le débogage

Utilisation des outils de codage pour la prise en charge des tests

Demandez de l’aide pour les tests. Les outils peuvent vous aider à déboguer, à analyser les journaux et à créer des données de test appropriées pour vos actions d’exécution spécifiques.

Tester les actions d’exécution :

Help me test the customer-created runtime action running locally

Échecs de débogage :

Why did the subscription-updated runtime action activation fail?

Vérifier les journaux :

Help me check the logs for the last stock-monitoring runtime action invocation

Création de payloads de test :

Generate test data for this Commerce event

Create a test payload for the customer_save_after event

Rechercher des points d’entrée d’exécution :

What's the URL for this deployed action?

Gérer l’authentification :

How do I authenticate with this external API?

Résolution des problèmes :

Help me debug why this action is returning 500 errors

Débogage

Arrêtez-vous et évaluez quand les choses tournent mal. Si vous rencontrez des problèmes :

  • Arrêter et évaluer - Ne pas continuer dans un état rompu
  • Vérifier les journaux : utilisez les journaux d’activation pour identifier les problèmes.
  • Simplifier - Supprimer la complexité pour isoler les problèmes
  • Test incrémentiel - Correction d’un problème à la fois
  • Valider - Tester chaque correctif avant de continuer

Déploiement

Appliquez les bonnes pratiques suivantes lors du déploiement d’ :

Déploiement incrémentiel

Déployez uniquement les actions modifiées pour accélérer le développement. Cette approche réduit le risque de rompre les fonctionnalités existantes et fournit des commentaires plus rapides sur les modifications.

  • Utilisation des outils MCP pour déployer des actions spécifiques

    code language-bash 
    aio-app-deploy --actions action-name

  • Déployer des actions individuelles après un test local

  • Déployer de manière incrémentielle et éviter les déploiements d’applications complets pendant le développement

Nettoyage de l’exécution

Après des modifications majeures, utilisez les outils pour nettoyer les actions orphelines. Laissez l’outil d’IA gérer le processus de nettoyage de manière systématique. Il peut identifier efficacement les actions orphelines, vérifier leur statut et les supprimer en toute sécurité sans intervention manuelle.

Help me identify and clean up orphaned runtime actions

Demandez à l’outil IA de répertorier les actions déployées et d’identifier celles qui ne sont pas utilisées

List all deployed actions and identify which ones are no longer needed

Demandez aux outils d’IA de supprimer les actions orphelines à l’aide des commandes appropriées

Remove the orphaned actions that are no longer part of the current implementation

Surveillance

Appliquez les bonnes pratiques suivantes lors de la surveillance de votre application :

Surveiller les indicateurs de qualité du contexte

  • Bon contexte : l’IA se souvient des décisions récentes, référence les fichiers corrects
  • Mauvais contexte : l’IA demande des informations fournies précédemment et répète les problèmes résolus

Suivre la vitesse de développement

  • Vitesse élevée : progression claire, clarification minimale nécessaire
  • Faible vitesse : explications répétées, confusion de l’IA, progression lente

Surveillance de la rentabilité

Suivre les modèles d’utilisation des jetons :

  • Efficace : faible utilisation des jetons, peu de résumés du contexte
  • Inefficace : utilisation élevée des jetons, synthèses multiples, travail répété

Éléments à éviter

Évitez les antimodèles suivants lors de l’utilisation des outils de codage de l’IA :

  • Ne pas ignorer la phase de clarification - Assurez-vous toujours que la phase 1 est terminée avant la mise en œuvre.
  • Ne pas ignorer le test après chaque fonctionnalité - Effectuez un test incrémentiel, n’attendez pas que tout soit terminé.
  • N’ajoutez pas de complexité sans analyse des causes profondes - Mettez en question les ajouts de fichiers inutiles et demandez une enquête appropriée.
  • Ne déclarez pas votre succès sans tests de données réels - Testez toujours avec des données réelles, et pas seulement dans des cas particuliers.
  • N’oubliez pas le nettoyage d’exécution - Nettoyez toujours les actions orphelines après des modifications majeures.

Envoi de commentaires

Les développeurs et développeuses qui souhaitent fournir des commentaires sur les outils de codage de l’IA peuvent utiliser la commande /feedback .

Cette commande vous permet de fournir des commentaires textuels et d’envoyer des journaux à Adobe. Tous les journaux que vous envoyez seront assainis afin de supprimer toute information privée ou personnelle.

TIP
L’expérience utilisateur varie légèrement en fonction de l’IDE que vous utilisez. Le processus suivant décrit l'expérience dans Cursor.

  1. Dans votre agent, tapez /feedback et sélectionnez la commande commerce-extensibility/feedback.

  2. Faites vos commentaires sur l’outil dans le champ Commentaires qui s’affiche en haut de l’IDE et appuyez sur la touche Entrée.

    Champ de saisie de commande de retour de curseur {width="600" modal="regular"}

  3. Dans le champ Enregistrer localement, saisissez yes ou no, puis appuyez sur Entrée pour indiquer si vous souhaitez enregistrer une copie locale de vos journaux.

    Champ Enregistrer localement de la commande de commentaires du curseur {width="600" modal="regular"}

    Si vous avez sélectionné Oui, vous pouvez consulter les journaux de votre dossier chats après avoir envoyé vos commentaires.

  4. La commande commerce-extensibility/feedback s’affiche dans le champ d’entrée de conversation de votre agent. Appuyez sur Entrée ou cliquez sur Envoyer pour envoyer vos commentaires à Adobe.

NOTE
Si vous ne voyez pas la commande /feedback, vous devrez peut-être mettre à jour vers la dernière version.
recommendation-more-help
aa40c2bf-3234-45d5-985f-5d274c066970