讓你的 VitePress 文檔站支持 AI 對(duì)話，基于你的文檔內(nèi)容解答用戶問題
這篇文章將教你如何使用一個(gè)開源工具?Documate（https://github.com/AirCodeLabs/documate）快速讓你的?VitePress?文檔站擁有 AI 對(duì)話能力，基于你的文檔內(nèi)容來解答用戶問題。
通過簡單的配置，就可以將能力接入到你的網(wǎng)站之中。有了大模型的加持，用戶上來幾乎可以不讀文檔，直接與 AI 對(duì)話就可以完成自己的需求，對(duì)技術(shù)類產(chǎn)品文檔來說，價(jià)值很高。支持流式輸出，回答速度很快，并且開源，隨時(shí)可以貢獻(xiàn)和調(diào)整代碼。
技術(shù)原理
仔細(xì)閱讀了這個(gè)項(xiàng)目的源碼，整體實(shí)現(xiàn)還是比較簡單和清晰的。它由三部分構(gòu)成：
第一部分：一個(gè)將文檔提交到數(shù)據(jù)庫的 CLI 工具，只需要在項(xiàng)目中配置下 documate.json 就行了，描述哪些是文檔文件；
第二部分：一個(gè)封裝好的拿來即用的問答 UI 組件，直接 import 組件就可以使用，目前提供了 Vue 版本?？?issue 規(guī)劃，React 版本社區(qū)已經(jīng)在支持中了，相信很快就會(huì)發(fā)布；
第三部分：一個(gè)提供問答服務(wù)、可一鍵完成部署的 AI Ask Server，可以在 Aircode 直接完成部署，也可以在自己的服務(wù)器上部署；
問答服務(wù)有了，UI 組件有了，數(shù)據(jù)也有了，那就可以嘗試著玩耍了，整個(gè)配置過程大概可以在 15min 內(nèi)完成。
如何接入
如果你想創(chuàng)建一個(gè)全新的 VitePress 項(xiàng)目并包含 AI 對(duì)話能力，可以使用下面的命令：
npm create documate@latest --template vitepress
創(chuàng)建完成后可直接跳到第 3 步「構(gòu)建上傳和搜索后端 API」繼續(xù)配置。
如果要給已有的 VitePress 項(xiàng)目添加 AI 對(duì)話能力，則按照以下步驟進(jìn)行。
1. 初始化
在你的 VitePress 項(xiàng)目根目錄下使用以下命令進(jìn)行初始化：
npx @documate/documate init --framework vue
該命令會(huì)創(chuàng)建一個(gè)?documate.json?配置文件。
并且添加了一個(gè)?documate:upload?命令用于上傳文檔生成知識(shí)庫，后面會(huì)介紹到具體用法。
2. 給項(xiàng)目添加 UI 入口
在文件?.vitepress/theme/index.js?中添加如下代碼，如果沒有則需要先手動(dòng)創(chuàng)建這個(gè)文件。VitePress 在 Extending the Default Theme 文檔中介紹了如何定制自己的主題。
上面的代碼會(huì)在導(dǎo)航欄中添加一個(gè) AI 對(duì)話框的 UI。在本地使用?npm run docs:dev?啟動(dòng)服務(wù)后，你可以在左上角找到?Ask AI?的按鈕。如果沒有看到 Ask AI 按鈕，可以檢查下上面的代碼是否都正確添加，并確保從?@documate/vue/dist/style.css?導(dǎo)入了 CSS 樣式文件。
至此，你已經(jīng)完成了 UI 的接入，接下來我們?yōu)閷?duì)話框添加回答問題的接口能力。
3.構(gòu)建上傳和搜索后端 API
Documate 的后端代碼用于上傳文檔內(nèi)容生成知識(shí)庫，以及接收用戶的問題并返回流式的回答。
進(jìn)入 GitHub 中的 backend 文件夾（https://github.com/AirCodeLabs/documate/tree/main/backend），點(diǎn)擊其中的「Deploy to AirCode」，快速復(fù)制并部署一份自己的后端代碼。
如果是第一次使用 AirCode（一個(gè)在線編寫和部署 Node.js 應(yīng)用的平臺(tái)），會(huì)被重定向到登錄頁面。建議選擇 GitHub 登錄，會(huì)更快一些。
創(chuàng)建應(yīng)用之后，在?Envrionments?標(biāo)簽頁中設(shè)置?OPENAI_API_KEY?環(huán)境變量為你的 OpenAI Key 值。你可以在 OpenAI 控制臺(tái)中獲取到 API Key。
點(diǎn)擊頂部欄上的「Deploy」按鈕，將所有的函數(shù)部署到線上，部署成功后可以得到每個(gè)函數(shù)的調(diào)用 URL。
這里會(huì)使用到?upload.js?和?ask.js兩個(gè)函數(shù)，一個(gè)用于文檔內(nèi)容上傳，另一個(gè)用于回答問題。
4.設(shè)置 API 接口
在 AirCode Dashboard 中，選擇部署后的?upload.js?文件，復(fù)制 URL 并添加到?documate.json?的?backend?字段中：
同上操作，在 AirCode 中選擇已部署的?ask.js?文件，復(fù)制調(diào)用 URL，修改?.vitepress/theme/index.js?文件 endpoint 值。
5. 運(yùn)行項(xiàng)目
通過下面的命令將內(nèi)容上傳到后端，生成文檔知識(shí)庫:
npm run documate:upload
命令完成后，本地啟動(dòng)項(xiàng)目，點(diǎn)擊左上角?Ask AI?按鈕，在彈出對(duì)話框后輸入問題就可以得到基于你文檔內(nèi)容的回答。
npm run docs:dev
更多的使用和配置方式可以參考 Documate 項(xiàng)目的 GitHub。
