如何像專家一樣使用 React JS 建立聊天機器人

無論是預約、常見問題或產品推薦，任何網站都可以從AI Agent或聊天機器人獲益。

他們就是這樣。聊天機器人是品牌成長最快的溝通管道，現在是加入行動的最佳時機。

那麼您要如何將這些元件串連起來呢？在 React 之上，您還要擔心LLM 提供者、AI 代理框架，以及如何將這些全部包裝成您的訪客可以互動的 UI 元件。

好消息是，聊天機平台已為您提供服務。在本指南中，我會告訴您以下步驟：

• 建立自訂聊天機器人
• 使用 Next.js 和 React 建立網站
• 將您的聊天機器人整合到 React 前端
• 自訂聊天機器人的 UI 風格

不費吹灰之力，您就可以擁有一個專業、高效能的聊天機器人，無縫整合到您的 React 網站中。

順便說一下，您可以跳過教學，直接查看程式碼。

2.建立聊天機器人

接下來是拼圖的第一大塊：聊天機器人。

若要建立機器人，請前往工作室，然後按一下Create Bot +。

定義目的很有幫助，但您不需要一個特別發達的想法。您的公司幾乎肯定有政策文件、常見問題或產品目錄。一個可以存取這些資訊的簡單聊天機器人可以讓您省下許多回答重複問題的時間。

在我的案例中，我會建立一個數位品酒師：在外部葡萄酒目錄的引導下，提供使用者購買葡萄酒建議的機器人。

定義流程

無論做什麼，您的機器人都需要一個流程。這是決定機器人行為的邏輯。 

在工作室中，點擊左側面板中的Workflows。

它不需要很複雜。只要有一個自主節點可以存取您的文件 (也就是預設的機器人)，就可以發揮極大的功效。

給機器人指示是很重要的。這包括

• 您希望它採用的角色，例如：彬彬有禮、和藹可親，或反映使用者的語氣
• 開始或結束訊息的方式
• 如何回應特定查詢
• 參考哪些文件

新增知識庫

這是機器人在進行RAG（retrieval-augmented generation，檢索增量生成）時將會使用的資訊，或者說是為了迎合其對您資料的回應。這相對地簡單，但值得學習如何最佳化您的檔案，以獲得可能的最佳 RAG。

Wynona，我的數位侍酒師（-ère?）這只是「Wine Reviews」資料集的一個子集：帶有產區和品酒筆記的葡萄酒清單。

部署

一旦您對您的機器人感到滿意，在工作室按下「發佈」，您的機器人就正式啟用了。

這讓它可以整合至各種通訊管道，例如 WhatsApp、Telegram，以及 Web 應用程式，例如我們正在建置的應用程式。

2.建立 React App

我們有了聊天機器人，但它需要一個家，所以讓我們建立一個快速的 React 應用程式，讓使用者可以與機器人互動。

請注意，我會使用 Next.js。我認為它比純 React 更貼切、更完整，本教學也會涵蓋 React 使用者需要的所有內容。

運行 建立下一個應用程式

運行：

npx create-next-app@14

您會注意到我使用的是 Next.js 14。原因是我們需要 React 18來讓我們的應用程式與聊天機相容。使用 @latest 執行會以 Next.js 15 和 React 19 建立。執行上述指令是最簡單的方法，可以確保您執行正確版本的 React，而且 Next 是相容的。

設定應用程式配置

系統會提示您一系列問題。我個人堅持使用預設設定，這也是我在本教程中要做的。

假設一切順利，您會看到成功記錄。

3.將您的聊天機器人整合到 React 應用程式中

是時候讓我們的芭比娃娃接吻了。

取得Botpress React Boilerplate

要將聊天機器人整合到我們的應用程式中，我們需要

• 我們的客戶 ID
• 預先建立的webchat React 元件。

Botpress 的模板程式碼包含兩者。要獲得它：

• 導覽到工作室，然後按一下右上角的「分享」。
• 在彈出視窗的右下方，按一下設定

• 按一下右上方的React索引標籤。
• 在這裡您可以找到Botpress 的範本，包括安裝指令一個用戶端 ID

順便說一下，如果您需要快速存取您的客戶 ID：

• 前往您的Botpress 面板
• 在側邊面板選取Webchat
• 按一下進階設定

最好的做法是將其儲存於環境變數中，但我們暫時還是將其保留在元件中。

在您的應用程式中建立Chat 元件

在我的專案目錄中，我要建立一個 chat.tsx 檔案。

然後將聊天機用戶端程式碼填入其中：

"use client"
import { useState } from 'react';


import {
   Webchat,
   WebchatProvider,
   Fab,
   getClient,
   Configuration,
} from '@botpress/webchat';


const clientId = "";


const configuration: Configuration = {
   color: '#000',
};


