IFrame と Apps の埋め込み

概要

iFrame を使用して、会話型エージェントを Web アプリケーションに埋め込みます。この方法により、iFrame コンポーネントを使用して会話型エージェントをサードパーティ アプリケーションまたは UiPath Apps に追加します。

対象ユーザー: 会話型エージェントをカスタムの Web アプリケーションまたは UiPath Apps に埋め込む開発者と管理者

機能の提供時期

機能	利用可能
新しいチャットを開始	✅
チャット履歴	✅
チャット セッションの削除	✅
設定	✅
開始プロンプト	✅
ファイルのアップロード	✅
引用	❌
HTML プレビュー	✅
応答のコピー	✅
フィードバック (いいね/不満)	✅
デバッグ ダンプ	❌

前提条件

会話型エージェントを埋め込むには、以下の設定手順を実行します。

管理者または開発者による設定

1. 会話型エージェントを目的の Orchestrator フォルダーにパブリッシュします。
2. インスタンスの管理からエージェントのリリース ID を取得します。
3. UiPath Apps の場合は、UiPath Studio で Apps プロジェクトを作成します。
4. サードパーティ アプリの場合は、Web アプリケーションで iFrame の埋め込みがサポートされていることを確認します。

エージェント ID を確認する

1. インスタンスの管理で、[Agents] > [デプロイ済みのエージェント] に移動します。
2. 目的のエージェントの [チャット] を選択します。
3. URL からエージェント ID をコピーします。たとえば、URL が https://cloud.uipath.com/conversationalagents/agents_/deployed/chat/342061 の場合、エージェント ID は 342061 です。

ユーザーの要件

• 認証済みユーザーの場合、エージェントにアクセスする権限を持つ UiPath アカウントが必要です。
• 匿名ユーザーの場合、エージェントが埋め込まれているアプリケーションまたは画面に対するアクセス権が必要です。

エージェントを埋め込む

URL の構築

iFrame のソースを次の形式の URL に設定します。

https://cloud.uipath.com/<organization>/<tenant>/autopilotforeveryone_/conversational-agents/?agentId=<agent_id>&mode=<mode>

注:

組織名とテナント名では大文字と小文字が区別されます。

URL パラメーター

パラメーター	Required	説明
agentId	はい	パブリッシュ済みのエージェントのリリース ID です。
mode	いいえ	embedded は右レールのエクスペリエンスの場合に使用します。全画面表示の場合は fullscreen を使用します (既定値: fullscreen)。
title	いいえ	チャットのヘッダーに表示されるタイトル (既定: エージェント名) です。
welcomeTitle	いいえ	初回実行のウェルカム画面のタイトルです。
welcomeDescription	いいえ	初回実行のウェルカム画面の説明です。
suggestions	いいえ	初回実行時に推奨されるプロンプトの配列です。
showHistory	いいえ	チャット履歴パネルを表示/非表示にします (既定値: true)。

URL の例

基本的な埋め込みモード

https://cloud.uipath.com/myorg/mytenant/autopilotforeveryone_/conversational-agents/?agentId=12345&mode=embedded

ウェルカム メッセージと推奨されるプロンプトあり

https://cloud.uipath.com/myorg/mytenant/autopilotforeveryone_/conversational-agents/?agentId=12345&mode=embedded&title=HR Assistant&welcomeTitle=Welcome!&welcomeDescription=I can help you with HR questions&suggestions=["What is the PTO policy?","How do I submit expenses?"]

UiPath Apps に埋め込む

会話型エージェントを UiPath Apps に埋め込むには、iFrame コンポーネントを使用します。

1. UiPath Apps Studio でアプリを開きます。

2. ページに iFrame コンポーネントを追加します。

3. iFrame の [ソース] プロパティを構築された URL に設定します。

4. アプリをパブリッシュします。

   

会話型エージェントを UiPath Apps に埋め込む場合は、次の例に示すように、推奨されるプロンプトの配列を二重引用符を使用してエスケープします。

suggestions=[""What is the PTO policy?"",""How do I submit expenses?""]

これが必要な理由は、UiPath Apps が値を文字列として検証するためです。

サードパーティ アプリケーションに埋め込む

iFrame による埋め込みをサポートする任意の Web アプリケーションに会話型エージェントを埋め込むことができます。

HTML の例

<iframe
  src="https://cloud.uipath.com/myorg/mytenant/autopilotforeveryone_/conversational-agents/?agentId=12345&mode=embedded"
  width="400"
  height="600"
  frameborder="0"
  allow="clipboard-write"
></iframe>

考慮事項

• クロスオリジン ポリシー: アプリケーションのコンテンツ セキュリティ ポリシーで uipath.com からの埋め込みが許可されていることを確認します。
• レスポンシブ デザイン: 幅と高さに適切な値を設定して、異なる画面サイズで適切に表示されるようにします。
• クリップボード アクセス: allow="clipboard-write" を含めて、応答のコピー機能を有効化します。

チャット機能

埋め込みチャット エクスペリエンスでは、インスタンスの管理のチャット UI を使用して同じチャット機能を提供しますが、以下の例外と制限があります。

制限事項

以下の機能は、埋め込みモードでは利用できません。

機能	備考
引用	引用プレビューは利用できません。
デバッグ ダンプ	利用できません。デバッグにはインスタンスの管理を使用します。

認証オプション

認証済みユーザー

UiPath アカウントを持つ内部ユーザーの場合、以下のようになります。

• ユーザーは標準の UiPath 認証を使用して認証します。
• エージェントはユーザーの ID 情報 (名前やメール アドレスなど) にアクセスできます。
• 消費量はユーザーのライセンスに対して追跡されます。

匿名ユーザー

外部または未認証のシナリオの場合、以下のようになります。

• 管理ポータルで機密の外部アプリケーションを設定する必要があります。
• 組織によってホストされているトークン エンドポイントが必要です。
• 個々のユーザー ライセンスは必要ありません。
• 消費量はテナントのユニット プールから差し引かれます。

設定手順については、「匿名アクセスの設定」をご覧ください。

ライセンスの詳細については、「ライセンス」をご覧ください。

警告:

匿名アクセスを使用する場合、UiPath アカウントを持たないユーザーがエージェントと対話できます。不正使用を軽減するため、匿名エージェントは、自身のポータルまたはログインの背後で管理することを強くお勧めします。

トラブルシューティング

iFrame が読み込まれない

• URL が正しく構築されていることを確認します。
• エージェント ID が有効であることを確認します。
• エージェントがパブリッシュ済みで実行されていることを確認します。
• ブラウザー コンソールをチェックし、コンテンツ セキュリティ ポリシー エラーがないことを確認します。

コピーが機能しない

• iFrame に allow="clipboard-write" 属性が含まれていることを確認します。
• ブラウザーの権限をチェックし、クリップボードにアクセスできることを確認します。

次のステップ

• 匿名アクセスの設定: UiPath アカウントを持たないユーザーに対してアクセスを有効化する
• インスタンスの管理: 完全な機能リファレンスとデバッグ