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

Construa um chatbot React Leia a referência do SDK

Não é necessário cartão de créditoO seu conteúdo continua a ser seu

Pergunte ao ChattyBox

Por 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.

Construa um chatbot React

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.

Caminho de decisão

Use esses pontos de verificação para decidir se ChattyBox deve ficar ao lado de sua plataforma de documentos, substituir um assistente separado ou permanecer isolado para testes.

Propriedade do componente

Componha mensagens, cartões de citação, prompts, estados vazios e controles a partir de seus próprios componentes React.

Declare em seus termos

Use o estado local ou a camada de estado existente enquanto mantém as conversas isoladas entre os visitantes.

Respostas acessíveis

Controle o foco, as regiões ativas, o comportamento do teclado e os anúncios de erros em seu aplicativo.

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.

Construa um chatbot React

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

Ver guias de plataformas

SDK do chatbot JavaScript

Entenda o cliente subjacente, o modelo de resposta e os limites da infraestrutura.

Abrir

Chatbot de IA Next.js

Aplique o cliente React dentro de um limite de cliente do App Router.

Abrir

Referência da API do SDK

Revise a continuação da conversa e o tratamento estruturado de erros.

Abrir

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.