- 要用 React 建立網站聊天機器人，需要整合 LLM、框架和 UI 元件。
- 先建立聊天機器人的邏輯和知識庫，然後部署，方便整合到網站和各種訊息應用程式等多個渠道。
- Next.js 是 React 應用的穩固基礎；只要整合 Botpress 的 webchat 元件，就能順利嵌入你的機器人。
無論是預約、常見問答還是產品推薦，幾乎任何網站都能從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 檔案。
然後把聊天機器人 client 的程式碼填進去：
"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，在 footer 上方匯入它：
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 或任何支援你技術棧的主機平台部署。
2. 聊天機器人的 UI 外觀可以自訂嗎？
可以。你可以用 Botpress Webchat 元件完全自訂聊天機器人的 UI 外觀。它支援顏色、尺寸、位置和樣式等屬性，也能用自訂 CSS 覆蓋預設樣式，配合你的品牌設計。
3. 我需要定義機器人角色嗎？這會影響對話嗎？
需要。定義機器人角色很重要，因為這會影響聊天機器人的語氣和用詞，讓對話符合品牌風格，也提升用戶信任感。
4. 聊天機器人流程有什麼作用？要怎麼定義？
聊天機器人流程的作用是控制機器人如何回應用戶。在 Botpress 裡，你可以在「工作流程」標籤頁用節點視覺化定義動作、訊息、條件和轉換。
5. 我可以用現有文件（如 FAQ 或產品型錄）訓練機器人嗎？
可以。你可以將現有文件（如 FAQ 或手冊）上傳到 Botpress 知識庫。機器人會用檢索增強生成（RAG）技術，直接從這些文件中擷取相關資訊來回答問題。
.webp)
