Integração do Beta beta-onboarding
Como participante do programa Beta para Adobe LLM Apps, você receberá um email com dois arquivos zip e uma referência de configuração de aplicativo. Siga as etapas abaixo para colocar seu aplicativo em funcionamento.
Antes de começar
Antes de mergulhar nas etapas, familiarize-se com os principais conceitos usados neste guia. Isso economizará tempo e ajudará tudo a se encaixar.
Aplicativo LLM — o seu assistente de marca com o qual os usuários interagem dentro do ChatGPT ou de outras plataformas LLM.
Ação — um recurso que seu aplicativo oferece. Por exemplo, “Encontre um distribuidor” ou “Procurar produtos”. Cada ação é invocada pelo LLM quando o usuário faz uma pergunta relevante.
Manipulador de ação — o código que é executado quando uma ação é invocada. Ele pode chamar suas APIs, buscar dados em tempo real ou retornar dados estáticos. Os manipuladores de amostra fornecidos pelo Adobe retornam dados codificados para que você possa verificar a configuração de ponta a ponta antes de conectar seu back-end real.
Widget — a resposta visual mostrada ao usuário — um cartão, carrossel, tabela ou qualquer interface do usuário personalizada renderizada junto com a resposta de texto do LLM.
Referência da configuração do aplicativo — um arquivo fornecido pela Adobe que informa exatamente o que inserir para cada ação ao configurar seu aplicativo.
Etapa 1: Encaminhar os arquivos fornecidos para GitHub
O Adobe fornece dois arquivos zip por email:
- Código do aplicativo (
<project-name>.zip) — os manipuladores de ação que são executados em Adobe I/O Runtime e potencializam a lógica do aplicativo. Você implantará esses no estado em que se encontram para que o aplicativo funcione de ponta a ponta e, em seguida, os atualizará posteriormente para conectar seu back-end real. - Projeto EDS (
<project-name>-eds.zip) — o código de front-end dos seus widgets. A Adobe pré-criou esses itens para você; essa é a sua base de código para possuir, personalizar e criar estilos para corresponder à sua marca.
Crie dois novos repositórios vazios em GitHub (um por arquivo), descompacte cada arquivo e envie-o por push. Recomendamos nomear cada repositório após o arquivo zip correspondente — <project-name> para o código do aplicativo e <project-name>-eds para o projeto EDS.
<your-github-org> refere-se ao seu nome de usuário pessoal GitHub ou a uma organização GitHub — seja qual for a conta que terá os repositórios.
Repositório de código do aplicativo — descompacte o arquivo, inicialize um repositório Git local e envie-o por push para 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
Repositório EDS — repita as mesmas etapas para o arquivo EDS, apontando para o segundo repositório:
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
Etapa 2: criar um aplicativo LLM
Navegue até experience.adobe.com/llm-apps/ e clique em Criar Aplicativo LLM.
Preencha os Detalhes do aplicativo usando os valores da seção Detalhes do aplicativo na referência de configuração do aplicativo:
- Nome do Aplicativo LLM
- Descrição do aplicativo LLM
- Seu site
Em Região de dados do Analytics, selecione a região onde os dados do Analytics serão armazenados. Este não pode ser alterado após a criação do aplicativo.
Em Repositório, selecione a organização GitHub e o repositório de código do aplicativo enviados anteriormente.
Deixe Sugerir ações automaticamente com base no seu site desmarcado — você irá configurar ações manualmente.
Aceite os Termos do Adobe Developer e clique em Criar aplicativo.
Etapa 3: colocar seus widgets em funcionamento
Nesta etapa, você configura o projeto EDS fornecido pela Adobe e o publica por meio de DA.live — criação da Adobe e camada de CDN. Cada documento publicado se torna o widget exibido para o usuário quando uma ação é chamada.
Etapa 3.1: Conectar o repositório EDS a DA.live
- Ir para github.com/apps/aem-code-sync. Se o aplicativo ainda não estiver instalado, clique em Instalar. Se já estiver instalado, clique em Configurar e adicione
<your-eds-repo>à lista de repositórios que ele pode acessar. - Após a instalação, você acessa uma página de confirmação AEM Code Syncregistrada. Em O que vem a seguir → Crie seu conteúdo, clique no link DA.live.
- Na tela Conteúdo de demonstração, selecione Nenhum e clique em Tornar algo maravilhoso.
- Você é levado ao modo de exibição de Autor DA.live do seu site.
Etapa 3.2: Criar um documento DA.live para cada ação
Em DA.live você precisa criar um documento por ação. Depois de publicado, cada documento se torna o widget mostrado ao usuário quando essa ação é chamada.
Para cada ação:
- No DA.live, crie um novo documento na raiz do site e nomeie-o como especificado na referência de configuração do aplicativo (consulte a seção DA.livedocumentos).
- No documento, use a barra lateral esquerda e clique em Bloquear para inserir um novo bloco.
- Defina o cabeçalho do bloco com o nome do bloco especificado na referência de configuração do aplicativo (consulte a seção DA.livedocumentos).
- Publique o documento usando o botão Publicar (o ícone de plano de papel na barra de ferramentas superior).
Após a publicação, cada documento estará acessível em https://main--<your-eds-repo>--<your-github-org>.aem.live/<document-name>. Esta URL é o que você digitará no campo URL do Widget ao configurar cada ação na Etapa 4.
Etapa 3.3: Configurar cabeçalhos CORS para o site EDS
Para permitir que as plataformas LLM carreguem seus widgets entre origens, é necessário adicionar um cabeçalho Access-Control-Allow-Origin ao site EDS.
Vá para o Editor de HTTP Headers em tools.aem.live/tools/headers-edit/index.html.
- Insira sua Organização (
<your-github-org>) e o Site (seu nome de repositório EDS) e clique em Buscar. Você receberá uma solicitação para autenticar e autorizar o acesso ao seu site. - No caminho
/**, clique em Adicionar cabeçalho. - Defina o nome do cabeçalho como
Access-Control-Allow-Origine o valor como*. - Clique em Salvar.
Para obter a documentação completa sobre cabeçalhos HTTP personalizados em AEM Edge Delivery Services, consulte aem.live/docs/custom-headers.
Depois de salvar os cabeçalhos, acione uma sincronização de código para propagar as alterações para todos os arquivos:
curl -X POST "https://admin.hlx.page/code/<your-github-org>/<your-eds-repo>/main/*"
Etapa 4: adicionar ações
Na Interface de Aplicativos do LLM, abra o aplicativo e navegue até Ações na barra lateral esquerda. Clique em + para criar uma nova ação. Repita para cada ação descrita na sua referência de configuração de aplicativo (consulte as seções Ação 1, Ação 2, Ação 3).
Guia Ação
- Nome da ação e Descrição — usado pelas plataformas LLM para decidir quando invocar a ação. Use os valores exatos da seção guia Ação na referência de configuração do aplicativo.
- Parâmetros de entrada — nome, tipo e descrição de cada parâmetro. Use os valores da seção Guia Ação na referência de configuração do aplicativo.
Guia Metadados do widget
- Tipo — selecione EDS.
Expanda Configuração da CSP e preencha:
- CSP — Conectar domínios — use os valores da seção guia Metadados do Widget na referência de configuração do aplicativo.
- CSP — Domínios de recursos — use os valores da seção guia Metadados do Widget na referência de configuração do aplicativo.
Guia Construtor de widgets
Em Origem do widget, selecione Usar um widget existente e preencha com:
- URL do Script — use o valor da seção Guia de Metadados do Widget na referência de configuração do aplicativo.
- URL do Widget — use o valor da seção Guia de Metadados do Widget na referência de configuração do aplicativo.
Clique em Criar ação. A ação aparece como um cartão na página Ações com uma medalha EDS e contagem de parâmetros.
Etapa 5: implantar
Depois que todas as ações forem configuradas, vá para a página Detalhes do aplicativo e clique em Implantar no canto superior direito.
Selecione o ambiente de destino e clique em Implantar. O pipeline é executado em quatro etapas: preparação de credenciais, início da implantação, compilação do aplicativo a partir do repositório e publicação no Adobe I/O Runtime.
Quando terminar, role até a seção Testar o aplicativo na página Detalhes do Aplicativo e copie a URL do servidor MCP — será necessário registrá-lo no ChatGPT.
Etapa 6: adicionar o aplicativo a ChatGPT
Adicionar aplicativos personalizados ao ChatGPT requer uma assinatura do Pro, Business ou Enterprise. Os planos Gratuito e Plus não são compatíveis com aplicativos MCP personalizados.
-
Em ChatGPT, clique no avatar do seu perfil e vá para Configurações.
-
Selecione Aplicativos na barra lateral, clique em Configurações avançadas e habilite o Modo de desenvolvedor.
-
Vá para Configurações → Aplicativos e clique em Criar aplicativo.
-
Cole a URL do servidor MCP copiada de LLM Apps, defina a Autenticação como Sem Autenticação, marque a caixa de seleção de confirmação e clique em Criar.
Seu aplicativo aparece em Aplicativos habilitados com um selo DEV.
Inicie uma nova conversa, anexe seu aplicativo usando o botão + ou digitando @ seguido do nome do aplicativo e faça uma pergunta que corresponda a uma de suas ações configuradas.
O que vem a seguir
O aplicativo de amostra implantado usa dados codificados. Para torná-la uma experiência pronta para produção:
- Conectar suas APIs — Atualize os manipuladores de ação no repositório de código do aplicativo para chamar suas APIs, bancos de dados ou serviços reais. Cada manipulador reside em
actions/<action-name>/index.js. - Revise e refine seus widgets — Abra o projeto EDS, ajuste os estilos de bloco e o layout para corresponder à sua marca e verifique se o widget é renderizado corretamente com os dados dinâmicos.
- Reimplantar — Depois que seus manipuladores e widgets forem atualizados, envie suas alterações por push para GitHub e clique em Implantar na interface do usuário do LLM Apps para publicar a nova versão.
- Enviar para publicação — Quando estiver satisfeito com a experiência, envie seu aplicativo para revisão por meio do plug-in ChatGPT ou do processo de publicação do conector. A Adobe não controla esse processo — consulte a documentação da plataforma LLM para conhecer os requisitos e os cronogramas de envio.