วิธีสร้าง Chatbot ใน React JS แบบมืออาชีพ

ไม่ว่าจะเป็นการจองนัดหมาย คำถามที่พบบ่อย หรือคำแนะนำผลิตภัณฑ์ เว็บไซต์ใดๆ ก็สามารถได้รับประโยชน์จาก AI Agent หรือแชทบอทได้

และเป็นเช่นนั้นจริงๆ เนื่องจาก Chatbots เป็น ช่องทางการสื่อสารที่เติบโตเร็วที่สุด สำหรับแบรนด์ต่างๆ จึงไม่มีเวลาใดดีไปกว่าตอนนี้ในการเข้าร่วมกิจกรรมนี้

แล้วคุณจะร้อยเรียงส่วนประกอบทั้งหมดเหล่านี้เข้าด้วยกันได้อย่างไร นอกเหนือจาก React แล้ว คุณยังต้องกังวลเกี่ยวกับ LLM ผู้ให้บริการ เฟรมเวิร์กตัวแทน AI และแพ็คเกจบางอย่างที่รวมอยู่ในส่วนประกอบ UI ที่ผู้เยี่ยมชมของคุณสามารถโต้ตอบด้วยได้

ข่าวดีก็คือ แพลตฟอร์มแชทบอท ช่วยคุณได้ ในคู่มือนี้ ฉันจะบอกขั้นตอนต่าง ๆ ให้คุณทราบดังนี้:

• สร้างแชทบอทที่กำหนดเอง
• สร้างเว็บไซต์ด้วย Next.js และ React
• รวมแชทบอทของคุณเข้ากับ React front-end
• ปรับแต่งรูปแบบ UI ของแชทบอท

ด้วยความพยายามเพียงเล็กน้อย คุณจะมีแชทบอทระดับมืออาชีพประสิทธิภาพสูงที่รวมเข้ากับไซต์ React ของคุณได้อย่างราบรื่น

อย่างไรก็ตาม คุณสามารถข้ามบทช่วยสอนและตรวจสอบ โค้ด ได้

2. สร้างแชทบอท

มาถึงชิ้นใหญ่ชิ้นแรกของปริศนา: แชทบอท

ในการสร้างบอท ให้ไปที่สตูดิโอและคลิก สร้างบอท +

มันช่วยกำหนดจุดประสงค์ได้ แต่คุณไม่จำเป็นต้องมีแนวคิดที่พัฒนาเป็นพิเศษ ธุรกิจของคุณมักจะมีเอกสารนโยบาย คำถามที่พบบ่อย หรือแคตตาล็อกผลิตภัณฑ์ แชทบอทง่ายๆ ที่สามารถเข้าถึงข้อมูลเหล่านี้ได้จะช่วยให้คุณประหยัดเวลาในการตอบคำถามซ้ำๆ ได้มาก

ในกรณีของฉัน ฉันจะสร้างซอมเมอลิเยร์ดิจิทัล: บอทที่ให้คำแนะนำผู้ใช้เกี่ยวกับไวน์ที่ควรซื้อ โดยได้รับคำแนะนำจากแคตตาล็อกไวน์ภายนอก

กำหนดการไหล

ไม่ว่าจะทำอะไร บอทของคุณจะต้องมีโฟลว์ นี่คือตรรกะที่กำหนดพฤติกรรมของบอท 

ในสตูดิโอ คลิก เวิร์กโฟลว์ ในแผงด้านซ้าย

ไม่จำเป็นต้องซับซ้อน โหนดอิสระ เพียงโหนดเดียวที่สามารถเข้าถึงเอกสารของคุณได้ (เช่น บ็อตเริ่มต้น) สามารถให้ผลอย่างมีประสิทธิภาพสูงสุด

การให้คำแนะนำกับบอทถือเป็นสิ่งสำคัญ ซึ่งรวมถึง:

• บุคลิกที่คุณต้องการให้เป็น เช่น สุภาพ เป็นมิตร หรือสะท้อนน้ำเสียงของผู้ใช้
• วิธีการเริ่มต้นหรือสิ้นสุดข้อความ
• วิธีการตอบคำถามเฉพาะ
• เอกสารใดที่ต้องอ้างอิงเมื่อ

