Anpassen eines generierten Widgets customize-generated-widget

Die Plattform erstellt für jede generierte Aktion ein EDS-Widget. Das Widget empfängt bereits das Aktionsergebnis, rendert Beispieldaten, wendet Host-Stile an und ist mit der Aktion in LLM Apps verknüpft.

Testen Sie zunächst das generierte Widget. Passen Sie dann den Datenvertrag, die Interaktion und das visuelle Design an.

Journey: Suchen Sie den generierten Block → richten Sie seinen Datenvertrag aus → passen Sie ihn sicher an → zeigen Sie eine lokale Vorschau → Bereitstellung und Tests an.

Erstelltes Widget suchen

Öffnen Sie das beim Erstellen der App ausgewählte EDS-Repository. Jedes erzeugte Widget ist ein EDS-Block:

blocks/
└── <action-name>/
    ├── <action-name>.js
    └── <action-name>.css

Auf der Plattform werden auch die Widget-URLs und unterstützende SDK-Dateien konfiguriert. Sie müssen kein zweites EDS-Projekt erstellen oder diese Werte erneut eingeben, um ein generiertes Widget anzupassen.

Verbinden des LLM Apps SDK mit dem Widget

Das @adobe/llmapps-sdk-Paket verbindet das EDS-Widget mit dem LLM-Host. Das generierte EDS-Repository umfasst:

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

aem-embed.js stellt die Host-Verbindung her, lädt die EDS-Seite und ruft Ihren -Block auf:

export default async function decorate(block, bridge) {
  // Customize the widget here.
}

SDK wird nicht in den Baustein importiert. Die verbundene bridge wird automatisch bereitgestellt. Dadurch kann das Widget:

In diesem Handbuch werden die gängigen Bridge-Methoden behandelt. Die vollständige API finden Sie 🔗 dem @adobe/llmapps-sdk-Paket .

Grundlagen zum Datenvertrag

Der Aktions-Handler gibt structuredContent zurück, und der Block liest es aus bridge.toolResult.

// Handler result
return {
  content: [{ type: 'text', text: `Found ${products.length} products.` }],
  structuredContent: { products, total: products.length }
};

// EDS block
export default async function decorate(block, bridge) {
  const result = bridge ? await bridge.toolResult : null;
  const products = result?.structuredContent?.products ?? [];
  // Render products.
}

Wenn Sie structuredContent ändern, aktualisieren Sie den Handler und das Widget zusammen. Siehe Anpassen eines generierten Handlers für den vollständigen Rückgabevertrag.

Sicheres Rendern externer Daten

Handler-Ausgabe als nicht vertrauenswürdige Daten behandeln. BEVORZUGEN Sie DOM-APIs wie textContent, anstatt Antwortwerte in innerHTML einzufügen.

function createProductCard(product, bridge) {
  const card = document.createElement('article');
  card.className = 'product-card';

  const title = document.createElement('h3');
  title.textContent = String(product.name ?? 'Product');

  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Tell me more';
  button.addEventListener('click', () => {
    if (bridge && product.id) {
      bridge.sendMessage(`Show me details for product ${String(product.id)}`);
    }
  });

  card.append(title, button);
  return card;
}

Validieren Sie URLs, bevor Sie sie href oder src zuweisen, und lassen Sie nur die für das Erlebnis erforderlichen Protokolle zu.

Verwenden der Host-Brücke

EDS übergibt eine verbundene Brücke an decorate(block, bridge). Guard Bridge ruft auf, damit der Block auch während der direkten EDS-Vorschau gerendert wird.

Anwenden von Host-Stilen

if (bridge) {
  bridge.applyHostStyles();
}

Dies gilt für Host-Typografie und Design-Variablen. Ihr Widget-CSS sollte sowohl helle als auch dunkle Host-Designs unterstützen.

Folgenachricht senden

await bridge.sendMessage('Show me similar products.');

Verwenden Sie sendMessage, wenn eine Interaktion die Konversation fortsetzen soll.

Andere Aktion aufrufen

const result = await bridge.callTool('get-product-details', {
  id: product.id
});

Verwenden Sie callTool für eine explizite Interaktion, die ein anderes Aktionsergebnis erfordert. Übergeben Sie nur validierte Werte und behandeln Sie Fehler, ohne interne Details anzuzeigen.

Widget-Größe synchronisieren

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

Rufen Sie autoResize nach dem ersten Rendern auf, damit der Host auf Inhaltsänderungen reagieren kann.

Vorschau der Änderungen

Generierte Blöcke sollten Beispieldaten für die direkte Vorschau enthalten, wenn bridge nicht verfügbar ist.

So zeigen Sie eine lokale Vorschau des EDS-Projekts an:

npm install -g @adobe/aem-cli
aem up

Öffnen Sie die generierte Widget-Seite unter http://localhost:3000. Überprüfen Sie:

Stellen Sie dann die App für das Staging bereit und testen Sie sie mit Live structuredContent in der LLM-Plattform.

Veröffentlichen der Anpassung

Andere EDS-Setups

Wenn Sie die App nicht automatisch erstellt haben oder eine vorhandene EDS-Site integrieren möchten, lesen Sie Eigenes EDS-Projekt ​.