Pular para o conteúdo principal
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 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
x
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^
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

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.

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.
Etapa do fluxo de trabalho

Instale @openstaticfish/chattybox no aplicativo Next.js.

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

Etapa do fluxo de trabalho

Crie um componente cliente para estado de chat e interação do navegador.

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

Crie um chatbot Next.js
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.

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.

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.

  1. 1Instale o pacote npm e configure uma chave pública restrita à origem.
  2. 2Crie um componente com `use client` que controle o estado das mensagens e da conversa.
  3. 3Renderize o componente da página renderizada pelo servidor sem converter toda a rota em um componente cliente.
Crie um chatbot Next.js
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>;
}
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.