Integre con un asistente de programación con IA

La integración recomendada es el paquete npm @openstaticfish/chattybox. Permite que el código de la aplicación configure la clave pública y la URL de la API, monte la interfaz gestionada de ChattyBox donde corresponda a su componente o use el cliente headless para crear una interfaz completamente personalizada.

El script independiente widget.js se documenta al final como alternativa sin compilación para sitios que no pueden instalar paquetes npm.

Antes de empezar

Complete la configuración del chatbot antes de pedirle a un asistente que edite su aplicación:

• Verifique respuestas y citas representativas en Test Chat.
• Cree una clave de navegador en Public Keys y restrinja sus orígenes permitidos.
• Copie la clave pública y la URL de la API del widget que aparecen en Embed.
• Decida en qué rutas o layouts de la aplicación debe montarse la experiencia.

Son credenciales públicas del navegador, pero aun así debe evitar hacer commit de valores específicos del entorno. Nunca proporcione un token de despliegue de configuración, una credencial de administrador ni un archivo de entorno que no esté relacionado.

Recomendado: monte la interfaz gestionada desde npm

Este es el prompt predeterminado para React, Next.js, Vite y otras aplicaciones de navegador basadas en paquetes.

Instrucción

Integre el paquete npm de ChattyBox

Integra ChattyBox en esta aplicación usando el paquete npm @openstaticfish/chattybox.

Configuración pública del navegador:
- Clave de API: [PASTE PUBLIC WIDGET KEY]
- URL de la API: [PASTE WIDGET API URL]

Inspecciona primero el framework, el modelo de enrutamiento, el gestor de paquetes, las convenciones de variables de entorno y el layout persistente de la aplicación. Dime qué archivos planeas cambiar antes de editar. Pregúntame si no están claras las rutas en las que debe aparecer ChattyBox.

Requisitos:
1. Instala @openstaticfish/chattybox con el gestor de paquetes que ya utiliza este repositorio.
2. Guarda la clave pública de API y la URL de la API usando la convención del framework para las variables de entorno expuestas al navegador. Añade nombres de marcador de posición a un archivo de entorno de ejemplo, pero no hagas commit de valores reales.
3. Importa Chattybox desde @openstaticfish/chattybox y crea un cliente con apiKey y baseUrl.
4. Monta la interfaz gestionada con client.mountWidget() desde el componente del lado del cliente o el hook de ciclo de vida adecuados.
5. Móntala solo en las rutas o el layout que especifique y llama a la función remove() devuelta durante la limpieza cuando el framework lo requiera.
6. No inyectes widget.js manualmente, no crees un proxy de backend ni introduzcas un segundo cliente de ChattyBox.
7. Conserva la navegación, los límites de renderizado, la localización, Analytics, el consentimiento y los estilos existentes.
8. Haz el cambio más pequeño y específico posible y no lo despliegues.
9. Ejecuta el build, el lint, la comprobación de tipos y las pruebas relevantes del repositorio.
10. Informa de los archivos modificados, las variables de entorno que debo configurar, dónde se monta la interfaz y cómo probarla en el sitio desplegado.

El código resultante de la aplicación debe seguir esta estructura:

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();

Cree una interfaz personalizada

Elija esta opción cuando su aplicación deba controlar la lista de mensajes, la entrada, los estados de carga, los errores, las citas y la ubicación, en lugar de montar la interfaz gestionada.

Instrucción

Cree una interfaz headless de ChattyBox

Crea una interfaz de chatbot personalizada usando el paquete npm @openstaticfish/chattybox y su cliente headless.

Configuración pública del navegador:
- Clave de API: [PASTE PUBLIC WIDGET KEY]
- URL de la API: [PASTE WIDGET API URL]

Inspecciona primero el framework de la aplicación, el sistema de componentes, los patrones de estado, los estilos, las convenciones de accesibilidad y la configuración de pruebas. Propón los límites de los componentes y los archivos antes de editar.

