Erste App automatisch erstellen create-first-app

IMPORTANT
Adobe LLM Apps befindet sich derzeit in Beta.
Die hier gezeigten Funktionen, Workflows und Benutzeroberflächen stellen nicht unbedingt den endgültigen Status des Produkts dar. Um Beta beizutreten, senden Sie eine E-Mail an llm-apps-beta@adobe.com.

Die Plattform macht Ihre Website zu einer voll funktionsfähigen App. Es schlägt Aktionen vor, schreibt Handler-Code und Tests, erstellt EDS-Widgets und sendet die generierten Dateien an zwei GitHub-Repositorys, die Sie besitzen.

Die Generierung dauert ca. 15 Minuten. Am Ende dieses Tutorials verfügen Sie über eine bereitgestellte App, die Sie in einer unterstützten LLM-Plattform wie ChatGPT testen können.

Journey: Bestätigen Sie die Anforderungen, → zwei Repositorys → erstellen Sie die App → überprüfen Sie die generierten Aktionen, → Sie sie für das Staging bereitstellen → das Plug-in testen, → Produktionssysteme anzuschließen.

Bevor Sie beginnen

Schließen Sie alle LLM Apps-Anforderungen ab, bevor Sie mit diesem Tutorial beginnen.

In diesem Tutorial wird eine LLM-App für Frescopa Coffee erstellt.

Zwei leere Repositorys erstellen

Die Plattform benötigt zwei leere Repositorys. Erstellen Sie beide unter demselben GitHub-Konto oder derselben Organisation:

  • Handler-Repository - speichert Aktions-Handler und Tests. Beispiel: my-brand-llm-app.
  • EDS-Repository - speichert generierte Widget-Blöcke und -Stile. Beispiel: my-brand-llm-app-eds.

Navigieren Sie zu github.com/new für jedes Repository.

Initialisieren Sie keines der Repositorys mit einer README-, .gitignore- oder Lizenzdatei. Die Plattform bereitet die erforderliche Projektstruktur vor.

TIP
Verwenden Sie Repository-Namen, die die App und den Zweck jedes Repositorys identifizieren. Dadurch sind sie im Dialogfeld zur App-Erstellung leichter zu erkennen.

App starten

  1. Öffnen Sie Adobe LLM- und wählen Sie App erstellen aus.

  2. Geben Sie den LLM-App- und eine optionale Beschreibung ein.

  3. Wählen Sie die Analytics-Region aus.

    note important
    IMPORTANT
    Die Analytics-Region kann nach der Erstellung der App nicht mehr geändert werden.
  4. Wählen unter „Meine App" die Option Meine App automatisch erstellen aus.

  5. Geben in „Ihre" Ihre Website-URL einschließlich des https:// ein. Die Plattform analysiert diese Website, um nützliche Aktionen und repräsentative Beispielergebnisse zu ermitteln.

LLM-App erstellen — App-Details und „Meine App erstellen“ aktiviert

LLM Apps Zugriff auf die Repositorys gewähren

Die Adobe LLM Apps GitHub App bietet LLM Apps Zugriff auf die von Ihnen ausgewählten Repositorys.

NOTE
Die Verbindung einer GitHub ist ein einmaliges Setup. Wenn die Organisation bereits im Dialogfeld angezeigt wird, verwenden Sie Repos auf GitHub verwalten anstatt sie erneut zu verbinden.

Verbundene Organisation

Wenn die Adobe LLM Apps GitHub App bereits vor der Erstellung der Repositorys installiert war:

  1. Die verbundene Organisation auswählen.
  2. Wählen Sie Repositorys auf GitHub verwalten aus.
  3. Fügen Sie die beiden Repositorys zur vorhandenen GitHub App-Installation hinzu.
  4. Kehren Sie zu LLM Apps zurück und aktualisieren Sie die Repository-Listen.

Nur erstmalige Verbindung

Wenn die Organisation nicht im Dialogfeld angezeigt wird:

  1. Wählen Sie GitHub-Organisation verbinden aus.
  2. Installieren Sie die Adobe LLM Apps GitHub App.
  3. Wählen Sie Nur Repositorys und wählen Sie die beiden Repositorys aus.
  4. Kehren Sie zum Dialogfeld LLM-App erstellen zurück.

