像專家一樣建立 React 聊天機器人 - 不需要任何經驗

定義流程

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

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

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

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

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

新增知識庫

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

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

部署

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

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

運行 建立下一個應用程式

運行：

npx create-next-app@14

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

設定應用程式配置

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

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

取得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 在專案目錄下的終端機中，在本機伺服器上執行。