ChatGPT と ReactJS を統合してよりスマートな会話型インターフェースを実現

翻訳者 |李睿

レビュー | Chonglou

テクノロジーの世界が進化し続けるにつれて、チャットボットは多くのビジネスに不可欠な要素となり、効率的でパーソナライズされた顧客とのやり取りを提供しています。利用可能な多くの AI チャットボットソリューションの中で、ChatGPT は自然言語処理機能とユーザーのクエリを文脈的に理解する能力で際立っています。

Kommunicate は、AI チャットボットを Web サイトやアプリケーションに統合するプロセスを簡素化する強力なプラットフォームです。これら 2 つのテクノロジーを組み合わせることで、ユーザーにとってシームレスでインタラクティブなチャットボットエクスペリエンスを実現できます。

この記事では、ユーザーが Kommunicate プラットフォームを使用して ChatGPT を ReactJS と統合し、独自の Web サイトでチャットボットを簡単に展開および管理できるようにする方法について説明します。

ステップ1: Kommunicateでアカウントを設定する

Kommunicate にアカウントをお持ちでない場合は、無料で作成できます。

次に、Kommunicate ダッシュボードにログインし、ボット統合セクションに移動します。 Kommunicate を使用してチャットボットを作成するにはクリックします。

次に、チャットボットの名前、言語、および人間による切り替え設定を指定してセットアップを完了します。これらが設定されたら、チャットボットの設定を完了します。

ステップ 2: ReactJS チャットボットのウェルカムメッセージとインテントを作成する

「ボットの管理」セクションに移動し、作成したチャットボットを選択します。

次に、チャットボットのウェルカムメッセージを設定する必要があります。ウェルカムメッセージは、会話を開始したユーザーにチャットボットが送信する最初のメッセージです。「ようこそメッセージ」セクションをクリックし、ユーザーがチャットボットを開いてウェルカムインテントを保存したときにチャットボットがユーザーに表示するメッセージを入力します。

ウェルカムメッセージを作成した後、チャットボットを構築する次のステップは、インテント (質問と回答) を作成することです。回答セクションでは、考えられるすべてのユーザーの質問と、チャットボットからの対応する回答を追加できます。

まず、「+ 追加」ボタンをクリックして、インテント名を入力します。「ステップ 1: ユーザーが言うこと」では、チャットボットの応答をトリガーするフレーズ/質問を指定する必要があります。「ステップ 2: ボットの応答」セクションでは、ユーザーメッセージに対するチャットボットの応答を指定する必要があります。複数の回答やフォローアップ応答を追加して、チャットボットをよりインタラクティブにすることができます。

ステップ3: ChatGPTを有効化する

同じページに、 [設定] (ページの右上隅)があります。

「設定」をクリックすると、最初のオプションは「OpenAI ChatGPT に接続」になります。有効にします。

最後に、Small Talk (同じページの最後のオプション) を無効にします。

ステップ4: KomsposeチャットボットをReactJSアプリケーションにインストールする

Kommunicate チャットウィジェットを React Web サイトまたはプロジェクトに統合するには、2 つの方法があります。ここに一つの方法があります。

新しいReactJSプロジェクトを作成する

Node.js と npm がインストールされていると仮定して、ターミナルを開き、 Create React Appを使用して新しい ReactJS プロジェクトを作成します。

 npx create-react-app my-app

次に、my-app フォルダーに移動します。

 cd my-app

npmコマンドを使用してKommunicateチャットツールキットをインストールします。

Kommunicate チャットツールキットをインストールするには、次の npm コマンドを使用します。

 npm i @kommunicate/kommunicate-chatbot-plugin

ツールキットをインストールしたら、次のコードを使用してindex.jsファイルにインポートします。

'@Kommunicate/communicateChatbotPlugin' から Kommunicate をインポートします。

次に、index.jsファイルに次のコードを追加します。

 Kommunicate.init("APP_ID", { automaticChatOpenOnNavigation: true, popupWidget: true });

APP_IDを追加します。 APP_IDはここで取得できます。

アプリケーションを実行する

Kommunicate を使用して ChatGPT ベースのチャットボットを ReactJS と統合したので、実際に動作する様子を見てみましょう。ターミナルで次のコマンドを実行して開発サーバーを起動します。

npm スタート

訪問者はチャットボットと対話できるようになり、会話部分は Kommunicate が処理します。

ReactJS アプリケーションを通信に統合する方法について詳しく知りたい場合は、関連するドキュメントを確認してください。

Kommunicateプラットフォームを使用してChatGPT を ReactJS と統合すると、AI 駆動型チャットボットを使用して Web サイトのユーザーエクスペリエンスを強化する強力で簡単な方法が提供されます。ChatGPTのパワーと Kommunicate が提供する展開の容易さを組み合わせることで、ユーザーにとってよりインタラクティブでパーソナライズされた環境を作成できます。ユーザーはさまざまなカスタマイズを試して、チャットボットを Web サイト訪問者のニーズを満たすために欠かせない資産に変えることができます。

元のタイトル: ChatGPT と ReactJS を統合してよりスマートな会話型インターフェースを実現、著者: Devashish Mamgain

<<:

>>: