Come creare un chatbot in React JS come un professionista

Che si tratti di prenotazioni, FAQ o consigli sui prodotti, praticamente ogni sito web può trarre vantaggio da un Agente IA o chatbot.

E lo sono davvero. Con i chatbot che rappresentano il canale di comunicazione in più rapida crescita per i brand, non c’è momento migliore per iniziare.

Come mettere insieme tutti questi componenti? Oltre a React, devi occuparti del tuo fornitore LLM, dei framework per agenti AI e in qualche modo racchiudere tutto in componenti UI con cui i visitatori possano interagire.

La buona notizia è che le piattaforme chatbot ti offrono tutto ciò di cui hai bisogno. In questa guida ti mostrerò come:

• Crea un chatbot personalizzato
• Crea un sito web con Next.js e React
• Integra il tuo chatbot nel front-end React
• Personalizza lo stile dell’interfaccia del chatbot

Con poco sforzo, avrai un chatbot professionale e performante integrato perfettamente nel tuo sito React.

A proposito, puoi saltare il tutorial e consultare direttamente il codice.

2. Crea un chatbot

Passiamo al primo grande tassello: il chatbot.

Per creare un bot, vai nello studio e clicca su Crea Bot +.

È utile definire uno scopo, ma non serve un’idea particolarmente sviluppata. La tua azienda ha quasi certamente documenti di policy, FAQ o un catalogo prodotti. Un semplice chatbot con accesso a queste informazioni potrebbe liberare molto tempo che spendi rispondendo a domande ripetitive.

Nel mio caso, creerò un sommelier digitale: un bot che consiglia agli utenti quali vini acquistare, guidato da un catalogo di vini esterno.

Definisci il flusso

Qualunque sia la sua funzione, il tuo bot avrà bisogno di un flow. Questo è il meccanismo che determina il comportamento del bot.

Nello studio, clicca su Workflows nel pannello a sinistra.

Non deve essere complicato. Un singolo nodo autonomo con accesso ai tuoi documenti (cioè il bot predefinito) può essere estremamente efficace.

È importante fornire istruzioni al bot. Questo include:

• La personalità che desideri adottare, ad esempio cortese, amichevole o che rispecchi il tono dell’utente
• Modi per iniziare o concludere il messaggio
• Come rispondere a domande specifiche
• A quali documenti fare riferimento e quando

Aggiungi la Knowledge Base

Queste sono le informazioni su cui il bot si baserà per RAG (retrieval-augmented generation), o per adattare le risposte ai tuoi dati. È relativamente semplice, ma vale la pena imparare come ottimizzare i tuoi file per ottenere il miglior RAG possibile.

Wynona, la mia sommelier digitale, ha accesso a una lista di vini. È solo una parte del dataset Wine Reviews: un elenco di vini con le rispettive regioni e note di degustazione.

Distribuisci

Quando sei soddisfatto del tuo bot, clicca su Pubblica nello studio e il tuo bot sarà online.

Questo lo rende disponibile per l’integrazione su tutti i tipi di canali di comunicazione, come WhatsApp, Telegram e nelle web app, come quella che stiamo costruendo.

2. Crea un'app React

Abbiamo il nostro chatbot, ma serve una casa: costruiamo quindi una semplice app React dove gli utenti possano interagire con il bot.

Nota che userò Next.js. Lo ritengo più attuale e completo rispetto a React puro, e questo tutorial coprirà tutto ciò che serve anche agli utenti React.

Esegui create-next-app

Esegui:

npx create-next-app@14

Noterai che sto usando Next.js 14. Il motivo è che abbiamo bisogno di React 18 per rendere la nostra app compatibile con i chatbot. Usando @latest verrà costruito con Next.js 15 e React 19. Il comando sopra è il modo più semplice per assicurarti di usare la versione corretta di React e che Next sia compatibile.

Configura le impostazioni dell’app

Ti verrà chiesto di rispondere a una serie di domande. Personalmente, mantengo le impostazioni predefinite, che userò anche in questo tutorial.

Se tutto va come previsto, vedrai il log di successo.

3. Integra il tuo chatbot nella tua app React

È ora di far baciare le nostre Barbie.

Scarica il React Boilerplate di Botpress

Per integrare il chatbot nella nostra app, ci serviranno:

• Il nostro ID cliente
• I componenti React predefiniti per la webchat.

Botpress fornisce codice boilerplate che include entrambi. Per ottenerlo:

• Vai su studio e clicca su Condividi in alto a destra.
• In basso a destra nel pop-up, fai clic su Configura

• Clicca sulla scheda React in alto a destra.
• Qui trovi il boilerplate di Botpress, incluso il comando di installazione e un ID client

A proposito, se ti serve un accesso rapido al tuo client ID:

• Vai alla tua dashboard Botpress
• Seleziona Webchat nel pannello laterale
• Clicca su Impostazioni avanzate

È buona prassi memorizzare questo dato in una variabile d’ambiente, ma per ora lo terremo nel componente.

Crea un componente chat nella tua app

Nella mia cartella di progetto, creerò un file chat.tsx.

Poi inserisci il codice per il client del chatbot:

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

Questo è il codice botpress con alcune modifiche rilevanti:

• "use client" in cima, per i componenti che gestiscono lo stato
• Rinominare la funzione da App a Chat
• Alcune personalizzazioni

Ora vai su app/page.tsx e importalo appena sopra il footer:

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

Ora puoi eseguire npm run dev in un terminale nella directory del progetto per avviarlo su un server locale.

Alimenta un’app React con un chatbot

Con framework web complessi, sei troppo impegnato con le funzionalità principali per preoccuparti degli add-on.

Botpress offre componenti predefiniti, un builder visuale drag-and-drop e una personalizzazione completa. L’integrazione semplice non compromette le prestazioni.

Se sviluppi con React, punti alla qualità. Il tuo chatbot dovrebbe rifletterlo.

Inizia a costruire oggi. È gratis.

Domande frequenti

1. Posso distribuire questo chatbot in produzione?

Sì, puoi distribuire il chatbot in produzione dopo averlo pubblicato in Botpress Studio e integrato nella tua app React. Una volta integrato, puoi distribuire l’intera applicazione usando piattaforme come Vercel o qualsiasi provider che supporti il tuo stack tecnologico.

2. Posso personalizzare l’aspetto dell’interfaccia chatbot?

Sì, puoi personalizzare completamente l’aspetto dell’interfaccia del chatbot usando il componente Botpress Webchat. Supporta proprietà per colori, dimensioni, posizione e stile, e puoi sovrascrivere gli stili predefiniti con CSS personalizzato per adattarlo al design del tuo brand.

3. Devo definire una persona per il bot e come influisce sulle conversazioni?

Sì, definire una persona del bot è importante perché guida il modo in cui il chatbot comunica, incluso tono e formulazione. Questo assicura che la conversazione sia coerente con la voce del tuo brand e aumenta la fiducia degli utenti.

4. Qual è lo scopo di un flusso chatbot e come si definisce?

Lo scopo di un flow chatbot è controllare la logica delle risposte del bot agli utenti. In Botpress, i flow si definiscono visivamente nella scheda “Workflows” usando nodi per azioni, messaggi, condizioni e transizioni.

5. Posso usare i miei documenti esistenti (ad esempio, FAQ o cataloghi prodotti) per addestrare il bot?

Sì, puoi caricare documenti esistenti come FAQ o manuali nella Knowledge Base di Botpress. Il bot utilizza la generazione aumentata dal recupero (RAG) per rispondere alle domande estraendo informazioni rilevanti direttamente da quei documenti.