SFDC：カスタム Lightning Web コンポーネントを AI モデルに接続

カスタム Lightning Web コンポーネントを AI モデルに接続のTrailheadを進めました。Models APIというものが用意されているです。

Integrate AI with the Models API in Salesforce

Models API を使うことで、「Anthropic、Google、OpenAI などの Salesforce パートナーの大規模言語モデル (LLM) にアプリケーションを接続するための Apex クラスと REST エンドポイントを提供します。Einstein Studio で設定できる任意の Salesforce 対応モデルを使用できます。」ということです。

Models API の使用方法

Models API は Einstein 生成 AI プロンプトビルダーに似ています。AI モデルを Salesforce 組織に接続し、Salesforce データによってモデルのグラウンディングを行うことはプロンプトテンプレートで簡単に対処できます。

Models API ではエンベディングや履歴を使用したチャット生成などの追加機能が提供され、それによって開発者はカスタム AI アプリケーションを設計できます。

利用イメージ

Maria Garza は DreamHouse Realty の開発者です。彼女は、Models API を使用して外部の住宅市場 API からのデータを分析し、要約したものを DreamHouse Realty の従業員に提供する社内向けダッシュボードを作成しています。DreamHouse Realty は最終的にはこのダッシュボードを完全に機能する AI 搭載イネーブルメントツールにする計画です。

信頼を維持する

Salesforce は OpenAI などの LLM プロバイダーと契約を結んでいます。この契約には、データ保持ゼロの義務が含まれており、お客様が生成 AI を使用するときに非公開データがサードパーティ LLM プロバイダーに保存される心配はありません。

すべての Models API コールは Einstein Trust Layer を通過します。Einstein Trust Layer は、Salesforce Platform に組み込まれたセキュアな AI アーキテクチャです。

サポートされるモデル

Models API は、Amazon Bedrock、Azure OpenAI、OpenAI、Google の Vertex AI などの複数のプロバイダーからの大規模言語モデル (LLM) をサポートしています。

Models API は Einstein Studio の Bring Your Own LLM (BYOLLM) 機能をサポートしています。BYOLLM を使用することで、サポートされるプロバイダーからの基盤モデルを追加し、モデルの独自のインスタンスを設定し、自分のログイン情報を使用してモデルに接続できます。推測はお客様のモデルによって処理されますが、その場合も要求は Models API を通じて転送され、Trust Layer は完全にサポートされます。

組織で Models API にアクセスする準備をする

Trailhead専用のプレイグラウンド組織を作成します。

とりあえずユーザー設定で日本語に変更。(Trailheadハンズオンは英語のままにしないとチャレンジクリアできないかも。)

Einsteinの有効化を確認。

LWC開発のために

以下のとおり、キャッシュを有効のチェックをオフにします。

Lightning Web コンポーネントがリリース後にすぐ表示されるようにするには、組織でブラウザーのキャッシュを無効にしてください。

Salesforce DX プロジェクトを用意

VS Code と Salesforce CLI をつかってプロジェクトを作成。開発環境を準備します。

Models API の Lightning Web コンポーネントを作成する

Models API の Apex クラスを作成する

HousingDataクラスの作成 (先に作ること)

DashboardControllerクラスの作成

Models API の Lightning Web コンポーネントを作成する

force-app/main/default/lwc/modelsAPIDashboard/modelsAPIDashboard.html

force-app/main/default/lwc/modelsAPIDashboard/modelsAPIDashboard.css

force-app/main/default/lwc/modelsAPIDashboard/modelsAPIDashboard.js

force-app/main/default/lwc/modelsAPIDashboard/modelsAPIDashboard.js-meta.xml

ソースコードの全体は最後に記載します。一旦このコードを動かしてみるのを進めてみます。ホームタブに配置するのですが、営業ホームには配置できませんでした。

設定→機能設定のページにある営業ホームを無効化してカスタマイズできるようにします。

これでカスタマイズできる状態になりました。

配置場所は指定がなさそうなので適用に配置。

これがModels API をつかったLWCです。

さっそく動かしてみようとボタンを押したのですが、何も起きませんでした。どうやらエラーが出ているみたいです。

aura_prod.js:110 Error fetching bot response {"status":500,"body":{"exceptionType":"System.JSONException","isUserDefinedException":false,"message":"Unexpected character ('C' (code 67)): was expecting comma to separate OBJECT entries at [line:1, column:131]","stackTrace":"(System Code)\nClass.DashboardController.createChatGenerations: line 16, column 1"},"headers":{},"ok":false,"statusText":"Server Error","errorType":"fetchResponse"}