Personalizar un widget generado customize-generated-widget

La plataforma crea un widget EDS para cada acción generada. El widget ya recibe el resultado de la acción, procesa datos de muestra, aplica el estilo de host y está vinculado a la acción en LLM Apps.

Comience por probar el widget generado. A continuación, personalice su contrato de datos, su interacción y su diseño visual.

Recorrido: Busque el bloque generado → alinear su contrato de datos → personalizar de forma segura → previsualizar localmente → implementar y probar.

Búsqueda del widget generado

Abra el repositorio EDS seleccionado al crear la aplicación. Cada widget generado es un bloque EDS:

blocks/
└── <action-name>/
    ├── <action-name>.js
    └── <action-name>.css

La plataforma también configura las URL de los widgets y los archivos SDK compatibles. No es necesario crear un segundo proyecto EDS ni volver a introducir esos valores para personalizar un widget generado.

Cómo conecta el SDK de aplicaciones LLM el widget

El paquete @adobe/llmapps-sdk conecta el widget EDS al host LLM. El repositorio EDS generado incluye:

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

aem-embed.js establece la conexión con el host, carga la página EDS y llama al bloque:

export default async function decorate(block, bridge) {
  // Customize the widget here.
}

No importe SDK en el bloque. Se proporcionó el(la) bridge conectado(a) automáticamente. Permite al widget:

Esta guía describe los métodos comunes de puente. Consulte el paquete @adobe/llmapps-sdk para obtener la API completa.

Comprensión del contrato de datos

El controlador de acciones devuelve structuredContent y el bloque lo lee de bridge.toolResult.

// Handler result
return {
  content: [{ type: 'text', text: `Found ${products.length} products.` }],
  structuredContent: { products, total: products.length }
};

// EDS block
export default async function decorate(block, bridge) {
  const result = bridge ? await bridge.toolResult : null;
  const products = result?.structuredContent?.products ?? [];
  // Render products.
}

Cuando cambie structuredContent, actualice el controlador y el widget juntos. Consulte Personalizar un controlador generado para obtener el contrato de devolución completo.

Procesar datos externos de forma segura

Trate la salida del controlador como datos que no son de confianza. Prefiera las API de DOM como textContent en lugar de insertar valores de respuesta en innerHTML.

function createProductCard(product, bridge) {
  const card = document.createElement('article');
  card.className = 'product-card';

  const title = document.createElement('h3');
  title.textContent = String(product.name ?? 'Product');

  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Tell me more';
  button.addEventListener('click', () => {
    if (bridge && product.id) {
      bridge.sendMessage(`Show me details for product ${String(product.id)}`);
    }
  });

  card.append(title, button);
  return card;
}

Valide las direcciones URL antes de asignarlas a href o src y permita solamente los protocolos requeridos por la experiencia.

Uso del puente host

EDS pasa un puente conectado a decorate(block, bridge). Guarde las llamadas de puente para que el bloque también se procese durante la previsualización directa de EDS.

Aplicar estilos de host

if (bridge) {
  bridge.applyHostStyles();
}

Esto aplica la tipografía del host y las variables de tema. El widget CSS debe admitir temas host claros y oscuros.

Enviar un mensaje de seguimiento

await bridge.sendMessage('Show me similar products.');

Use sendMessage cuando una interacción deba continuar la conversación.

Llamar a otra acción

const result = await bridge.callTool('get-product-details', {
  id: product.id
});

Use callTool para una interacción explícita que necesite otro resultado de acción. Pasar solo valores validados y controlar errores sin exponer detalles internos.

Mantener sincronizado el tamaño del widget

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

Llame a autoResize después del procesamiento inicial para que el host pueda responder a los cambios de contenido.

Previsualice los cambios

Los bloques generados deben incluir datos de ejemplo para la vista previa directa cuando bridge no esté disponible.

Para previsualizar el proyecto EDS localmente:

npm install -g @adobe/aem-cli
aem up

Abra la página del widget generado en http://localhost:3000. Verificar:

A continuación, implemente la aplicación para ensayo y prueba con structuredContent en directo en la plataforma LLM.

Publicación de la personalización

Otras configuraciones de EDS

Si no generó la aplicación automáticamente o quiere integrar un sitio EDS existente, vea Traer su propio proyecto EDS.