独自のEDS プロジェクトを作成する bring-your-own-eds

このガイドは、既にEdge Delivery Services（EDS）プロジェクトがある場合や、アプリを自動作成せずに作成した場合に使用します。

プラットフォームが自動的にウィジェットを作成した場合は、代わりに生成されたウィジェットをカスタマイズ ​します。 生成されたプロジェクトには、ここに記載されているSDK ファイル、ブロック、コンテンツ、およびアクション設定が既に含まれています。

ジャーニー: EDS プロジェクトを準備→、SDKをインストールしてブロックをビルドおよび公開→、デプロイとテストのアクション→設定→ます。

開始する前に

次のものが必要です。

LLM Apps 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

2番目の引数として接続されたブリッジを使用して、標準の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に連結しないでください。

ウィジェットページの作成と公開

ウィジェット用に1つの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 シェイプを確認してください。 「​ トラブルシューティング ​」を参照してください。