Ob für Terminbuchungen, FAQs oder Produktempfehlungen - fast jede Website kann von einem KI-Agenten oder Chatbot profitieren.
Und das tun sie. Da Chatbots der am schnellsten wachsende Kommunikationskanal für Marken sind, gibt es keine bessere Zeit als die Gegenwart, um in die Aktion einzusteigen.
Wie fügen Sie also all diese Komponenten zusammen? Zusätzlich zu React müssen Sie sich um Ihren LLM und KI-Agenten-Frameworks kümmern und das alles irgendwie in UI-Komponenten verpacken, mit denen Ihre Besucher interagieren können.
Die gute Nachricht ist, dass Chatbot-Plattformen Ihnen dabei helfen können. In diesem Leitfaden zeige ich Ihnen die Schritte, um:
- Einen benutzerdefinierten Chatbot erstellen
- Erstellen Sie eine Website mit Next.js und React
- Integrieren Sie Ihren Chatbot in das React-Frontend
- Anpassen des UI-Stils des Chatbots
Mit wenig Aufwand haben Sie einen professionellen, leistungsstarken Chatbot, der nahtlos in Ihre React-Website integriert ist.
Übrigens, Sie können das Tutorial überspringen und sich den Code ansehen.
2. Einen Chatbot erstellen
Kommen wir zum ersten großen Teil des Puzzles: dem Chatbot.
Um einen Bot zu erstellen, gehen Sie zum Studio und klicken Sie auf Bot erstellen +.
Es ist hilfreich, einen Zweck zu definieren, aber Sie brauchen keine besonders ausgearbeitete Idee. Ihr Unternehmen verfügt mit Sicherheit über Grundsatzdokumente, FAQs oder einen Produktkatalog. Ein einfacher Chatbot mit Zugang zu diesen Informationen könnte Ihnen viel Zeit für die Beantwortung sich wiederholender Fragen abnehmen.
In meinem Fall baue ich einen digitalen Sommelier: einen Bot, der den Nutzern auf der Grundlage eines externen Weinkatalogs Empfehlungen zum Kauf von Weinen gibt.
Definieren Sie den Fluss
Unabhängig davon, was er tut, benötigt Ihr Bot einen Ablauf. Dies ist die Logik, die das Verhalten des Bots bestimmt.
Klicken Sie im Studio auf Workflows in der linken Leiste.
Es muss nicht kompliziert sein. Ein einziger autonomer Knoten mit Zugang zu Ihren Dokumenten (d. h. der Standard-Bot) kann äußerst effektiv sein.
Es ist wichtig, dem Bot Anweisungen zu geben. Dazu gehören:
- Die Persönlichkeit, die sie annehmen soll, z. B. höflich, gesellig oder den Tonfall des Benutzers widerspiegelnd
- Möglichkeiten, die Nachricht zu beginnen oder zu beenden
- Wie man auf bestimmte Anfragen antwortet
- Auf welche Dokumente ist zu verweisen, wenn
Hinzufügen der Wissensdatenbank
Dies sind die Informationen, auf die der Bot bei der RAG (retrieval-augmented generation) zurückgreift, d. h. bei der Anpassung seiner Antworten an Ihre Daten. Dies ist relativ einfach, aber es lohnt sich zu lernen , wie Sie Ihre Dateien für die bestmögliche RAG optimieren können.
Wynona, meine digitale Sommelière, hat Zugang zu einer Weinliste. Es handelt sich dabei nur um eine Teilmenge des Datensatzes von Wine Reviews: eine Liste von Weinen mit ihren Regionen und Verkostungsnotizen.
Bereitstellung von
Sobald Sie mit Ihrem Bot zufrieden sind, klicken Sie im Studio auf Veröffentlichen und Ihr Bot ist live.
Dies ermöglicht die Integration in alle Arten von Kommunikationskanälen, wie WhatsApp, Telegram und in Web-Apps, wie die, die wir gerade entwickeln.
2. Eine React-App erstellen
Wir haben unseren Chatbot, aber er braucht ein Zuhause, also bauen wir eine schnelle React-App, in der Benutzer mit dem Bot interagieren können.
Beachten Sie, dass ich Next.js verwenden werde. Ich denke, es ist relevanter und vollständiger als einfaches React, und dieses Tutorial deckt alles ab, was React-Benutzer brauchen.
ausführen. create-next-app
Laufen:
npx create-next-app@14Sie werden feststellen, dass ich Next.js 14 verwende. Der Grund dafür ist, dass wir React 18 benötigen, um unsere App Chatbot-kompatibel zu machen. Die Ausführung mit @latest wird mit Next.js 15 und React 19 erstellt. Die Ausführung des obigen Befehls ist der einfachste Weg, um sicherzustellen, dass Sie die richtige Version von React verwenden und dass Next kompatibel ist.
App-Konfigurationen festlegen
Sie werden mit einer Reihe von Fragen konfrontiert. Ich persönlich bleibe bei den Standardeinstellungen, was ich auch in diesem Tutorial tun werde.
Wenn alles reibungslos verläuft, wird das Erfolgsprotokoll angezeigt.
3. Integrieren Sie Ihren Chatbot in Ihre React-App
Zeit, unsere Barbies zum Küssen zu bringen.
Holen Sie sich die Botpress React Boilerplate
Um den Chatbot in unsere App zu integrieren, benötigen wir:
- Unser Kunde ID
- Die vorgefertigten webchat React Komponenten.
Botpress verfügt über Boilerplate-Code, der beides enthält. Um ihn zu erhalten:
- Navigieren Sie zum Studio und klicken Sie auf Freigeben in der oberen rechten Ecke.
- Klicken Sie unten rechts im Pop-up-Fenster auf Configure
- Klicken Sie oben rechts auf die Registerkarte React.
- Hier finden Sie das Boilerplate für Botpress , einschließlich des Installationsbefehls und einer Client-ID
Übrigens, falls Sie einmal einen schnellen Zugriff auf Ihre Kunden-ID benötigen:
- Gehen Sie zu Ihrem Botpress
- Wählen Sie Webchat in der Seitenleiste
- Klicken Sie auf Erweiterte Einstellungen
Es ist am besten, dies in einer Umgebungsvariablen zu speichern, aber wir werden es vorerst in der Komponente belassen.
Erstellen Sie eine Chat in Ihrer App
In meinem Projektverzeichnis werde ich eine Datei chat.tsx erstellen.
Füllen Sie ihn dann mit dem Code für den Chatbot-Client:
"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>
);
}
Dies ist der botpress mit ein paar bemerkenswerten Änderungen:
"Client verwenden"an der Spitze, für Komponenten, die sich mit der Zustandsverwaltung befassen- Umbenennung der Funktion von App in Chat
- Etwas Styling
Navigieren Sie nun zu app/page.tsx und importieren Sie es direkt über die Fußzeile:
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>
);
}
Jetzt können Sie npm run dev in einem Terminal im Projektverzeichnis, um es auf einem lokalen Server auszuführen.
Eine React-App mit einem Chatbot betreiben
Bei leistungsstarken Web-Frameworks sind Sie zu sehr mit der Kernfunktionalität beschäftigt, als dass Sie sich um Add-ons kümmern könnten.
Botpress verfügt über vorgefertigte Komponenten, einen visuellen Drag-and-Drop-Builder und ist von oben bis unten anpassbar. Die einfache Integration geht nicht auf Kosten der Leistung.
Wenn du mit React entwickelst, bist du auf Qualität aus. Ihr Chatbot sollte das widerspiegeln.
Beginnen Sie noch heute mit dem Bau. Es ist kostenlos.
.svg)
