chatgpt-vue3-light-mvp

💭 一个可二次开发 Chat Bot 对话 Web 端原型模板, 基于 Vue3、Vite 6、TypeScript、Naive UI、Pinia、UnoCSS 等主流技术构建, 🧤简单集成大模型 API, 采用单轮 AI 问答对话模式, 每次提问独立响应, 无需上下文, 支持打字机效果流式输出, 集成 markdown-it, highlight.js, 数学公式, Mermaid 图表语法高亮预览, 💼 易于定制和快速搭建 Chat 类大语言模型产品

🌈 Live Demo 在线体验

[!IMPORTANT] 本项目为最小可行产品 (MVP), 仅支持单轮对话模式（每次提问独立响应，不保留上下文）

未来有机会支持多轮对话，目前暂无具体计划。💡 如有需求，可基于此项目自行扩展 ~

🎉 特性

• 🛠️ 核心技术栈：Vite 6 + Vue 3 + TypeScript + Pinia(v3) + ESLint (v9)
• 🎨 UI 框架：Naive UI 2.x
• 🪄 解放双手：内置 Unplugin Auto Import，支持组件按需自动导入，提升开发效率
• 🌟 图标支持：内置 UnoCSS + Iconify，实现原子化样式内联和图标按需自动导入
• 💬 AI 对话：支持单轮对话，用户输入即得 AI 独立响应回复，无需上下文
• 📝 Markdown 预览：支持多种编程语言代码高亮，集成 markdown-it 和 highlight.js
• 📊 可视化支持：内置 Mermaid 解析，轻松绘制流程图和时序图等；支持 KaTex/LaTeX 数学公式渲染，助力技术文档编写
• 🧪 模拟开发模式：提供本地模拟开发模式，无需真实 API 即可开始开发
• 🔑 环境变量管理：通过 .env 文件管理 API 密钥，支持不同大模型的配置
• 🌍 大语言模型 API：兼容 Deepseek V3/R1, Spark 星火认知大模型、Kimi Moonshot 月之暗面大模型、SiliconFlow、Ollama 等，允许自由扩展
• 🚀 灵活扩展：轻量级模块化 MVP 设计，纯前端开发，项目结构清晰，快速搭建 AI 对话原型

🧠 已支持的模型

详见 这里

模型名称	模型标识符	需要 API Key	可否本地运行	备注
（默认类型）模拟数据模型	standard	×	✅	开发环境默认使用
Ollama (Llama 3) 大模型	ollama3	×	✅	需本地安装运行 Ollama 服务
DeepSeek-V3	deepseek-v3	✅	×	需配置 VITE_DEEPSEEK_KEY
DeepSeek-R1 (推理模型)	deepseek-deep	✅	×	需配置 VITE_DEEPSEEK_KEY
Spark 星火大模型	spark	✅	×	需配置 VITE_SPARK_KEY
SiliconFlow 硅基流动大模型	siliconflow	✅	×	需配置 VITE_SILICONFLOW_KEY
Kimi Moonshot 月之暗面大模型	moonshot	✅	×	需配置 VITE_MOONSHOT_KEY

前置条件

• Vue 3.x
• Node >= 22.12.x
• Pnpm 10.x
• VS Code 插件 dbaeumer.vscode-eslint >= v3.0.5 (pre-release)

运行效果

• Deepseek 深度思考响应结果

https://github.com/user-attachments/assets/01063217-13ae-4ecd-b451-5b2e4e954afc

安装和运行

• 安装依赖

pnpm i

• 本地开发

pnpm dev

本地运行后，可以通过访问 http://localhost:2048 来查看应用。

🔑 配置 API 密钥

在运行项目之前，需要设置大语言模型的 API 密钥：

1. 执行以下命令，自动创建环境变量模板文件 .env 文件：

   cp .env.template .env
   

2. 编辑 .env 文件，填入你的 API 密钥

