Agentes de IA num site Next.js com o ASDK

Equipes que constroem o site de marketing em Next.js costumam se preocupar com duas coisas quando adicionam um script de terceiros: ele não pode deixar o site lento e não pode brigar com o roteamento. O ASDK é um único script hospedado que carrega de forma assíncrona, acompanha sozinho a navegação no lado do cliente e é configurado pelo painel, então ele exige um componente no layout raiz e nenhuma mudança por rota.

O que o ASDK acrescenta a um site Next.js

O ASDK cria uma única base de conhecimento a partir das suas páginas públicas, do jeito que um mecanismo de busca as lê, mais os documentos que você enviar. Todo agente que você ativa responde com base nela.

• Chat (acesso antecipado, a partir do plano Free) responde aos visitantes com base na sua documentação e nas suas páginas de preços e de produto, coloca os links das páginas de onde veio cada resposta e se oferece para anotar os dados de contato quando não consegue ajudar.
• Agent-Ready (acesso antecipado, a partir do plano Free) publica o que a sua base de conhecimento sabe em formatos que os assistentes de IA leem bem, como um arquivo llms.txt hospedado.
• Sales (acesso antecipado, a partir do plano Pro) faz as perguntas de qualificação que você escreve em linguagem simples e oferece uma reunião aos visitantes que se encaixam.
• Search chega em breve. Ele vai responder no lugar da caixa de busca da sua documentação, com fontes.

Páginas renderizadas no servidor e geradas estaticamente são as mais fáceis de ler para o rastreador. Se partes do seu site só são renderizadas no navegador, garanta que os fatos importantes também estejam no HTML que o servidor envia.

Como os agentes leem um site Next.js

A base de conhecimento vem das suas páginas públicas, que o rastreador do ASDK lê do jeito que um mecanismo de busca faz. Ele se identifica e segue as regras do seu robots.txt; a página do rastreador explica como. Três coisas decidem o quanto ele lê bem um site Next.js:

• O que o servidor envia. Páginas geradas estaticamente ou renderizadas no servidor trazem o texto no HTML, que é o caso mais fácil. Texto que só aparece depois de uma busca de dados no lado do cliente pode faltar no que o rastreador vê.
• O que o robots.txt permite. Se o seu robots.txt bloqueia rastreadores que ele não conhece, o ASDK não consegue ler as suas páginas. Libere-o explicitamente, ou confira as regras antes de adicionar o seu site.
• O que é público. Documentação atrás de login, deploys de preview e páginas excluídas da busca ficam de fora, a menos que você envie o conteúdo delas como documentos.

Como todo agente responde com base nessa base de conhecimento, as mesmas páginas que ajudam os mecanismos de busca também melhoram as respostas dos agentes: uma página de preços clara, páginas de produto específicas e uma FAQ honesta.

Instalação no App Router

Adicione o script ao seu layout raiz, app/layout.tsx, com o 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>
  );
}

O next/script repassa atributos extras como data-site-id para a tag script, e um script no layout raiz carrega uma única vez, não importa como o visitante navega. O guia do Next.js sobre carregamento de scripts explica as estratégias de carregamento (consultado em outubro de 2026). afterInteractive é a certa aqui: o widget não é necessário antes de a página ficar interativa.

Mantendo o site rápido

O widget foi feito para ficar fora do seu orçamento de performance:

• Ele não está no seu bundle. O script é hospedado em cdn.asdk.com, então não acrescenta nada aos seus chunks de JavaScript e se atualiza sem um novo deploy do seu site.
• Ele carrega depois que a página fica interativa. Com afterInteractive, o Next.js carrega o script assim que a página consegue responder a interações, então ele não disputa com o seu próprio código a primeira renderização.
• Ele carrega uma vez. No layout raiz, o script sobrevive à navegação no lado do cliente; passar de uma página para outra não o baixa de novo.

Meça antes e depois com as ferramentas que você já usa, como o Lighthouse ou o seu monitoramento de usuários reais. Se um número mudar, o guia de solução de problemas e a nossa equipe podem ajudar a descobrir por quê.

Outras configurações

• Pages Router. Coloque o mesmo elemento Script em pages/_app.tsx, ao lado do componente da página, para que todas as páginas o recebam.
• React com Vite ou uma configuração parecida. Cole a tag script simples no index.html, logo antes da tag body de fechamento. Não a adicione a partir do effect de um componente: o React pode executar effects duas vezes em desenvolvimento, e o widget só precisa carregar uma vez.
• Outros frameworks. Qualquer framework com um layout compartilhado ou um template de documento funciona do mesmo jeito: carregue o script uma vez, no site inteiro. O guia de HTML cobre o caso geral.

O guia de instalação para Next.js e React tem o código completo de cada um.

Chamar o widget a partir do seu app

O widget adiciona uma função global asdk. Para chamá-la antes de o widget carregar, defina primeiro uma pequena fila, no index.html ou com um Script inline que tenha um id:

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

Depois, por exemplo, passe a pessoa logada após o login e esqueça-a no logout:

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

asdk("open") abre o chat a partir do seu próprio botão “Fale com a gente”.

Content Security Policy e nonces

Se o seu site envia uma Content Security Policy, permita https://cdn.asdk.com em script-src e https://api.asdk.com em connect-src. Se a política usa nonces com 'strict-dynamic', os nomes de host são ignorados e o script precisa do nonce da sua página: passe-o para a prop nonce do componente Script.

O guia do Next.js sobre Content Security Policy mostra como criar um nonce por requisição em proxy.ts e lê-lo num Server Component (consultado em outubro de 2026). Ele também aponta a contrapartida: nonces exigem renderização dinâmica, então as páginas que os usam não podem ser geradas estaticamente. A nossa seção sobre CSP lista as origens exatas de que o ASDK precisa.

Configure o ASDK num site Next.js

O que está disponível e o que chega em breve

O ASDK como um todo está em acesso antecipado: os agentes funcionam e você pode usá-los, mas eles podem mudar enquanto os aprimoramos.