- React ile bir web sitesi sohbet robotu oluşturmak, LLMs'leri, çerçeveleri ve UI bileşenlerini bir araya getirmeyi gerektirir.
- Önce sohbet botunuzun mantığını ve bilgi tabanını oluşturun, ardından web ve mesajlaşma uygulamaları gibi kanallara entegrasyon için dağıtın.
- Next.js, React uygulamanız için sağlam bir temel oluşturur; botunuzu sorunsuz bir şekilde yerleştirmek için Botpress webchat bileşenini entegre edin.
İ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.