بناء روبوتات الدردشة التفاعلية مثل المحترفين - لا حاجة إلى خبرة

سواء كان ذلك لحجز المواعيد، أو الأسئلة الشائعة، أو توصيات المنتجات، يمكن لأي موقع إلكتروني أن يستفيد من وكيل الذكاء الاصطناعي أو chatbot.

وهم كذلك. ونظراً لأن روبوتات الدردشة الآلية هي قناة التواصل الأسرع نمواً للعلامات التجارية، فليس هناك وقت أفضل من الوقت الحالي للمشاركة في هذا المجال.

إذًا كيف تجمع كل هذه المكونات معًا؟ بالإضافة إلى React، عليك أن تقلق بشأن مزود LLM الخاص بك، وأطر عمل وكيل الذكاء الاصطناعي، وبطريقة ما تجميع كل ذلك في مكونات واجهة المستخدم التي يمكن لزوارك التفاعل معها.

والخبر السار هو أن منصاتchatbot قد غطتك. سأقدم لك في هذا الدليل الخطوات اللازمة لـ

• إنشاء chatbot مخصص
• إنشاء موقع ويب باستخدام Next.js و React
• دمج chatbot الخاص بك في واجهة React الأمامية
• تخصيص نمط واجهة مستخدم chatbot

مع القليل من الجهد، سيكون لديك chatbot احترافي عالي الأداء مدمج بسلاسة في موقع React الخاص بك.

بالمناسبة، يمكنك تخطي البرنامج التعليمي والاطلاع على الكود.

2. إنشاء Chatbot

إلى أول قطعة كبيرة من الأحجية: chatbot.

لإنشاء روبوت، انتقل إلى الاستوديو وانقر على إنشاء روبوت +.

من المفيد تحديد الغرض، لكنك لا تحتاج إلى فكرة متطورة بشكل خاص. من شبه المؤكد أن عملك التجاري لديه مستندات السياسة أو الأسئلة الشائعة أو كتالوج المنتجات. يمكن أن يوفر chatbot البسيط الذي يمكنه الوصول إلى هذه المعلومات الكثير من الوقت الذي تقضيه في الإجابة عن الأسئلة المتكررة.

في حالتي، سأقوم ببناء ساقي نبيذ رقمي: روبوت يقدم المشورة للمستخدمين بشأن النبيذ الذي يجب شراؤه، مسترشداً بكتالوج نبيذ خارجي.

تحديد التدفق

بغض النظر عما يفعله، سيحتاج الروبوت الخاص بك إلى تدفق. هذا هو المنطق الذي يحدد سلوك الروبوت. 

في الاستوديو، اضغط على سير العمل في اللوحة اليسرى.

لا يجب أن يكون الأمر معقداً. يمكن أن تكون عقدة واحدة مستقلة ذاتية الوصول إلى مستنداتك، (أي الروبوت الافتراضي)، فعالة للغاية.

من المهم إعطاء تعليمات للروبوت. وهذا يشمل:

• الشخصية التي ترغب في أن يتبناها المستخدم، على سبيل المثال أن تكون مهذبة أو ودودة أو تعكس نبرة المستخدم
• طرق بدء الرسالة أو إنهائها
• كيفية الرد على استفسارات معينة
• المستندات التي يجب الرجوع إليها عند

إضافة قاعدة المعرفة

هذه هي المعلومات التي سيعتمد عليها الروبوت في توليد RAG (التوليد المعزز للاسترجاع)، أو تلبية استجاباته لبياناتك. هذا أمر بسيط نسبيًا، لكن الأمر يستحق تعلُّم كيفية تحسين ملفاتك للحصول على أفضل توليد معزز للاسترجاع.

Wynona، الساقي الرقمي (-ère؟) لديه إمكانية الوصول إلى قائمة النبيذ. إنها مجرد مجموعة فرعية من مجموعة بيانات مراجعات النبيذ: قائمة بالنبيذ مع مناطقها وملاحظات التذوق.

النشر

بمجرد أن تكون راضيًا عن الروبوت الخاص بك، اضغط على نشر في الاستوديو وسيصبح روبوتك مباشرًا.

وهذا يجعلها متاحة للتكامل عبر جميع أنواع قنوات التواصل، مثل WhatsAppTelegram وفي تطبيقات الويب، مثل التطبيق الذي نقوم ببنائه.

2. إنشاء تطبيق React

لدينا chatbot الخاص بنا، لكنه يحتاج إلى منزل، لذا دعنا ننشئ تطبيق React سريعًا حيث يمكن للمستخدمين التفاعل مع الروبوت.

لاحظ أنني سأستخدم Next.js. أعتقد أنه أكثر ملاءمةً واكتمالًا من React العادي، وسيغطي هذا الشرح كل ما يحتاجه مستخدمو React.

تشغيل إنشاء-التطبيق التالي

اركض:

npx إنشاء-التطبيق التالي@14

ستلاحظ أنني أستخدم Next.js 14. والسبب هو أننا نحتاج إلى React 18 لجعل تطبيقنا متوافقًا مع chatbot . سيؤدي التشغيل باستخدام @latest إلى إنشاء Next.js 15 و React 19. إن تشغيل الأمر أعلاه هو أسهل طريقة للتأكد من تشغيل الإصدار الصحيح من React، وأن Next متوافق.

