Asyntai AI 聊天機器人
讓讀者提出問題,並從您的文件中取得解答。
這是由社群維護的整合。
讀者經常找不到所需的頁面,或是遇到搜尋框無法解答的問題。結果他們不是直接離開,就是提交支援請求。
Asyntai 能為您的 Fumadocs 網站加入 AI 聊天助理。它會讀取您已發布的頁面,並根據這些內容以超過 80 種語言回答讀者的問題。只要使用一個元件,nextjs-ai-chatbot 套件就能加入聊天小工具。Asyntai 另有提供免費方案。
設定
您需要一組 Asyntai 小工具 ID。此 ID 以 asyntai_ 開頭,可在 Asyntai 控制台的 Install 頁面找到。
安裝套件
npm install nextjs-ai-chatbot加入元件
請將 <AsyntaiChatbot /> 放在根版面配置中 <body> 的最後面。此元件可在伺服器元件中使用。版面配置的其餘部分維持原樣即可。
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 中設定:
NEXT_PUBLIC_ASYNTAI_WIDGET_ID=asyntai_YOURWIDGETID請在執行 next build 的環境中設定此變數,因為 Next.js 會在建置時讀取 NEXT_PUBLIC_ 開頭的值。
不使用套件
您也可以透過 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 文件。
How is this guide?
最後更新於
