最初のアプリを自動的に作成 create-first-app
このプラットフォームにより、web サイトが機能的なアプリに変わります。 アクションの提案、ハンドラーのコードとテストの作成、EDS ウィジェットの作成、生成されたファイルの所有している2つのGitHub リポジトリへの送信を行います。
生成には約15分かかります。 このチュートリアルの最後に、サポートされているChatGPTなどのLLM プラットフォームでテストできるデプロイ済みアプリがあります。
ジャーニー:要件→確認して2つのリポジトリを作成し、生成されたアクション→レビューしてステージング→デプロイ→、実稼動システムを接続す→プラグインをテスト→ます。
開始する前に
このチュートリアルを開始する前に、すべてのLLM アプリの要件を完了してください。
このチュートリアルでは、Frescopa Coffee用のLLM アプリを作成します。
空のリポジトリを2つ作成します
プラットフォームには2つの空のリポジトリが必要です。 同じGitHub アカウントまたは組織の両方を作成します。
- ハンドラーリポジトリ — アクションハンドラーとテストを格納します。 （例：
my-brand-llm-app）。 - EDS リポジトリ – 生成されたウィジェットのブロックとスタイルを保存します。 （例：
my-brand-llm-app-eds）。
各リポジトリのgithub.com/newに移動します。
README、.gitignore、またはライセンスを使用してリポジトリを初期化しないでください。 必要なプロジェクト構造を準備します。
アプリを起動
-
Adobe LLM アプリ を開き、アプリの作成を選択します。
-
LLM アプリ名とオプションの説明を入力します。
-
Analytics領域を選択します。
note important IMPORTANT アプリの作成後に分析領域を変更することはできません。 -
アプリをビルドで、アプリを自動的にビルドを選択します。
-
お使いのweb サイトで、
https://プロトコルを含むweb サイト URLを入力します。 プラットフォームはこのサイトを分析して、有用なアクションと代表的なサンプル結果を決定します。
LLM Appsにリポジトリへのアクセス権を付与
Adobe LLM アプリ GitHub アプリは、LLM Appsに選択したリポジトリへのアクセス権を与えます。
連続性のある組織
リポジトリを作成する前に、Adobe LLM アプリ GitHub アプリが既にインストールされている場合：
- 接続されている組織を選択します。
- 「GitHubでリポジトリを管理」を選択します。
- 2つのリポジトリを既存のGitHub アプリのインストールに追加します。
- LLM Appsに戻り、リポジトリリストを更新します。
初回接続のみ
ダイアログに組織が表示されない場合：
- 「GitHub組織を接続」を選択します。
- Adobe LLM アプリ GitHub アプリをインストールします。
- Only select repositoriesを選択し、2つのリポジトリを選択します。
- LLM アプリを作成ダイアログに戻ります。
GitHub アプリをインストールまたは更新できない場合は、組織管理者に問い合わせてください。
リポジトリの選択
-
Boilerplate Repositoryで、組織と空のハンドラーリポジトリを選択します。
-
EDS リポジトリで、組織と空のEDS リポジトリを選択します。
-
「利用条件」で、「Adobe Developer利用条件に同意します」を確認します。
-
「アプリを作成」を選択します。
EDSの設定を完了します
選択したEDS リポジトリが空の場合、LLM AppsはAEM ボイラープレートを使用して初期化します。 次に、このダイアログは、アプリの再作成を試みる前に、AEM Code Syncのインストールを求めます。
-
EDS リポジトリの下のメッセージで、AEM Code Syncのインストールを選択します。
-
GitHubにAEM Code Syncをインストールし、EDS リポジトリへのアクセス権を付与します。
AEM Code Sync registered確認ページの Site users で、以上のAdd userを選択し、管理者の役割でLLM Appsにサインインするために使用する電子メールアドレスを追加します。 次に、ページの下部にある「設定を完了」を選択します。
-
LLM アプリを作成ダイアログに戻ります。
EDS サイトの管理者でなければなりません。 ダイアログで、自分が管理者ではないことが報告された場合：
-
「AEM Live Adminを開く」を選択します。
-
+ ユーザーを追加 ボタンをクリックして、自分をEDS サイトの管理者として追加します。
-
LLM Appsに戻り、EDS リポジトリを更新して、アプリの作成をもう一度選択します。
リポジトリと管理者が合格すると、LLM Appsはアプリを作成し、アクションの生成を開始します。
アクションの生成を待つ
左からアクション ページに移動します。 アクションページには、担当者がweb サイトを分析してアプリを生成する際に、会話エクスペリエンスのアクションを検出すると表示されます。 通常、生成には約15分かかります。 このページを離れて、後で戻ることができます。
生成中、LLM Apps:
- web サイトを分析し、顧客の有用な意図を特定：
- 説明や入力パラメーターを含むアクションメタデータを作成します。
- ハンドラーを生成し、ハンドラーリポジトリ内の各アクションをテストします。
- EDS リポジトリ内の各アクションに対してEDS ウィジェットを生成します。
- レビュー用のアクションを準備します。
生成されたハンドラーは、最初にweb サイトから派生したサンプルデータを使用します。 包括的なエクスペリエンスを実証しますが、制作システムには接続されません。
生成されたアクションの確認
生成が完了すると、アクション ページには、生成されたアクションとウィジェットのプレビューが表示されます。 各アクションにはAIが生成したアクションがあり、レビュー バッジが必要です。
各アクションについて：
- 「レビュー」を選択します。
- 名前、説明、パラメーター、注釈、生成されたハンドラー、ウィジェットを確認します。
- 「レビュー済みとしてマーク」を選択します。 これにより、生成されたプルリクエストがマージされます。
- 「アクション」ページに戻り、残りのアクションについても繰り返します。
すべてのアクションを確認したら、アプリページに移動を選択します。
アプリのデプロイ
- アプリの詳細ページに戻ります。
- 「デプロイ」を選択します。
- ターゲット環境として ステージ を選択します。
- 「デプロイ」を選択します。
LLM Appsがアプリを準備、ビルド、公開するのを待ちます。
デプロイメント後、アプリのテスト セクションにステージング MCP サーバーのURLが表示されます。 「URLをコピー」を選択します。
ChatGPTでテスト
ChatGPTでテストを実行して、ステージング MCP サーバーのURLを使用してプラグインを作成します。
生成されたアクションのいずれかに一致する質問をしてください。 次のことを確認します。
- ChatGPTは、期待されるアクションを選択します。
- ウィジェットはレンダリングされ、想定されるサンプルデータが含まれます。
- ウィジェットのコントロールは、予想されるフォローアップ動作を生成します。
- テキスト応答は、結果を正確に要約します。
これで、完全に機能し、動作するエンドツーエンドのアプリができました。
アプリを本番環境で利用できるようにします
生成されたアプリは、サンプルデータを使用します。 お客様で使用する前に：
- システムを接続 — 生成された各ハンドラーをカスタマイズして、サンプルデータをAPIまたはデータソースへの呼び出しに置き換えます。
- 資格情報を保護 — API URLと資格情報を管理されたランタイム設定に保存します。ソースコードやウィジェット JavaScriptには保存されません。
- データの検証 — アクションの引数とAPI応答を検証し、リクエストのタイムアウトを追加し、安全なエラーメッセージを返します。
- ウィジェットを更新 – 各ウィジェットをハンドラーの
structuredContentに合わせてから、ブランディングとアクセシビリティの要件を適用します。 生成されたウィジェットのカスタマイズ を参照してください。 - ハンドラーをテスト – 有効な入力、無効な入力、空の結果、API エラー、およびウィジェットで想定されるデータ形状をカバーします。
- ステージで検証 – ChatGPT プラグインを使用して、すべてのアクションを再デプロイしてテストします。
- 実稼動環境へのデプロイ — ステージテストが成功した後、実稼動環境にデプロイし、実稼動環境のMCP サーバーURLを使用してプラグインを作成または更新します。
プラットフォームが作成しなかった機能を追加するには、最初からアクションを作成するを参照してください。