Cree Su Primera Aplicación Automáticamente create-first-app
La plataforma convierte su sitio web en una aplicación completamente funcional. Propone acciones, escribe código de controlador y prueba, crea widgets EDS y envía los archivos generados a dos repositorios de GitHub de su propiedad.
Se tardan aproximadamente 15 minutos en la generación. Al final de este tutorial, tendrá una aplicación implementada que puede probar en una plataforma LLM compatible como ChatGPT.
Recorrido: Confirme los requisitos → crear dos repositorios → crear la aplicación → revisar las acciones generadas → implementar en Fase → probar el complemento → conectar sistemas de producción.
Antes de empezar
Complete todos los requisitos de aplicaciones LLM antes de comenzar este tutorial.
Este tutorial crea una aplicación LLM para Frescopa Coffee.
Crear dos repositorios vacíos
La plataforma necesita dos repositorios vacíos. Cree ambas en la misma cuenta u organización de GitHub:
- Repositorio de controladores: almacena controladores de acciones y pruebas. Por ejemplo,
my-brand-llm-app. - Repositorio de EDS: almacena estilos y bloques de widgets generados. Por ejemplo,
my-brand-llm-app-eds.
Vaya a github.com/new para cada repositorio.
No inicialice ningún repositorio con README, .gitignore o una licencia. La plataforma prepara la estructura de proyecto necesaria.
Inicie la aplicación
-
Abra Aplicaciones LLM de Adobe y seleccione Crear aplicación.
-
Escriba LLM App Name y una descripción opcional.
-
Seleccione la región de Analytics.
note important IMPORTANT La región de Analytics no se puede cambiar una vez creada la aplicación. -
En Generar mi aplicación, seleccione Generar mi aplicación automáticamente.
-
En su sitio web, ingrese la dirección URL de su sitio web, incluido el protocolo
https://. La plataforma analiza este sitio para determinar acciones útiles y resultados de muestra representativos.
Dar acceso a LLM Apps a los repositorios
La aplicación Adobe LLM Apps GitHub proporciona acceso a LLM Apps a los repositorios que seleccione.
Organización conectada
Si la aplicación Adobe LLM Apps GitHub ya estaba instalada antes de crear los repositorios:
- Seleccione la organización conectada.
- Seleccione Administrar repositorios en GitHub.
- Agregue los dos repositorios a la instalación de la aplicación GitHub existente.
- Vuelva a LLM Apps y actualice las listas de repositorios.
Solo la primera conexión
Si la organización no aparece en el cuadro de diálogo:
- Seleccione Conectar una organización de GitHub.
- Instalar la aplicación Adobe LLM Apps GitHub.
- Elija Solo seleccione repositorios y seleccione los dos repositorios.
- Vuelva al cuadro de diálogo Crear aplicación LLM.
Si no puede instalar o actualizar la aplicación GitHub, pregunte al administrador de la organización.
Selección de los repositorios
-
En Repositorio de plantillas, seleccione la organización y el repositorio de controladores vacío.
-
En Repositorio EDS, seleccione la organización y el repositorio EDS vacío.
-
En Términos y condiciones, marque Acepto los Términos de Adobe Developer.
-
Seleccione Crear aplicación.
Completar la configuración de EDS
Cuando el repositorio EDS seleccionado está vacío, LLM Apps lo inicializa con la plantilla de AEM. A continuación, el cuadro de diálogo le pedirá que instale AEM Code Sync antes de intentar crear la aplicación de nuevo.
-
En el mensaje debajo del repositorio EDS, seleccione Instalar sincronización de código de AEM.
-
En GitHub, instale Sincronización de código de AEM y asígnele acceso al repositorio de EDS.
En la página de confirmación Sincronización de código de AEM registrada, en Usuarios del sitio, seleccione + Agregar usuario y agregue la dirección de correo electrónico que usa para iniciar sesión en LLM Apps con el rol admin. Luego selecciona Finalizar configuración en la parte inferior de la página.
-
Vuelva al cuadro de diálogo Crear aplicación LLM.
Debe ser administrador del sitio de EDS. Si el cuadro de diálogo indica que no es administrador:
-
Seleccione Abrir el administrador de AEM Live.
-
Agréguese como administrador del sitio de EDS haciendo clic en el botón + Agregar usuario(s).
-
Vuelva a LLM Apps, actualice el repositorio de EDS y seleccione Crear aplicación de nuevo.
Una vez superadas las comprobaciones del repositorio y del administrador, LLM Apps crea la aplicación y comienza a generar acciones.
Esperar a la generación de acciones
Vaya a la página Acciones, desde la izquierda. La página Acciones muestra Descubriendo acciones para tu experiencia de conversación mientras el agente analiza el sitio web y genera la aplicación. Generalmente tarda aproximadamente 15 minutos. Puede salir de esta página y volver más tarde.
Durante la generación, LLM Apps:
- Analiza el sitio web e identifica intenciones de cliente útiles.
- Crea metadatos de acción, incluidas descripciones y parámetros de entrada.
- Genera un controlador y prueba cada acción en el repositorio del controlador.
- Genera un widget EDS para cada acción en el repositorio EDS.
- Prepara las acciones para su revisión.
Los controladores generados utilizan inicialmente datos de ejemplo derivados del sitio web. Muestran la experiencia completa, pero no se conectan a los sistemas de producción.
Revisar las acciones generadas
Cuando termina la generación, la página Acciones muestra las acciones generadas y las vistas previas de los widgets. Cada acción tiene una acción generada por IA, necesita revisión.
Para cada acción:
- Seleccione Revisar.
- Revise el nombre, la descripción, los parámetros, las anotaciones, el controlador generado y el widget.
- Seleccione Marcar como revisado. Esto combina las solicitudes de extracción generadas.
- Vuelva a la página Acciones y repita los pasos para las acciones restantes.
Cuando se revisen todas las acciones, seleccione Ir a la página de la aplicación.
Implemente la aplicación
- Vuelva a la página Detalles de la aplicación.
- Seleccione Implementar.
- Seleccione Stage como entorno de destino.
- Seleccione Implementar.
Espere mientras LLM Apps prepara, compila y publica la aplicación.
Después de la implementación, la sección Probar la aplicación muestra la dirección URL del servidor MCP de ensayo. Seleccione Copiar URL.
Probar en ChatGPT
Seguir prueba en ChatGPT para crear un complemento con la URL del servidor MCP de ensayo.
Formule una pregunta que coincida con una de las acciones generadas. Compruebe que:
- ChatGPT selecciona la acción esperada.
- El widget procesa y contiene los datos de muestra esperados.
- Los controles de widget producen el comportamiento de seguimiento esperado.
- La respuesta del texto resume con precisión el resultado.
Ahora tiene una aplicación integral completamente funcional y en funcionamiento.
Preparar la aplicación para la producción
La aplicación generada utiliza datos de ejemplo. Antes de usarlo con los clientes:
- Conecte sus sistemas — personalice cada controlador generado para reemplazar los datos de ejemplo con llamadas a sus API o fuentes de datos.
- Proteger credenciales: almacene las direcciones URL y credenciales de la API en la configuración de tiempo de ejecución administrada, nunca en el código fuente ni en el widget JavaScript.
- Validar datos: valide argumentos de acción y respuestas de API, agregue tiempos de espera de solicitud y devuelva mensajes de error seguros.
- Actualice los widgets: mantenga cada widget alineado con el
structuredContentde su controlador y, a continuación, aplique los requisitos de marca y accesibilidad. Ver Personalizar un widget generado. - Pruebe los controladores: cubra la entrada válida, la entrada no válida, los resultados vacíos, los errores de API y la forma de datos esperada por el widget.
- Verificar en fase: vuelva a implementar y pruebe cada acción a través del complemento ChatGPT.
- Implementar en producción: después de que la prueba de fase se haya realizado correctamente, implemente en Producción y cree o actualice el complemento con la URL del servidor MCP de producción.
Para agregar una capacidad que la plataforma no creó, vea Crear una acción desde cero.