Eigenes EDS-Projekt mitbringen bring-your-own-eds

Verwenden Sie dieses Handbuch, wenn Sie bereits über ein Edge Delivery Services (EDS)-Projekt verfügen oder wenn Sie eine App erstellt haben, ohne sie automatisch zu erstellen.

Wenn die Plattform Ihr Widget automatisch erstellt hat, folgen Sie stattdessen Generiertes Widget anpassen. Das generierte Projekt enthält bereits die hier beschriebenen SDK-Dateien, -Blöcke, -Inhalte und die Aktionskonfiguration.

Journey: Bereiten Sie das EDS-Projekt vor → installieren Sie den SDK-→-Build und veröffentlichen Sie den -Block, → konfigurieren Sie die Aktion → Bereitstellen und Testen.

Bevor Sie beginnen

Sie benötigen:

Installieren des LLM Apps SDK

Aus dem EDS-Projektstamm:

npm install @adobe/llmapps-sdk

Das Paket kopiert den Widget-Einstiegspunkt und die Bridge-Implementierung in das Projekt:

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

Die von der Aktion verwendete Skript-URL verweist auf scripts/aem-embed.js.

Erstellen des Widget-Blocks

Erstellen Sie einen Block für die Aktion:

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

Exportieren Sie die standardmäßige EDS-decorate mit der verbundenen Brücke als zweites 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);
  }
}

Verwenden Sie DOM-APIs, die Textwerte kodieren. Verketten Sie keine externen Daten in HTML.

Verfassen und Veröffentlichen der Widget-Seite

Erstellen Sie eine EDS-Seite für das Widget und fügen Sie dieser Seite den Block hinzu. Veröffentlichen Sie die Seite.

Die Live-Seiten-URL wird zur Widget-URL der Aktion:

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

Der Seitenpfad muss nicht mit dem Aktionsnamen übereinstimmen, aber eine konsistente Konvention erleichtert die Pflege des Projekts.

Konfigurieren von CORS

Das Widget lädt die EDS-Seite sowie Skripte, Stile, Blöcke und Medien in allen Ursprüngen. Konfigurieren Sie die Kopfzeile für die EDS-Site:

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

Verwenden Sie den spezifischen Host-Ursprung, der für Ihre unterstützte LLM-Plattform erforderlich ist. Verwenden Sie * nur, wenn das Widget absichtlich öffentlich ist, keine Anmeldeinformationen für ursprungsübergreifende Anfragen verwendet und die Sicherheitsanforderungen dies zulassen.

Details zur EDS-Konfiguration finden Sie unter Konfigurationsdienst.

Konfigurieren der Aktion

Öffnen Sie in LLM Apps die Aktion und wählen Sie Widget-Metadaten aus.

Geben Sie Folgendes ein:

Konfigurieren Sie CSP-Domains und Browser-Berechtigungen mit den geringsten Berechtigungen. Fügen Sie nur Ursprünge und Funktionen hinzu, die für das Widget erforderlich sind.

Felddefinitionen finden Sie unter Aktion und Widget-Felder.

Testen der Integration

Wenn die Seite direkt, aber nicht in der LLM-Plattform funktioniert, überprüfen Sie CORS, CSP, HTTPS-URLs und die structuredContent. Siehe Fehlerbehebung.