Como Criar um Chatbot em React JS Como um Profissional

Seja para agendamento, FAQs ou recomendações de produtos, praticamente qualquer site pode se beneficiar de um Agente de IA ou chatbot.

E já estão. Com chatbots sendo o canal de comunicação que mais cresce para marcas, não há momento melhor para entrar nessa.

Como juntar todos esses componentes? Além do React, você precisa pensar no provedor de LLM, frameworks de agentes de IA e ainda empacotar tudo em componentes de interface para interação dos visitantes.

A boa notícia é que plataformas de chatbot resolvem isso para você. Neste guia, vou mostrar como:

• Criar um chatbot personalizado
• Construir um site com Next.js e React
• Integrar seu chatbot ao front-end em React
• Personalizar o estilo visual do chatbot

Com pouco esforço, você terá um chatbot profissional e eficiente integrado perfeitamente ao seu site em React.

Aliás, você pode pular o tutorial e conferir o código.

2. Crie um Chatbot

Vamos para a primeira grande etapa: o chatbot.

Para criar um bot, acesse o studio e clique em Create Bot +.

Ajuda definir um propósito, mas não precisa de uma ideia muito elaborada. Sua empresa provavelmente já tem documentos de políticas, FAQs ou catálogo de produtos. Um chatbot simples com acesso a essas informações pode economizar muito tempo respondendo perguntas repetitivas.

No meu caso, vou criar uma sommelière digital: um bot que orienta usuários na escolha de vinhos, usando um catálogo externo.

Defina o fluxo

Independentemente da função, seu bot vai precisar de um fluxo. É a lógica que define o comportamento do bot.

No studio, clique em Workflows no painel à esquerda.

Não precisa ser complicado. Um único nó autônomo com acesso aos seus documentos (ou seja, o bot padrão) já pode ser muito eficiente.

É importante dar instruções ao bot. Isso inclui:

• A persona que ele deve adotar, por exemplo: educado, descontraído ou espelhando o tom do usuário
• Formas de começar ou encerrar a mensagem
• Como responder a perguntas específicas
• Quais documentos consultar em cada situação

Adicione a Base de Conhecimento

É a informação que o bot vai usar para RAG (geração aumentada por recuperação), ou seja, adaptar as respostas aos seus dados. É simples, mas vale a pena aprender como otimizar seus arquivos para o melhor RAG possível.

Wynona, minha sommelière digital, tem acesso a uma lista de vinhos. É apenas um recorte do dataset Wine Reviews: uma lista de vinhos com regiões e notas de degustação.

Fazer o deploy

Quando estiver satisfeito com seu bot, clique em Publish no studio e seu bot estará ativo.

Assim ele fica disponível para integração em vários canais de comunicação, como WhatsApp, Telegram e em aplicativos web, como o que estamos construindo.

2. Crie um app React

Já temos nosso chatbot, mas ele precisa de um lugar. Vamos criar rapidamente um app React onde os usuários possam interagir com o bot.

Note que vou usar Next.js. Acho que ele é mais relevante e completo do que o React puro, e este tutorial vai cobrir tudo o que usuários de React precisam.

Execute create-next-app

Execute:

npx create-next-app@14

Você vai notar que estou usando Next.js 14. O motivo é que precisamos do React 18 para tornar nosso app compatível com chatbot. Usar @latest instala Next.js 15 e React 19. Executar o comando acima é a maneira mais fácil de garantir que você está usando a versão correta do React e que o Next é compatível.

Configure o app

Você verá uma série de perguntas. Eu costumo manter as configurações padrão, que é o que vou usar neste tutorial.

Se tudo correr bem, você verá o log de sucesso.

3. Integre seu Chatbot ao App React

Hora de fazer nossas Barbies se beijarem.

Pegue o Boilerplate React do Botpress

Para integrar o chatbot ao app, vamos precisar de:

• Nosso client ID
• Os componentes React do webchat já prontos.

O Botpress oferece um boilerplate com ambos. Para acessar:

• Vá até o studio e clique em Share no canto superior direito.
• No canto inferior direito do pop-up, clique em Configure

• Clique na aba React no canto superior direito.
• Aqui você encontrará o boilerplate do Botpress, incluindo o comando de instalação e o client ID.

Se precisar acessar rapidamente seu client ID:

• Acesse seu dashboard do Botpress
• Selecione Webchat no painel lateral
• Clique em Advanced Settings

O ideal é guardar isso em uma variável de ambiente, mas vamos deixar no componente por enquanto.

Crie um Componente de Chat no seu App

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

Depois, preencha 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>
   );
}

Esse é o código do Botpress com alguns ajustes importantes:

• "use client" no topo, para componentes que lidam com gerenciamento de estado
• Renomeando a função de App para Chat
• Alguns estilos

Agora vá até app/page.tsx e importe o componente 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 você pode rodar npm run dev no terminal do diretório do projeto para executar em um servidor local.

Dê vida ao seu App React com um Chatbot

Com frameworks web robustos, você pode focar na funcionalidade principal sem se preocupar com complementos.

O Botpress traz componentes prontos, construtor visual drag-and-drop e personalização total. A integração simples não compromete a performance.

Se você está usando React, busca qualidade. Seu chatbot deve refletir isso.

Comece a construir hoje. É grátis.

Perguntas frequentes

1. Posso colocar esse chatbot em produção?

Sim, você pode colocar o chatbot em produção após publicá-lo no Botpress Studio e incorporá-lo ao seu app React. Depois de incorporado, basta fazer o deploy do aplicativo inteiro em plataformas como a Vercel ou qualquer serviço de hospedagem compatível com sua stack tecnológica.

2. Posso personalizar o visual do chatbot?

Sim, é possível personalizar totalmente o visual do chatbot usando o componente Webchat do Botpress. Ele aceita propriedades para cores, tamanho, posição e estilos, além de permitir sobrescrever o CSS padrão para combinar com a identidade da sua marca.

3. Preciso definir uma persona para o bot? Como isso afeta as conversas?

Sim, definir uma persona para o bot é importante porque orienta como o chatbot se comunica, incluindo tom e linguagem. Isso garante que a conversa siga a voz da sua marca e aumenta a confiança do usuário.

4. Qual o objetivo do fluxo do chatbot e como definir um?

O objetivo do fluxo do chatbot é controlar a lógica de como o bot responde aos usuários. No Botpress, você define fluxos visualmente na aba “Workflows”, usando nós para ações, mensagens, condições e transições.

5. Posso usar documentos existentes (como FAQs ou catálogos) para treinar o bot?

Sim, você pode enviar documentos existentes, como FAQs ou manuais, para a Base de Conhecimento do Botpress. O bot usa geração aumentada por recuperação (RAG) para responder perguntas buscando informações diretamente nesses documentos.