譯者 | 李睿

審校 | 重樓

隨著科技世界的不斷發展，聊天機器人已經成為許多企業不可或缺的一部分，提供高效和個性化的客戶互動。在眾多可用的人工智能聊天機器人解決方案中，ChatGPT因其自然語言處理能力和場景理解用戶查詢的能力而脫穎而出。

Kommunicate是一個強大的平臺，它簡化了將人工智能聊天機器人集成到網站和應用程序中的過程。通過將這兩種技術相結合，可以為用戶創造無縫互動的聊天機器人體驗。

本文將探討用戶如何使用Kommunicate平臺將ChatGPT與ReactJS集成，從而更容易在自己的網站上部署和管理聊天機器人。

步驟1：在Kommunicate中設置帳戶

如果在Kommunicate沒有帳戶，用戶可以免費創建一個帳戶。

接下來，登錄Kommunicate儀表板并導航到Bot Integration部分。點擊使用Kommunicate創建聊天機器人。

接下來，通過指定聊天機器人的名稱、語言和人工切換設置來完成設置。配置完這些之后，繼續完成聊天機器人的設置。

步驟2：為ReactJS聊天機器人創建歡迎消息和意向

導航到“Manage Bots”部分，選擇創建的聊天機器人。

接下來，需要為聊天機器人設置歡迎消息。歡迎消息是聊天機器人發送給發起對話的用戶的初始消息。單擊“歡迎消息”部分，然后鍵入聊天機器人在用戶打開聊天機器人并保存歡迎意圖時應該顯示給用戶的消息。

在創建歡迎消息之后，構建聊天機器人的下一步是創建意圖(問題和答案)。在“回答”部分，可以添加所有可能的用戶問題和聊天機器人的相應回答。

首先，點擊“+添加（+Add）”按鈕并提供“意向名稱（Intent name）”。在“Step 1: User Says”下，需要指定將觸發聊天機器人響應的短語/問題。在“Step 2: Bot Says”一節中，需要指定聊天機器人對用戶消息的響應?？梢蕴砑佣鄠€答案和后續響應，使聊天機器人更具互動性。

步驟3：激活ChatGPT

在同一頁面上，會發現設置(頁面的右上角)。

點擊設置，第一個選項是“連接OpenAI ChatGPT”。啟用它。

最后，禁用Small Talk(同一頁面上的最后一個選項)。

步驟4：將Komspose聊天機器人安裝到ReactJS應用程序

有兩種不同的方法可以將Kommunicate聊天小部件集成到React網站或項目中。這里有一種方法。

創建一個新的ReactJS項目

假設已經安裝了Node.js和npm，打開終端，使用Create React App創建一個新的ReactJS項目：

npx create-react-app my-app

現在，導航到my-app文件夾。

cd my-app

通過使用npm命令安裝Kommunicate聊天工具包

• 使用下面的npm命令來安裝Kommunicate聊天工具包：

npm i @kommunicate/kommunicate-chatbot-plugin

• 在安裝完工具包之后，使用下面的代碼將其導入到index.js文件中

從“@Kommunicate/communicate聊天機器人插件”導入Kommunicate；

• 現在，在index.js文件中添加以下代碼

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

添加APP_ID。可以在這里獲得APP_ID。

• 運行應用程序

現在，已經使用Kommunicate將ChatGPT支持的聊天機器人與ReactJS集成，是看看它的實際效果的時候了。在終端中，運行以下命令啟動開發服務器。

• npm啟動

訪問者現在可以與聊天機器人進行交互，而Kommunicate將處理對話方面的問題。

如果想了解更多關于將ReactJS應用程序集成到communication的信息，可以查看相關的文檔。

使用Kommunicate平臺將ChatGPT與ReactJS集成，提供了一種強大而直接的方法，可以通過人工智能驅動的聊天機器人增強網站的用戶體驗；通過將ChatGPT的功能與Kommunicate提供的易于部署相結合，可以為用戶創建一個更具互動性和個性化的環境。用戶可以嘗試不同的定制，將聊天機器人轉變成為滿足網站訪問者需求的不可或缺的資產。

原文標題：Integrating ChatGPT With ReactJS for Smarter Conversational Interfaces，作者：Devashish Mamgain