如何像专业人士一样用React JS构建聊天机器人

无论是预约、常见问题解答还是产品推荐，几乎任何网站都能从一个AI 助手或聊天机器人中受益。

事实也是如此。聊天机器人已成为品牌增长最快的沟通渠道，现在正是加入其中的好时机。

那么，如何将这些组件串联起来？除了 React，你还需要考虑 LLM 提供商、AI 助手框架，并将它们打包成访客可交互的 UI 组件。

好消息是，聊天机器人平台已经为你准备好了。在本指南中，我将为你讲解：

• 构建自定义聊天机器人
• 用 Next.js 和 React 创建网站
• 将你的聊天机器人集成到 React 前端
• 自定义聊天机器人的 UI 样式

只需简单几步，你就能让专业高效的聊天机器人无缝集成到你的 React 网站中。

顺便说一句，你可以跳过教程，直接查看代码。

2. 构建聊天机器人

接下来是第一个重要环节：聊天机器人。

要创建机器人，进入 studio 并点击创建 Bot +。

明确目标很有帮助，但不需要特别完善的想法。你的企业几乎肯定有政策文件、FAQ 或产品目录。一个能访问这些信息的简单机器人就能帮你节省大量重复答疑的时间。

以我为例，我要构建一个数字侍酒师：一个根据外部酒单为用户推荐葡萄酒的机器人。

定义流程

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

在 studio 左侧面板点击工作流。

流程不必复杂。只需一个自主节点并能访问你的文档（即默认机器人），就能非常高效。

为机器人设定指令很重要，包括：

• 你希望它采用的人设，例如礼貌、亲切，或模仿用户语气
• 如何开始或结束消息
• 如何回应特定问题
• 在何时参考哪些文档

添加知识库

这是机器人用于RAG（检索增强生成）的信息，即根据你的数据定制回复。操作相对简单，但建议了解如何优化你的文件以获得最佳 RAG 效果。

我的数字侍酒师 Wynona 可以访问一份酒单。这只是Wine Reviews数据集的一个子集：包含葡萄酒、产区和品鉴笔记的列表。

部署

当你对机器人满意后，在 studio 点击发布，你的机器人就上线了。

这样就可以集成到各种沟通渠道，比如WhatsApp、Telegram，以及我们正在构建的网页应用中。

2. 创建 React 应用

我们有了聊天机器人，但还需要一个“家”，所以我们来快速搭建一个 React 应用，让用户可以与机器人互动。

注意，我将使用 Next.js。我认为它比纯 React 更实用、更完整，本教程也会覆盖 React 用户需要的全部内容。

运行create-next-app

运行：

npx create-next-app@14

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

设置应用配置

你会看到一系列提示。我个人会选择默认设置，本教程也会采用默认配置。

一切顺利的话，你会看到成功日志。

3. 将你的聊天机器人集成到 React 应用

现在是让两个 Barbie 互动的时刻。

获取 Botpress React 模板代码

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

• 我们的 client ID
• 预构建的 webchat React 组件。

Botpress 提供了包含这两项的模板代码。获取方法如下：

• 进入studio，点击右上角分享。
• 在弹窗右下角点击配置

• 点击右上角的React标签页。
• 这里可以找到 Botpress 模板代码，包括安装命令和 client ID。

顺便说下，如果你需要快速获取 client 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 代码，做了几个关键调整：

• 顶部加上"use client"，用于涉及状态管理的组件
• 将函数名从 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 应用

使用大型 Web 框架时，你会专注于核心功能，无需为附加功能分心。

Botpress 自带预构建组件、可视化拖拽编辑器和高度自定义能力。简单集成并不影响性能。

如果你选择 React 构建应用，说明你追求品质。你的聊天机器人也应如此。

立即开始构建。永久免费。

常见问题

1. 我可以将这个聊天机器人部署到生产环境吗？

可以。在 Botpress Studio 发布机器人并嵌入到 React 应用后，你可以将整个应用部署到 Vercel 等平台，或任何支持你技术栈的主机商。

2. 聊天机器人 UI 的外观可以自定义吗？

可以。你可以通过 Botpress Webchat 组件完全自定义聊天机器人 UI 的外观。它支持颜色、尺寸、位置和样式等属性，还可以用自定义 CSS 覆盖默认样式，匹配你的品牌设计。

3. 需要为机器人定义人设吗？这会影响对话吗？

需要。定义机器人的人设很重要，它决定了聊天机器人的沟通方式，包括语气和措辞。这能让对话风格与你品牌一致，提升用户信任。

4. 聊天机器人流程的作用是什么？如何定义？

聊天机器人流程的作用是控制机器人如何响应用户。在 Botpress 中，你可以在“工作流”标签页用可视化方式，通过节点设置动作、消息、条件和跳转来定义流程。

5. 我可以用已有文档（如 FAQ 或产品目录）训练机器人吗？

可以。你可以将 FAQ、手册等现有文档上传到 Botpress 知识库。机器人会通过检索增强生成（RAG）技术，直接从这些文档中提取相关信息来回答问题。