export default function Chat() {
   const client = getClient({
       clientId,
   });


   const [isWebchatOpen, setIsWebchatOpen] = useState(false);


   const toggleWebchat = () => {
       setIsWebchatOpen((prevState) => !prevState);
   };


   return (
       <div
           style={{
               position: 'fixed',
               display: 'flex',
               flexDirection: 'column',
               bottom: 0,
               right: 0,
               alignItems: 'flex-end',
               gap: '12px',
               padding: '24px', // give some breathing room
               zIndex: 9999,
           }}
       >
           <WebchatProvider client={client} configuration={configuration}>


               <div
                   style={{
                       // position: '',
                       marginTop: '12px',
                       marginBottom: '72px',
                       width: '350px',
                       maxHeight: '500px',
                       overflow: 'scroll',
                       borderRadius: '16px',
                       backgroundColor: '#fff',
                       transform: isWebchatOpen ? 'scale(1)' : 'scale(0)',
                       transformOrigin: 'bottom right',
                       transition: 'transform 0.3s ease-in-out',
                   }}
               >
                   <Webchat />
               </div>
               <Fab onClick={toggleWebchat} style={{ position: 'absolute', bottom: '24px', right: '24px' }} />
           </WebchatProvider>
       </div>
   );
}

這是botpress 的程式碼，有幾處值得注意的調整：

• 「使用客戶端」 在頂部、 用於處理狀態管理的元件
• 將功能從 App 重新命名為Chat
• 一些造型

現在瀏覽到 app/page.tsx 並將其匯入頁尾上方：

import Image from "next/image";
import styles from "./page.module.css";
import Chat from "./chat";


export default function Home() {
 return (
   <div className={styles.page}>
     <main className={styles.main}>
      
       <Image
         className={styles.logo}
         src="https://nextjs.org/icons/next.svg"
         alt="Next.js logo"
         width={180}
         height={38}
         priority
       />
       <ol>
         <li>
           Get started by editing <code>app/page.tsx</code>.
         </li>
         <li>Save and see your changes instantly.</li>
       </ol>


       <div className={styles.ctas}>
         <a
           className={styles.primary}
           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
         >
           <Image
             className={styles.logo}
             src="https://nextjs.org/icons/vercel.svg"
             alt="Vercel logomark"
             width={20}
             height={20}
           />
           Deploy now
         </a>
         <a
           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
           className={styles.secondary}
         >
           Read our docs
         </a>
       </div>
      
     </main>
     <Chat/>
     <footer className={styles.footer}>
       <a
         href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/file.svg"
           alt="File icon"
           width={16}
           height={16}
         />
         Learn
       </a>
       <a
         href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/window.svg"
           alt="Window icon"
           width={16}
           height={16}
         />
         Examples
       </a>
       <a
         href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/globe.svg"
           alt="Globe icon"
           width={16}
           height={16}
         />
         Go to nextjs.org →
       </a>
     </footer>
   </div>
 );
}

現在您可以執行 npm run dev 在專案目錄下的終端機中，在本機伺服器上執行。

使用聊天機器人強化 React 應用程式

有了重型網頁框架，您就可以忙著處理核心功能，無暇顧及附加元件。

Botpress 具備預先建立的元件、可視化的拖放建立工具，以及自上而下的客製化功能。簡單的整合並不會犧牲效能。 

如果您使用 React 建置，那麼您追求的就是品質。您的聊天機器人也應該反映這一點。

今天就開始建立。這是免費的。

常見問題

1.我可以將這個聊天機部署到生產環境嗎？

是的，您可以在Botpress Studio 中發佈聊天機器人，並將其嵌入 React 應用程式後，將其部署到生產中。嵌入後，您可以使用 Vercel 等平台或任何支援您技術stack的主機供應商部署整個應用程式。

2.我可以自訂聊天機使用者介面的外觀和感覺嗎？

是的，您可以使用Botpress Webchat 元件完全自訂聊天機使用者介面的外觀。它支援顏色、大小、位置和樣式的道具，您可以使用自訂 CSS 覆寫預設樣式，以符合您的品牌設計。

3.我是否需要定義機器人角色，它對會話有何影響？

是的，定義一個機器人角色非常重要，因為它會引導聊天機器人的溝通方式，包括語氣和措辭。這可確保對話符合您的品牌聲音，並提高使用者的信任度。

4.聊天機流程的目的是什麼，該如何定義？

聊天機器人流程的目的是控制機器人回應使用者的邏輯。在Botpress 中，您可以在 「工作流程 」標籤中使用動作、訊息、條件和轉換節點來定義流程。

5.我可以使用現有的文件（例如常見問題或產品目錄）來訓練機器人嗎？

是的，您可以將常見問題或使用手冊等現有文件上傳到Botpress 知識庫。該機器人使用檢索增強生成 (RAG) 直接從這些文件中提取相關資訊來回答問題。