- Construir um chatbot de site com React requer a junção de LLMs, frameworks e componentes de IU.
- Crie primeiro a lógica e a base de conhecimentos do seu chatbot e, em seguida, implemente-o para integração em canais como a Web e as aplicações de mensagens.
- Next.js constitui uma base sólida para a sua aplicação React; integre o componente Botpress webchat para incorporar o seu bot sem problemas.
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.
Isto torna-o disponível para integração em todos os tipos de canais de comunicação, como WhatsAppe Telegram, e em aplicações Web, como a que estamos a construir.
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.