- 使用 React 构建网站聊天机器人需要将LLMs、框架和 UI 组件拼凑在一起。
- 首先创建聊天机器人的逻辑和知识库，然后将其部署到网络和消息应用程序等渠道进行整合。
- Next.js 为您的 React 应用程序奠定了坚实的基础；集成Botpress webchat 组件可无缝嵌入您的机器人。
无论是预约、常见问题还是产品推荐，任何网站都可以从人工智能代理或聊天机器人中受益。
他们就是这样。随着聊天机器人成为品牌增长最快的沟通渠道，现在是加入这一行列的最佳时机。
那么，如何将所有这些组件串联起来呢？在 React 的基础上，您还必须关注LLM 提供商和人工智能代理框架，并以某种方式将所有这些组件打包成访客可以与之交互的 UI 组件。
好消息是，聊天机器人平台已经为您做好了准备。在本指南中，我将为您介绍以下步骤：
- 创建自定义聊天机器人
- 使用 Next.js 和 React 创建网站
- 将聊天机器人集成到 React 前端
- 自定义聊天机器人的用户界面风格
不费吹灰之力，您就能将一个专业、高性能的聊天机器人无缝集成到您的 React 网站中。
顺便说一下，您可以跳过教程，直接查看代码。
2.构建聊天机器人
接下来是拼图的第一大块：聊天机器人。
要创建机器人，请进入工作室并点击 "创建机器人 +"。
确定目的很有帮助，但您并不需要一个特别成熟的想法。您的企业几乎肯定有政策文件、常见问题或产品目录。一个可以访问这些信息的简单聊天机器人可以让您节省大量回答重复问题的时间。
在我的案例中，我将建立一个数字侍酒师：在外部葡萄酒目录的指导下，向用户提供购买葡萄酒建议的机器人。
确定流程
无论做什么，机器人都需要一个流程。这是决定机器人行为的逻辑。
在工作室中，点击左侧面板中的工作流程。
这并不复杂。一个可以访问文件的独立节点（即默认机器人）就可以发挥极大的作用。
给机器人下达指令很重要。这包括
- 您希望它采用的角色，例如礼貌、亲切或反映用户的语气
- 开始或结束信息的方式
- 如何回答特定询问
- 参考哪些文件
添加知识库
这是机器人在进行RAG（检索增强生成）时将利用的信息，或者说是机器人对您的数据做出响应时将利用的信息。这一点相对简单，但值得学习如何优化您的文件以获得最佳的 RAG。
维诺娜，我的数字侍酒师（-ère?）这只是 "葡萄酒评论"数据集的一个子集：包含产区和品酒笔记的葡萄酒列表。
部署
对机器人满意后，在工作室点击 "发布"，机器人就上线了。
这样，它就可以整合到各种通信渠道中，如 WhatsApp、Telegram 和网络应用（如我们正在构建的应用）。
2.创建 React 应用程序
我们有了聊天机器人，但它需要一个家，所以让我们快速创建一个 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 模板
要将聊天机器人集成到我们的应用程序中，我们需要
- 我们的客户 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）技术，直接从这些文档中提取相关信息来回答问题。
.webp)
