React JS ile Profesyonel Gibi Sohbet Botu Nasıl Oluşturulur

İster randevu alma, ister SSS, ister ürün önerileri için olsun, neredeyse her web sitesi bir Yapay Zekâ Temsilcisi veya sohbet botundan faydalanabilir.

Ve şu anda da öyle. Sohbet botları markalar için en hızlı büyüyen iletişim kanalı olduğundan, bu alana dahil olmak için en iyi zaman şimdi.

Peki tüm bu bileşenleri nasıl bir araya getireceksiniz? React'ın üzerine, LLM sağlayıcınız, yapay zekâ temsilcisi çerçeveleri ve tüm bunları ziyaretçilerinizin etkileşime geçebileceği arayüz bileşenlerine dönüştürmek gibi konuları da düşünmeniz gerekiyor.

İyi haber şu ki, sohbet botu platformları bu konuda size yardımcı oluyor. Bu rehberde size şu adımları göstereceğim:

• Özel bir sohbet botu oluşturmak
• Next.js ve React ile bir web sitesi hazırlamak
• Sohbet botunuzu React ön yüzüne entegre etmek
• Sohbet botunun arayüzünü özelleştirmek

Az bir çabayla, profesyonel ve yüksek performanslı bir sohbet botunu React sitenize sorunsuzca entegre etmiş olacaksınız.

Bu arada, eğitimi atlayıp koda göz atabilirsiniz.

2. Bir Sohbet Botu Oluşturun

Şimdi bulmacanın ilk büyük parçasına geçiyoruz: sohbet botu.

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

Bir amaç belirlemek faydalı olur, ancak çok gelişmiş bir fikre ihtiyacınız yok. İşletmenizde muhtemelen politika belgeleri, SSS'ler veya bir ürün kataloğu vardır. Bu bilgilere erişimi olan basit bir sohbet botu, tekrarlayan soruları yanıtlamak için harcadığınız zamanı önemli ölçüde azaltabilir.

Benim örneğimde, dijital bir şarap danışmanı oluşturacağım: dış bir şarap kataloğundan yararlanarak kullanıcılara hangi şarapları alabilecekleri konusunda önerilerde bulunan bir bot.

Akışı tanımlayın

Botunuz ne yaparsa yapsın, bir akışa ihtiyacı olacak. Bu, botun davranışını belirleyen mantıktır.

Stüdyoda, sol panelden İş Akışlarına tıklayın.

Karmaşık olması gerekmez. Belgelerinize erişimi olan tek bir otonom düğüm (yani varsayılan bot), son derece etkili olabilir.

Bota talimat vermek önemlidir. Bunlar şunları içerir:

• Botun benimsemesini istediğiniz kişilik, ör. kibar, samimi ya da kullanıcının tonunu yansıtan
• Mesaja nasıl başlanacağı veya bitirileceği
• Belirli sorulara nasıl yanıt verileceği
• Hangi belgelere ne zaman başvurulacağı

Bilgi Tabanı Ekleyin

Bu, botun RAG (bilgiye dayalı yanıt üretimi) için kullanacağı, yani yanıtlarını verilerinize göre şekillendireceği bilgidir. Oldukça basit olsa da, dosyalarınızı en iyi RAG için nasıl optimize edeceğinizi öğrenmek faydalı olur.

Benim dijital şarap danışmanım Wynona, bir şarap listesine erişebiliyor. Bu, Wine Reviews veri setinin bir alt kümesi: şarapların bölgeleri ve tadım notlarıyla birlikte bir listesi.

Yayınla

Botunuzdan memnunsanız, stüdyoda Yayınla butonuna tıklayın ve botunuz aktif hale gelsin.

Bu, onu WhatsApp, Telegram ve bizim oluşturduğumuz web uygulaması gibi birçok iletişim kanalında entegre edilebilir hale getirir.

2. Bir React Uygulaması Oluşturun

Sohbet botumuz hazır, fakat bir ortama ihtiyacı var; şimdi kullanıcıların botla etkileşime geçebileceği hızlı bir React uygulaması oluşturalım.

Ben Next.js kullanacağım. Bence sade React'tan daha kapsamlı ve güncel; bu eğitim React kullanıcılarının ihtiyaç duyduğu tüm noktaları kapsayacak.

create-next-app komutunu çalıştırın

Şunu çalıştırın:

npx create-next-app@14

Next.js 14 kullandığıma dikkat etmişsinizdir. Bunun nedeni, uygulamamızın sohbet botu ile uyumlu olması için React 18'e ihtiyacımız olması. @latest ile çalıştırırsanız Next.js 15 ve React 19 ile kurulur. Yukarıdaki komutu kullanmak, doğru React 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ı ayarlayın

