Asyntai AI チャットボット

読者が必要なページを見つけられなかったり、検索ボックスでは解決できない疑問を抱えていたりすることはよくあります。その結果、読者はサイトを離れるか、サポートチケットを作成することになります。

Asyntai を使うと、Fumadocs サイトに AI チャットアシスタントを追加できます。公開済みのページを読み取り、その内容をもとに80以上の言語で読者の質問に回答します。nextjs-ai-chatbot パッケージを使えば、コンポーネントを1つ追加するだけでチャットウィジェットを導入できます。無料プランも用意されています。

セットアップアンカーリンクをコピー

Asyntai のウィジェット ID が必要です。ID は asyntai_ で始まる文字列で、Asyntai ダッシュボードの Install ページで確認できます。

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 を設定するアンカーリンクをコピー

widgetId は省略し、代わりに .env で設定することもできます：

NEXT_PUBLIC_ASYNTAI_WIDGET_ID=asyntai_YOURWIDGETID

Next.js は NEXT_PUBLIC_ の値をビルド時に読み込むため、next build を実行する環境で設定してください。

パッケージを使用しない場合アンカーリンクをコピー

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"
/>;

すべてのオプションについてはパッケージの READMEを、ダッシュボードについてはAsyntai のドキュメントを参照してください。