Apportez votre propre projet EDS bring-your-own-eds

Utilisez ce guide lorsque vous disposez déjà d’un projet Edge Delivery Services (EDS) ou lorsque vous avez créé une application sans la créer automatiquement.

Si la plateforme a créé votre widget automatiquement, suivez Personnaliser un widget généré à la place. Le projet généré inclut déjà la configuration des fichiers, blocs, contenus et actions SDK décrite ici.

Parcours : préparez le projet EDS → installez la version de → SDK et publiez le bloc → configurez l’action → déployer et tester.

Avant de commencer

Vous avez besoin des éléments suivants :

Installation de LLM Apps SDK

À partir de la racine du projet EDS :

npm install @adobe/llmapps-sdk

Le package copie le point d’entrée du widget et l’implémentation du pont dans le projet :

scripts/
├── aem-embed.js
└── llmapps-sdk.js

L’URL du script utilisée par l’action pointe vers scripts/aem-embed.js.

Création du bloc de widget

Créez un bloc pour l’action :

blocks/
└── search-products/
    ├── search-products.js
    └── search-products.css

Exportez la fonction decorate EDS standard avec le pont connecté comme deuxième argument :

export default async function decorate(block, bridge) {
  if (bridge) {
    bridge.applyHostStyles();
  }

  const result = bridge ? await bridge.toolResult : null;
  const products = result?.structuredContent?.products ?? [];

  const list = document.createElement('ul');
  products.forEach((product) => {
    const item = document.createElement('li');
    item.textContent = String(product.name ?? 'Product');
    list.append(item);
  });

  block.replaceChildren(list);

  if (bridge) {
    bridge.autoResize(block);
  }
}

Utilisez des API DOM qui codent des valeurs de texte. Ne concaténez pas de données externes dans HTML.

Créer et publier la page du widget

Créez une page EDS pour le widget et ajoutez le bloc à cette page. Publiez la page.

L’URL de la page active devient l’URL du widget de l’action :

https://main--<repo>--<owner>.aem.live/<widget-page>

Le chemin d’accès à la page ne doit pas nécessairement correspondre au nom de l’action, mais une convention cohérente facilite la gestion du projet.

Configurer CORS

Le widget charge la page EDS ainsi que les scripts, les styles, les blocs et les médias dans toutes les origines. Configurez l’en-tête du site EDS :

{
  "/**": [
    {
      "key": "access-control-allow-origin",
      "value": "<allowed-host-origin>"
    }
  ]
}

Utilisez l’origine d’hôte spécifique requise par votre plateforme LLM prise en charge. Utilisez * uniquement lorsque le widget est intentionnellement public, n’utilise pas de requêtes cross-origin authentifiées et que vos exigences de sécurité le permettent.

Pour plus d’informations sur la configuration EDS, voir Service de configuration.

Configuration de l’action

Dans LLM Apps, ouvrez l’action et sélectionnez Métadonnées de widget.

Enter :

Configurez les domaines CSP et les autorisations de navigateur avec le privilège minimum. Ajoutez uniquement les origines et les fonctionnalités requises par le widget.

Pour les définitions de champ, voir Champs d’action et de widget.

Test de l’intégration

Si la page fonctionne directement, mais pas dans la plateforme LLM, vérifiez CORS, CSP, URL HTTPS et la forme structuredContent. Voir Dépannage.