Como criar um chatbot em React JS como um profissional

Quer seja para marcação de consultas, perguntas frequentes ou recomendações de produtos, praticamente qualquer sítio Web pode beneficiar de um agente de IA ou chatbot.

E estão a fazê-lo. Com os chatbots a serem o canal de comunicação de crescimento mais rápido para as marcas, não há melhor altura do que o presente para entrar em ação.

Então, como é que se juntam todos estes componentes? Para além do React, tem de se preocupar com o seu fornecedor de LLM , com as estruturas de agentes de IA e, de alguma forma, agrupar tudo isto em componentes de IU com os quais os seus visitantes podem interagir.

A boa notícia é que as plataformas de chatbot têm tudo o que precisa. Neste guia, vou dar-lhe os passos para:

• Criar um chatbot personalizado
• Criar um sítio Web com Next.js e React
• Integrar o seu chatbot no front-end React
• Personalizar o estilo da IU do chatbot

Com pouco esforço, terá um chatbot profissional e de elevado desempenho integrado sem problemas no seu site React.

Já agora, pode saltar o tutorial e ver o código.

2. Construir um Chatbot

Passemos à primeira grande peça do puzzle: o chatbot.

Para criar um bot, aceda ao estúdio e clique em Criar Bot +.

É útil definir um objetivo, mas não é necessário ter uma ideia particularmente desenvolvida. É quase certo que a sua empresa tem documentos de política, FAQs ou um catálogo de produtos. Um simples chatbot com acesso a estas informações pode libertar muito tempo que passa a responder a perguntas repetitivas.

No meu caso, vou construir um sommelier digital: um bot que aconselha os utilizadores sobre os vinhos a comprar, guiado por um catálogo de vinhos externo.

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.

2. Criar uma aplicação React

Temos o nosso chatbot, mas ele precisa de uma casa, por isso vamos construir uma aplicação React rápida onde os utilizadores podem interagir com o bot.

Note que eu vou usar o Next.js. Acho que é mais relevante e completo do que o React simples, e este tutorial vai cobrir tudo o que os utilizadores de React precisam.

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.

3. Integre seu Chatbot em seu aplicativo React

É altura de fazer as nossas Barbies beijarem-se.

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.

Potenciar uma aplicação React com um Chatbot

Com estruturas Web de alta qualidade, está demasiado ocupado com a funcionalidade principal para se preocupar com os complementos.

Botpress vem com componentes pré-construídos, um construtor visual de arrastar e soltar e personalização de cima para baixo. A integração simples não é feita à custa do desempenho. 

Se está a construir com React, então está à procura de qualidade. O seu chatbot deve refletir isso mesmo.

Comece a construir hoje. É grátis.

FAQs

1. Posso implementar este chatbot na produção?

Sim, você pode implantar o chatbot na produção depois de publicá-lo no Botpress Studio e incorporá-lo ao seu aplicativo React. Depois de incorporado, você pode implantar todo o aplicativo usando plataformas como o Vercel ou qualquer provedor de hospedagem que ofereça suporte à sua stack tecnologia.

2. Posso personalizar o aspeto e a sensação da IU do chatbot?

Sim, é possível personalizar totalmente a aparência da interface do chatbot usando o componente Botpress Webchat . Ele suporta adereços para cores, tamanho, posicionamento e estilo, e você pode substituir os estilos padrão por CSS personalizado para combinar com o design da sua marca.

3. Preciso de definir uma persona de bot e como é que isso afecta as conversas?

Sim, definir uma persona de bot é importante porque orienta a forma como o chatbot comunica, incluindo o tom e as frases. Isto garante que a conversa se alinha com a voz da sua marca e aumenta a confiança do utilizador.

4. Qual é o objetivo de um fluxo de chatbot e como é que o defino?

O objetivo de um fluxo de chatbot é controlar a lógica de como o bot responde aos utilizadores. No Botpress, os fluxos são definidos visualmente no separador "Fluxos de trabalho", utilizando nós para acções, mensagens, condições e transições.

5. Posso utilizar os meus documentos existentes (por exemplo, FAQs ou catálogos de produtos) para treinar o bot?

Sim, pode carregar documentos existentes como FAQs ou manuais para a Base de Conhecimento Botpress . O bot utiliza a geração aumentada por recuperação (RAG) para responder a perguntas, extraindo informações relevantes diretamente desses documentos.