Traer su propio proyecto EDS bring-your-own-eds

Utilice esta guía cuando ya tenga un proyecto de Edge Delivery Services (EDS) o cuando haya creado una aplicación sin crearla automáticamente.

Si la plataforma creó el widget automáticamente, sigue Personalizar un widget generado. El proyecto generado ya incluye los archivos SDK, el bloque, el contenido y la configuración de acción que se describen aquí.

Recorrido: Prepare el proyecto EDS → instale el → de SDK para generar y publicar el bloque → configurar la acción → implementar y probar.

Antes de empezar

Necesita:

Instalación del SDK de aplicaciones LLM

Desde la raíz del proyecto EDS:

npm install @adobe/llmapps-sdk

El paquete copia el punto de entrada del widget y la implementación del puente en el proyecto:

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

La URL del script usada por la acción apunta a scripts/aem-embed.js.

Creación del bloque de widgets

Cree un bloque para la acción:

blocks/
└── search-products/
    ├── search-products.js
    └── search-products.css

Exporte la función EDS decorate estándar con el puente conectado como segundo argumento:

export default async function decorate(block, bridge) {
  if (bridge) {
    bridge.applyHostStyles();
  }

  const result = bridge ? await bridge.toolResult : null;
  const products = result?.structuredContent?.products ?? [];

  const list = document.createElement('ul');
  products.forEach((product) => {
    const item = document.createElement('li');
    item.textContent = String(product.name ?? 'Product');
    list.append(item);
  });

  block.replaceChildren(list);

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

Utilice API de DOM que codifican valores de texto. No concatene datos externos en HTML.

Crear y publicar la página del widget

Cree una página EDS para el widget y añada el bloque a esa página. Publique la página.

La URL de la página activa se convierte en la URL del widget de la acción:

https://main--<repo>--<owner>.aem.live/<widget-page>

La ruta de la página no necesita coincidir con el nombre de la acción, pero una convención uniforme facilita el mantenimiento del proyecto.

Configuración de CORS

El widget carga la página EDS además de scripts, estilos, bloques y medios en los orígenes. Configure el encabezado para el sitio de EDS:

{
  "/**": [
    {
      "key": "access-control-allow-origin",
      "value": "<allowed-host-origin>"
    }
  ]
}

Utilice el origen de host específico requerido por la plataforma LLM admitida. Use * solo cuando el widget sea intencionalmente público, no utilice solicitudes de origen cruzado con credenciales y los requisitos de seguridad lo permitan.

Para obtener detalles de configuración de EDS, consulte Servicio de configuración.

Configurar la acción

En LLM Apps, abra la acción y seleccione Metadatos de widget.

Escriba

Configure los dominios CSP y los permisos de explorador con el menor privilegio. Añada solo los orígenes y las capacidades que requiere el widget.

Para ver las definiciones de los campos, consulte Campos de acción y widget.

Prueba de la integración

Si la página funciona directamente pero no en la plataforma LLM, compruebe CORS, CSP, HTTPS y la forma structuredContent. Ver Solución de problemas.