01
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.
SDK do chatbot Next.js
Adicione um chatbot de IA personalizado ao Plataforma Next.js
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.
Rastreia páginas de documentos publicadosRespostas citadas pela fonteIncorpora com um scriptNão é necessária migração de documentosNã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^
Integração com Next.js guia
chattybox.ai
Análises
chattybox.ai
Início
chattybox.ai
Faça uma pergunta...
Distribuído por ChattyBox
Construído para Equipes que usam o App Router do Next.js
Lance um chatbot com citações de fontes sem reconstruir sua stack do site
O ChattyBox rastreia seu site, documentação, central de ajuda, CMS ou base de conhecimento existentes e, em seguida, incorpora um chatbot que responde com base no seu próprio conteúdo publicado, em vez da memória genérica do modelo.
Mantenha a interface de chat interativa em um pequeno limite de cliente com `use client`.
Exponha apenas uma chave de widget pública com restrição de origem por meio de variáveis NEXT_PUBLIC.
Renderize as respostas citadas com seu sistema de design Next.js e shell de aplicativo existentes.
Mantenha o rastreamento, a recuperação, o armazenamento de vetores, a geração de respostas e o escalonamento gerenciados pelo ChattyBox.
1Etapa do fluxo de trabalho
Instale @openstaticfish/chattybox no aplicativo Next.js.
2Etapa do fluxo de trabalho
Adicione a chave de API do widget público e o URL da API como variáveis de ambiente NEXT_PUBLIC.
3Etapa do fluxo de trabalho
Crie um componente cliente para estado de chat e interação do navegador.
4Etapa do fluxo de trabalho
Importe esse componente cliente de uma página ou layout de componente de servidor.
Lançamento em três etapas
Cole seu URL Integração com Next.js, teste as respostas citadas e instale o widget.
Integração com o App Router
Adicione interatividade sem abrir mão da renderização do servidor
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.
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.
02
Clareza da chave pública
Use uma chave de projeto segura para navegador com origens permitidas; nunca exponha credenciais de gerenciamento por meio de variáveis NEXT_PUBLIC.
03
IU de produto personalizada
Renderize mensagens e citações em sua própria navegação, área de conta, shell de documentos ou fluxo de trabalho de suporte.
04
Nenhum serviço RAG personalizado
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.
Caminho de instalação
Crie um cliente de bate-papo Next.js App Router
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.
- 1Instale o pacote npm e configure uma chave pública restrita à origem.
- 2Crie um componente com `use client` que controle o estado das mensagens e da conversa.
- 3Renderize o componente da página renderizada pelo servidor sem converter toda a rota em um componente cliente.
app/components/chat.tsx
tsx
'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>;
}Explore a seguir
Mais formas de usar ChattyBox
01SDK do chatbot JavaScriptRevise o pacote subjacente e o limite da infraestrutura gerenciada.02SDK do chatbot ReactVeja padrões de componentes e estados compartilhados por aplicativos React.03Referência da API do SDKRevise os campos de resposta, conversas de acompanhamento e erros.04Widget Next.js hospedadoUse next/script e a UI do widget mantida para uma experiência de bate-papo sem construção.
Perguntas frequentes
Perguntas comuns
1
O ChattyBox SDK funciona com o Next.js App Router?
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.
2
Preciso de um manipulador de rota Next.js para ChattyBox?
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.
3
As chaves NEXT_PUBLIC do ChattyBox são secretas?
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.
4
Posso usar o widget ChattyBox hospedado com Next.js?
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.
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.