Bir dizi soruyla karşılaşacaksınız. Ben genellikle varsayılan ayarları kullanıyorum ve bu eğitimde de öyle yapacağım.

Her şey yolunda giderse, başarı mesajını göreceksiniz.

3. Sohbet Botunuzu React Uygulamanıza Entegre Edin

Barbielerimizi öpüştürme zamanı.

Botpress React Başlangıç Şablonunu Alın

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

• Müşteri kimliğimiz
• Hazır webchat React bileşenleri.

Botpress, ikisini de içeren bir başlangıç kodu sunuyor. Şöyle alabilirsiniz:

• stüdyoya gidin ve sağ üst köşeden Paylaş butonuna tıklayın.
• Açılan pencerede sağ altta Yapılandırya tıklayın

• Sağ üstteki React sekmesine tıklayın.
• Burada, yükleme komutunu ve müşteri kimliğini içeren Botpress başlangıç kodunu bulabilirsiniz.

Bu arada, müşteri kimliğinize hızlıca ulaşmanız gerekirse:

• Botpress kontrol paneline gidin
• Yan panelden 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şenin içinde tutacağız.

Uygulamanızda Bir Sohbet Bileşeni Oluşturun

Proje dizinimde chat.tsx adında bir dosya oluşturacağım.

Sonra, sohbet botu istemcisi için gerekli kodu ekleyin:

"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, Botpress kodu ve birkaç önemli değişiklik:

• En üstte "use client", durum yönetimiyle ilgili bileşenler için
• Fonksiyonun adını App'ten Chat'e değiştirmek
• Biraz stil eklemek

Şimdi app/page.tsx dosyasına gidin ve bunu footer'ın hemen üstüne import edin:

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

Artık proje dizininde bir terminalde npm run dev komutunu çalıştırarak yerel sunucuda uygulamayı başlatabilirsiniz.

Bir Sohbet Botu ile React Uygulamasını Güçlendirin

Ağır web çerçeveleriyle, genellikle temel işlevlerle uğraşırken ek özellikleri düşünmeye fırsat kalmaz.

Botpress, hazır bileşenler, görsel sürükle-bırak oluşturucu ve baştan sona özelleştirilebilirlik sunar. Kolay entegrasyon, performanstan ödün vermez.

React ile geliştiriyorsanız, kaliteye önem veriyorsunuz demektir. Sohbet botunuz da bunu yansıtmalı.

Hemen oluşturmaya başlayın. Ücretsiz.

Sıkça Sorulan Sorular

1. Bu sohbet botunu üretime alabilir miyim?

Evet, sohbet botunu Botpress Studio'da yayınladıktan ve React uygulamanıza gömdükten sonra üretime alabilirsiniz. Gömme işlemi tamamlandıktan sonra, uygulamanın tamamını Vercel gibi platformlarda veya teknoloji yığınınızı destekleyen herhangi bir hosting sağlayıcısında dağıtabilirsiniz.

2. Sohbet botunun arayüzünü özelleştirebilir miyim?

Evet, Botpress Webchat bileşenini kullanarak sohbet botunun arayüzünü tamamen özelleştirebilirsiniz. Renkler, boyut, konum ve stil için özellikler sunar; ayrıca kendi CSS'inizle varsayılan stilleri değiştirerek markanıza uygun hale getirebilirsiniz.

3. Bir bot kişiliği tanımlamam gerekir mi, bu konuşmaları nasıl etkiler?

Evet, bir bot kişiliği tanımlamak önemlidir çünkü sohbet botunun nasıl iletişim kuracağını, tonunu ve üslubunu belirler. Bu, konuşmanın markanızın sesine uygun olmasını sağlar ve kullanıcı güvenini artırır.

4. Sohbet botu akışının amacı nedir ve nasıl tanımlanır?

Sohbet botu akışının amacı, botun kullanıcılara nasıl yanıt vereceğini kontrol etmektir. Botpress'te, “İş Akışları” sekmesinde düğümlerle eylemler, mesajlar, koşullar ve geçişler ekleyerek akışları görsel olarak tanımlarsınız.

5. Mevcut belgelerimi (ör. SSS veya ürün katalogları) botu eğitmek için kullanabilir miyim?

Evet, mevcut belgelerinizden SSS veya kılavuzlar gibi dokümanları Botpress Bilgi Tabanı'na yükleyebilirsiniz. Bot, retrieval-augmented generation (RAG) yöntemini kullanarak soruları bu belgelerden doğrudan bilgi çekerek yanıtlar.