- Ang pagbuo ng isang website na chatbot gamit ang React ay nangangailangan ng pagsasama-sama LLMs , frameworks, at mga bahagi ng UI.
- Gumawa muna ng logic at knowledge base ng iyong chatbot, pagkatapos ay i-deploy ito para sa pagsasama-sama sa mga channel tulad ng web at messaging apps.
- Ang Next.js ay gumagawa ng matibay na pundasyon para sa iyong React app; isama ang Botpress webchat component upang i-embed ang iyong bot nang walang putol.
Para man sa booking ng appointment, FAQ, o rekomendasyon sa produkto, halos anumang website ang maaaring makinabang mula sa isang AI Agent o chatbot.
At sila ay. Sa pagiging ang chatbots ang pinakamabilis na lumalagong channel ng komunikasyon para sa mga brand, walang oras tulad ng kasalukuyan para makisali sa aksyon.
Kaya paano mo pinagsasama-sama ang lahat ng mga sangkap na ito? Sa ibabaw ng React, kailangan mong mag-alala tungkol sa iyong LLM provider, AI agent frameworks , at kahit papaano ay naka-package na lahat sa mga bahagi ng UI na maaaring makipag-ugnayan ang iyong mga bisita.
Ang magandang balita ay nasasakupan ka ng mga platform ng chatbot . Sa gabay na ito, ibibigay ko sa iyo ang mga hakbang upang:
- Bumuo ng custom na chatbot
- Gumawa ng website gamit ang Next.js at React
- Isama ang iyong chatbot sa React front-end
- I-customize ang istilo ng UI ng chatbot
Sa kaunting pagsisikap, magkakaroon ka ng isang propesyonal, mahusay na gumaganap na chatbot na isinama nang walang putol sa iyong React site.
Siyanga pala, maaari mong laktawan ang tutorial at tingnan ang code .
2. Bumuo ng Chatbot

Sa unang malaking piraso ng puzzle: ang chatbot.
Upang gumawa ng bot, pumunta sa studio at i-click ang Lumikha ng Bot + .
Nakakatulong itong tukuyin ang isang layunin, ngunit hindi mo kailangan ng partikular na binuong ideya. Ang iyong negosyo ay halos tiyak na may mga dokumento ng patakaran, FAQ, o isang katalogo ng produkto. Ang isang simpleng chatbot na may access sa impormasyong ito ay maaaring magbakante ng maraming oras na ginugugol mo sa pagsagot sa mga paulit-ulit na tanong.
Sa aking kaso, gagawa ako ng digital sommelier: isang bot na nagpapayo sa mga user na bumili ng mga alak, na ginagabayan ng isang external na catalog ng alak.
Tukuyin ang daloy
Anuman ang ginagawa nito, kakailanganin ng iyong bot ng daloy. Ito ang lohika na tumutukoy sa gawi ng bot.
Sa studio, pindutin ang Workflows sa kaliwang panel.

Hindi naman kailangang kumplikado. Ang nag-iisang autonomous node na may access sa iyong mga dokumento, (ibig sabihin, ang default na bot), ay maaaring maging lubos na epektibo.

Mahalagang ibigay ang mga tagubilin sa bot. Kabilang dito ang:
- Ang katauhan na gusto mong gamitin, hal. magalang, magiliw, o i-mirror ang tono ng gumagamit
- Mga paraan upang simulan o tapusin ang mensahe
- Paano tumugon sa mga partikular na query
- Aling mga dokumento ang sasangguni kung kailan
Idagdag ang Knowledge Base
Ito ang impormasyong kukunin ng bot para sa RAG (retrieval-augmented generation) , o paglalagay ng mga tugon nito sa iyong data. Ito ay medyo diretso, ngunit ito ay nagkakahalaga ng pag-aaral kung paano i-optimize ang iyong mga file para sa pinakamahusay na posibleng RAG.
Wynona, ang aking digital sommelier(-ère?) ay may access sa isang listahan ng alak. Isa lamang itong subset ng dataset ng Wine Reviews : isang listahan ng mga alak kasama ang kanilang mga rehiyon at mga tala sa pagtikim.
I-deploy