VITE_SPARK_KEY=你的_星火_API_Key # 需要用冒号拼接key和secret，格式如 `key123456:secret123456`
VITE_SILICONFLOW_KEY=你的_SiliconFlow_API_Key # 通常以 `sk-` 开头，如 `sk-xxxxxx`
VITE_MOONSHOT_KEY=你的_Moonshot_API_Key # 通常以 `sk-` 开头，如 `sk-xxxxxx`
VITE_DEEPSEEK_KEY=你的_DeepSeek_API_Key # 通常以 `sk-` 开头，如 `sk-xxxxxx`

🛠️ API 代理配置说明

本项目采用纯前端架构，所有后端服务均由外部或本地其他服务提供。为解决开发环境中的跨域问题，项目使用了 Vite 的代理功能 server.proxy（详见官方文档）

以下是当前仓库的代理配置

server: {
  // ...
  proxy: {
    '/spark': {
      target: 'https://spark-api-open.xf-yun.com',
      changeOrigin: true,
      ws: true,
      rewrite: (path) => path.replace(/^\/spark/, '')
    },
    '/siliconflow': {
      target: 'https://api.siliconflow.cn',
      changeOrigin: true,
      ws: true,
      rewrite: (path) => path.replace(/^\/siliconflow/, '')
    },
    '/moonshot': {
      target: 'https://api.moonshot.cn',
      changeOrigin: true,
      ws: true,
      rewrite: (path) => path.replace(/^\/moonshot/, '')
    },
    '/deepseek': {
      target: 'https://api.deepseek.com',
      changeOrigin: true,
      ws: true,
      rewrite: (path) => path.replace(/^\/deepseek/, '')
    }
  }
},
// ...

注意事项

1. 环境限制: 该代理配置仅在开发环境（development）中生效。若生产环境部署时请根据实际情况调整服务器配置

2. 路径匹配: 请求路径需要与配置的代理路径前缀匹配，例如本地访问 /spark/v1/chat/completions 会被直接代理到 https://spark-api-open.xf-yun.com/v1/chat/completions

生产环境部署

生产环境建议使用以下方案之一：

• 配置正确的 CORS 响应头
• 使用 Nginx 反向代理
• 统一域名和端口，避免跨域问题

🌍 模拟/真实 API 模式切换

本项目提供了一个模拟开发模式，用于在本地开发环境或 Github 等部署环境中模拟调用大模型相关策略，无需调用真实 API 接口。该模式在 src/config/env.ts 文件中定义，由以下代码控制：

// src/config/env.ts

/**
 * TODO: 若是 Github 演示部署环境，则仅模拟大模型相关策略，不调接口
 */
export const isGithubDeployed = process.env.VITE_ROUTER_MODE === 'hash'

默认配置

默认情况下，在开发环境，isGithubDeployed 会被设置为 false, 这意味着应用将默认使用模拟数据，但也可按照需求自行切换其他大模型 API 接口。

当部署在演示环境时，也就是本项目在线预览地址中，则使用 hash 路由模式, isGithubDeployed 会被设置为 true, 这意味着真实的大模型 API 接口将被禁用。

切换至真实 API

如果想在所有环境中使用真实的 API，你有两个选择：

1. 取消注释：将最后一行的代码注释取消，设置 isGithubDeployed = false

2. 修改逻辑：全局搜索 isGithubDeployed, 并修改相应的 if 判断逻辑，使其默认使用真实接口

请注意，无论选择哪种方式，都需要确保项目已经正确配置了 .env API 密钥

接口函数修改

请求的函数已经针对目前项目内置的所有模型的响应结果做了统一处理，在（src/store/business/index.ts）的 createAssistantWriterStylized 函数，一般情况下，不需要修改此函数，除非遇到极个别模型比较特殊的响应结果格式，需要再额外处理下。

---

🦙 接入大语言模型 API

国内在线大模型配置

1. DeepSeek 深度求索大模型：

