Integre com um assistente de programação com IA

A integração recomendada é o pacote npm @openstaticfish/chattybox. Ele permite que o código da aplicação configure a chave pública e a URL da API, monte a interface gerenciada do ChattyBox onde seu componente deve ficar ou use o cliente headless para uma interface totalmente personalizada.

O script independente widget.js é documentado por último como fallback sem build para sites que não podem instalar pacotes npm.

Antes de começar

Conclua a configuração do chatbot antes de pedir a um assistente que edite sua aplicação:

• Verifique respostas e citações representativas no Test Chat.
• Crie uma chave de navegador em Public Keys e restrinja suas origens permitidas.
• Copie a chave pública e a URL da API do widget exibidas em Embed.
• Decida em quais rotas ou layouts da aplicação a experiência deve ser montada.

Estas são credenciais públicas do navegador, mas ainda assim evite fazer commit de valores específicos do ambiente. Nunca forneça um token de implantação da configuração, uma credencial de administrador ou um arquivo de ambiente não relacionado.

Recomendado: monte a interface gerenciada pelo npm

Este é o prompt padrão para React, Next.js, Vite e outras aplicações de navegador baseadas em pacotes.

Instrução

Integre o pacote npm do ChattyBox

Integre o ChattyBox a esta aplicação usando o pacote npm @openstaticfish/chattybox.

Configuração pública do navegador:
- Chave da API: [PASTE PUBLIC WIDGET KEY]
- URL da API: [PASTE WIDGET API URL]

Primeiro, inspecione o framework, o modelo de roteamento, o gerenciador de pacotes, as convenções de variáveis de ambiente e o layout persistente da aplicação. Diga quais arquivos você planeja alterar antes de editar. Pergunte se não estiverem claras as rotas em que o ChattyBox deve aparecer.

Requisitos:
1. Instale @openstaticfish/chattybox com o gerenciador de pacotes já usado por este repositório.
2. Armazene a chave pública da API e a URL da API usando a convenção do framework para variáveis de ambiente expostas ao navegador. Adicione nomes de placeholder a um arquivo de ambiente de exemplo, mas não faça commit de valores reais.
3. Importe Chattybox de @openstaticfish/chattybox e crie um cliente com apiKey e baseUrl.
4. Monte a interface gerenciada com client.mountWidget() a partir do componente do lado do cliente ou hook de ciclo de vida apropriado.
5. Monte-a somente nas rotas ou no layout que eu especificar e chame a função remove() retornada durante a limpeza quando o framework exigir.
6. Não injete widget.js manualmente, não crie um proxy de backend nem introduza um segundo cliente do ChattyBox.
7. Preserve a navegação, os limites de renderização, a localização, o Analytics, o consentimento e os estilos existentes.
8. Faça a menor alteração focada possível e não faça o deploy.
9. Execute o build, o lint, a verificação de tipos e os testes relevantes do repositório.
10. Informe os arquivos alterados, as variáveis de ambiente que preciso definir, onde a interface é montada e como testá-la no site implantado.

O código resultante da aplicação deve seguir este formato:

import { Chattybox } from '@openstaticfish/chattybox';

const client = new Chattybox({
  apiKey: PUBLIC_CHATTYBOX_API_KEY,
  baseUrl: PUBLIC_CHATTYBOX_API_URL,
});

const widget = client.mountWidget();

// Use during component cleanup when appropriate.
// widget.remove();

Crie uma interface personalizada

Escolha esta opção quando sua aplicação precisar controlar a lista de mensagens, a entrada, os estados de carregamento, os erros, as citações e o posicionamento, em vez de montar a interface gerenciada.

Instrução

Crie uma interface headless do ChattyBox

Crie uma interface de chatbot personalizada usando o pacote npm @openstaticfish/chattybox e seu cliente headless.

Configuração pública do navegador:
- Chave da API: [PASTE PUBLIC WIDGET KEY]
- URL da API: [PASTE WIDGET API URL]

Primeiro, inspecione o framework da aplicação, o sistema de componentes, os padrões de estado, os estilos, as convenções de acessibilidade e a configuração de testes. Proponha os limites dos componentes e os arquivos antes de editar.

