Bir Profesyonel Gibi React Chatbotları Oluşturun - Deneyim Gerekmez

Akışı tanımlayın

Ne yaptığına bakılmaksızın, botunuzun bir akışa ihtiyacı olacaktır. Bu, botun davranışını belirleyen mantıktır. 

Stüdyoda, sol paneldeki İş Akışları' na basın.

Karmaşık olmak zorunda değil. Belgelerinize erişimi olan tek bir otonom düğüm (yani varsayılan bot) son derece etkili olabilir.

Bota talimatlar vermek önemlidir. Buna şunlar dahildir:

• Benimsemesini istediğiniz kişilik, örneğin kibar, samimi veya kullanıcının tonunu yansıtmak
• Mesajı başlatma veya bitirme yolları
• Belirli sorulara nasıl yanıt verilir?
• Ne zaman hangi belgelere başvurulmalı

Bilgi Tabanını Ekleme

Bu, botun RAG (retrieval-augmented generation) için yararlanacağı veya verilerinize verdiği yanıtları hazırlayacağı bilgidir. Bu nispeten basittir, ancak dosyalarınızı mümkün olan en iyi RAG için nasıl optimize edeceğinizi öğrenmeye değer.

Wynona, dijital sommelier(-ère?)'imin bir şarap listesine erişimi var. Bu sadece Wine Reviews veri kümesinin bir alt kümesi: bölgeleri ve tadım notlarıyla birlikte şarapların bir listesi.

Dağıtım

Botunuzdan memnun kaldığınızda, stüdyoda Yayınla düğmesine basın ve botunuz yayında olsun.

Bu sayede her türlü iletişim kanalına entegre edilebilir. WhatsApp, Telegram ve inşa ettiğimiz gibi web uygulamalarında.

Koşmak create-next-app

Koş:

npx create-next-app@14

Next.js 14 kullandığımı fark edeceksiniz. Bunun nedeni, uygulamamızı chatbot uyumlu hale getirmek için React 18'e ihtiyacımız olmasıdır. En son sürüm ile çalıştırmak Next.js 15 ve React 19 ile oluşturacaktır. Yukarıdaki komutu çalıştırmak, React'in doğru sürümünü çalıştırdığınızdan ve Next'in uyumlu olduğundan emin olmanın en kolay yoludur.

Uygulama yapılandırmalarını ayarlama

Bir dizi soru ile karşılaşacaksınız. Ben şahsen varsayılan ayarlara bağlı kalıyorum, bu eğitimde de öyle yapacağım.

Her şeyin yolunda gittiğini varsayarsak, başarı günlüğünü göreceksiniz.

Botpress React Boilerplate'i edinin

Sohbet robotunu uygulamamıza entegre etmek için şunlara ihtiyacımız olacak:

• Müşteri kimliğimiz
• Önceden oluşturulmuş webchat React bileşenleri.

Botpress 'in her ikisini de içeren şablon kodu vardır. Almak için:

• Stüdyoya gidin ve sağ üst köşedeki Paylaş 'a tıklayın.
• Açılır pencerenin sağ alt köşesinde Yapılandır'a tıklayın

• Sağ üstteki React sekmesine tıklayın.
• Burada, bir istemci kimliği yükleme komutu da dahil olmak üzere Botpress şablonunu bulacaksınız

Bu arada, müşteri kimliğinize hızlı bir şekilde erişmeniz gerekirse:

• Botpress kontrol panelinize gidin
• Yan panelde Webchat 'i seçin
• Gelişmiş Ayarlar'a tıklayın

Bunu bir ortam değişkeninde saklamak en iyi uygulamadır, ancak şimdilik bileşende tutacağız.

Uygulamanızda Chat Bileşeni Oluşturma

Proje dizinimde bir chat.tsx dosyası oluşturacağım.

Ardından chatbot istemcisinin koduyla doldurun:

"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>
   );
}

Bu, birkaç önemli değişiklikle botpress kodudur:

• "istemci kullan" en üstte, durum yönetimi ile ilgilenen bileşenler için
• İşlevi Uygulama'dan Chat'e yeniden adlandırma
• Bazı şekillendirmeler

Şimdi şuraya gidin app/page.tsx ve altbilginin hemen üstüne aktarın:

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>
 );
}

Şimdi çalıştırabilirsiniz npm run dev yerel bir sunucuda çalıştırmak için proje dizinindeki bir terminalde.