Kapag masaya ka na sa iyong bot, pindutin ang I-publish sa studio at live ang iyong bot.
Ginagawa nitong available para sa pagsasama sa lahat ng uri ng mga channel ng komunikasyon, tulad ng WhatsApp , Telegram , at sa mga web app, tulad ng ginagawa namin.
2. Gumawa ng React App
Mayroon kaming chatbot, ngunit kailangan nito ng tahanan, kaya bumuo tayo ng isang mabilis na React app kung saan maaaring makipag-ugnayan ang mga user sa bot.
Tandaan na gagamitin ko ang Next.js. Sa tingin ko ito ay mas may kaugnayan at kumpleto kaysa sa simpleng React, at ang tutorial na ito ay sumasaklaw sa lahat ng lupa na kailangan ng mga user ng React.
Takbo create-next-app
Patakbuhin:
npx create-next-app@14
Mapapansin mong gumagamit ako ng Next.js 14. Ang dahilan ay kailangan natin ng React 18 para maging tugma ang ating app chatbot. Ang pagpapatakbo gamit ang @latest ay bubuo sa Next.js 15 at React 19. Ang pagpapatakbo sa command sa itaas ay ang pinakamadaling paraan upang matiyak na pinapatakbo mo ang tamang bersyon ng React, at ang Next ay tugma.
Itakda ang mga configuration ng app
Ipo-prompt ka ng isang serye ng mga tanong. Personal kong nananatili sa mga default na setting, na kung ano ang gagawin ko para sa tutorial na ito.

Ipagpalagay na maayos ang lahat, makikita mo ang tala ng tagumpay.

3. Isama ang Iyong Chatbot sa React App mo
Oras na para maghalikan ang ating mga Barbie.
Kunin ang Botpress React Boilerplate
Upang isama ang chatbot sa aming app, kakailanganin namin ang:
- Ang aming client ID
- Ang prebuilt webchat Mga bahagi ng reaksyon.
Botpress ay may boilerplate code na kinabibilangan ng pareho. Para makuha ito:
- Mag-navigate sa studio , at i-click ang Ibahagi sa kanang sulok sa itaas.
- Sa kanang ibaba ng pop-up, i-click ang I-configure

- I-click ang tab na React sa kanang tuktok.
- Dito makikita mo ang Botpress boilerplate, kasama ang utos ng pag-install ng isang client ID

Siyanga pala, kung kailangan mo ng mabilis na access sa iyong client ID:
- Pumunta sa iyong dashboard Botpress
- Pumili Webchat sa side panel
- I-click ang Mga Advanced na Setting
Pinakamainam na kasanayan na iimbak ito sa isang variable ng kapaligiran, ngunit pananatilihin namin ito sa bahagi sa ngayon.
Lumikha ng a Chat Component sa iyong App
Sa aking direktoryo ng proyekto, gagawa ako ng chat.tsx file.

Pagkatapos ay punan ito ng code para sa chatbot 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>
);
}
Ito ang botpress code na may ilang kapansin-pansing pag-aayos:
"gamitin ang kliyente"
sa taas, para sa mga bahagi na nakikitungo sa pamamahala ng estado- Ang pagpapalit ng pangalan ng function mula sa App patungo sa Chat
- Ilang styling
Ngayon mag-navigate sa app/page.tsx
at i-import ito sa itaas lamang ng 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>
);
}
Ngayon ay maaari kang tumakbo npm tumakbo dev
sa isang terminal sa direktoryo ng proyekto upang patakbuhin ito sa isang lokal na server.
Paganahin ang React App gamit ang Chatbot
Sa mabibigat na web frameworks, masyado kang abala sa pangunahing functionality para mag-alala tungkol sa mga add-on.
Botpress ay may mga pre-built na bahagi, isang visual na tagabuo ng drag-and-drop, at top-to-bottom na customizability. Ang simpleng pagsasama ay hindi naabot sa halaga ng pagganap.
Kung nagtatayo ka gamit ang React, ang habol mo ay kalidad. Dapat ipakita iyon ng iyong chatbot.
Simulan ang pagtatayo ngayon . Ito ay libre.