Incorporación de Beta beta-onboarding
Como participante del programa Beta de Adobe LLM Apps, recibirá un correo electrónico con dos archivos zip y una referencia de configuración de la aplicación. Siga los pasos a continuación para activar la aplicación.
Antes de empezar
Antes de sumergirse en los pasos, familiarícese con los conceptos clave utilizados en esta guía. Le ahorrará tiempo y ayudará a que todo encaje en su lugar.
Aplicación LLM: su asistente de marca con el que los usuarios interactúan dentro de ChatGPT u otras plataformas LLM.
Acción: una funcionalidad que ofrece tu aplicación. Por ejemplo, “Buscar un distribuidor” o “Examinar productos”. El LLM invoca cada acción cuando el usuario hace una pregunta relevante.
Controlador de acciones: el código que se ejecuta cuando se invoca una acción. Puede llamar a sus API, recuperar datos activos o devolver datos estáticos. Los controladores de muestra proporcionados por Adobe devuelven datos codificados para que pueda verificar la configuración de principio a fin antes de conectar su backend real.
Widget (la respuesta visual mostrada al usuario): una tarjeta, un carrusel, una tabla o cualquier interfaz de usuario personalizada representada junto a la respuesta de texto de LLM.
Referencia de configuración de la aplicación: un archivo que proporciona Adobe y que indica exactamente lo que debe especificarse para cada acción al configurar la aplicación.
Paso 1: Insertar los archivos proporcionados en GitHub
Adobe proporciona dos archivos zip por correo electrónico:
- Código de aplicación (
<project-name>.zip): los controladores de acciones que se ejecutan en Adobe I/O Runtime y alimentan la lógica de la aplicación. Los implementará tal cual para que la aplicación funcione de extremo a extremo y los actualizará más tarde para conectar su servidor real. - Proyecto EDS (
<project-name>-eds.zip): el código de front-end para los widgets. Adobe los ha creado previamente para usted; esta es su base de código para poseer, personalizar y diseñar para que coincida con su marca.
Cree dos nuevos repositorios vacíos en GitHub (uno por archivo), luego descomprima cada archivo y envíelo. Se recomienda nombrar cada repositorio después del archivo zip correspondiente: <project-name> para el código de la aplicación y <project-name>-eds para el proyecto EDS.
<your-github-org> hace referencia a su nombre de usuario personal GitHub o a una organización GitHub, independientemente de la cuenta que sea propietaria de los repositorios.
Repositorio de código de aplicación: descomprima el archivo, inicialice un repositorio de Git local y envíelo a GitHub:
# Unzip and enter the folder
unzip <project-name>.zip
cd <project-name>
# Initialize and push
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:<your-github-org>/<your-repo>.git
git push -u origin main
Repositorio EDS — repita los mismos pasos para el archivo EDS, señalando al segundo repositorio:
unzip <project-name>-eds.zip
cd <project-name>-eds
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:<your-github-org>/<your-eds-repo>.git
git push -u origin main
Paso 2: Crear una aplicación LLM
Vaya a experience.adobe.com/llm-apps/ y haga clic en Crear aplicación LLM.
Rellene los detalles de la aplicación con los valores de la sección detalles de la aplicación de la referencia de configuración de la aplicación:
- Nombre de aplicación LLM
- Descripción de la aplicación LLM
- Su sitio web
En Región de datos de Analytics, seleccione la región donde se almacenarán los datos de Analytics. Este(a) no se puede cambiar después de crear la aplicación.
En Repositorio, seleccione la organización GitHub y el repositorio de código de la aplicación que insertó anteriormente.
Deje Sugerir acciones automáticamente basándose en su sitio web sin marcar; configurará las acciones manualmente.
Acepte los Términos de Adobe Developer y luego haga clic en Crear aplicación.
Paso 3: Ponga en marcha sus widgets
En este paso configuró el proyecto EDS proporcionado por Adobe y lo publicó a través de DA.live: la capa de creación y CDN de Adobe. Cada documento publicado se convierte en el widget que se muestra al usuario cuando se invoca una acción.
Paso 3.1: Conectar el repositorio EDS a DA.live
- Vaya a github.com/apps/aem-code-sync. Si la aplicación aún no está instalada, haga clic en Instalar. Si ya está instalado, haga clic en Configurar y agregue
<your-eds-repo>a la lista de repositorios a los que puede acceder. - Después de la instalación, aterriza en una página de confirmación AEM Code Syncregistered. En Qué sigue → Crear tu contenido, haz clic en el vínculo DA.live.
- En la pantalla Contenido de demostración, seleccione Ninguno y haga clic en Hacer algo maravilloso.
- Se le dirigirá a la vista de autor de DA.live de su sitio.
Paso 3.2: crear un documento DA.live para cada acción
En DA.live debe crear un documento por acción. Una vez publicado, cada documento se convierte en el widget que se muestra al usuario cuando se invoca esa acción.
Para cada acción:
- En DA.live, cree un nuevo documento en la raíz del sitio y asígnele el nombre que se especifica en la referencia de configuración de la aplicación (consulte la sección DA.livedocumentos).
- En el documento, use la barra lateral izquierda y haga clic en Bloque para insertar un bloque nuevo.
- Establezca el encabezado del bloque en el nombre del bloque especificado en la referencia de configuración de la aplicación (consulte la sección DA.livedocumentos).
- Publique el documento con el botón Publicar (el icono del avión de papel en la barra de herramientas superior).
Una vez publicado, se puede acceder a cada documento en https://main--<your-eds-repo>--<your-github-org>.aem.live/<document-name>. Esta URL es la que introducirá en el campo URL del widget al configurar cada acción en el paso 4.
Paso 3.3: Configuración de los encabezados CORS para el sitio EDS
Para permitir que las plataformas LLM carguen sus widgets de origen cruzado, debe agregar un encabezado Access-Control-Allow-Origin a su sitio EDS.
Vaya al Editor de encabezados HTTP en tools.aem.live/tools/headers-edit/index.html.
- Escriba su Organización (
<your-github-org>) y Sitio (su nombre de repositorio EDS) y haga clic en Buscar. Se le pedirá que autentique y autorice el acceso a su sitio. - En la ruta
/**, haga clic en Agregar encabezado. - Establezca el nombre del encabezado en
Access-Control-Allow-Originy el valor en*. - Haga clic en Guardar.
Para obtener documentación completa sobre los encabezados HTTP personalizados en AEM Edge Delivery Services, consulte aem.live/docs/custom-headers.
Después de guardar los encabezados, almacene en déclencheur una sincronización de código para propagar los cambios a todos los archivos:
curl -X POST "https://admin.hlx.page/code/<your-github-org>/<your-eds-repo>/main/*"
Paso 4: Agregar acciones
En la interfaz de usuario de LLM Apps, abra la aplicación y vaya a Actions en la barra lateral izquierda. Haga clic en + para crear una nueva acción. Repita el proceso con cada acción descrita en la referencia de configuración de la aplicación (consulte las secciones Acción 1, Acción 2, Acción 3).
Pestaña Acción
- Nombre de acción y Descripción — utilizados por las plataformas LLM para decidir cuándo invocar la acción. Use los valores exactos de la sección Ficha de acciones en la referencia de configuración de la aplicación.
- Parámetros de entrada: nombre, tipo y descripción para cada parámetro. Use los valores de la sección Ficha de acciones en la referencia de configuración de la aplicación.
Pestaña Metadatos del widget
- Tipo — seleccione EDS.
Expanda Configuración de CSP y rellene:
- CSP — Conectar dominios — usa los valores de la sección ficha Metadatos de widget en la referencia de configuración de la aplicación.
- CSP — Dominios de recursos — utiliza los valores de la sección ficha Metadatos de widget en la referencia de configuración de la aplicación.
Pestaña Widget Builder
En Origen del widget, seleccione Usar un widget existente y rellene:
- URL de script: usa el valor de la sección Pestaña de metadatos de widget en la referencia de configuración de la aplicación.
- URL del widget: use el valor de la sección Pestaña de metadatos del widget en la referencia de configuración de la aplicación.
Haga clic en Crear acción. La acción aparece como una tarjeta en la página Acciones con un distintivo EDS y un recuento de parámetros.
Paso 5: Implementación
Una vez configuradas todas las acciones, ve a la página Detalles de la aplicación y haz clic en Implementar en la esquina superior derecha.
Seleccione el entorno de destino y haga clic en Implementar. La canalización sigue cuatro pasos: preparar las credenciales, iniciar la implementación, crear la aplicación desde el repositorio y publicarla en Adobe I/O Runtime.
Una vez completada, desplácese hasta la sección Probar la aplicación de la página Detalles de la aplicación y copie la URL del servidor MCP; necesitará que registre su aplicación en ChatGPT.
Paso 6: Agregar la aplicación a ChatGPT
Para agregar aplicaciones personalizadas a ChatGPT se requiere una suscripción a Pro, Business o Enterprise. Los planes Gratis y Plus no admiten aplicaciones MCP personalizadas.
-
En ChatGPT, haz clic en el avatar de tu perfil y ve a Configuración.
-
Seleccione Aplicaciones en la barra lateral, haga clic en Configuración avanzada y habilite Modo de desarrollador.
-
Vaya a Configuración → Aplicaciones y haga clic en Crear aplicación.
-
Pegue la URL del servidor MCP copiada de LLM Apps, establezca Autenticación en Sin autenticación, marque la casilla de verificación de confirmación y haga clic en Crear.
Su aplicación aparece en Aplicaciones habilitadas con un distintivo de DEV.
Inicie una nueva conversación, adjunte la aplicación con el botón + o escribiendo @ seguido del nombre de la aplicación y haga una pregunta que coincida con una de las acciones configuradas.
Siguientes pasos
La aplicación de ejemplo que ha implementado utiliza datos codificados. Para convertirla en una experiencia lista para la producción:
- Conecte sus API: actualice los controladores de acciones en su repositorio de código de aplicación para llamar a sus API, bases de datos o servicios reales. Cada controlador vive en
actions/<action-name>/index.js. - Revise y perfeccione sus widgets: abra su proyecto EDS, ajuste los estilos de bloque y el diseño para que coincidan con su marca y verifique que el widget se procese correctamente con los datos activos.
- Volver a implementar: una vez que se actualicen los controladores y widgets, inserta los cambios en GitHub y haz clic en Implementar en la interfaz de usuario de LLM Apps para publicar la nueva versión.
- Enviar para publicación: cuando esté satisfecho con la experiencia, envíe su aplicación para que se revise a través del complemento ChatGPT o del proceso de publicación del conector. Adobe no controla este proceso. Consulte la documentación de la plataforma LLM para conocer los requisitos y plazos de envío.