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

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.