自带EDS项目 bring-your-own-eds

当您已经拥有Edge Delivery Services (EDS)项目或创建应用程序但未自动构建该项目时，请阅读本指南。

如果平台自动创建了小组件，请改为遵循自定义生成的小组件。 生成的项目已包含此处所述的SDK文件、块、内容和操作配置。

历程：​准备EDS项目→安装SDK →生成和发布块→配置操作→部署和测试。

开始之前

您需要：

安装LLM应用程序SDK

从EDS项目根目录：

npm install @adobe/llmapps-sdk

该资源包会将构件入口点并桥接实施复制到项目中：

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

该操作使用的脚本URL指向scripts/aem-embed.js。

创建构件块

为操作创建块：

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

导出标准EDS decorate函数，并将连接的桥接器作为第二个参数：

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);
  }
}

使用对文本值进行编码的DOM API。 请勿将外部数据关联到HTML中。

创作和发布构件页面

为构件创建一个EDS页面，并将块添加到该页面。 发布页面。

实时页面URL将成为该操作的构件URL：

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

页面路径不需要与操作名称匹配，但一致的约定使项目更容易维护。

配置CORS

该构件加载EDS页面以及跨源的脚本、样式、块和媒体。 配置EDS站点的标头：

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

使用您支持的LLM平台所需的特定主机来源。 仅当小组件刻意公开、不使用经过认证的跨域请求且您的安全要求允许时，才使用*。

有关EDS配置详细信息，请参阅配置服务。

配置操作

在LLM Apps中，打开操作并选择​小组件元数据。

输入：

使用最低权限配置CSP域和浏览器权限。 仅添加构件所需的源和功能。

有关字段定义，请参阅操作和小组件字段。

测试集成

如果页面直接工作但不在LLM平台中，请检查CORS、CSP、HTTPS URL和structuredContent形状。 请参阅疑难解答。