Añade agentes de IA a un sitio de Next.js con ASDK

Los equipos que construyen su sitio de marketing con Next.js suelen cuidar dos cosas al añadir un script de terceros: que no ralentice el sitio y que no choque con su enrutamiento. ASDK es un único script alojado que se carga de forma asíncrona, sigue por sí solo la navegación del lado del cliente y se configura desde el panel, así que basta con un componente en tu layout raíz y ningún cambio por ruta.

Qué añade ASDK a un sitio de Next.js

ASDK crea una base de conocimiento con tus páginas públicas, tal como las lee un buscador, además de los documentos que subas. Cada agente que activas responde con ella.

• Chat (acceso anticipado, desde el plan Free) responde a los visitantes con tu documentación y tus páginas de precios y de producto, enlaza las páginas de las que sale cada respuesta y ofrece tomar los datos de contacto cuando no puede ayudar.
• Agent-Ready (acceso anticipado, desde el plan Free) publica lo que sabe tu base de conocimiento en formatos que los asistentes de IA leen bien, como un archivo llms.txt alojado.
• Sales (acceso anticipado, desde el plan Pro) hace las preguntas de cualificación que escribes en lenguaje sencillo y ofrece una reunión a los visitantes que encajan.
• Search llegará próximamente. Responderá en lugar del buscador de tu documentación, con fuentes.

Las páginas renderizadas en el servidor y las generadas estáticamente son las más fáciles de leer para el rastreador. Si partes de tu sitio solo se renderizan en el navegador, asegúrate de que los datos importantes también estén en el HTML que envía el servidor.

Cómo leen los agentes un sitio de Next.js

La base de conocimiento sale de tus páginas públicas, que el rastreador de ASDK lee como lo hace un buscador. Se identifica y respeta las reglas de tu robots.txt; la página del rastreador explica cómo. Tres cosas deciden lo bien que lee un sitio de Next.js:

• Lo que envía el servidor. Las páginas generadas estáticamente o renderizadas en el servidor tienen su texto en el HTML, que es el caso más sencillo. El texto que solo aparece tras obtener datos en el cliente puede faltar en lo que ve el rastreador.
• Lo que permite robots.txt. Si tu robots.txt bloquea a los rastreadores que no conoce, ASDK no puede leer tus páginas. Permítelo de forma explícita, o revisa las reglas antes de añadir tu sitio.
• Lo que es público. La documentación tras un inicio de sesión, los despliegues de vista previa y las páginas excluidas de los buscadores quedan fuera, salvo que subas su contenido como documentos.

Como todos los agentes responden con esta base de conocimiento, las mismas páginas que ayudan a los buscadores también mejoran las respuestas de los agentes: una página de precios clara, páginas de producto concretas y unas preguntas frecuentes honestas.

Instalación en el App Router

Añade el script a tu layout raíz, app/layout.tsx, con el componente next/script:

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.asdk.com/v1/asdk.js"
          data-site-id="SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

next/script pasa a la etiqueta script los atributos adicionales como data-site-id, y un script en el layout raíz se carga una sola vez navegue como navegue el visitante. La guía de Next.js para cargar scripts explica las estrategias de carga (consultada en octubre de 2026). afterInteractive es la adecuada aquí: el widget no hace falta antes de que la página sea interactiva.

Mantenerlo rápido

El widget está hecho para no pesar en tu presupuesto de rendimiento:

• No está en tu bundle. El script se aloja en cdn.asdk.com, así que no añade nada a tus chunks de JavaScript y se actualiza sin volver a desplegar tu sitio.
• Se carga cuando la página ya es interactiva. Con afterInteractive, Next.js carga el script en cuanto la página puede responder a la interacción, así que no compite con tu propio código en el primer renderizado.
• Se carga una vez. En el layout raíz, el script se mantiene durante la navegación del lado del cliente; pasar de una página a otra no lo vuelve a descargar.

Mide antes y después con las herramientas que ya usas, como Lighthouse o tu monitorización de usuarios reales. Si una cifra cambia, la guía de solución de problemas y nuestro equipo pueden ayudarte a averiguar por qué.

Otras configuraciones

• Pages Router. Pon el mismo elemento Script en pages/_app.tsx, junto al componente de página, para que todas las páginas lo tengan.
• React con Vite o una configuración parecida. Pega la etiqueta script normal en index.html, justo antes de la etiqueta body de cierre. No la añadas desde el efecto de un componente: React puede ejecutar los efectos dos veces en desarrollo, y el widget solo necesita cargarse una vez.
• Otros frameworks. Cualquier framework con un layout compartido o una plantilla de documento funciona igual: carga el script una vez, en todo el sitio. La guía de HTML cubre el caso general.

La guía de instalación para Next.js y React tiene el código completo de cada caso.

Llamar al widget desde tu app

El widget añade una función global asdk. Para llamarla antes de que el widget se haya cargado, define primero una pequeña cola, en index.html o con un Script en línea que tenga un id:

<script>
  window.asdk = window.asdk || function () { (asdk.q = asdk.q || []).push(arguments); };
</script>

Después, por ejemplo, pasa la persona que ha iniciado sesión tras el inicio de sesión, y olvídala al cerrarla:

window.asdk("identify", { email: user.email, name: user.name });
window.asdk("shutdown");

asdk("open") abre el chat desde tu propio botón «Habla con nosotros».

Content Security Policy y nonces

Si tu sitio envía una Content Security Policy, permite https://cdn.asdk.com en script-src y https://api.asdk.com en connect-src. Si la política usa nonces con 'strict-dynamic', los nombres de host se ignoran y el script necesita en su lugar el nonce de tu página: pásalo a la prop nonce del componente Script.

La guía de Next.js sobre Content Security Policy muestra cómo crear un nonce por petición en proxy.ts y leerlo en un Server Component (consultada en octubre de 2026). También señala la contrapartida: los nonces exigen renderizado dinámico, así que las páginas que los usan no pueden generarse estáticamente. Nuestra sección sobre CSP enumera las fuentes exactas que necesita ASDK.

Configura ASDK en un sitio de Next.js

Qué está disponible y qué llegará próximamente

ASDK en su conjunto está en acceso anticipado: los agentes funcionan y puedes usarlos, pero pueden cambiar mientras los mejoramos.