Add AI agents to a Next.js site with ASDK

Teams that build their marketing site in Next.js usually care about two things when they add a third-party script: it must not slow the site down, and it must not fight with their routing. ASDK is a single hosted script that loads asynchronously, follows client-side navigation by itself and is configured from the dashboard, so it takes one component in your root layout and no changes per route.

What ASDK adds to a Next.js site

ASDK builds one knowledge base from your public pages, the way a search engine reads them, plus any documents you upload. Every agent you switch on answers from it.

• Chat (early access, from the Free plan) answers visitors from your docs, pricing and product pages, links the pages each answer came from, and offers to take contact details when it cannot help.
• Agent-Ready (early access, from the Free plan) publishes what your knowledge base knows in formats AI assistants read well, such as a hosted llms.txt file.
• Sales (early access, from the Pro plan) asks the qualifying questions you write in plain language and offers a meeting to visitors who fit.
• Search is coming soon. It will answer in place of your docs search box, with sources.

Server-rendered and statically generated pages are the easiest for the crawler to read. If parts of your site render only in the browser, make sure the facts that matter are also in the HTML the server sends.

How the agents read a Next.js site

The knowledge base comes from your public pages, which ASDK's crawler reads the way a search engine does. It identifies itself and follows your robots.txt rules; the crawler page explains how. Three things decide how well it reads a Next.js site:

• What the server sends. Pages that are statically generated or rendered on the server contain their text in the HTML, which is the easiest case. Text that appears only after client-side data fetching may be missing from what the crawler sees.
• What robots.txt allows. If your robots.txt blocks crawlers it does not know, ASDK cannot read your pages. Allow it explicitly, or check the rules before you add your site.
• What is public. Docs behind a login, preview deployments and pages excluded from search stay out unless you upload their content as documents.

Because every agent answers from this knowledge base, the same pages that help search engines also make the agents' answers better: a clear pricing page, specific product pages and an honest FAQ.

Install in the App Router

Add the script to your root layout, app/layout.tsx, with the next/script component:

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 passes extra attributes such as data-site-id through to the script tag, and a script in the root layout loads once however the visitor navigates. The Next.js guide to loading scripts explains the loading strategies (checked October 2026). afterInteractive is the right one here: the widget is not needed before the page becomes interactive.

Keeping it fast

The widget is built to stay out of your performance budget:

• It is not in your bundle. The script is hosted at cdn.asdk.com, so it adds nothing to your JavaScript chunks and updates without a redeploy of your site.
• It loads after the page is interactive. With afterInteractive, Next.js loads the script once the page can respond to input, so it does not compete with your own code for the first render.
• It loads once. In the root layout, the script survives client-side navigation; moving between pages does not download it again.

Measure before and after with the tools you already use, such as Lighthouse or your real-user monitoring. If a number moves, the troubleshooting guide and our team can help you find out why.

Other setups

• Pages Router. Put the same Script element in pages/_app.tsx, next to the page component, so every page gets it.
• React with Vite or a similar setup. Paste the plain script tag into index.html, just before the closing body tag. Don't add it from a component's effect: React may run effects twice in development, and the widget only needs to load once.
• Other frameworks. Any framework with a shared layout or document template works the same way: load the script once, site-wide. The HTML guide covers the general case.

The Next.js and React install guide has the full code for each.

Calling the widget from your app

The widget adds a global asdk function. To call it before the widget has loaded, define a small queue first, in index.html or with an inline Script that has an id:

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

Then, for example, pass the signed-in person after login, and forget them on logout:

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

asdk("open") opens the chat from your own "Talk to us" button.

Content Security Policy and nonces

If your site sends a Content Security Policy, allow https://cdn.asdk.com in script-src and https://api.asdk.com in connect-src. If the policy uses nonces with 'strict-dynamic', host names are ignored and the script needs your page's nonce instead: pass it to the Script component's nonce prop.

The Next.js guide to Content Security Policy shows how to create a nonce per request in proxy.ts and read it in a Server Component (checked October 2026). It also points out the trade-off: nonces require dynamic rendering, so pages that use them cannot be statically generated. Our CSP section lists the exact sources ASDK needs.

Set up ASDK on a Next.js site

What is available and what is coming soon

ASDK as a whole is in early access: the agents work and you can use them, but they may change while we improve them.