.webp)
Niezależnie od tego, czy chodzi o rezerwację spotkań, często zadawane pytania, czy rekomendacje produktów, prawie każda strona internetowa może skorzystać z agenta AI lub chatbota.
I są. Ponieważ chatboty są najszybciej rozwijającym się kanałem komunikacji dla marek, nie ma lepszego czasu niż teraźniejszość, aby włączyć się do akcji.
Jak więc połączyć te wszystkie komponenty? Oprócz Reacta musisz martwić się o dostawcę LLM , frameworki agentów AI i jakoś spakować to wszystko w komponenty interfejsu użytkownika, z którymi odwiedzający mogą wchodzić w interakcje.
Dobrą wiadomością jest to, że platformy chatbotowe mają wszystko pod kontrolą. W tym przewodniku przedstawię kroki, aby:
- Tworzenie niestandardowego chatbota
- Tworzenie strony internetowej za pomocą Next.js i React
- Zintegruj swojego chatbota z front-endem Reacta
- Dostosuj styl interfejsu użytkownika chatbota
Niewielkim nakładem pracy stworzysz profesjonalnego, wydajnego chatbota zintegrowanego z twoją stroną React.
Przy okazji, możesz pominąć samouczek i sprawdzić kod.
2. Zbuduj Chatbota
Przejdźmy do pierwszego dużego elementu układanki: chatbota.
Aby utworzyć bota, przejdź do studia i kliknij Create Bot +.
Pomaga to zdefiniować cel, ale nie trzeba mieć szczególnie rozwiniętego pomysłu. Twoja firma prawie na pewno ma dokumenty dotyczące polityki, często zadawane pytania lub katalog produktów. Prosty chatbot z dostępem do tych informacji może zwolnić mnóstwo czasu, który spędzasz na odpowiadaniu na powtarzające się pytania.
W moim przypadku zbuduję cyfrowego sommeliera: bota, który będzie doradzał użytkownikom przy zakupie wina, kierując się zewnętrznym katalogiem win.
Zdefiniuj przepływ
Niezależnie od tego, co robi, bot będzie potrzebował przepływu. Jest to logika, która określa zachowanie bota.
W studiu wybierz opcję Przepływy pracy w lewym panelu.
Nie musi to być skomplikowane. Pojedynczy autonomiczny węzeł z dostępem do dokumentów (tj. domyślny bot) może być niezwykle skuteczny.
Ważne jest, aby przekazać botowi instrukcje. Obejmują one:
- Personę, jaką ma przyjąć, np. uprzejmą, przyjacielską lub odzwierciedlającą ton użytkownika.
- Sposoby rozpoczęcia lub zakończenia wiadomości
- Jak odpowiadać na poszczególne zapytania
- Do jakich dokumentów należy się odwoływać, gdy
Dodaj bazę wiedzy
Są to informacje, z których bot będzie korzystał podczas generowania RAG (retrieval-augmented generation), czyli cateringu swoich odpowiedzi na dane użytkownika. Jest to stosunkowo proste, ale warto dowiedzieć się, jak zoptymalizować pliki pod kątem najlepszego możliwego RAG.
Wynona, mój cyfrowy sommelier (-ère?) ma dostęp do listy win. To tylko podzbiór zbioru danych Wine Reviews: lista win z ich regionami i notami degustacyjnymi.
Wdrożenie
Gdy będziesz zadowolony ze swojego bota, naciśnij przycisk Publikuj w studiu, a Twój bot zostanie uruchomiony.
Umożliwia to integrację z różnymi kanałami komunikacji, takimi jak WhatsAppi Telegram, a także w aplikacjach internetowych, takich jak ta, którą tworzymy.
2. Tworzenie aplikacji React
Mamy naszego chatbota, ale potrzebuje on domu, więc zbudujmy szybką aplikację React, w której użytkownicy będą mogli wchodzić w interakcje z botem.
Zauważ, że będę używał Next.js. Myślę, że jest bardziej odpowiedni i kompletny niż zwykły React, a ten samouczek obejmie wszystkie podstawy, których potrzebują użytkownicy Reacta.
Bieg create-next-app
Bieg:
npx create-next-app@14Zauważysz, że używam Next.js 14. Powodem jest to, że potrzebujemy React 18, aby nasza aplikacja była kompatybilna z chatbotem. Uruchomienie z @latest spowoduje kompilację z Next.js 15 i React 19. Uruchomienie powyższego polecenia to najprostszy sposób, aby upewnić się, że używasz poprawnej wersji React i że Next jest kompatybilny.
Ustawianie konfiguracji aplikacji
Zostanie wyświetlony monit z serią pytań. Osobiście trzymam się ustawień domyślnych, co też zrobię w tym poradniku.
Zakładając, że wszystko pójdzie gładko, zobaczysz dziennik sukcesu.
3. Zintegruj swojego chatbota z aplikacją React
Czas sprawić, by nasze Barbie się całowały.
Pobierz Botpress React Boilerplate
Aby zintegrować chatbota z naszą aplikacją, będziemy potrzebować:
- Identyfikator naszego klienta
- Gotowe komponenty webchat React.
Botpress posiada szablon kodu, który zawiera oba te elementy. Aby go pobrać:
- Przejdź do studia i kliknij Udostępnij w prawym górnym rogu.
- W prawym dolnym rogu wyskakującego okienka kliknij Konfiguruj
- Kliknij zakładkę React w prawym górnym rogu.
- Tutaj znajdziesz szablon Botpress , w tym polecenie instalacji identyfikatora klienta
Przy okazji, jeśli kiedykolwiek będziesz potrzebować szybkiego dostępu do swojego identyfikatora klienta:
- Przejdź do pulpitu nawigacyjnegoBotpress
- Wybierz Webchat w panelu bocznym
- Kliknij Ustawienia zaawansowane
Najlepszą praktyką jest przechowywanie tego w zmiennej środowiskowej, ale na razie zachowamy ją w komponencie.
Tworzenie komponentu Chat w aplikacji
W moim katalogu projektu utworzę plik chat.tsx.
Następnie wypełnij go kodem klienta chatbota:
"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>
);
}
To jest kod botpress z kilkoma znaczącymi poprawkami:
"użyj klienta"na górze, dla komponentów zajmujących się zarządzaniem stanem- Zmiana nazwy funkcji z App na Chat
- Niektóre stylizacje
Teraz przejdź do app/page.tsx i zaimportować go tuż nad stopką:
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>
);
}
Teraz możesz uruchomić npm run dev w terminalu w katalogu projektu, aby uruchomić go na lokalnym serwerze.
Zasilanie aplikacji React za pomocą chatbota
Dzięki wytrzymałym frameworkom internetowym jesteś zbyt zajęty podstawową funkcjonalnością, aby martwić się dodatkami.
Botpress zawiera gotowe komponenty, wizualny kreator typu "przeciągnij i upuść" oraz możliwość dostosowania od góry do dołu. Prosta integracja nie odbywa się kosztem wydajności.
Jeśli tworzysz w React, stawiasz na jakość. Twój chatbot powinien to odzwierciedlać.
Zacznij budować już dziś. To nic nie kosztuje.
