如何用 React JS 构建聊天机器人

确定流程

无论做什么，机器人都需要一个流程。这是决定机器人行为的逻辑。 

在工作室中，点击左侧面板中的工作流程。

这并不复杂。一个可以访问文件的独立节点（即默认机器人）就可以发挥极大的作用。

给机器人下达指令很重要。这包括

• 您希望它采用的角色，例如礼貌、亲切或反映用户的语气
• 开始或结束信息的方式
• 如何回答特定询问
• 参考哪些文件

添加知识库

这是机器人在进行RAG（检索增强生成）时将利用的信息，或者说是机器人对您的数据做出响应时将利用的信息。这一点相对简单，但值得学习如何优化您的文件以获得最佳的 RAG。

维诺娜，我的数字侍酒师（-ère?）这只是 "葡萄酒评论"数据集的一个子集：包含产区和品酒笔记的葡萄酒列表。

部署

对机器人满意后，在工作室点击 "发布"，机器人就上线了。

这样，它就可以整合到各种通信渠道中，如 WhatsApp、Telegram 和网络应用（如我们正在构建的应用）。

运行 创建下一个应用程序

运行：

npx create-next-app@14

你会注意到我使用的是 Next.js 14。原因是我们需要 React 18来兼容我们的聊天机器人应用。使用 @latest 运行将使用 Next.js 15 和 React 19 构建。运行上述命令是确保运行正确版本React 和兼容 Next 的最简单方法。

设置应用程序配置

系统会提示你一系列问题。我个人坚持使用默认设置，本教程也将使用默认设置。

假设一切顺利，您将看到成功日志。

获取Botpress React 模板

要将聊天机器人集成到我们的应用程序中，我们需要

• 我们的客户 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 在项目目录下的终端中运行，以便在本地服务器上运行。