Asyntai AI Chatbot

Readers often cannot find the page they need, or they have a question that the search box does not answer. They leave, or they open a support ticket.

Asyntai adds an AI chat assistant to your Fumadocs site. It reads your published pages and answers readers from them, in more than 80 languages. The nextjs-ai-chatbot package adds the chat widget with one component. There is a free plan.

SetupCopy Anchor Link

You need an Asyntai widget ID. It starts with asyntai_, and you find it on the Install page of your Asyntai dashboard.

npm install nextjs-ai-chatbot

import { RootProvider } from 'fumadocs-ui/provider/next';
import { AsyntaiChatbot } from 'nextjs-ai-chatbot';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className="flex flex-col min-h-screen">
        <RootProvider>{children}</RootProvider>
        <AsyntaiChatbot widgetId="asyntai_YOURWIDGETID" />
      </body>
    </html>
  );
}

Widget ID from an environment variableCopy Anchor Link

You can leave widgetId out and set it in .env instead:

NEXT_PUBLIC_ASYNTAI_WIDGET_ID=asyntai_YOURWIDGETID

Set it where you run next build, because Next.js reads NEXT_PUBLIC_ values at build time.

Without the packageCopy Anchor Link

You can add the widget by hand with next/script:

import Script from 'next/script';

<Script
  id="asyntai-chatbot"
  src="https://widget.asyntai.com/static/js/chat-widget.js"
  data-asyntai-id="asyntai_YOURWIDGETID"
  strategy="lazyOnload"
/>;

See the package README for every option, and the Asyntai docs for the dashboard.