Intégration de Beta beta-onboarding

En tant que participant au programme Beta pour Adobe LLM Apps, vous recevrez un e-mail contenant deux archives zip et une référence de configuration d’application. Suivez les étapes ci-dessous pour mettre votre application en ligne.

Avant de commencer

Avant de passer aux étapes, familiarisez-vous avec les concepts clés utilisés dans ce guide. Cela vous fera gagner du temps et vous aidera à tout mettre en place.

Application LLM : assistant de marque avec lequel les utilisateurs interagissent au sein de ChatGPT ou d’autres plateformes LLM.

Action — une fonctionnalité que votre application offre. Par exemple, « Trouver un distributeur » ou « Parcourir les produits ». Chaque action est appelée par le LLM lorsque l’utilisateur pose une question pertinente.

Gestionnaire d’action — Code qui s’exécute lorsqu’une action est appelée. Il peut appeler vos API, récupérer des données actives ou renvoyer des données statiques. Les exemples de gestionnaires fournis par Adobe renvoient des données codées en dur afin que vous puissiez vérifier la configuration de bout en bout avant de connecter votre serveur principal réel.

Widget — la réponse visuelle présentée à l’utilisateur — une carte, un carrousel, un tableau ou toute interface utilisateur personnalisée rendue avec la réponse textuelle du LLM.

Référence de configuration de l’application — Fichier fourni par Adobe qui vous indique exactement ce que vous devez entrer pour chaque action lors de la configuration de votre application.

Étape 1 : transférer les archives fournies vers GitHub

Adobe fournit deux archives zip par e-mail :

Créez deux référentiels vides sur GitHub (un par archive), puis décompressez chaque archive et envoyez-la. Nous vous recommandons de nommer chaque référentiel d’après le fichier zip correspondant, <project-name> pour le code de l’application et <project-name>-eds pour le projet EDS.

<your-github-org> fait référence à votre nom d’utilisateur GitHub personnel ou à une organisation GitHub, quel que soit le compte propriétaire des référentiels.

Référentiel de code d’application — Décompressez l’archive, initialisez un référentiel Git local et poussez-le vers GitHub :

# Unzip and enter the folder
unzip <project-name>.zip
cd <project-name>

# Initialize and push
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:<your-github-org>/<your-repo>.git
git push -u origin main

Référentiel EDS — répétez les mêmes étapes pour l’archive EDS, en pointant vers le deuxième référentiel :

unzip <project-name>-eds.zip
cd <project-name>-eds

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:<your-github-org>/<your-eds-repo>.git
git push -u origin main

Étape 2 : créer une application LLM

Accédez à 🔗 puis cliquez sur Créer une application LLM.

Renseignez les Détails de l’application à l’aide des valeurs de la section Détails de l’application dans la référence de configuration de l’application :

Sous Région des données Analytics, sélectionnez la région où les données Analytics seront stockées. Ce ne peut pas être modifié après la création de l’application.

Sous Référentiel, sélectionnez l’organisation GitHub et le référentiel de code de l’application que vous avez intégrés précédemment.

Laissez la case Suggérer automatiquement des actions en fonction de votre site web décochée ; vous allez configurer les actions manuellement.

Acceptez les conditions d’ puis cliquez sur Créer une application.

Étape 3 : activer vos widgets

Au cours de cette étape, vous configurez le projet EDS fourni par Adobe et vous le publiez via DA.live couche de création Adobe et de réseau CDN. Chaque document publié devient le widget affiché pour l’utilisateur ou l’utilisatrice lorsqu’une action est appelée.

Étape 3.1 : connecter le référentiel EDS à DA.live

Étape 3.2 : créer un document DA.live pour chaque action

Dans DA.live, vous devez créer un document par action. Une fois publié, chaque document devient le widget affiché pour l’utilisateur ou l’utilisatrice lorsque cette action est appelée.

Pour chaque action :

Une fois publié, chaque document est accessible au https://main--<your-eds-repo>--<your-github-org>.aem.live/<document-name>. Cette URL est ce que vous allez saisir dans le champ URL du widget lors de la configuration de chaque action à l’étape 4.

Étape 3.3 : Configurer les en-têtes CORS pour le site EDS

Pour permettre aux plateformes LLM de charger vos widgets à plusieurs origines, vous devez ajouter un en-tête Access-Control-Allow-Origin à votre site EDS.

Accédez à l’éditeur d’en-têtes HTTP à l’adresse tools.aem.live/tools/headers-edit/index.html.

Pour consulter la documentation complète sur les en-têtes HTTP personnalisés dans AEM Edge Delivery Services, voir aem.live/docs/custom-headers.

Après avoir enregistré les en-têtes, déclenchez une synchronisation du code pour propager les modifications dans tous les fichiers :

curl -X POST "https://admin.hlx.page/code/<your-github-org>/<your-eds-repo>/main/*"

Étape 4 : Ajouter des actions

Dans l’interface utilisateur des applications LLM, ouvrez votre application et accédez à Actions dans la barre latérale gauche. Cliquez sur + pour créer une action. Répétez l’opération pour chaque action décrite dans la référence de configuration de votre application (voir les sections Action 1, Action 2, Action 3).

Onglet Action

Onglet Métadonnées du widget

Développez Configuration de CSP et renseignez les éléments suivants :

Onglet Widget Builder

Sous Source du widget, sélectionnez Utiliser un widget existant, puis renseignez les champs suivants :

Cliquez sur Créer une action. L’action s’affiche sous forme de vignette sur la page Actions avec un badge EDS et un nombre de paramètres.

Étape 5 : Déployer

Une fois toutes les actions configurées, accédez à la page Détails de l’application et cliquez sur Déployer dans le coin supérieur droit.

Sélectionnez l’environnement cible et cliquez sur Déployer. Le pipeline s’exécute en quatre étapes : préparation des informations d’identification, démarrage du déploiement, création de votre application à partir du référentiel et publication sur Adobe I/O Runtime.

Une fois l’opération terminée, faites défiler l’écran jusqu’à la section Tester l’application de la page Détails de l’application et copiez l’URL du serveur MCP — vous en aurez besoin pour enregistrer votre application dans ChatGPT.

Étape 6 : ajouter l’application à ChatGPT

L’ajout d’applications personnalisées à ChatGPT nécessite un abonnement Pro, Business ou Enterprise. Les forfaits gratuits et Plus ne prennent pas en charge les applications MCP personnalisées.

Votre application apparaît sous Applications activées avec un badge DEV.

Commencez une nouvelle conversation, joignez votre application à l’aide du bouton + ou en saisissant @ suivi du nom de votre application, puis posez une question correspondant à l’une de vos actions configurées.

Prochaines étapes

L’exemple d’application que vous avez déployé utilise des données codées en dur. Pour en faire une expérience prête pour la production :