01
Propriedade do componente
Componha mensagens, cartões de citação, prompts, estados vazios e controles a partir de seus próprios componentes React.
SDK do React Chatbot
Construa o seu próprio IU do chatbot React
Conecte os componentes do React ao ChattyBox com @openstaticfish/chattybox. Sua equipe controla a renderização e o estado, enquanto a infraestrutura gerenciada lida com respostas, citações e continuidade de conversas baseadas na fonte.
Rastreia páginas de documentos publicados
Respostas citadas pela fonte
Incorpora com um script
Não é necessária migração de documentos
Não é necessário cartão de créditoO seu conteúdo continua a ser seu
Pergunte ao ChattyBox
xPor onde devo começar se preciso de uma resposta confiável deste site?
Comece adicionando o URL do seu site ao ChattyBox. Ele rastreia seu conteúdo, responde a partir das páginas que encontra e mostra aos visitantes as fontes por trás de cada resposta.
iFontes3^
Reagir guia
chattybox.ai
Análises
chattybox.ai
Início
chattybox.ai
Faça uma pergunta...
Distribuído por ChattyBox
Construído para Equipes de produto React
Inicie um chatbot citado pela fonte sem reconstruir sua pilha de documentos
ChattyBox rastreia sua documentação existente, indexa o conteúdo para recuperação e incorpora um chatbot que responde usando seus documentos em vez da memória genérica do modelo.
Crie componentes personalizados de mensagem, citação, carregamento, substituto e erro.
Mantenha os IDs de conversa no estado React no escopo do visitante para perguntas de acompanhamento.
Use chaves de API públicas com restrição de origem com segurança em aplicativos de navegador.
Evite manter seu próprio rastreador, armazenamento de vetores, serviço de recuperação ou pipeline de geração.
Etapa do fluxo de trabalho
Instale o JavaScript SDK em seu aplicativo React.
Etapa do fluxo de trabalho
Crie um cliente Chattybox fora do caminho de renderização do componente.
Etapa do fluxo de trabalho
Envie mensagens de um manipulador de eventos e atualize o estado da UI com a resposta.
Etapa do fluxo de trabalho
Renderize links de origem e lide com falhas estruturadas do ChattyboxError.
Lançamento em três etapas
Cole seu URL Reagir, teste as respostas citadas e instale o widget.
Integração de reação
Encaixe o bate-papo fundamentado em seu sistema de componentes existente
Use os padrões de estado, acessibilidade, estilo e sistema de design que seu aplicativo já segue, em vez de se adaptar a um shell de widget fixo.
02
Declare em seus termos
Use o estado local ou a camada de estado existente enquanto mantém as conversas isoladas entre os visitantes.
03
Respostas acessíveis
Controle o foco, as regiões ativas, o comportamento do teclado e os anúncios de erros em seu aplicativo.
04
Back-end gerenciado
Mantenha a integração do navegador pequena enquanto o ChattyBox cuida da indexação, recuperação e respostas citadas de conteúdo.
Caminho de instalação
Conecte um componente React ao ChattyBox
Crie o cliente uma vez, chame-o de um manipulador de eventos e mantenha cada ID de conversa do visitante no estado do componente ou do aplicativo.
- 1Adicione @openstaticfish/chattybox ao aplicativo React.
- 2Inicialize o cliente com Vite ou variáveis de ambiente públicas fornecidas pela estrutura.
- 3Armazene a mensagem retornada, as fontes e o ID da conversa no estado com escopo do visitante.
Chat.tsx
tsx
import { useState } from 'react';
import { Chattybox } from '@openstaticfish/chattybox';
const chattybox = new Chattybox({
apiKey: import.meta.env.VITE_CHATTYBOX_API_KEY,
baseUrl: import.meta.env.VITE_CHATTYBOX_API_URL,
});
export function Chat() {
const [answer, setAnswer] = useState('');
async function ask(message: string) {
const response = await chattybox.sendMessage({ message });
setAnswer(response.message);
}
return <div aria-live="polite">{answer}</div>;
}Explore a seguir
Mais formas de usar ChattyBox
01
SDK do chatbot JavaScript
Entenda o cliente subjacente, o modelo de resposta e os limites da infraestrutura.
Abrir
02
Chatbot de IA Next.js
Aplique o cliente React dentro de um limite de cliente do App Router.
Abrir
03
Referência da API do SDK
Revise a continuação da conversa e o tratamento estruturado de erros.
Abrir
04
Widget React hospedado
Use a UI baseada em script mantida em vez de criar componentes personalizados.
Abrir
Perguntas frequentes
Perguntas comuns
Posso construir um chatbot React personalizado com ChattyBox?
Sim. O JavaScript SDK retorna mensagens, IDs de conversa e URLs de origem para que seu aplicativo React possa renderizar uma interface totalmente personalizada.
O ChattyBox fornece um componente React?
O SDK é intencionalmente sem cabeça. Isso permite que as equipes usem sua própria biblioteca de componentes, comportamento de acessibilidade, gerenciamento de estado e design de produto.
Onde devo criar o cliente Chattybox no React?
Crie-o fora do caminho de renderização do componente ou em um provedor de aplicativo estável, em vez de construir um novo cliente para cada renderização.
Posso usar o widget hospedado no React?
Sim. Use o guia de instalação do widget hospedado quando desejar uma interface mantida em vez da renderização React personalizada.
Comece gratuitamente
Não é necessário cartão de crédito. O seu conteúdo não é usado para treinar modelos.
Crie chatbot grátis
Plano Free. Sem cartão.