React JS'de Bir Profesyonel Gibi Chatbot Nasıl Oluşturulur?

İster randevu rezervasyonu, ister SSS veya ürün önerileri için olsun, hemen hemen her web sitesi bir AI Agent veya sohbet robotundan yararlanabilir.

Ve öyleler de. Sohbet robotlarının markalar için en hızlı büyüyen iletişim kanalı olmasıyla birlikte, harekete geçmek için şimdiki zamandan daha uygun bir zaman yok.

Peki tüm bu bileşenleri nasıl bir araya getireceksiniz? React'in yanı sıra, LLM sağlayıcınız, yapay zeka aracı çerçeveleriniz hakkında endişelenmeniz ve tüm bunları bir şekilde ziyaretçilerinizin etkileşime girebileceği UI bileşenlerine paketlemeniz gerekir.

İyi haber şu ki, chatbot platformları sizi koruyor. Bu kılavuzda size aşağıdaki adımları vereceğim:

• Özel bir sohbet robotu oluşturun
• Next.js ve React ile bir web sitesi oluşturma
• Sohbet botunuzu React ön ucuna entegre edin
• Chatbot'un kullanıcı arayüzü stilini özelleştirin

Çok az çabayla, React sitenize sorunsuz bir şekilde entegre edilmiş profesyonel, yüksek performanslı bir sohbet botuna sahip olacaksınız.

Bu arada, öğreticiyi atlayabilir ve kodu kontrol edebilirsiniz.

2. Bir Chatbot Oluşturun

Bulmacanın ilk büyük parçasına gelelim: sohbet robotu.

Bir bot oluşturmak için stüdyoya gidin ve Bot Oluştur + seçeneğine tıklayın.

Bir amaç tanımlamak yardımcı olur, ancak özellikle gelişmiş bir fikre ihtiyacınız yoktur. İşletmenizin neredeyse kesinlikle politika belgeleri, SSS'leri veya bir ürün kataloğu vardır. Bu bilgilere erişimi olan basit bir sohbet robotu, tekrar eden soruları yanıtlamak için harcadığınız zamanın çoğunu size kazandırabilir.

Benim durumumda, dijital bir şarap garsonu inşa edeceğim: harici bir şarap kataloğu tarafından yönlendirilen kullanıcılara satın alabilecekleri şaraplar konusunda tavsiyelerde bulunan bir bot.

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.

2. Bir React Uygulaması Oluşturun

Sohbet robotumuz var, ancak bir yuvaya ihtiyacı var, bu yüzden kullanıcıların botla etkileşime girebileceği hızlı bir React uygulaması oluşturalım.

Next.js kullanacağımı unutmayın. Düz React'ten daha alakalı ve eksiksiz olduğunu düşünüyorum ve bu eğitim React kullanıcılarının ihtiyaç duyduğu tüm zemini kapsayacaktır.

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.

3. Chatbotunuzu React Uygulamanıza Entegre Edin

Barbie'lerimizi öpüştürme zamanı.

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.

Bir React Uygulamasını Chatbot ile Güçlendirme

Ağır iş web çerçeveleriyle, eklentiler hakkında endişelenmek için temel işlevsellikle çok meşgul olursunuz.

Botpress , önceden oluşturulmuş bileşenler, görsel bir sürükle ve bırak oluşturucu ve yukarıdan aşağıya özelleştirilebilirlik ile birlikte gelir. Basit entegrasyon performanstan ödün vermez. 

React ile geliştiriyorsanız, kalitenin peşindesiniz demektir. Sohbet robotunuz bunu yansıtmalıdır.

Bugün inşa etmeye başlayın. Ücretsiz.

SSS

1. Bu sohbet robotunu üretime dağıtabilir miyim?

Evet, sohbet botunu Botpress Studio'da yayınladıktan ve React uygulamanıza yerleştirdikten sonra üretime dağıtabilirsiniz. Gömüldükten sonra, Vercel gibi platformları veya teknoloji stack destekleyen herhangi bir barındırma sağlayıcısını kullanarak tüm uygulamayı dağıtabilirsiniz.

2. Sohbet robotu kullanıcı arayüzünün görünümünü ve hissini özelleştirebilir miyim?

Evet, Botpress Webchat bileşenini kullanarak chatbot kullanıcı arayüzünün görünümünü tamamen özelleştirebilirsiniz. Renkler, boyut, yerleşim ve stil için sahne öğelerini destekler ve markanızın tasarımına uyması için varsayılan stilleri özel CSS ile geçersiz kılabilirsiniz.

3. Bir bot persona tanımlamam gerekiyor mu ve bu konuşmaları nasıl etkiliyor?

Evet, bir bot personası tanımlamak önemlidir çünkü sohbet robotunun ton ve ifade dahil olmak üzere nasıl iletişim kuracağına rehberlik eder. Bu, konuşmanın markanızın sesiyle uyumlu olmasını sağlar ve kullanıcı güvenini artırır.

4. Bir chatbot akışının amacı nedir ve nasıl tanımlayabilirim?

Bir chatbot akışının amacı, botun kullanıcılara nasıl yanıt vereceğinin mantığını kontrol etmektir. Botpress'te, eylemler, mesajlar, koşullar ve geçişler için düğümler kullanarak "İş Akışları" sekmesinde akışları görsel olarak tanımlarsınız.

5. Botu eğitmek için mevcut belgelerimi (ör. SSS'ler veya ürün katalogları) kullanabilir miyim?

Evet, SSS veya kılavuzlar gibi mevcut belgeleri Botpress Bilgi Tabanına yükleyebilirsiniz. Bot, ilgili bilgileri doğrudan bu belgelerden çekerek soruları yanıtlamak için erişimle artırılmış üretim (RAG) kullanır.