Wenn Sie die GitHub App nicht installieren oder aktualisieren können, wenden Sie sich an einen Organisationsadministrator.

Repositorys auswählen

  1. Wählen unter „Textbausteinrepository die Organisation und das leere Handler-Repository aus.

  2. Wählen Sie EDS-Repository die Organisation und das leere EDS-Repository aus.

    Meine App erstellen — Wählen Sie die GitHub-Organisation, das Textbausteinrepository und das EDS-Repository aus

  3. Aktivieren unter "" die Option Ich akzeptiere die Adobe Developer-.

  4. Wählen Sie App erstellen aus.

EDS-Einrichtung abschließen

Wenn das ausgewählte EDS-Repository leer ist, wird es von LLM Apps mit dem AEM-Textbaustein initialisiert. Im Dialogfeld werden Sie dann aufgefordert, AEM Code Sync zu installieren, bevor Sie versuchen, die App erneut zu erstellen.

  1. Wählen Sie in der Meldung unter dem EDS-Repository die Option AEM Code Sync installieren aus.

  2. Installieren Sie auf GitHub AEM Code Sync und gewähren Sie ihm Zugriff auf das EDS-Repository.

    Wählen Sie auf der ​AEM-Code-Synchronisierung registriert unter „Site-" die Option + Benutzer hinzufügen und fügen Sie die E-Mail-Adresse hinzu, mit der Sie sich bei LLM Apps mit der Rolle admin anmelden. Wählen Sie dann Setup beenden unten auf der Seite aus.

    AEM Code Sync registriert — Fügen Sie sich als Site-Benutzer mit der Administratorrolle hinzu

  3. Kehren Sie zum Dialogfeld LLM-App erstellen zurück.

LLM-App erstellen — Leeres EDS-Repository initialisiert und AEM-Code-Synchronisierung erforderlich

Sie müssen Administrator für die EDS-Site sein. Wenn im Dialogfeld gemeldet wird, dass Sie kein Administrator sind:

LLM-App erstellen — EDS-Administratorzugriff erforderlich

  1. Wählen Sie AEM Live Admin öffnen.

  2. Fügen Sie sich als Administrator für die EDS-Website hinzu, indem Sie auf die Schaltfläche + Benutzer hinzufügen.

    LLM-App erstellen — Als EDS-Admin hinzufügen

  3. Kehren Sie zu LLM Apps zurück, aktualisieren Sie das EDS-Repository und wählen Sie erneut App erstellen aus.

Nachdem die Repository- und Administrator-Prüfungen bestanden wurden, erstellt LLM Apps die App und beginnt mit der Erstellung von Aktionen.

Auf die Erstellung von Aktionen warten

Gehen Sie Seite Aktionen“ von links. Die Seite Aktionen zeigt "für Ihr Gesprächserlebnis“ an während der Agent die Website analysiert und die App generiert. Die Generierung dauert in der Regel etwa 15 Minuten. Sie können diese Seite verlassen und später zurückkehren.

Aktionen — Empfehlungen werden generiert

Während der Generierung LLM Apps:

  1. Analysiert die Website und identifiziert nützliche Kundenabsichten.
  2. Erstellt Aktionsmetadaten, einschließlich Beschreibungen und Eingabeparametern.
  3. Generiert einen Handler und testet für jede Aktion im Handler-Repository.
  4. Erzeugt ein EDS-Widget für jede Aktion im EDS-Repository.
  5. Bereitet die Aktionen zur Überprüfung vor.

Die generierten Handler verwenden zunächst Beispieldaten, die von der Website abgeleitet wurden. Sie demonstrieren das gesamte Erlebnis, stellen jedoch keine Verbindung zu Ihren Produktionssystemen her.

Überprüfen der generierten Aktionen

Nach Abschluss der Generierung zeigt die Seite Aktionen die generierten Aktionen und Widget-Vorschauen an. Jede Aktion hat eine KI-generierte Aktion, muss überprüft.

Aktionen - generierte Aktionen, die zur Überprüfung bereit sind

