Next.js Package

Overview

The Asyntai package for Next.js is one React component. Put it in your root layout, build the site, and the chat bubble is on every page. It works with the App Router and the Pages Router, and with docs sites built on Next.js, such as Fumadocs and Nextra.

The assistant answers your visitors from your own content, in more than 80 languages, day and night.

Requirements

• Next.js 13.4 or later. We test it on Next.js 14 and 16
• React 18 or 19
• An Asyntai account. The Free plan is enough to try the widget

Installation

Follow these steps to add Asyntai to your Next.js site:

npm install nextjs-ai-chatbot

import { AsyntaiChatbot } from 'nextjs-ai-chatbot';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <AsyntaiChatbot widgetId="asyntai_1a2b3c4d5e6f" />
      </body>
    </html>
  );
}

Fumadocs

Fumadocs is a Next.js app, so the steps are the same. Add the component to app/layout.tsx, next to the Fumadocs provider:

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_1a2b3c4d5e6f" />
      </body>
    </html>
  );
}

Fumadocs changes pages without a full reload. The chat stays on screen while the reader moves through your docs.

Widget ID From an Environment Variable

You can leave the ID out of your code. Set it in .env:

NEXT_PUBLIC_ASYNTAI_WIDGET_ID=asyntai_1a2b3c4d5e6f

Then write <AsyntaiChatbot /> with no widgetId. Set the variable where you run next build, because Next.js reads NEXT_PUBLIC_ values at build time.

Options

If the widget ID is missing or malformed, the component shows nothing, and next dev prints a message in the console that says how to fix it. Your site keeps working.

How It Works

The component loads the Asyntai widget with next/script. The widget loads after the page's load event, so your own content always renders first, and your JavaScript bundle stays the same size.

Without the Package

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

import Script from 'next/script';

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

Answering From Your Content

Asyntai reads your published pages. Add your site URL in the dashboard, and the assistant answers from the same pages the widget sits on. You can also add documents, and question and answer pairs.

Removing It

Delete the <AsyntaiChatbot /> line and build again. The chat bubble is gone.

Plans & Pricing

The package is free. View pricing.

Need Help?

If you have any questions or run into issues, contact us at [email protected].