Requisitos:
1. Instale @openstaticfish/chattybox com o gerenciador de pacotes existente do repositório.
2. Configure um cliente Chattybox com apiKey e baseUrl usando variáveis de ambiente expostas ao navegador; não faça commit de valores reais.
3. Use sendMessage() e mantenha conversationId para mensagens de acompanhamento.
4. Renderize as fontes das respostas como links acessíveis e preserve sua ordem.
5. Implemente estados de pendente, vazio, erro, nova tentativa e resposta não compatível.
6. Evite envios duplicados e mantenha utilizáveis os comportamentos do teclado e do leitor de tela.
7. Monte a interface somente nas rotas ou no layout que eu especificar.
8. Siga os componentes e estilos existentes em vez de adicionar um novo sistema de design.
9. Não carregue widget.js nem chame mountWidget().
10. Execute o build, o lint, a verificação de tipos e os testes relevantes; depois informe os arquivos alterados e um plano de verificação.

Observações sobre frameworks

Forneça ao assistente uma frase adicional quando necessário:

• Next.js App Router: “Mantenha o cliente Chattybox e a chamada a mountWidget() dentro de um pequeno Client Component renderizado pelo layout pretendido.”
• React SPA: “Monte a partir do shell persistente da aplicação ou do layout da rota específica e faça a limpeza na função de retorno do efeito.”
• Docusaurus: “Crie um componente de tema somente para o cliente e renderize-o a partir de src/theme/Root; preserve a navegação da documentação e as mudanças de localidade.”
• Vue, Nuxt, Svelte ou outro framework: “Use o ciclo de vida de montagem somente no cliente do framework e o ciclo de limpeza correspondente.”

Revise uma integração existente do SDK

Instrução

Revise minha integração do SDK do ChattyBox

Revise esta integração do ChattyBox sem fazer deploy nem alterar código não relacionado.

Verifique se:
1. @openstaticfish/chattybox está instalado e importado em vez de duplicar seu comportamento.
2. Um único cliente Chattybox recebe a chave pública da API e a URL da API pretendidas.
3. As variáveis de ambiente do navegador seguem as regras de nomes de variáveis públicas deste framework sem expor credenciais privadas.
4. mountWidget() ou a interface personalizada aparece somente nas rotas pretendidas e é limpa corretamente.
5. A navegação do lado do cliente e as remontagens durante o desenvolvimento não criam instâncias duplicadas.
6. Os limites de renderização, a localização, o Analytics, o consentimento, a acessibilidade e o layout existentes permanecem intactos.
7. A implementação tem testes apropriados e nenhuma refatoração não relacionada.

Retorne os resultados por gravidade, com caminhos dos arquivos e referências de linha. Proponha apenas as menores correções seguras e forneça os comandos exatos de verificação.

Não usa npm nem uma etapa de build?

Use o guia de instalação do widget.js somente quando o site não puder usar o pacote npm, por exemplo, em HTML simples, um campo de código personalizado de um CMS ou o Google Tag Manager.

Instrução

Instale o script de fallback do widget

Instale o widget hospedado do ChattyBox neste site usando o script exato gerado pela minha aba Embed do ChattyBox:

[PASTE COMPLETE WIDGET SCRIPT]

Inspecione o site primeiro e identifique o ponto global mais seguro para inserir o script nas páginas públicas. Carregue o script inalterado exatamente uma vez, exclua rotas privadas, administrativas e de checkout, preserve o comportamento de consentimento e CSP, não exponha credenciais privadas, não faça o deploy da alteração e informe o local alterado e um plano de teste no navegador.

Teste o resultado

1. Revise o diff e confirme que nenhuma credencial real foi incluída em um commit.
2. Execute o build, o lint, a verificação de tipos e os testes normais do projeto.
3. Faça o deploy pelo processo normal de revisão.
4. Verifique as rotas pretendidas em uma janela privada do navegador, incluindo a navegação do lado do cliente.
5. Faça uma pergunta compatível, siga uma citação e teste o comportamento de fallback.
6. Verifique o layout para dispositivos móveis, o uso do teclado e o console do navegador.

Continue com a referência do SDK e o checklist de lançamento.