文档 LLM应用程序

最近更新： 2026年6月18日

IMPORTANT

Adobe LLM Apps当前在Beta中。

此处显示的功能、工作流和UI不一定表示产品的最终状态。要加入Beta，请发送电子邮件至llm-apps-beta@adobe.com 。

NOTE

本指南假定您基本熟悉Adobe Edge Delivery Services (EDS)。如果您是EDS新手，请先阅读EDS开发人员教程和浏览块以了解要点（块、decorate函数和EDS项目结构），然后再自定义构件。

该平台为每个生成的操作创建一个EDS构件。构件已接收操作结果，呈现示例数据，应用主机样式，并链接到LLM Apps中的操作。

首先测试生成的构件。然后自定义其数据约定、交互和可视化设计。

历程：查找生成的块→调整其数据协定→安全自定义→本地预览→部署和测试。

查找生成的构件

打开您在创建应用程序时选择的EDS存储库。每个生成的构件都是一个EDS块：

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

JavaScript文件会读取操作结果并构建界面。
CSS文件控制布局、响应式行为和可视化设计。
生成的拉取请求会显示为该操作创建的确切文件。

该平台还会配置构件URL和支持的SDK文件。您无需再创建一个EDS项目或重新输入这些值即可自定义生成的构件。

LLM应用程序SDK如何连接构件

@adobe/llmapps-sdk包将EDS小组件连接到LLM主机。生成的EDS存储库包括：

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

aem-embed.js建立主机连接，加载EDS页面，并调用您的块：

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

您不在块中导入SDK。已自动提供连接的bridge。它允许构件：

使用bridge.toolResult读取处理程序结果。
使用bridge.applyHostStyles()应用主机样式。
继续与bridge.sendMessage()的对话。
使用bridge.callTool()调用另一个操作。
保持其大小与bridge.autoResize()同步。

本指南介绍常见的网桥方法。查看完整API的@adobe/llmapps-sdk包。

了解数据合同

操作处理程序返回structuredContent，块从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.
}

更改structuredContent时，同时更新处理程序和构件。请参阅为完整的返回协定自定义生成的处理程序。

安全地呈现外部数据

将处理程序输出视为不受信任的数据。首选使用DOM API，如textContent，而不是将响应值插入到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;
}

在将URL分配到href或src之前验证URL，并且仅允许体验所需的协议。

使用主机桥

EDS将连接的桥接器传递给decorate(block, bridge)。保护桥接调用，以便在直接EDS预览期间也呈现块。

应用主机样式

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

这会应用主机排版规则和主题变量。您的小组件CSS应同时支持浅色和深色主机主题。

发送跟进消息

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

当交互操作应继续对话时，请使用sendMessage。

调用其他操作

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

对于需要其他操作结果的显式交互，请使用callTool。仅传递验证的值并处理故障，而不公开内部详细信息。

保持构件大小同步

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

在初始渲染后调用autoResize，以便主机能够响应内容更改。

预览更改

生成的块应包含在bridge不可用时直接预览的示例数据。

要在本地预览EDS项目，请执行以下操作：

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

在http://localhost:3000处打开生成的构件页面。验证：

空、加载、成功和错误状态。
长文本和缺少可选字段。
键盘导航和可见焦点。
浅色和深色主题。
窄而宽的布局。

然后将应用程序部署到暂存环境，并在LLM平台上使用实时structuredContent进行测试。

发布自定义项

提交并推送EDS更改。
如果更改了数据形状，请提交并推送匹配的处理程序更改。
将应用程序部署到暂存环境。
在ChatGPT中测试操作和小组件。
将验证的版本提升至生产环境。

其他EDS设置

如果您未自动构建应用程序或希望集成现有的EDS站点，请参阅自带EDS项目。

recommendation-more-help

llm-apps-help-main-toc

自定义生成的构件 customize-generated-widget