สร้างแชทบอทใน React JS แบบมืออาชีพ

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

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

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

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

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

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

หรือจะข้ามบทเรียนนี้แล้วไปดู โค้ดตัวอย่าง ได้เลย

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

ต่อไปคือชิ้นส่วนสำคัญชิ้นแรก: แชทบอท

เพื่อสร้างบอท ให้ไปที่ studio แล้วคลิก Create Bot +

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

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

กำหนดโฟลว์

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

ใน studio ให้คลิก Workflows ที่แถบด้านซ้าย

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

อย่าลืมกำหนดคำแนะนำให้บอทด้วย ซึ่งรวมถึง:

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

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

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

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

เผยแพร่

เมื่อคุณพอใจกับบอทแล้ว ให้คลิก Publish ใน 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.js ที่เข้ากันได้

ตั้งค่าคอนฟิกแอป

จะมีคำถามให้ตอบหลายข้อ ผมเลือกใช้ค่าตั้งต้นทั้งหมด ซึ่งจะใช้ในบทเรียนนี้

ถ้าทุกอย่างเรียบร้อย จะเห็นข้อความแจ้งความสำเร็จ

3. ผสานรวมแชทบอทเข้ากับแอป React ของคุณ

ถึงเวลาทำให้ Barbies ของเราจูบกันแล้ว

รับ React Boilerplate ของ Botpress

เพื่อผสานรวมแชทบอทกับแอปของเรา เราต้องมี:

• Client ID ของเรา
• คอมโพเนนต์ React สำหรับเว็บแชทที่สร้างไว้ล่วงหน้า

Botpress มีโค้ดตัวอย่างที่รวมทั้งสองอย่างนี้ไว้แล้ว วิธีรับคือ:

• ไปที่ studio แล้วคลิก Share ที่มุมขวาบน
• ที่มุมขวาล่างของป็อปอัป ให้คลิก Configure

• คลิกแท็บ React ที่มุมขวาบน
• ที่นี่จะมี boilerplate ของ Botpress พร้อมคำสั่งติดตั้งและ client ID

ถ้าต้องการดู client ID อย่างรวดเร็ว:

• ไปที่ แดชบอร์ด Botpress ของคุณ
• เลือก Webchat ที่แถบด้านข้าง
• คลิก Advanced Settings

โดยปกติควรเก็บ client ID ไว้ใน environment variable แต่ในตัวอย่างนี้จะใส่ไว้ในคอมโพเนนต์ก่อน

สร้างคอมโพเนนต์แชทในแอปของคุณ

ในโฟลเดอร์โปรเจกต์ ผมจะสร้างไฟล์ chat.tsx

จากนั้นใส่โค้ดสำหรับ 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>
   );
}

นี่คือโค้ดของ botpress ที่มีการปรับแต่งเล็กน้อยดังนี้:

• เพิ่ม "use client" ด้านบน สำหรับคอมโพเนนต์ที่จัดการ state
• เปลี่ยนชื่อฟังก์ชันจาก App เป็น Chat
• เพิ่มสไตล์บางส่วน

จากนั้นไปที่ app/page.tsx แล้ว import คอมโพเนนต์นี้ไว้เหนือ 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 ของคุณ เมื่อฝังเรียบร้อยแล้ว สามารถนำแอปไป deploy บนแพลตฟอร์มอย่าง Vercel หรือผู้ให้บริการโฮสติ้งที่รองรับเทคโนโลยีของคุณได้

2. สามารถปรับแต่งหน้าตา UI ของแชทบอทได้หรือไม่?

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

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

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

4. โฟลว์ของแชทบอทมีไว้ทำอะไร และจะกำหนดอย่างไร?

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

5. สามารถใช้เอกสารเดิม (เช่น FAQ หรือแคตตาล็อกสินค้า) เพื่อฝึกบอทได้หรือไม่?

ได้ คุณสามารถอัปโหลดเอกสารเดิม เช่น FAQ หรือคู่มือ ลงใน Botpress Knowledge Base ได้ บอทจะใช้ retrieval-augmented generation (RAG) เพื่อดึงข้อมูลที่เกี่ยวข้องจากเอกสารเหล่านั้นมาตอบคำถาม