• 官方开放平台：访问 DeepSeek 官方文档 查看使用手册
• 注册：访问 DeepSeek 开放平台控制台 进行注册登录
• 模型 & 价格：访问 模型 & 价格 查看模型价格
• Token 购买：访问 账户信息 - Top up 管理 请按需购买 API 所需 Token（一般 10 块就够了，能用好久）
• 创建 API 密钥：访问 账户信息 - API Key 管理 新建 API 密钥

• 接口说明：首次调用 API
• 在线调试：官方 Chat Completions 在线调试
• 配置到本仓库：将创建的 API 密钥填入 .env 文件中的 VITE_DEEPSEEK_KEY 环境变量
• DeepSeek 现已支持的大模型：模型 & 价格
• DeepSeek 现已支持的大模型-接口调用查看：通过接口查看

2. Spark 星火认知大模型：

• 注册：访问 星火大模型 API 进行注册并登录
• 获取 API 密钥：访问 控制台 获取 APIKey 和 APISecret

• 接口说明：spark HTTP 调用文档

• 配置到本仓库：将创建的 APIKey 和 APISecret 密钥用冒号 : 拼接填入到 .env 文件中的 VITE_SPARK_KEY 环境变量

3. SiliconFlow 大模型：

• 注册：访问 SiliconFlow 官网 进行注册登录并创建 API 密钥
• 创建 API 密钥：访问 账户管理 - API 密钥 创建新 API 密钥

• 接口说明：官方 Chat Completions 在线调试
• 配置到本仓库：将创建的 API 密钥填入 .env 文件中的 VITE_SILICONFLOW_KEY 环境变量
• SiliconFlow现已支持的大模型：模型列表

4. Kimi Moonshot 月之暗面大模型：

• 官方开放平台：访问 Moonshot 开放平台 查看使用手册
• 注册：访问 Moonshot 开放平台控制台 进行注册登录
• 创建 API 密钥：访问 账户信息 - API Key 管理 新建 API 密钥

• 接口说明：官方示例代码 Chat Completion
• 配置到本仓库：将创建的 API 密钥填入 .env 文件中的 VITE_MOONSHOT_KEY 环境变量
• Moonshot现已支持的大模型：模型列表

使用本地 Ollama 大模型

Ollama 大模型：

• 安装：Ollama3 不需要 API 密钥，只需要在本地安装并运行 Ollama 即可。请参考 Ollama 官方文档进行安装：Ollama GitHub
• Ollama现已支持的大模型：模型列表
• 运行：运行 Ollama3 服务，直接执行 ollama run <模型名称>, 如： ollama run llama3, 运行后确保其在 http://localhost:11434 运行

• 查看运行状态：执行 ollama list命令可查看当前正在运行的 Ollama 模型

---

🔌 大模型响应处理

由于不同大模型的 API 响应数据结构存在差异，本项目通过统一的模型映射机制和响应转换函数实现了多模型的无缝集成。核心逻辑封装在 详见代码 中，支持灵活扩展和定制

核心设计

1、模型映射机制

通过 modelMappingList 定义支持的模型列表，每个模型包含以下关键属性：

属性名称	类型	说明
label	string	模型展示名称（仅用于 UI 显示）
modelName	string	模型唯一标识符（用于逻辑判断）
transformStreamValue	TransformFunction	流式响应数据的转换函数，用于解析不同模型的响应结构
chatFetch	(text: string) => Promise	模型 API 请求函数，封装了请求参数和调用逻辑

2、响应转换函数

每个模型通过 transformStreamValue 函数处理流式响应数据，核心逻辑包括：

• 解析原始响应数据（Uint8Array 或 string）
• 提取有效内容字段（如 content）
• 处理特殊终止信号（如 [DONE]）

3、统一接口

通过 createAssistantWriterStylized 方法封装模型调用逻辑，不用太关心底层实现细节，只需通过 modelName 切换模型。

• 解析原始响应数据（Uint8Array 或 string）
• 提取有效内容字段（如 content）
• 处理特殊终止信号（如 [DONE]）

👉 可在 src/store/business/index.ts 中查看更多实现细节

🧠 已支持的模型

