让你的 VitePress 文档站支持 AI 对话，基于你的文档内容解答用户问题

2023-09-20 16:44 作者:AirCodeLabs 0人读过 | 我要投稿

这篇文章将教你如何使用一个开源工具 Documate（https://github.com/AirCodeLabs/documate）快速让你的 VitePress 文档站拥有 AI 对话能力，基于你的文档内容来解答用户问题。

通过简单的配置，就可以将能力接入到你的网站之中。有了大模型的加持，用户上来几乎可以不读文档，直接与 AI 对话就可以完成自己的需求，对技术类产品文档来说，价值很高。支持流式输出，回答速度很快，并且开源，随时可以贡献和调整代码。

技术原理

仔细阅读了这个项目的源码，整体实现还是比较简单和清晰的。它由三部分构成：

第一部分：一个将文档提交到数据库的 CLI 工具，只需要在项目中配置下 documate.json 就行了，描述哪些是文档文件；

第二部分：一个封装好的拿来即用的问答 UI 组件，直接 import 组件就可以使用，目前提供了 Vue 版本。看 issue 规划，React 版本社区已经在支持中了，相信很快就会发布；

第三部分：一个提供问答服务、可一键完成部署的 AI Ask Server，可以在 Aircode 直接完成部署，也可以在自己的服务器上部署；

问答服务有了，UI 组件有了，数据也有了，那就可以尝试着玩耍了，整个配置过程大概可以在 15min 内完成。

如何接入

如果你想创建一个全新的 VitePress 项目并包含 AI 对话能力，可以使用下面的命令：

npm create documate@latest --template vitepress

创建完成后可直接跳到第 3 步「构建上传和搜索后端 API」继续配置。

如果要给已有的 VitePress 项目添加 AI 对话能力，则按照以下步骤进行。

1. 初始化

在你的 VitePress 项目根目录下使用以下命令进行初始化：

npx @documate/documate init --framework vue

该命令会创建一个 documate.json 配置文件。

并且添加了一个 documate:upload 命令用于上传文档生成知识库，后面会介绍到具体用法。

2. 给项目添加 UI 入口

在文件 .vitepress/theme/index.js 中添加如下代码，如果没有则需要先手动创建这个文件。VitePress 在 Extending the Default Theme 文档中介绍了如何定制自己的主题。

上面的代码会在导航栏中添加一个 AI 对话框的 UI。在本地使用 npm run docs:dev 启动服务后，你可以在左上角找到 Ask AI 的按钮。如果没有看到 Ask AI 按钮，可以检查下上面的代码是否都正确添加，并确保从 @documate/vue/dist/style.css 导入了 CSS 样式文件。