เพิ่มฐานความรู้

นี่คือข้อมูลที่บอตจะดึงมาใช้ใน RAG (retrieval-augmented generation) หรือการตอบสนองของบอตต่อข้อมูลของคุณ ซึ่งค่อนข้างตรงไปตรงมา แต่ควรเรียนรู้ วิธีเพิ่มประสิทธิภาพไฟล์ของคุณ เพื่อให้ได้ RAG ที่ดีที่สุด

Wynona ซอมเมลิเยร์ดิจิทัลของฉันสามารถเข้าถึงรายการไวน์ได้ ซึ่งเป็นเพียงส่วนย่อยของชุดข้อมูล Wine Reviews : รายการไวน์พร้อมภูมิภาคและบันทึกการชิม

ใช้

เมื่อคุณพอใจกับบอทของคุณแล้ว ให้กด เผยแพร่ ในสตูดิโอ แล้วบอทของคุณก็จะเริ่มทำงาน

ทำให้สามารถบูรณาการกับช่องทางการสื่อสารทุกประเภท เช่น WhatsApp Telegram และในแอปบนเว็บ เช่นที่เรากำลังสร้าง

2. สร้างแอป React

เรามีแชทบอทแล้ว แต่จำเป็นต้องมีที่อยู่ ดังนั้นมาสร้างแอป React ที่รวดเร็วที่ผู้ใช้สามารถโต้ตอบกับบอทกันได้

โปรดทราบว่าฉันจะใช้ Next.js ฉันคิดว่ามันมีความเกี่ยวข้องและสมบูรณ์มากกว่า React ทั่วไป และบทช่วยสอนนี้จะครอบคลุมทุกประเด็นที่ผู้ใช้ React ต้องการ

วิ่ง สร้างแอปถัดไป

วิ่ง:

npx สร้างแอปถัดไป@14

คุณจะสังเกตเห็นว่าฉันใช้ Next.js 14 เหตุผลก็คือ เราต้องการ React 18 เพื่อให้แชทบอทในแอปของเราเข้ากันได้ การรันด้วย @latest จะสร้างได้ด้วย Next.js 15 และ React 19 การรันคำสั่งด้านบนเป็น วิธีที่ง่ายที่สุด เพื่อให้แน่ใจว่าคุณรัน React เวอร์ชันที่ถูกต้อง และ Next เข้ากันได้

ตั้งค่าการกำหนดค่าแอป

คุณจะได้รับคำถามชุดหนึ่ง ฉันมักจะใช้การตั้งค่าเริ่มต้น ซึ่งเป็นสิ่งที่ฉันจะใช้ในบทช่วยสอนนี้

ถ้าทุกอย่างดำเนินไปอย่างราบรื่น คุณจะเห็นบันทึกความสำเร็จ

3. รวม Chatbot ของคุณเข้ากับแอป React

ถึงเวลาที่จะทำให้บาร์บี้ของเราจูบกัน

รับ Botpress รีแอ็กต์ บอยเลอร์เพลต

เพื่อรวมแชทบอทเข้ากับแอปของเรา เราจะต้อง:

• รหัสลูกค้าของเรา
• ที่สร้างไว้ล่วงหน้า webchat ส่วนประกอบของ React

Botpress มีโค้ดสำเร็จรูปที่รวมทั้งสองอย่างไว้ด้วยกัน วิธีรับโค้ด:

• ไปที่ สตูดิโอ แล้วคลิก แชร์ ที่มุมขวาบน
• ที่ด้านล่างขวาของป๊อปอัป คลิก กำหนดค่า

• คลิกแท็บ React ที่ด้านบนขวา
• ที่นี่คุณจะพบกับ Botpress แบบฟอร์มสำเร็จรูป รวมถึงคำสั่งติดตั้งและรหัสไคลเอนต์

อย่างไรก็ตาม หากคุณต้องการเข้าถึง 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
• การจัดแต่งทรงบางอย่าง