模型名称	模型标识符	需要 API Key	可否本地运行	备注
（默认类型）模拟数据模型	standard	×	✅	开发环境默认使用
Ollama (Llama 3) 大模型	ollama3	×	✅	需本地安装运行 Ollama 服务
DeepSeek-V3	deepseek-v3	✅	×	需配置 VITE_DEEPSEEK_KEY
DeepSeek-R1 (推理模型)	deepseek-deep	✅	×	需配置 VITE_DEEPSEEK_KEY
Spark 星火大模型	spark	✅	×	需配置 VITE_SPARK_KEY
SiliconFlow 硅基流动大模型	siliconflow	✅	×	需配置 VITE_SILICONFLOW_KEY
Kimi Moonshot 月之暗面大模型	moonshot	✅	×	需配置 VITE_MOONSHOT_KEY

🔬 主要实现

• modelMappingList: 定义了支持的每个大模型的 modelName, 响应结果的处理以及请求 API 函数，详见代码
  • transformStreamValue: 包含了针对各种模型的响应结果转换函数，详见代码
• MarkdownPreview 组件: 接收 model 和 transformStreamFn props 属性，根据不同模型类型处理流式响应，详见代码

本项目的 MarkdownPreview 组件接收 model props 属性是为了回显不同的 Placeholder，如果你不需要可直接删掉该 props 参数及对应的回显逻辑

📚 使用示例

在使用 MarkdownPreview 组件时，通过设置 model 和 transformStreamFn 属性来指定当前使用的大模型类型：

<MarkdownPreview
  ref="refReaderMarkdownPreview"
  v-model:reader="outputTextReader"
  :model="businessStore.currentModelItem?.modelName"
  :transform-stream-fn="businessStore.currentModelItem?.transformStreamValue"
  @failed="onFailedReader"
  @completed="onCompletedReader"
/>

其中 model 和 transformStreamFn 的值会根据用户选择的下拉框选项自动映射到对应的模型，并实时由全局 pinia src/store/business/index.ts 状态管理来管控：

export const useBusinessStore = defineStore('business-store', {
  state: (): BusinessState => {
    return {
      systemModelName: defaultModelName
    }
  },
  getters: {
    currentModelItem (state) {
      return modelMappingList.find(v => v.modelName === state.systemModelName)
    }
  },
  actions: {
    // ...
  }
})

在模拟开发环境下，默认使用 standard 模型，同时也可以自定义修改为指定模型（尝试基于本项目二次开发的话，可以重点看下这个文件 models/index.ts），具体的模型类型可以根据需求进行自己二次配置:

/**
 * Mock 模拟模型的 name
 */
export const defaultMockModelName = 'standard'

/**
 * 项目默认使用模型，按需修改此字段即可
 */

// export const defaultModelName = 'spark'
export const defaultModelName = defaultMockModelName

💡 提示

currentModelItem 计算属性会根据模型映射自动选择对应的模型，也可以手动指定模型

如果后端返回的是可直接渲染的纯字符串（而非 JSON），standard 模型将适用于所有这种情况

🌹 支持

如果你喜欢这个项目或发现有用，可以点右上角 Star 支持一下，你的支持是我们不断改进的动力，感谢！ ^_^

🌟 相关项目

以下是一些开发者和团队正在使用、参考或受本项目启发的项目：

项目名	简介
大模型数据助手	一个轻量级的开源大模型应用项目，支持多模型适配、数据问答和 RAG 检索，旨在简化大模型应用开发。

📢 社区贡献

💡 如果您的项目也在使用或借鉴了本项目，我们诚挚欢迎您：

• 通过提交 Issue 分享您的项目链接
• 提交 Pull Request (PR) 将您的项目添加到列表中

🚨 免责声明

本模板作为 AI 对话原型技术参考方案，使用者需知悉以下风险及义务：