Für jede Aktion:

  1. Wählen Sie Überprüfen aus.
  2. Überprüfen Sie den Namen, die Beschreibung, die Parameter, die Anmerkungen, den generierten Handler und das Widget.
  3. Wählen Sie Als geprüft markieren aus. Dadurch werden die generierten Pull-Anforderungen zusammengeführt.
  4. Kehren Sie zur Seite Aktionen zurück und wiederholen Sie den Vorgang für die verbleibenden Aktionen.

Erzeugte Aktion - bereit, als geprüft zu markieren

Wenn alle Aktionen überprüft wurden, wählen Sie Zur App-Seite wechseln aus.

Aktionen - alle generierten Aktionen überprüft

NOTE
Generierter Code ist ein Ausgangspunkt, dessen Besitzer Sie sind. Sie können Aktionsmetadaten, Handler, Tests, Widget-JavaScript und Widget-Stile nach der Überprüfung ändern.

Bereitstellen der App

  1. Kehren Sie zur App-Detailseite zurück.
  2. Wählen Sie Bereitstellen aus.
  3. Wählen Sie Staging als Zielumgebung aus.
  4. Wählen Sie Bereitstellen aus.

Bereitstellen - Wählen Sie die Staging-Umgebung aus

Warten Sie, während LLM Apps die App vorbereitet, erstellt und veröffentlicht.

Bereitstellen - Bereitstellungs-Pipeline wird ausgeführt

Bereitstellen - erfolgreiche Staging-Bereitstellung

Nach der Bereitstellung wird Abschnitt „App testen die Staging-MCP-Server-URL angezeigt. Wählen Sie URL kopieren aus.

Anwendungsdetails - Kopieren Sie die Staging-MCP-Server-URL

Test in ChatGPT

Folgen Sie Testen in ChatGPT, um ein Plug-in mithilfe der Staging-MCP-Server-URL zu erstellen.

Stellen Sie eine Frage, die einer der generierten Aktionen entspricht. Überprüfen Sie, ob:

  • ChatGPT wählt die erwartete Aktion aus.
  • Das Widget wird gerendert und enthält die erwarteten Beispieldaten.
  • Widget-Steuerelemente erzeugen das erwartete Folgeverhalten.
  • Die Textantwort fasst das Ergebnis genau zusammen.

ChatGPT — generierte Antwort des LLM-App-Plug-ins

Sie verfügen jetzt über eine voll funktionsfähige, funktionierende End-to-End-App.

Produktionsbereit machen

Die generierte App verwendet Beispieldaten. Vor der Verwendung mit Kunden:

  1. Systeme verbinden - jeden generierten Handler anpassen um Beispieldaten durch Aufrufe an Ihre APIs oder Datenquellen zu ersetzen.
  2. Anmeldeinformationen schützen - API-URLs und Anmeldeinformationen werden in der verwalteten Laufzeitkonfiguration gespeichert, nie im Quell-Code oder Widget-JavaScript.
  3. Daten validieren - Validieren von Aktionsargumenten und API-Antworten, Hinzufügen von Anfrage-Timeouts und Rückgeben sicherer Fehlermeldungen.
  4. Widgets aktualisieren - Halten Sie jedes Widget an den structuredContent seines Handlers ausgerichtet und wenden Sie dann Ihre Branding- und Barrierefreiheitsanforderungen an. Siehe Anpassen eines generierten Widgets.
  5. Handler testen - umfasst gültige Eingaben, ungültige Eingaben, leere Ergebnisse, API-Fehler und die vom Widget erwartete Datenform.
  6. In Staging überprüfen - Stellen Sie jede Aktion über das Plug-in ChatGPT erneut bereit und testen Sie sie.
  7. In Produktion bereitstellen - Nach erfolgreichem Staging-Test können Sie das Plug-in in der Produktion bereitstellen und mit der Produktions-MCP-Server-URL erstellen oder aktualisieren.

Informationen zum Hinzufügen einer Funktion, die von der Plattform nicht erstellt wurde, finden Sie unter Erstellen einer neuen Aktion.

recommendation-more-help
llm-apps-help-main-toc