Crie Chatbots React como um profissional - sem necessidade de experiência

Definir o fluxo

Independentemente do que ele faz, seu bot precisará de um fluxo. Esta é a lógica que determina o comportamento do bot. 

No estúdio, prima Fluxos de trabalho no painel esquerdo.

Não precisa de ser complicado. Um único nó autónomo com acesso aos seus documentos (ou seja, o bot predefinido) pode ser extremamente eficaz.

É importante dar instruções ao robot. Isto inclui:

• A personalidade que pretende que adopte, por exemplo, educado, simpático ou que espelhe o tom do utilizador
• Formas de começar ou terminar a mensagem
• Como responder a pedidos de informação específicos
• Quais os documentos a consultar quando

Adicionar a base de conhecimentos

Esta é a informação que o bot utilizará para RAG (retrieval-augmented generation), ou seja, para fornecer as suas respostas aos seus dados. Isto é relativamente simples, mas vale a pena aprender a otimizar os seus ficheiros para obter o melhor RAG possível.

Wynona, o meu sommelier(-ère?) digital tem acesso a uma lista de vinhos. É apenas um subconjunto do conjunto de dados Wine Reviews: uma lista de vinhos com as suas regiões e notas de prova.

Implantar

Quando estiveres satisfeito com o teu bot, carrega em Publicar no estúdio e o teu bot está no ar.

Isso o torna disponível para integração em todos os tipos de canais de comunicação, como WhatsApp, Telegram e em aplicativos da web, como o que estamos construindo.

Correr criar próxima aplicação

Corre:

npx create-next-app@14

Reparem que estou a utilizar o Next.js 14. O motivo é que precisamos do React 18 para tornar nosso aplicativo compatível com o chatbot. Executar com @latest irá construir com Next.js 15 e React 19. Executar o comando acima é a maneira mais fácil de garantir que você execute a versão correta do React e que o Next seja compatível.

Definir configurações de aplicações

Ser-lhe-á pedido que responda a uma série de perguntas. Pessoalmente, mantenho as predefinições, que é o que vou fazer para este tutorial.

Se tudo correr bem, verá o registo de sucesso.

Obter o Botpress React Boilerplate

Para integrar o chatbot na nossa aplicação, precisamos de:

• O nosso cliente ID
• Os componentes React pré-construídos webchat .

Botpress tem um código padrão que inclui ambos. Para o obter:

• Navegue até ao estúdio e clique em Partilhar no canto superior direito.
• No canto inferior direito da janela pop-up, clique em Configurar

• Clique no separador React no canto superior direito.
• Aqui encontrará o boilerplate Botpress , incluindo o comando de instalação, um ID de cliente

Já agora, se alguma vez precisar de aceder rapidamente à sua identificação de cliente:

• Aceder ao painel de controlo do Botpress
• Selecione Webchat no painel lateral
• Clique em Definições avançadas

A melhor prática é armazenar isso em uma variável de ambiente, mas vamos mantê-la no componente por enquanto.

Criar um componente Chat na sua aplicação

No diretório do meu projeto, vou criar um ficheiro chat.tsx.

Em seguida, preencha-o com o código do cliente do 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>
   );
}

Este é o código botpress com alguns ajustes notáveis:

• "utilizar cliente" no topo, para componentes que tratam da gestão do estado
• Renomear a função de App para Chat
• Alguns estilos

Agora navegue até app/page.tsx e importá-lo logo acima do rodapé:

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

Agora pode executar npm run dev num terminal no diretório do projeto para o executar num servidor local.