Requisitos:
1. Instala @openstaticfish/chattybox con el gestor de paquetes existente del repositorio.
2. Configura un cliente Chattybox con apiKey y baseUrl usando variables de entorno expuestas al navegador; no hagas commit de valores reales.
3. Usa sendMessage() y conserva conversationId para los mensajes de seguimiento.
4. Renderiza las fuentes de las respuestas como enlaces accesibles y conserva su orden.
5. Implementa estados de espera, vacío, error, reintento y respuesta no compatible.
6. Evita los envíos duplicados y mantén usable el comportamiento del teclado y del lector de pantalla.
7. Monta la interfaz solo en las rutas o el layout que especifique.
8. Sigue los componentes y estilos existentes en lugar de añadir un sistema de diseño nuevo.
9. No cargues widget.js ni llames a mountWidget().
10. Ejecuta el build, el lint, la comprobación de tipos y las pruebas relevantes; después informa de los archivos modificados y de un plan de verificación.

Notas sobre frameworks

Proporcione al asistente una frase adicional cuando sea necesario:

• Next.js App Router: «Mantén el cliente Chattybox y la llamada a mountWidget() dentro de un pequeño Client Component renderizado por el layout previsto».
• React SPA: «Monta desde la shell persistente de la aplicación o el layout de la ruta específica y limpia en la función de retorno del efecto».
• Docusaurus: «Crea un componente de tema solo para el cliente y renderízalo desde src/theme/Root; conserva la navegación de la documentación y los cambios de idioma».
• Vue, Nuxt, Svelte u otro framework: «Usa el ciclo de vida de montaje solo para el cliente del framework y el ciclo de limpieza correspondiente».

Revise una integración existente del SDK

Instrucción

Revise mi integración del SDK de ChattyBox

Revisa esta integración de ChattyBox sin desplegarla ni cambiar código que no esté relacionado.

Comprueba que:
1. @openstaticfish/chattybox esté instalado e importado en lugar de duplicar su comportamiento.
2. Un único cliente Chattybox reciba la clave pública de API y la URL de la API previstas.
3. Las variables de entorno del navegador sigan las reglas de nombres de variables públicas de este framework sin exponer credenciales privadas.
4. mountWidget() o la interfaz personalizada aparezca solo en las rutas previstas y se limpie correctamente.
5. La navegación del lado del cliente y los nuevos montajes durante el desarrollo no creen instancias duplicadas.
6. Los límites de renderizado, la localización, Analytics, el consentimiento, la accesibilidad y el layout existentes permanezcan intactos.
7. La implementación tenga pruebas adecuadas y no incluya una refactorización ajena.

Devuelve los hallazgos por gravedad con rutas de archivo y referencias de línea. Propón solo las correcciones seguras más pequeñas y proporciona los comandos exactos de verificación.

¿No usa npm ni un paso de compilación?

Use la guía de instalación de widget.js solo cuando el sitio no pueda utilizar el paquete npm, por ejemplo, en HTML sencillo, un campo de código personalizado de un CMS o Google Tag Manager.

Instrucción

Instale el script del widget de respaldo

Instala el widget alojado de ChattyBox en este sitio usando el script exacto generado por mi pestaña Embed de ChattyBox:

[PASTE COMPLETE WIDGET SCRIPT]

Inspecciona primero el sitio e identifica el punto de inserción global más seguro para las páginas públicas. Carga el script sin cambios exactamente una vez, excluye las rutas privadas, de administración y de pago, conserva el comportamiento del consentimiento y de CSP, no expongas credenciales privadas, no despliegues el cambio e informa de la ubicación modificada y de un plan de pruebas en el navegador.

Pruebe el resultado

1. Revise el diff y confirme que no se hayan incluido credenciales reales en un commit.
2. Ejecute el build, el lint, la comprobación de tipos y las pruebas normales del proyecto.
3. Despliegue mediante el proceso normal de revisión.
4. Verifique las rutas previstas en una ventana privada del navegador, incluida la navegación del lado del cliente.
5. Haga una pregunta compatible, siga una cita y pruebe el comportamiento de respaldo.
6. Compruebe el diseño móvil, el uso del teclado y la consola del navegador.

Continúe con la referencia del SDK y la checklist de lanzamiento.