このガイドでは、OutSystemsアプリにチャットボットUIブロックを追加する手順について説明します。これにより、アプリにチャットウィンドウが追加されます。

1. 新しいリアクティブWebアプリを作成し、同じタイプのモジュールを追加します。既存のリアクティブWebアプリを使用することもできます。

2. ［Manage Dependencies］ダイアログを開きます（Ctrl+Qを押します）。「Chatbot」を検索します。プロデューサペインで［Chatbot］を選択し、要素ペインで要素をすべて選択します。［Apply］をクリックします。

   

   これにより、UIを作成してチャットボットを構成するための要素がChatbotコンポーネントから追加されます。

3. モジュールに画面を追加します。既存のアプリを使用する場合は画面を開きます。

4. チャットボットブロックを画面に追加します。［Interface］の（アプリ） > UI Flows > Chatbot > Componentsに移動します。Chatbotブロックを画面にドラッグします。画面にチャットボットのプレビューが表示されます。

   

5. Chatbotコンポーネントブロックを選択します。プロパティで、DirectLineSecretを確認します。Azureから取得したDirect Lineの鍵を引用符で囲んで貼り付けます。

   

   Direct Lineシークレットの値は、Azure Bot Serviceから取得します。以下のいずれかの手順を実行します。

   • 経験が浅い場合は、チャットボットの構成ウィザードをご覧ください。チャットボットをすばやく設定できます。
   • チャットボットサービスや関連するリソースをすでに作成していて、チャットボットの設定を自分で行う場合は、AzureからDirect Lineシークレットを取得する方法をご覧ください。
   • チャットボットサービスや関連するリソースをまだ作成していない場合は、「はじめに: アプリのFAQチャットボットを作成する」の手順をご覧ください。

6. アプリをパブリッシュし、チャットボットをテストします。チャットウィンドウにメッセージを入力します。チャットボットからの応答があった場合、チャットボットは正常に動作しています。

   

   これで、さらに複雑なチャットボットの開発を開始できるようになりました。

   ようこそメッセージなどのその他のパラメータを構成する方法の詳細については、チャットボットのリファレンスをご覧ください。

機能的なチャットボットにするには、レスポンスを処理するロジックも必要です。「アプリのFAQチャットボットを作成する」では、FAQボットの場合の手順について詳細に説明しています。高度なユースケースを実装する場合は、「高度なロジックを作成してAI機能を追加する」をご覧ください。