[特殊字符] VitePress 对接 Algolia AI 问答（DocSearch + AI Search）完整实战（下）

文章目录

前言
一、核心前提
[二、操作步骤：Algolia 配置 AI 助手（对接 Gemini）](#二、操作步骤：Algolia 配置 AI 助手（对接 Gemini）)
- [:one: 创建 Algolia AI 小助手](#:one: 创建 Algolia AI 小助手)
- [:two: 获取谷歌 Gemini API Key](#:two: 获取谷歌 Gemini API Key)
- [:three: 配置 AI 助手模板与提示词](#:three: 配置 AI 助手模板与提示词)
- [:four: 获取 AI 助手 ID](#:four: 获取 AI 助手 ID)
[三、VitePress 项目集成 AI 助手](#三、VitePress 项目集成 AI 助手)
- [:one: 添加 AI 助手配置](#:one: 添加 AI 助手配置)
- [:two: 版本兼容性说明](#:two: 版本兼容性说明)
四、问题总结
- [:one: 本地启动访问提示403](#:one: 本地启动访问提示403)
五、结尾

前言

在上一篇文章中，我们已经实现了 VitePress 文档与 Algolia 搜索的对接，摆脱了 DocSearch 审核的限制，搭建了自主可控的搜索体系。而在 AI 普及的当下，为技术文档接入 AI 助手，让用户能快速通过对话获取文档核心信息、解决问题，已成为提升文档体验的重要方式。本文将手把手教你，基于已有的 Algolia 配置，对接谷歌 Gemini 大模型，为 VitePress 文档添加 AI 问答功能。

查看具体功能效果，请访问华玥ui

一、核心前提

已完成 VitePress 与 Algolia 标准版的集成（参考前文：VitePress 集成 Algolia 搜索）；
拥有 Algolia 账号及已创建的应用（后续 AI 助手将关联该应用）；
拥有谷歌账号（用于获取 Gemini 大模型 API Key）；
VitePress 版本需为 2.0.0-alpha.16 及以上（侧边栏 AI 面板依赖该版本特性）。

二、操作步骤：Algolia 配置 AI 助手（对接 Gemini）

1️⃣ 创建 Algolia AI 小助手

在应用后台找到「AI 助手」相关入口，点击「创建小助手」
进入配置页面，填写你的 VitePress 文档线上访问地址（需与前文 Algolia 爬虫配置的 start_urls 一致），用于 AI 助手抓取文档内容作为问答知识库
选择对接的大模型：在模型列表中选择「谷歌 Gemini」（按需选择具体模型版本，本文以 Gemini 为例, 主要有免费测试额度），该模型适配技术文档问答场景，响应精准度较高

2️⃣ 获取谷歌 Gemini API Key

AI 助手需通过 API Key 调用 Gemini 模型能力，步骤如下：

登录https://aistudio.google.com/谷歌ai官网

访问谷歌 AI 开发者平台，使用谷歌账号登录；
登录后进入控制台，找到「API 密钥」管理入口，点击「创建密钥」（按需为密钥命名，便于管理，如「VitePress-Algolia-AI」）
密钥创建完成后，立即复制该 Key
返回 Algolia AI 助手配置页，将复制的 Gemini API Key 粘贴至对应输入框，完成模型与 Algolia 的关联

3️⃣ 配置 AI 助手模板与提示词

为优化 AI 问答效果，需选择适配技术文档的模板，并自定义提示词，规范 AI 回复逻辑：

模板选择：在 Algolia 提供的模板中，优先选择「技术文档专家」（专为技术文档场景优化，能精准提取文档核心知识点、解答技术问题）；若需适配用户咨询场景，也可选择「技术支持」「客户服务技术顾问」（对应配图：选择 AI 助手模板图）；
自定义提示词：添加 3 条核心提示词，规范 AI 行为（示例如下，可按需修改），点击「保存」生效：

4️⃣ 获取 AI 助手 ID

AI 助手配置完成后，系统会生成唯一的 assistantId，用于 VitePress 项目关联该助手：

在 Algolia AI 助手详情页，找到「助手 ID」字段，点击复制（对应配图：复制 AI 助手 ID 图）；
备份该 ID，后续配置 VitePress 时需用到。

三、VitePress 项目集成 AI 助手

通过修改 VitePress 配置文件，将 Algolia AI 助手嵌入文档，实现侧边栏 AI 问答面板功能。（路径通常为 docs/.vitepress/config.ts）

1️⃣ 添加 AI 助手配置

在已有的 Algolia 搜索配置中，新增 askAi 节点，填写复制的 assistantId，并启用侧边栏面板：

复制代码

export default defineConfig({
  // 其他配置...
  themeConfig: {
    // 其他主题配置...
    // Algolia 搜索配置
    search: {
      provider: 'algolia', // 搜索提供商：algolia
      options: {
         askAi: {
            assistantId: 'chZP4VtpBsXv',
            sidePanel: true // 这个侧边导航栏必须在"vitepress": "2.0.0-alpha.16",
        	},
      },
    },
  },
})

2️⃣ 版本兼容性说明

若启动项目后侧边栏无 AI 面板，需检查两点：

VitePress 版本是否达标：运行 npm list vitepress 查看版本，若低于 2.0.0-alpha.16，需执行 npm install vitepress@2.0.0-alpha.16 --save-dev 升级；
配置是否正确：确保 sidePanel 设为 true，且assistantId 无拼写错误。

四、问题总结

1️⃣ 本地启动访问提示403

需要改成线上地址，并且地址已配入白名单

五、结尾

如果你觉得这篇文章帮你解决了你现在的问题，那就请给我来个三连支持一下 ♥️

➡️ 点赞支持一下

➡️ 收藏以防找不到

➡️ 评论我会回访你！

➡️ 关注不会迷路哦！

你的支持是我持续更新的动力，我们下篇更精彩！🚀🔥

👉 欢迎大家给华玥组件库star。 ✅