Traga seu próprio projeto EDS bring-your-own-eds

Use este guia quando você já tiver um projeto do Edge Delivery Services (EDS) ou quando tiver criado um aplicativo sem criá-lo automaticamente.

Se a plataforma criou seu widget automaticamente, siga Personalizar um widget gerado. O projeto gerado já inclui os arquivos do SDK, o bloco, o conteúdo e a configuração de ação descritos aqui.

Jornada: Prepare o projeto do EDS → instale o SDK → crie e publique o bloco → configure a ação → implante e teste.

Antes de começar

Você precisa:

Instalar o SDK de Aplicativos LLM

Na raiz do projeto EDS:

npm install @adobe/llmapps-sdk

O pacote copia o ponto de entrada do widget e a implementação da ponte no projeto:

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

A URL de Script usada pela ação aponta para scripts/aem-embed.js.

Criar o bloco de widget

Criar um bloco para a ação:

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

Exporte a função EDS decorate padrão com a ponte conectada como seu 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);
  }
}

Use APIs DOM que codificam valores de texto. Não concatene dados externos no HTML.

Criar e publicar a página do widget

Crie uma página EDS para o widget e adicione o bloco a essa página. Publique a página.

O URL da página ao vivo se torna o URL do Widget da ação:

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

O caminho da página não precisa corresponder ao nome da ação, mas uma convenção consistente facilita a manutenção do projeto.

Configurar CORS

O widget carrega a página do EDS, além de scripts, estilos, blocos e mídia nas origens. Configure o cabeçalho para o site de EDS:

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

Use a origem de host específica exigida pela plataforma LLM compatível. Use o * somente quando o widget for intencionalmente público, não usar solicitações entre origens credenciadas e seus requisitos de segurança permitirem.

Para obter detalhes sobre a configuração de EDS, consulte o Serviço de Configuração.

Configurar a ação

Em LLM Apps, abra a ação e selecione Metadados do widget.

Insira:

Configure domínios da CSP e permissões de navegador usando o privilégio mínimo. Adicione somente as origens e recursos exigidos pelo widget.

Para obter as definições de campo, consulte Campos de ação e widget.

Testar a integração

Se a página funcionar diretamente, mas não na plataforma LLM, verifique CORS, CSP, URLs HTTPS e a forma structuredContent. Consulte Solução de problemas.