Creare Automaticamente La Prima App create-first-app

IMPORTANT
Adobe LLM Apps è attualmente in Beta.
Le funzioni, i flussi di lavoro e l’interfaccia utente mostrati qui non rappresentano necessariamente lo stato finale del prodotto. Per partecipare al Beta, invia un’e-mail a llm-apps-beta@adobe.com.

La piattaforma trasforma il tuo sito web in un’app completamente funzionale. Propone azioni, scrive il codice e i test dell’handler, crea widget EDS e invia i file generati a due archivi GitHub di tua proprietà.

Attendere circa 15 minuti per la generazione. Al termine di questa esercitazione, verrà distribuita un’app che sarà possibile testare in una piattaforma LLM supportata, ad esempio ChatGPT.

Percorso: Conferma i requisiti → creare due archivi → creare l’app → esaminare le azioni generate → distribuire in Stage → testare il plug-in → connettere i sistemi di produzione.

Prima di iniziare

Completa tutti i requisiti delle app LLM prima di iniziare questa esercitazione.

Questa esercitazione crea un’app LLM per Frescopa Coffee.

Creare due archivi vuoti

La piattaforma ha bisogno di due archivi vuoti. Creare entrambi con lo stesso account o organizzazione GitHub:

  • Archivio gestori: archivia i gestori azioni e i test. Ad esempio, my-brand-llm-app.
  • Archivio EDS: memorizza gli stili e i blocchi di widget generati. Ad esempio, my-brand-llm-app-eds.

Vai a github.com/new per ogni archivio.

Non inizializzare l’archivio con una licenza README, .gitignore o. La piattaforma prepara la struttura di progetto richiesta.

TIP
Utilizza i nomi dei repository che identificano l’app e lo scopo di ciascun repository. Questo ne semplifica il riconoscimento nella finestra di dialogo per la creazione dell’app.

Avviare l’app

  1. Apri App Adobe LLM e seleziona Crea app.

  2. Immettere il nome dell’app LLM e una descrizione facoltativa.

  3. Seleziona l’area geografica di Analytics.

    note important
    IMPORTANT
    Una volta creata l’app, non è possibile modificare l’area di analisi.
  4. In Genera la mia app, seleziona Genera automaticamente la mia app.

  5. In sito Web, immettere l’URL del sito Web, incluso il protocollo https://. La piattaforma analizza questo sito per determinare azioni utili e risultati di esempio rappresentativi.

Crea app LLM: dettagli app e la compilazione dell'app sono abilitati

Concedi a LLM Apps l’accesso agli archivi

L’app Adobe LLM Apps GitHub consente a LLM Apps di accedere agli archivi selezionati.

NOTE
La connessione di un'organizzazione GitHub è una configurazione una tantum. Se l'organizzazione è già visualizzata nella finestra di dialogo, utilizza Gestisci repository su GitHub invece di riconnetterti.

Organizzazione connessa

Se l’app GitHub delle app Adobe LLM è già stata installata prima della creazione degli archivi:

  1. Selezionare l’organizzazione connessa.
  2. Seleziona Gestisci repository su GitHub.
  3. Aggiungere i due archivi all’installazione dell’app GitHub esistente.
  4. Tornare a LLM Apps e aggiornare gli elenchi del repository.

Solo prima connessione

Se l’organizzazione non viene visualizzata nella finestra di dialogo:

  1. Seleziona Connetti un’organizzazione GitHub.
  2. Installare l’app GitHub delle app Adobe LLM.
  3. Scegliere Seleziona solo archivi e selezionare i due archivi.
  4. Torna alla finestra di dialogo Crea app LLM.

Se non riesci a installare o aggiornare l’app GitHub, rivolgiti a un amministratore dell’organizzazione.

Selezionare gli archivi

  1. In Repository boilerplate, selezionare l’organizzazione e l’archivio del gestore vuoto.

  2. In Archivio EDS, selezionare l’organizzazione e il repository EDS vuoto.

    Genera la mia app — seleziona l'organizzazione GitHub, l'archivio standard e l'archivio EDS

  3. In Termini e condizioni, seleziona Accetto i termini di Adobe Developer.

  4. Selezionare Crea app.

Completare la configurazione EDS

Quando l’archivio EDS selezionato è vuoto, LLM Apps lo inizializza con la boilerplate di AEM. La finestra di dialogo chiede quindi di installare AEM Code Sync prima di riprovare a creare l’app.

  1. Nel messaggio seguente all’archivio EDS, seleziona Installa AEM Code Sync.

  2. In GitHub, installare AEM Code Sync e concedergli l’accesso all’archivio EDS.

    Nella pagina di conferma di Sincronizzazione codice AEM registrato, in Utenti del sito, selezionare + Aggiungi utente e aggiungere l’indirizzo di posta elettronica utilizzato per accedere a LLM Apps con il ruolo amministratore. Quindi selezionare Termina installazione nella parte inferiore della pagina.

    Sincronizzazione codice AEM registrata. Aggiungere se stessi come utente del sito con ruolo di amministratore

  3. Torna alla finestra di dialogo Crea app LLM.

Crea app LLM: archivio EDS vuoto inizializzato e sincronizzazione codice AEM richiesta

