【第433回】 Agentforce ： カスタム Lightning タイプ（レンダラーオーバーライド版）
Agentforce では、デフォルトでは標準の Lightning タイプが使用されるため、UI は比較的シンプルな表示になります。
しかし、標準 UI をオーバーライド（上書き）して カスタム Lightning タイプ を利用することで、カスタムエージェントアクションの応答を、よりリッチで直感的、かつ分かりやすい UI にカスタマイズできます。
本記事の執筆時点で、カスタム Lightning タイプに対応しているのは以下のエージェントです。
Agentforce Service Agent（拡張チャット v2）
Agentforce Employee Agent
UI のイメージとしては、左が標準 UI、右が標準 UI をオーバーライドしたカスタム UI という関係になります。
まずはサンプルで手早く試せる
この設定は、Salesforce 公式ドキュメントのサンプルを使うことで簡単に検証できます。
公式サンプル（2 種類）
① エディタ＋レンダラーオーバーライド
（入力 UI と出力 UI をフルコントロール）
https://developer.salesforce.com/docs/ai/agentforce/guide/lightning-types-example-full-editor-renderer.html
② レンダラーオーバーライド
（出力 UI のカスタマイズに特化）
https://developer.salesforce.com/docs/ai/agentforce/guide/lightning-types-example-collection-renderer.html
※ サンプルデータがそれぞれのサイトに置いてあるので、今回はそれをそのまま活用します。サンプルは 取得データがハードコード されているため、検証用に新しいオブジェクトやレコードを用意する必要がありません。
そこで本記事では、まず比較的取り組みやすい ②「レンダラーオーバーライド」 （出力 UI 側）だけの実装手順を整理していきます。
この手順を確認していただき、どの程度の難易度であるかだけでも認識頂ければ、実装を検討する際に参考になると考えています。
全体の流れ
作業の全体像は以下のとおりです。
Salesforce CLI をインストール
VS Code + Salesforce Extension Pack をインストール
Salesforce Org にログイン（認証）
プロジェクトを作成
force-app/main/default/ 配下に以下を配置
1. Apex
2. LWC
3. LightningTypeBundle
デプロイ
Agentforce Action の設定
それでは一つずつ手順を確認してみましょう。
① Salesforce CLI をインストール
Salesforce 開発を行うためには、まず Salesforce CLI をインストールします。
インストールが完了したら、ターミナル（Windows：PowerShell / macOS・Linux：Terminal）を開き、正しくインストールされているか確認します。
sf --version
② VS Code + Salesforce 拡張機能をインストール
次に、開発環境として Visual Studio Code（VS Code） をインストールします。
VS Code のインストールが完了したら、VS Code を起動して「Salesforce Extension Pack」をインストールします。
手順
左側メニューから Extensions（拡張機能） をクリック
検索ボックスに「Salesforce Extension Pack」を入力し、表示された拡張機能をインストール
この拡張パックには、以下が含まれています。
Apex
Lightning Web Components（LWC）
Salesforce CLI 連携（SFDX）
※ 個別に拡張機能を探して設定する必要はありません。
③ Salesforce Org にログイン（認証）
続いて、Salesforce CLI から Salesforce Org にログイン（認証） します。
ログイン先は Sandbox または Dev Org を想定しています。
手順
VS Code を起動
メニューから
Terminal → New Terminal表示されたターミナルで以下を実行すると、ログイン画面が開きます
Sandbox にログインする場合
sf org login web --instance-url https://test.salesforce.com本番環境 または Dev Org にログインする場合
sf org login webログイン画面が開いたら、通常どおり Salesforce にログインしてください。
認証が成功すると、ターミナルに Org 情報が表示されます。
（※ 表示されるまで 1 分程度かかる場合があるのでそのまま放置します。）
無事ログインできているかは、以下のコマンドでも確認できます。
sf org listログイン済みの Org が一覧に表示されていれば、準備完了です。
④ Salesforce プロジェクトを作成
作業用フォルダを作成
1. ローカル PC 上に作業用のフォルダを作成します。
（例：以下は Windows の場合です）
2. VS Code のターミナルを開き、以下のコマンドを入力して、作業フォルダ（work）へ移動します。
cd C:\work Salesforce プロジェクトを生成
1. 作成した作業フォルダ（work）に移動した状態で、VS Code のターミナルを使用して、次のコマンドを実行します。
sf project generate --name agentforce-hotel
2. 生成される構成は以下のとおりです。
C:\work\
└─ agentforce-hotel\
├─ force-app\
├─ sfdx-project.json
└─ ...
3. このコマンドにより、work ディレクトリ配下に
Salesforce 開発用のプロジェクト一式が自動生成されます。
プロジェクトを VS Code で開く
1. 次に以下のコマンドを入力して、プロジェクトフォルダに移動します。
cd agentforce-hotel
2. 以下のコマンドを入力して、VS Code でプロジェクトを開いてください。
code .3. これで、作業場所の VS Code が開きます。こちらにサンプルのコードを配置していきます。
agentforce-hotel/
├─ force-app/
│ └─ main/
│ └─ default/
├─ sfdx-project.json
└─ ...⑤-1 force-app/main/default/ に Apex を配置
公式ページからダウンロードした各種データを、ローカルの classes フォルダ にドラッグ＆ドロップして配置します。
配置が完了すると、VS Code にも自動的に反映され、クラスファイルがプロジェクト内に認識されます。
サンプルは こちら（apexClass.zip）からダウンロードできます。
⑤-2 force-app/main/default/ に LWC を配置
公式ページからダウンロードした LWC 配下の hotelDetails フォルダを、そのまま LWC フォルダ にドラッグ＆ドロップして配置します。
フォルダを配置すると、VS Code にも自動的に反映され、特別な操作を行わなくてもファイルが認識されます。
サンプルは こちら（hotelLWCandCLT.zip）からダウンロードできます。
⑤-3 force-app/main/default/ に lightningTypes を配置
lightningTypes については、まだフォルダが存在しないため、まず default 配下 に lightningTypes という名前のフォルダを新規作成します。
次に、公式ページからダウンロードした lightningTypes 配下の hotelResponse フォルダ を、そのまま作成した lightningTypes フォルダ にドラッグ＆ドロップして配置します。
フォルダを配置すると、VS Code にも自動的に反映され、追加した Lightning Type がプロジェクト内で認識されます。
サンプルは こちら（hotelLWCandCLT.zip）からダウンロードできます。
※ LWC と同じ ZIP なので、そちらに格納されています。
⑥ Salesforce にデプロイする
すべてのコードの配置が完了したら、以下のコマンドを実行します。ユーザー名は、今 Salesforce Org にログインしているユーザー名に変更してください。[ ] は不要です。
sf project deploy start --verbose -o [ユーザー名]
これにより、デプロイが開始されます。デプロイが成功すると、
Apex
LWC
LightningTypeBundle
すべてが org に登録されます。
⑦ Agentforce Action の設定
1. まず、Agentforce Employee Agent を起動し、新規トピックを作成します。
2. トピックの説明として、I'd like to use this topic to find hotels. を入力します。
3. 今回は特にカスタマイズせず、そのまま ［次へ］ をクリックし、トピックを作成します。
4. 完了します。
アクションの追加
1. 作成したトピックを開き、新規アクションを追加します。
2. 参照アクション種別で「Apex」を選択します。
※ ここで使用する Apex クラスは、あらかじめ VS Code からデプロイ済みです。
3. 参照アクションカテゴリは「Invocable Method」を選択します。
4. 参照アクションは「Find hotels」を選択して、次へをクリックします。
Agent Action Configuration の設定
1. 次に表示される Agent Action Configuration では、以下のように設定します。
Agent Action Instructions
- Use this action when the user provides a city, check-in date, and check-out date to find available hotels.
- ユーザーが都市、チェックイン日、チェックアウト日を指定して、空室のあるホテルを探したい場合にこのアクションを使用します。
Loading Text
- Searching for available hotels…
- 空室のあるホテルを検索しています…
checkInDate Instructions
- Enter the check-in date for your stay in YYYY-MM-DD format.
- 宿泊を開始するチェックイン日を、YYYY-MM-DD 形式で入力してください。
※ Require input と Collect data from user の両方にチェックを入れる
checkOutDate Instructions
- Enter the check-out date for your stay in YYYY-MM-DD format.
- 宿泊を終了するチェックアウト日を、YYYY-MM-DD 形式で入力してください。
※ Require input と Collect data from user の両方にチェックを入れる
cityInstructions
- Enter the name of the city where you want to search for hotels.
- ホテルを検索したい都市名を入力してください。
※ Require input と Collect data from user の両方にチェックを入れる
hotelsInstructions
- Returns a list of available hotels that match the specified criteria.
- 指定された条件に一致する利用可能なホテルの一覧を返します。
※ Show in conversation にのみチェックを入れる
標準 Lightning タイプでの動作確認
1. 今回はまず、Output Rendering を デフォルトのまま
@apexClassType/c__Hotel に設定します。
2. これは、標準 Lightning タイプを使用した表示を確認するためです。
左のような表記が期待されます。
3. 設定を保存したら、一度画面を F5 で更新し、プレビューを表示します。
入力欄に 「Find Hotels」 と入力してください。
4. すると、入力フォームが表示されます。以下の値を入力します。
city：Hyderabad（※ 実際には任意の値で問題ありません）
checkInDate：任意
checkOutDate：任意
このサンプルでは、検索条件に関わらず あらかじめハードコードされた 2 件の結果が返される仕様になっています。
注意：なお、このフォーム表示は 「Collect data from user」 にチェックを入れた場合にのみ有効です。
チェックを入れていない場合は、テキストベースの質問形式になります。
5. 結果として、2 件のホテル情報が表示されますが、これは まだカスタム Lightning タイプによる表示ではありません。
カスタム Lightning タイプへの切り替え
1. 続いて、出力表示をカスタム Lightning タイプで上書きするため、
一度このアクションを削除し、再作成します。
2. アクションの作成手順は先ほどと同じですが、
Output Rendering で 「HotelResponse」 を選択します。
この設定により、コレクションレンダラーを使って出力をオーバーライドしている状態になります。
3. 次は右のような表記が期待されます。
最終確認
1. 設定を保存後、再度 F5 で画面を更新し、プレビューを確認します。こちらも同様に 「Find Hotels」 と入力します。
都市名
チェックイン日
チェックアウト日
を入力して送信します。
2. すると、意図したカスタムデザインで表示されることが確認できました。
これで設定は成功です。
いかがでしたでしょうか。
今回は、Agentforce のカスタム Lightning タイプ（コレクションレンダラーオーバーライド） を、公式サンプルを使って実装・確認しました。
この手法は入力 UI には踏み込まず、出力結果の表示のみをカスタマイズ できるため、比較的低い難易度で UI をリッチにできます。
実装の実態としては、サンプルに含まれる HTML でレイアウトを作り、CSS で装飾する という構成になっており、LWC 経験者であれば直感的に理解しやすい点も特徴です。
まずはこの方式で UI カスタマイズの感触を掴み、必要に応じてエディタ＋レンダラー方式へ進むかを判断するとよいでしょう。
さて、今回は 簡易的な動作確認として Agentforce Employee Agent を使用しました。これを Agentforce Service Agent（拡張チャット v2） で検証する場合は、いくつか注意点があります。
まず、拡張チャット v2 で試すには、専用の権限セットを作成し、必要な Apex クラスへのアクセス権をサービスエージェントに対して付与する必要があります。
今回のサンプルでは、以下 6 つの Apex クラス へのアクセス権が必要です。
Hotel
HotelCategory
HotelRequest
HotelReservation
HotelResponse
Room
また、Agentforce Builder に用意されているサービスエージェントのプレビュー機能は v1 相当の挙動 となるため、今回の検証内容は Agentforce Builder 上では確認できません。
動作確認を行う際は、拡張チャットを必ず v2 に切り替えたうえで実際の画面から確認 してください。
以下は Agentforce Service Agent（拡張チャット v2）の表示例です。
今回は以上です。