Limite de cliente pequeno
Marque apenas o módulo de chat interativo com `use client`, em vez de transferir uma página ou layout inteiro para o navegador.
Use @openstaticfish/chattybox dentro de um limite de cliente focado enquanto o restante do seu aplicativo App Router permanece renderizado pelo servidor. ChattyBox lida com recuperação, citações, conversas e dimensionamento.
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.
Instale @openstaticfish/chattybox no aplicativo Next.js.
Adicione a chave de API do widget público e o URL da API como variáveis de ambiente NEXT_PUBLIC.
Crie um componente cliente para estado de chat e interação do navegador.
Importe esse componente cliente de uma página ou layout de componente de servidor.
Lançamento em três etapas
Mantenha o SDK na borda do cliente onde ocorre a interação por chat e preserve os componentes do servidor para o restante do aplicativo.
Marque apenas o módulo de chat interativo com `use client`, em vez de transferir uma página ou layout inteiro para o navegador.
Use uma chave de projeto segura para navegador com origens permitidas; nunca exponha credenciais de gerenciamento por meio de variáveis NEXT_PUBLIC.
Renderize mensagens e citações em sua própria navegação, área de conta, shell de documentos ou fluxo de trabalho de suporte.
Evite adicionar manipuladores de rota apenas para fazer proxy de uma API de navegador gerenciado, a menos que seu produto tenha um requisito concreto do lado do servidor.
O SDK usa credenciais de projeto visíveis no navegador e buscadas, portanto, inicialize-o em um módulo cliente. Mantenha segredos e APIs de gerenciamento fora das variáveis NEXT_PUBLIC.
'use client';
import { useState } from 'react';
import { Chattybox } from '@openstaticfish/chattybox';
const chattybox = new Chattybox({
apiKey: process.env.NEXT_PUBLIC_CHATTYBOX_API_KEY!,
baseUrl: process.env.NEXT_PUBLIC_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>;
}Revise o pacote subjacente e o limite da infraestrutura gerenciada.
Veja padrões de componentes e estados compartilhados por aplicativos React.
Revise os campos de resposta, conversas de acompanhamento e erros.
Use next/script e a UI do widget mantida para uma experiência de bate-papo sem construção.
Sim. Use-o em um componente cliente para estado de bate-papo interativo e renderize esse componente a partir de uma página ou layout do App Router.
Não para a integração normal do navegador. As chaves públicas do widget são projetadas para uso do cliente e podem ser restritas a origens aprovadas.
A chave pública do widget identifica um projeto, mas não é uma credencial de gerenciamento. Restrinja-o às suas origens de produção e visualização e nunca exponha segredos administrativos.
Sim. O guia de instalação hospedado mostra o próximo caminho do script quando você prefere uma UI mantida em vez de uma interface SDK personalizada.
Não é necessário cartão de crédito. O seu conteúdo não é usado para treinar modelos.
Plano Free. Sem cartão.