• 技术风险：依赖框架（Vue3/Vite/Naive UI等）存在版本迭代风险，第三方组件（MarkdownIt/Mermaid/KaTex等）以原始仓库规范为准，API 服务商条款变更可能导致功能异常
• 技术局限性：当前实现方案存在功能边界（如对话模式限制），技术选型需根据实际场景评估
• 使用限制：禁止用于违反大模型服务条款或数据隐私法规的场景，使用者需自行完成 API 密钥安全管理
• 责任免除：不承诺大模型输出准确性及业务场景适配性，因使用/二次开发导致的后果由使用者自行承担

使用本 AI 模板即视为已阅读并同意上述条款，且自愿承担所有技术及法律风险

License

MIT License | Copyright © 2020-PRESENT Wisdom

chatgpt-vue3-light-mvp 快速上手指南

chatgpt-vue3-light-mvp 是一个基于 Vue3、Vite 6、TypeScript 和 Naive UI 构建的轻量级 AI 对话 Web 端原型模板。它支持单轮问答、流式输出（打字机效果），并内置了 Markdown、代码高亮、数学公式及 Mermaid 图表渲染能力，适合快速搭建大语言模型应用原型。

注意：本项目为 MVP（最小可行产品），默认仅支持单轮对话模式（每次提问独立响应，不保留上下文）。

1. 环境准备

在开始之前，请确保您的开发环境满足以下要求：

• Node.js: >= 22.12.x
• 包管理器: pnpm 10.x (推荐)
• 编辑器: VS Code (建议安装 dbaeumer.vscode-eslint 插件，版本 >= v3.0.5 pre-release)
• 操作系统: Windows / macOS / Linux

💡 国内加速建议：如果 npm/pnpm 下载依赖较慢，可配置国内镜像源：

pnpm config set registry https://registry.npmmirror.com

2. 安装步骤

克隆项目

首先将代码克隆到本地：

git clone https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git
cd chatgpt-vue3-light-mvp

安装依赖

使用 pnpm 安装项目所需依赖：

pnpm i

配置环境变量

项目需要配置 API 密钥才能连接真实的大模型服务（如 DeepSeek、Kimi、Spark 等）。

1. 复制环境变量模板文件：

   cp .env.template .env
   

2. 编辑 .env 文件，填入您申请的 API Key：

   # 示例：填入对应的 API Key
   VITE_SPARK_KEY=你的_星火_API_Key # 格式：key:secret
   VITE_SILICONFLOW_KEY=你的_SiliconFlow_API_Key # 格式：sk-xxxxxx
   VITE_MOONSHOT_KEY=你的_Moonshot_API_Key # 格式：sk-xxxxxx
   VITE_DEEPSEEK_KEY=你的_DeepSeek_API_Key # 格式：sk-xxxxxx
   

   如果不填写 Key，项目默认会使用“模拟数据模式”运行，无需后端即可体验界面交互。

3. 基本使用

启动开发服务器

运行以下命令启动本地开发环境：

pnpm dev

启动成功后，终端会显示访问地址，通常为： http://localhost:2048

在浏览器中打开该地址，即可看到聊天界面。

切换大模型

在界面右上角或设置区域（视具体 UI 布局而定），您可以选择不同的模型提供商：

• Standard (模拟): 默认选项，返回预设的模拟回复，用于调试 UI。
• Ollama: 需在本地运行 Ollama 服务 (ollama run llama3)，无需 API Key。
• DeepSeek / Moonshot / Spark 等: 选择对应模型后，输入内容即可调用真实 API 获得回复。

功能体验

• 发送消息：在输入框输入问题并发送，观察流式打字机效果。
• 代码与公式：尝试让 AI 生成代码块或 LaTeX 数学公式，查看高亮和渲染效果。
• 图表绘制：输入“画一个流程图”，测试 Mermaid 图表渲染功能。

生产环境构建

完成开发和测试后，可构建静态资源进行部署：

pnpm build

构建产物将生成在 dist 目录，可直接部署至 Nginx、Netlify 或 Vercel 等平台。

提示：生产环境部署时，请注意跨域问题。建议在服务器端配置 Nginx 反向代理或正确设置 CORS 响应头，而非直接使用开发环境的 Vite Proxy 配置。