Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

UI モジュールとコネクタを実装する

Agent Assist には、Agent Assist の機能を UI に統合するために使用できる、事前構築済みのカスタマイズ可能な UI コンポーネントモジュールが用意されています。モジュールを任意のウェブアプリケーションに埋め込んで、Agent Assist の提案をエージェントに表示できます。モジュールを LivePerson に統合する具体的な手順については、LivePerson のチュートリアルをご覧ください。

Agent Assist の機能

UI モジュールコンポーネントとして実装できる Agent Assist の機能は次のとおりです。

始める前に

UI モジュールを実装する前に、会話プロファイルを構成します。

UI モジュールを実装する

使用する Agent Assist の機能に基づいて UI モジュールを選択します。

機能	UI モジュールの例
コンパニオンエージェント、会話の要約	コンパニオンエージェント、文字起こし
AI コーチ、（プロアクティブな）生成ナレッジアシスト、スマートリプライ、会話の要約	Container V2、スマートリプライ、文字起こし

すべての UI モジュールは任意のエージェントデスクトッププラットフォームで使用できますが、Agent Assist は Genesys Cloud、LivePerson、Twilio、Salesforce のオープンソース UI モジュール統合のみを提供します。UI モジュールを他のエージェントデスクトッププラットフォームと統合するには、独自の統合を作成する必要があります。

UI モジュールコネクタは、UI コンポーネント、エージェントデスクトップ、Agent Assist バックエンド間の通信を容易にします。クライアントの通信はすべて、カスタムイベントのディスパッチを通じて行われます。

コンパニオンエージェント

コンパニオンエージェントは、エージェントデスクトップにインタラクティブなコンパニオンエージェントを埋め込む単一のコンポーネントです。コンパニオンエージェント機能は、他のほとんどの Agent Assist 機能に取って代わりますが、その UI モジュールには、会話の要約などの補完的な機能が含まれています。そのため、コンパニオンエージェント UI モジュールと一緒にコンテナを使用する必要はありません。

詳しくは、コンパニオンエージェント API ドキュメントページをご覧ください。

機能コンテナ

コンテナは、選択したコンパニオン以外の Agent Assist 機能を 1 つの統合されたリアクティブパネルにレンダリングする単一のコンポーネントです。AI コーチ、（プロアクティブな）生成ナレッジアシスト、スマートリプライ、会話の要約を使用する場合は、コンテナを使用します。

詳細については、Container V2 API ドキュメントページをご覧ください。

個々のコンポーネント

一部の Agent Assist 機能は、コンパニオンエージェントまたはコンテナとともに個別に統合できます。エージェントデスクトップで音声会話を処理する場合は、通常、文字起こしコンポーネントを追加します。モジュールをページの異なるセクションでレンダリングする必要があるカスタムアプリケーションを使用する場合や、大幅なカスタマイズが必要な場合を除き、他の個々のコンポーネントはおすすめしません。たとえば、チャット表示のすぐ下にスマートリプライモジュールを配置できます。

この場合、選択した機能固有の UI モジュールを個別にインポートする必要があります。また、UI モジュールコネクタをインポートして初期化する必要があります。

ファイルのバージョン

最新バージョンを指定して、gstatic ファイルの最新バージョンを取得します。

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/companion_agent.js"></script>

正確なバージョンを指定して、gstatic ファイルの特定の安定版を取得します。

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1.1/companion_agent.js"></script>

UI モジュールコネクタを実装する

コンテナのバージョン 1 を使用している場合を除き、UI モジュールを使用するには UI モジュールコネクタを実装する必要があります。次のコードをアプリケーションに追加して、インスタンス化と初期化が可能なグローバル UiModulesConnector クラスを公開します。

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/common.js"></script>

メソッド:

    constructor(): void;
    init(config: ConnectorConfig): void;
    disconnect(): void;
    setAuthToken(token: string): void;

以下に、コネクタ構成オブジェクトの TypeScript インターフェースの概要を示します。サポートされていないシステムで使用するカスタム UI モジュールコネクタを作成した場合は、agentDesktop を Custom に設定します。次の例に、サポートされているエージェントデスクトップシステムのリストを示します。

interface ConnectorConfig {
  /** Communication mode for the UI modules application. */
  channel: 'chat' | 'voice';

  /** Agent desktop to use. */
  agentDesktop: 'LivePerson' | 'GenesysCloud' | 'SalesForce' | 'GenesysEngageWwe' | 'Custom';

  /** Optional desktop source for metric tracking. */
  agentDesktopSource?: string;

  /** Conversation profile name to use. */
  conversationProfileName: string;

  /** API Connector config. */
  apiConfig: {
    /**
     * Authentication token to attach to outgoing requests. Should be a valid
     * OAuth token for Dialogflow API, or any other token for custom API
     * endpoints.
     */
    authToken: string;

    /**
     * Specifies a custom proxy server to call instead of calling the Dialogflow
     * API directly.
     */
    customApiEndpoint?: string;

    /** API key to use. */
    apiKey?: string;

    /**
     * Additional HTTP headers to include in the Dialogflow/proxy server API
     * request.
     */
    headers?: Array;
  }

  /** Event-based connector config. Required for voice/omnichannel conversations and some features of chat conversations. */
  eventBasedConfig?: {
    /** Transport protocol to use for updates. Defaults to 'websocket'. */
    transport?: string;

    /** Event-based library to use. */
    library?: 'SocketIo';

    /** Endpoint to which the connection will be established. */
    notifierServerEndpoint: string;

    /** Additional Socket.io connect options. */
    socketIoConnectOpts?: any;

    /** Options to retry initial Socket.io connection in case of failure. */
    backOffOpts?: {
      initialDelay: number;
      maxDelay: number;
      maxAttempts: number;
      connectionTimeout: number;
    };
  }

}

インスタンス化の例:

const connector = new UiModulesConnector();

connector.init({
  channel: 'chat',
  agentDesktop: 'Custom',
  conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
  apiConfig: {
    authToken: 'abc123',
    customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
  },
  eventBasedConfig: {
    notifierServerEndpoint: 'https://my-notifier-server-endpoint.com',
    transport: 'websocket',
    library: 'SocketIo',
  }
});

価格に関する免責条項

UI モジュールを使用する場合、基盤となるサービスに関連する費用が発生します。たとえば、次のような費用があります。