تعيين تكوينات التطبيق

ستتم مطالبتك بسلسلة من الأسئلة. أنا شخصياً ألتزم بالإعدادات الافتراضية، وهو ما سأفعله في هذا البرنامج التعليمي.

بافتراض أن كل شيء يسير بسلاسة، سترى سجل النجاح.

3. دمج Chatbot الخاص بك في تطبيق React الخاص بك

حان الوقت لجعل دُمى الباربي تقبل بعضها البعض.

احصل على قالب Botpress React Boilerplate

لدمج chatbot في تطبيقنا، سنحتاج إلى

• هوية العميل
• مكوِّنات React المبنية مسبقًا على webchat React.

يحتوي Botpress على كود برمجي يتضمن كلا الأمرين. للحصول عليه

• انتقل إلى الاستوديو، وانقر فوق مشاركة في الزاوية العلوية اليمنى.
• في أسفل يمين النافذة المنبثقة، انقر فوق تهيئة

• انقر على علامة التبويب تفاعل في أعلى اليمين.
• ستجد هنا نموذج Botpress المتكامل، بما في ذلك أمر التثبيت معرف العميل

بالمناسبة، إذا احتجت في أي وقت الوصول السريع إلى معرف العميل الخاص بك:

• انتقل إلى لوحة تحكمBotpress الخاصة بك
• حدد Webchat في اللوحة الجانبية
• انقر فوق إعدادات متقدمة

من الأفضل تخزين ذلك في متغير بيئة، ولكننا سنحتفظ به في المكوّن في الوقت الحالي.

إنشاء مكون Chat في تطبيقك

في دليل المشروع الخاص بي، سأقوم بإنشاء ملف chat.tsx.

ثم املأه بالرمز الخاص بعميل chatbot :

"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 مع بعض التعديلات الملحوظة:

• "استخدام العميل" في الأعلى للمكونات التي تتعامل مع إدارة الحالة
• إعادة تسمية الوظيفة من تطبيق إلى 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 ديف في محطة طرفية في دليل المشروع لتشغيله على خادم محلي.

تشغيل تطبيق React باستخدام Chatbot

مع أطر عمل الويب الثقيلة، تكون مشغولاً للغاية بالوظائف الأساسية بحيث لا تقلق بشأن الوظائف الإضافية.

يأتي Botpress مزودًا بمكونات مدمجة مسبقًا، ومنشئ سحب وإفلات مرئي، وقابلية التخصيص من أعلى إلى أسفل. التكامل البسيط لا يأتي على حساب الأداء. 

إذا كنت تبني باستخدام React، فأنت تسعى إلى الجودة. يجب أن يعكس chatbot الخاص بك ذلك.

ابدأ البناء اليوم. إنه مجاني.

الأسئلة الأكثر تداولًا

1. هل يمكنني نشر chatbot هذا في الإنتاج؟

نعم، يمكنك نشر chatbot للإنتاج بعد نشره في Botpress Studio وتضمينه في تطبيق React الخاص بك. بمجرد التضمين، يمكنك نشر التطبيق بأكمله باستخدام منصات مثل Vercel أو أي مزود استضافة يدعم stack التكنولوجيا الخاصة بك.

2. هل يمكنني تخصيص شكل ومظهر واجهة مستخدم chatbot

نعم، يمكنك تخصيص شكل واجهة مستخدم chatbot بالكامل باستخدام مكوّن Botpress Webchat . فهو يدعم الدعائم الخاصة بالألوان والحجم والموضع والتصميم، ويمكنك تجاوز الأنماط الافتراضية باستخدام CSS مخصص لمطابقة تصميم علامتك التجارية.

3. هل أحتاج إلى تحديد شخصية الروبوت، وكيف تؤثر على المحادثات؟

نعم، تحديد شخصية الروبوت مهم لأنه يوجه كيفية تواصل chatbot الآلية، بما في ذلك النبرة والصياغة. وهذا يضمن توافق المحادثة مع صوت علامتك التجارية ويعزز ثقة المستخدم.

4. ما هو الغرض من تدفق chatbot لية، وكيف يمكنني تحديده؟

الغرض من تدفق chatbot هو التحكم في منطق كيفية استجابة الروبوت للمستخدمين. في Botpress يمكنك تحديد التدفقات بشكل مرئي في علامة التبويب "تدفقات العمل" باستخدام عقد للإجراءات والرسائل والشروط والانتقالات.

5. هل يمكنني استخدام مستنداتي الحالية (مثل الأسئلة الشائعة أو كتالوجات المنتجات) لتدريب الروبوت؟

نعم، يمكنك تحميل المستندات الموجودة مثل الأسئلة الشائعة أو الكتيبات إلى قاعدة معارف Botpress . يستخدم البوت توليد الاسترجاع المعزز (RAG) للإجابة عن الأسئلة من خلال سحب المعلومات ذات الصلة مباشرةً من تلك المستندات.