KI-Agenten für Next.js-Websites mit ASDK

Teams, die ihre Marketing-Website mit Next.js bauen, achten beim Einbinden eines fremden Skripts meist auf zwei Dinge: Es darf die Website nicht verlangsamen, und es darf sich nicht mit ihrem Routing in die Quere kommen. ASDK ist ein einzelnes gehostetes Skript, das asynchron lädt, clientseitiger Navigation von selbst folgt und im Dashboard konfiguriert wird. Es braucht also eine Komponente in Ihrem Root-Layout und keine Änderungen pro Route.

Was ASDK einer Next.js-Website hinzufügt

ASDK baut aus Ihren öffentlichen Seiten, so wie eine Suchmaschine sie liest, und aus hochgeladenen Dokumenten eine Wissensdatenbank. Jeder Agent, den Sie einschalten, antwortet daraus.

• Chat (Early Access, ab dem Free-Tarif) beantwortet Besucherfragen aus Ihrer Dokumentation, Ihren Preis- und Produktseiten, verlinkt die Seiten, aus denen jede Antwort stammt, und bietet an, Kontaktdaten aufzunehmen, wenn er nicht weiterhelfen kann.
• Agent-Ready (Early Access, ab dem Free-Tarif) veröffentlicht das Wissen Ihrer Wissensdatenbank in Formaten, die KI-Assistenten gut lesen, etwa als gehostete llms.txt-Datei.
• Sales (Early Access, ab dem Pro-Tarif) stellt die Qualifizierungsfragen, die Sie in einfachen Worten formulieren, und bietet passenden Besuchern einen Termin an.
• Search kommt demnächst. Es wird anstelle des Suchfelds Ihrer Dokumentation antworten, mit Quellen.

Serverseitig gerenderte und statisch generierte Seiten kann der Crawler am leichtesten lesen. Werden Teile Ihrer Website nur im Browser gerendert, sorgen Sie dafür, dass die wichtigen Fakten auch im HTML stehen, das der Server sendet.

Wie die Agenten eine Next.js-Website lesen

Die Wissensdatenbank entsteht aus Ihren öffentlichen Seiten, die der Crawler von ASDK so liest wie eine Suchmaschine. Er gibt sich zu erkennen und hält sich an Ihre robots.txt-Regeln; die Crawler-Seite erklärt, wie. Drei Dinge entscheiden, wie gut er eine Next.js-Website liest:

• Was der Server sendet. Statisch generierte oder serverseitig gerenderte Seiten enthalten ihren Text im HTML, das ist der einfachste Fall. Text, der erst nach clientseitigem Datenabruf erscheint, fehlt womöglich in dem, was der Crawler sieht.
• Was die robots.txt erlaubt. Sperrt Ihre robots.txt Crawler, die sie nicht kennt, kann ASDK Ihre Seiten nicht lesen. Erlauben Sie ihn ausdrücklich, oder prüfen Sie die Regeln, bevor Sie Ihre Website hinzufügen.
• Was öffentlich ist. Dokumentation hinter einem Login, Preview-Deployments und von der Suche ausgeschlossene Seiten bleiben draußen, es sei denn, Sie laden ihre Inhalte als Dokumente hoch.

Weil jeder Agent aus dieser Wissensdatenbank antwortet, machen dieselben Seiten, die Suchmaschinen helfen, auch die Antworten der Agenten besser: eine klare Preisseite, konkrete Produktseiten und ein ehrliches FAQ.

Installation im App Router

Fügen Sie das Skript mit der Komponente next/script in Ihr Root-Layout app/layout.tsx ein:

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 reicht zusätzliche Attribute wie data-site-id an das Script-Tag durch, und ein Skript im Root-Layout lädt einmal, egal wie der Besucher navigiert. Der Next.js-Leitfaden zum Laden von Skripten erklärt die Ladestrategien (geprüft im Oktober 2026). afterInteractive ist hier die richtige: Das Widget wird nicht gebraucht, bevor die Seite interaktiv ist.

Schnell bleiben

Das Widget ist so gebaut, dass es Ihr Performance-Budget nicht belastet:

• Es steckt nicht in Ihrem Bundle. Das Skript liegt auf cdn.asdk.com, fügt Ihren JavaScript-Chunks also nichts hinzu und wird ohne neues Deployment Ihrer Website aktualisiert.
• Es lädt, nachdem die Seite interaktiv ist. Mit afterInteractive lädt Next.js das Skript, sobald die Seite auf Eingaben reagieren kann. Es konkurriert also nicht mit Ihrem eigenen Code um das erste Rendering.
• Es lädt einmal. Im Root-Layout übersteht das Skript clientseitige Navigation; beim Wechsel zwischen Seiten wird es nicht erneut heruntergeladen.

Messen Sie vorher und nachher mit den Tools, die Sie ohnehin nutzen, etwa Lighthouse oder Ihrem Real-User-Monitoring. Bewegt sich eine Zahl, helfen Ihnen die Anleitung zur Fehlerbehebung und unser Team, den Grund zu finden.

Andere Setups

• Pages Router. Setzen Sie dasselbe Script-Element in pages/_app.tsx neben die Seitenkomponente, damit jede Seite es erhält.
• React mit Vite oder einem ähnlichen Setup. Fügen Sie das einfache Script-Tag in die index.html ein, direkt vor dem schließenden body-Tag. Fügen Sie es nicht aus einem Effect einer Komponente hinzu: React führt Effects in der Entwicklung möglicherweise zweimal aus, und das Widget muss nur einmal laden.
• Andere Frameworks. Jedes Framework mit gemeinsamem Layout oder Dokument-Template funktioniert genauso: Skript einmal laden, websiteweit. Die HTML-Anleitung behandelt den allgemeinen Fall.

Die Installationsanleitung für Next.js und React enthält den vollständigen Code für jeden Fall.

Das Widget aus Ihrer App aufrufen

Das Widget stellt eine globale Funktion asdk bereit. Um sie aufzurufen, bevor das Widget geladen ist, definieren Sie zuerst eine kleine Warteschlange, in der index.html oder mit einem Inline-Script, das eine id hat:

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

Dann übergeben Sie zum Beispiel nach dem Login die angemeldete Person und vergessen sie beim Logout:

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

asdk("open") öffnet den Chat über Ihren eigenen Button „Sprechen Sie mit uns“.

Content Security Policy und Nonces

Sendet Ihre Website eine Content Security Policy, erlauben Sie https://cdn.asdk.com in script-src und https://api.asdk.com in connect-src. Nutzt die Richtlinie Nonces mit 'strict-dynamic', werden Hostnamen ignoriert, und das Skript braucht stattdessen die Nonce Ihrer Seite: Übergeben Sie sie an die Prop nonce der Komponente Script.

Der Next.js-Leitfaden zur Content Security Policy zeigt, wie Sie pro Request in proxy.ts eine Nonce erzeugen und in einer Server Component auslesen (geprüft im Oktober 2026). Er weist auch auf den Nachteil hin: Nonces erfordern dynamisches Rendering, Seiten mit Nonces lassen sich also nicht statisch generieren. Unser Abschnitt zur CSP nennt die genauen Quellen, die ASDK braucht.

ASDK auf einer Next.js-Website einrichten

Was verfügbar ist und was demnächst kommt

ASDK als Ganzes ist im Early Access: Die Agenten funktionieren und Sie können sie nutzen, aber sie können sich ändern, während wir sie verbessern.