ตอนนี้ไปที่ แอป/หน้า.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 รัน dev ในเทอร์มินัลในไดเร็กทอรีโครงการเพื่อรันบนเซิร์ฟเวอร์ภายในเครื่อง

เพิ่มประสิทธิภาพแอป React ด้วย Chatbot

ด้วยกรอบงานเว็บที่มีการใช้งานหนัก คุณจะยุ่งกับฟังก์ชันหลักมากเกินไปจนไม่มีเวลาต้องกังวลเกี่ยวกับส่วนเสริม

Botpress มาพร้อมกับส่วนประกอบที่สร้างไว้ล่วงหน้า ตัวสร้างแบบลากและวาง และความสามารถในการปรับแต่งจากบนลงล่าง การผสานรวมที่เรียบง่ายไม่ได้แลกมาด้วยประสิทธิภาพ 

หากคุณกำลังสร้างด้วย React แสดงว่าคุณต้องการคุณภาพ Chatbot ของคุณควรสะท้อนสิ่งนั้น

เริ่มสร้างวันนี้ ฟรี

คำถามที่พบบ่อย

1. ฉันสามารถนำแชทบอทนี้ไปใช้งานจริงได้หรือไม่

ใช่ คุณสามารถปรับใช้แชทบอทสู่การผลิตได้หลังจากเผยแพร่ใน Botpress Studio และฝังลงในแอป React ของคุณ เมื่อฝังแล้ว คุณสามารถปรับใช้แอปพลิเคชันทั้งหมดโดยใช้แพลตฟอร์มเช่น Vercel หรือผู้ให้บริการโฮสติ้งใดๆ ที่รองรับเทคโนโลยีของคุณ stack -

2. ฉันสามารถปรับแต่งรูปลักษณ์และความรู้สึกของ UI ของแชทบอทได้หรือไม่

ใช่ คุณสามารถปรับแต่งรูปลักษณ์ของ UI ของแชทบอทได้อย่างสมบูรณ์โดยใช้ Botpress Webchat ส่วนประกอบ รองรับพร็อพสำหรับสี ขนาด ตำแหน่ง และรูปแบบ และคุณสามารถแทนที่รูปแบบเริ่มต้นด้วย CSS ที่กำหนดเองเพื่อให้ตรงกับการออกแบบของแบรนด์ของคุณ

3. ฉันจำเป็นต้องกำหนดบุคลิกของบอทหรือไม่ และจะส่งผลต่อการสนทนาอย่างไร

ใช่ การกำหนดบุคลิกของบอทนั้นสำคัญ เพราะเป็นแนวทางในการสื่อสารของแชทบอท ซึ่งรวมถึงน้ำเสียงและการใช้ถ้อยคำ การทำเช่นนี้จะช่วยให้มั่นใจว่าบทสนทนาสอดคล้องกับเสียงของแบรนด์คุณ และเพิ่มความไว้วางใจให้กับผู้ใช้

4. จุดประสงค์ของการไหลของแชทบอทคืออะไร และฉันจะกำหนดได้อย่างไร

จุดประสงค์ของการไหลของแชทบอทคือการควบคุมตรรกะของวิธีที่บอทตอบสนองต่อผู้ใช้ Botpress คุณกำหนดโฟลว์ในรูปแบบภาพได้ในแท็บ “เวิร์กโฟลว์” โดยใช้โหนดสำหรับการดำเนินการ ข้อความ เงื่อนไข และการเปลี่ยนแปลง

5. ฉันสามารถใช้เอกสารที่มีอยู่ (เช่น คำถามที่พบบ่อยหรือแคตตาล็อกผลิตภัณฑ์) เพื่อฝึกบอทได้หรือไม่

ใช่ คุณสามารถอัปโหลดเอกสารที่มีอยู่ เช่น คำถามที่พบบ่อยหรือคู่มือลงใน Botpress ฐานความรู้ บอทใช้ Retrieval-Augmented Generation (RAG) เพื่อตอบคำถามโดยดึงข้อมูลที่เกี่ยวข้องโดยตรงจากเอกสารเหล่านั้น