È necessario essere un amministratore per il sito EDS. Se la finestra di dialogo indica che non sei un amministratore:

Crea app LLM: è richiesto l'accesso dell'amministratore EDS

  1. Seleziona Apri AEM Live Admin.

  2. Per aggiungerti come amministratore per il sito EDS, fai clic sul pulsante + Aggiungi utente/i.

    Crea app LLM — aggiungi come amministratore EDS

  3. Torna a LLM Apps, aggiorna l’archivio EDS e seleziona di nuovo Crea app.

Dopo il superamento dei controlli dell’archivio e dell’amministratore, LLM Apps crea l’app e avvia la generazione di azioni.

Attendi generazione azioni

Vai alla pagina Azioni, da sinistra. Nella pagina Azioni è visualizzato Individuazione delle azioni per l’esperienza di conversazione durante l’analisi del sito Web e la generazione dell’app da parte dell’agente. La generazione richiede in genere circa 15 minuti. Puoi uscire da questa pagina e tornare in un secondo momento.

Azioni — generazione di consigli

Durante la generazione, LLM Apps:

  1. Analizza il sito web e identifica gli intenti utili dei clienti.
  2. Crea metadati di azione, incluse descrizioni e parametri di input.
  3. Genera un gestore e verifica ogni azione nell’archivio del gestore.
  4. Genera un widget EDS per ogni azione nell’archivio EDS.
  5. Prepara le azioni per la revisione.

I gestori generati inizialmente utilizzano dati di esempio derivati dal sito web. Dimostrano l’esperienza completa ma non si connettono ai sistemi di produzione.

Esamina le azioni generate

Al termine della generazione, nella pagina Azioni vengono visualizzate le azioni generate e le anteprime dei widget. Ogni azione ha un azione generata dall’intelligenza artificiale, che richiede un distintivo.

Azioni — azioni generate pronte per la revisione

Per ogni azione:

  1. Seleziona Rivedi.
  2. Rivedi il nome, la descrizione, i parametri, le annotazioni, il gestore generato e il widget.
  3. Seleziona Contrassegna come revisionato. In questo modo vengono unite le richieste pull generate.
  4. Torna alla pagina Azioni e ripeti per le azioni rimanenti.

Azione generata - pronta per contrassegnare come rivista

Dopo aver esaminato tutte le azioni, selezionare Vai alla pagina app.

Azioni — tutte le azioni generate sono state esaminate

NOTE
Il codice generato è un punto di partenza di tua proprietà. Puoi modificare i metadati delle azioni, i gestori, i test, il widget JavaScript e gli stili di widget dopo la revisione.

Distribuire l’app

  1. Torna alla pagina Dettagli app.
  2. Selezionare Distribuisci.
  3. Seleziona Stage come ambiente di destinazione.
  4. Selezionare Distribuisci.

Distribuisci — seleziona l'ambiente di staging

LLM Apps sta preparando, generando e pubblicando l’app. Attendi.

Distribuzione: pipeline di distribuzione in esecuzione

Distribuzione: distribuzione di staging completata

Dopo la distribuzione, nella sezione Test dell’app viene visualizzato l’URL del server MCP dell’area di gestione temporanea. Seleziona Copia URL.

Dettagli app — copia l'URL del server MCP dell'area di gestione temporanea

Prova in ChatGPT

Segui Test in ChatGPT per creare un plug-in utilizzando l’URL del server MCP di staging.

Fai una domanda che corrisponda a una delle azioni generate. Verifica che:

  • ChatGPT seleziona l’azione prevista.
  • Il widget esegue il rendering e contiene i dati di esempio previsti.
  • I controlli Widget producono il comportamento di follow-up previsto.
  • La risposta testuale riepiloga accuratamente il risultato.

ChatGPT — risposta del plug-in dell'app LLM generata

Ora disponi di un’app end-to-end completamente funzionante.

Prepara l’app per la produzione

L’app generata utilizza dati di esempio. Prima di utilizzarlo con i clienti:

  1. Connetti i sistemipersonalizza ogni gestore generato per sostituire i dati di esempio con chiamate alle API o alle origini dati.
  2. Proteggi credenziali — archivia URL API e credenziali in una configurazione runtime gestita, mai in codice sorgente o widget JavaScript.
  3. Convalida dati — convalida argomenti azione e risposte API, aggiungi timeout richiesta e restituisce messaggi di errore sicuri.
  4. Aggiorna i widget. Mantenere ogni widget allineato al relativo structuredContent del gestore, quindi applicare i requisiti di branding e accessibilità. Vedi Personalizzare un widget generato.
  5. Verificare i gestori. Verificare l’input valido, l’input non valido, i risultati vuoti, gli errori API e la forma dati prevista dal widget.
  6. Verifica in Stage — ridistribuisci e verifica ogni azione tramite il plug-in ChatGPT.
  7. Distribuisci in produzione — dopo il completamento del test dello staging, distribuisci in produzione e crea o aggiorna il plug-in con l’URL del server MCP di produzione.

Per aggiungere una funzionalità non creata dalla piattaforma, vedere Creare un’azione da zero.

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