跳至內容
Fumadocs

Asyntai AI 聊天機器人

讓讀者提出問題,並從您的文件中取得解答。

這是由社群維護的整合。

讀者經常找不到所需的頁面,或是遇到搜尋框無法解答的問題。結果他們不是直接離開,就是提交支援請求。

Asyntai 能為您的 Fumadocs 網站加入 AI 聊天助理。它會讀取您已發布的頁面,並根據這些內容以超過 80 種語言回答讀者的問題。只要使用一個元件,nextjs-ai-chatbot 套件就能加入聊天小工具。Asyntai 另有提供免費方案。

設定

您需要一組 Asyntai 小工具 ID。此 ID 以 asyntai_ 開頭,可在 Asyntai 控制台的 Install 頁面找到。

安裝套件

npm install nextjs-ai-chatbot

加入元件

請將 <AsyntaiChatbot /> 放在根版面配置中 <body> 的最後面。此元件可在伺服器元件中使用。版面配置的其餘部分維持原樣即可。

app/layout.tsx
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>
  );
}

此小工具會在頁面的 load 事件觸發後才載入,因此您的文件一定會先完成算繪。Fumadocs 切換頁面時不會整頁重新載入,讀者瀏覽您的文件時,聊天視窗會一直保留在畫面上。

在控制台中加入您的文件

請在 Asyntai 控制台中加入您文件網站的 URL。這樣一來,助理就會根據嵌入小工具的那些頁面內容來回答問題。

從環境變數取得 Widget ID

您可以省略 widgetId,改在 .env 中設定:

.env
NEXT_PUBLIC_ASYNTAI_WIDGET_ID=asyntai_YOURWIDGETID

請在執行 next build 的環境中設定此變數,因為 Next.js 會在建置時讀取 NEXT_PUBLIC_ 開頭的值。

不使用套件

您也可以透過 next/script 手動加入小工具:

app/layout.tsx
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 文件。

How is this guide?

最後更新於