chatgpt-vue3-light-mvp：一个 Vue 3 单轮 AI 对话 MVP 原型模板

chatgpt-vue3-light-mvp 暗色主题界面

图1：项目暗色主题界面截图

场景切入：为什么需要这个模板？

想象你是某传统企业的技术负责人，最近老板说"我们要做一个 AI 客服/对话机器人"。团队里有前端、有后端，但没有人知道怎么做 LLM 产品。怎么在一天之内拿出一个可以演示的 Demo，向老板证明这条路走得通？

直接调用 OpenAI API 做 Demo？调试时间长，还要处理流式输出、Markdown 渲染、think 标签等细节。购买商业解决方案？人家的代码你改不动，遇到问题只能等客服。

chatgpt-vue3-light-mvp 正是为这个场景而生——一个拿来就能用的 Vue 3 对话 Web 端最小可行产品（MVP）原型，一键跑起来，换个 API Key 就是你们的产品。

项目背景与作者故事

本项目由开发者 Wisdom（GitHub: pdsuwwz）创建维护，是一个中文技术社区（类似"理想乡"）背景下的开源实践。项目的定位非常明确：给需要快速搭建 AI 对话类产品的开发者一个起点，而不是追求功能最全的终极解决方案。

项目采用 MIT 许可证，完全开源，允许商业二次开发。作者在 README 中坦承：本项目仅支持单轮对话（每次提问独立响应，不保留上下文），这是一个有意为之的设计决策，目的是保持 MVP 的轻量与简单。多轮对话能力已在 Roadmap 中标注为未来方向，但暂无具体时间表。

核心功能：单轮对话能做到什么程度？

模型支持：覆盖主流中英文 LLM

项目内置了 7 种大模型适配器，覆盖了从免费本地运行到商业 API 的完整谱系：

模型	类型	运行方式	备注
模拟数据模型（standard）	Mock	本地	开发环境默认，无需任何配置
Ollama Llama 3	本地	localhost:11434	需本地安装 Ollama
DeepSeek-V3	云端 API	需 VITE_DEEPSEEK_KEY	性价比最高的商业选项
DeepSeek-R1	云端推理模型	需 VITE_DEEPSEEK_KEY	深度思考推理能力
Spark 星火 4.0Ultra	云端 API	需 VITE_SPARK_KEY	科大讯飞认知大模型
SiliconFlow（GLM-4-9B）	云端 API	需 VITE_SILICONFLOW_KEY	部分模型可免费使用
Kimi Moonshot V1	云端 API	需 VITE_MOONSHOT_KEY	月之暗面中文优化模型

这种设计体现了项目作者对开发者实际需求的理解：不是所有人都愿意为 AI 对话付费，Ollama 方案让完全本地化的免费使用成为可能；而 DeepSeek 和 SiliconFlow 的接入，则照顾了需要高质量商业模型的用户。

流式输出（SSE）与打字机效果

项目支持 Server-Sent Events（SSE）流式输出，AI 的回复以打字机效果逐字显示，而非等待完整响应。这个功能通过 Vue 3 的 ReadableStream + TextDecoderStream 管道实现，是现代浏览器原生支持的 API，无需额外依赖。

关键代码位于 src/store/business/index.ts 的 createAssistantWriterStylized 方法中：

const reader = res.body
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(TransformUtils.splitStream('\n'))
  .getReader()

这段代码展示了项目对现代 Web API 的熟练运用——没有引入任何 polyfill，直接使用浏览器原生的 Streams API，既保证了性能，又控制了包体积。

DeepSeek-R1 深度思考推理渲染

项目对 DeepSeek-R1 推理模型 做了专门适配。R1 模型的响应包含 reasoning_content（思考过程）和 content（最终答案）两个字段，项目通过 transformStreamThinkData 函数将推理过程单独提取并渲染。

对于普通模型，推理内容会被折叠或特殊样式处理，用户看到的是干净的最终答案；对于 R1 模型，用户可以选择展开查看 AI 的完整思考链。这种设计让同一个 UI 框架兼容了两种截然不同的模型输出范式。

Markdown 全功能渲染

项目集成了一套完整的 Markdown 渲染方案：

代码高亮：通过 highlight.js 支持 100+ 种语言的语法高亮
数学公式：集成 KaTeX 渲染 LaTeX 数学公式
Mermaid 图表：支持流程图、时序图、甘特图等 Mermaid 语法
自定义样式：通过 markdown.scss 提供一致的视觉风格

这意味着 AI 返回的 Markdown 内容——代码块、数学公式、图表——都能在浏览器中完美渲染，不需要用户复制粘贴到其他地方查看。

环境变量管理

项目通过 .env 文件管理所有 API Key，支持按需配置不同模型：

VITE_DEEPSEEK_KEY=sk-xxxxx
VITE_SPARK_KEY=xxxxx
VITE_SILICONFLOW_KEY=xxxxx
VITE_MOONSHOT_KEY=xxxxx

这种设计既保证了安全性（Key 不硬编码在源码中），又提供了灵活性（可以同时配置多个模型，按需切换）。

技术架构：Vue 3 生态的最佳实践

整体架构

项目采用标准的 Vue 3 单页应用（SPA）架构，技术选型代表了 2024-2025 年 Vue 生态的主流方向：

Vue 3 (Composition API + <script setup>) + Vite 8 + TypeScript
  ├─ 状态管理：Pinia v3
  ├─ UI 框架：Naive UI 2.x
  ├─ 样式方案：UnoCSS（原子化 CSS）+ SCSS
  ├─ 图标方案：Iconify（按需加载）
  ├─ 自动导入：Unplugin Auto Import
  ├─ HTTP 库：Axios
  └─ 路由：Vue Router 5

模块化设计

项目结构遵循清晰的功能划分：

src/components/ — 可复用 UI 组件（MarkdownPreview、Layout、Navigation 等）
src/store/business/ — 业务状态管理（AI 模型调用逻辑）
src/components/MarkdownPreview/ — Markdown 渲染核心（含插件系统）
src/components/MarkdownPreview/models/ — 模型适配器注册表
src/views/chat.vue — 主对话页面

模型适配器注册表是整个架构的核心。每个模型在 modelMappingList 中注册一个对象，包含 modelName（标识符）、chatFetch（API 调用函数）和 transformStreamValue（流式响应解析器）。新增一个模型只需在这个列表中添加一个条目，无需修改核心逻辑。

AI 框架定位

本项目是一个前端集成层，不涉及模型训练或部署。它通过 HTTP API 与各大 LLM 服务商通信，扮演的是"AI 应用层"的角色。项目作者没有重复造模型训练的轮子，而是专注于解决 AI 应用落地的最后一公里问题——如何优雅地接收、流式显示、渲染 AI 的响应。

部署体验：10 分钟跑起来

前置要求

项目对运行环境有明确要求，体现了对现代工具链的追求：

Node.js >= 22.12.x — 需要 ES Module 和新版本 V8 引擎支持
pnpm >= 10.x — 更高效的包管理器
VS Code 插件 dbaeumer.vscode-eslint — 代码质量保障

启动流程

# 克隆代码
git clone https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git

# 安装依赖
pnpm install

# 配置环境变量
cp .env.template .env
# 编辑 .env，填入你的 API Key

# 启动开发服务器
pnpm dev

打开 http://localhost:5173 即可看到对话界面。从克隆到运行，理论上不超过 10 分钟。

GitHub Pages 部署

项目内置了 build:gh-pages 脚本，支持一键构建 GitHub Pages 静态站点。当前 Demo 部署在 https://pdsuwwz.github.io/chatgpt-vue3-light-mvp，可直接体验（但在线演示环境禁用了模型切换，需拉取代码本地运行）。

局限性与适用边界

核心局限：单轮对话

项目名字里的 "MVP" 不是谦虚，而是定位宣言。单轮对话意味着每次提问都是独立的，AI 不会记住之前的对话历史。这对于客服机器人、固定问答、文档检索等场景是完美的；但对于多轮对话、角色扮演、复杂推理链等场景，则需要扩展上下文管理逻辑。

非通用局限

API Key 暴露风险：项目前端直接持有 API Key，如果部署在公开域名上，需要额外增加后端代理层，避免 Key 泄露。本地开发模式（Ollama）和 GitHub Pages 演示模式都很好地缓解了这个问题。
Ollama 模型受限：Ollama 方案要求用户有一定的本地部署能力，对非技术用户有一定门槛。
不支持长对话：如果 AI 回复过长，项目没有做分页或懒加载，长回复可能导致页面卡顿。

行业意义：Vue 生态的 AI 应用样板

本项目代表了 2025 年 AI 应用开发的一个趋势：轻量级 AI 集成中间件的兴起。开发者不需要学习 LangChain、AutoGen 等重型框架，只需要一个简单的 API 调用封装，就能快速验证 AI 产品的可行性。

对于 Vue 生态而言，这是一个高质量的参考实现——代码结构清晰、TypeScript 严格、开发体验现代。无论是想要学习 Vue 3 Composition API 的初学者，还是需要快速搭建 AI Demo 的产品经理，都能从这个项目中获益。

总结

chatgpt-vue3-light-mvp 是一个定位精准、技术扎实、体验良好的 Vue 3 AI 对话 MVP 模板。它的价值不在于功能最全，而在于足够简单、足够快、足够好改。如果你需要在一个下午拿出一个能演示的 AI 对话 Demo，它可能是你最好的起点。

chatgpt-vue3-light-mvp：一个 Vue 3 单轮 AI 对话 MVP 原型模板

chatgpt-vue3-light-mvp 暗色主题界面

图1：项目暗色主题界面截图

场景切入：为什么需要这个模板？

chatgpt-vue3-light-mvp 正是为这个场景而生——一个拿来就能用的 Vue 3 对话 Web 端最小可行产品（MVP）原型，一键跑起来，换个 API Key 就是你们的产品。

项目背景与作者故事

核心功能：单轮对话能做到什么程度？

模型支持：覆盖主流中英文 LLM

项目内置了 7 种大模型适配器，覆盖了从免费本地运行到商业 API 的完整谱系：

模型	类型	运行方式	备注
模拟数据模型（standard）	Mock	本地	开发环境默认，无需任何配置
Ollama Llama 3	本地	localhost:11434	需本地安装 Ollama
DeepSeek-V3	云端 API	需 VITE_DEEPSEEK_KEY	性价比最高的商业选项
DeepSeek-R1	云端推理模型	需 VITE_DEEPSEEK_KEY	深度思考推理能力
Spark 星火 4.0Ultra	云端 API	需 VITE_SPARK_KEY	科大讯飞认知大模型
SiliconFlow（GLM-4-9B）	云端 API	需 VITE_SILICONFLOW_KEY	部分模型可免费使用
Kimi Moonshot V1	云端 API	需 VITE_MOONSHOT_KEY	月之暗面中文优化模型

流式输出（SSE）与打字机效果

关键代码位于 src/store/business/index.ts 的 createAssistantWriterStylized 方法中：

const reader = res.body
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(TransformUtils.splitStream('\n'))
  .getReader()

这段代码展示了项目对现代 Web API 的熟练运用——没有引入任何 polyfill，直接使用浏览器原生的 Streams API，既保证了性能，又控制了包体积。

DeepSeek-R1 深度思考推理渲染

Markdown 全功能渲染

项目集成了一套完整的 Markdown 渲染方案：

代码高亮：通过 highlight.js 支持 100+ 种语言的语法高亮
数学公式：集成 KaTeX 渲染 LaTeX 数学公式
Mermaid 图表：支持流程图、时序图、甘特图等 Mermaid 语法
自定义样式：通过 markdown.scss 提供一致的视觉风格

这意味着 AI 返回的 Markdown 内容——代码块、数学公式、图表——都能在浏览器中完美渲染，不需要用户复制粘贴到其他地方查看。

环境变量管理

项目通过 .env 文件管理所有 API Key，支持按需配置不同模型：

VITE_DEEPSEEK_KEY=sk-xxxxx
VITE_SPARK_KEY=xxxxx
VITE_SILICONFLOW_KEY=xxxxx
VITE_MOONSHOT_KEY=xxxxx

这种设计既保证了安全性（Key 不硬编码在源码中），又提供了灵活性（可以同时配置多个模型，按需切换）。

技术架构：Vue 3 生态的最佳实践

整体架构

项目采用标准的 Vue 3 单页应用（SPA）架构，技术选型代表了 2024-2025 年 Vue 生态的主流方向：

Vue 3 (Composition API + <script setup>) + Vite 8 + TypeScript
  ├─ 状态管理：Pinia v3
  ├─ UI 框架：Naive UI 2.x
  ├─ 样式方案：UnoCSS（原子化 CSS）+ SCSS
  ├─ 图标方案：Iconify（按需加载）
  ├─ 自动导入：Unplugin Auto Import
  ├─ HTTP 库：Axios
  └─ 路由：Vue Router 5

模块化设计

项目结构遵循清晰的功能划分：

src/components/ — 可复用 UI 组件（MarkdownPreview、Layout、Navigation 等）
src/store/business/ — 业务状态管理（AI 模型调用逻辑）
src/components/MarkdownPreview/ — Markdown 渲染核心（含插件系统）
src/components/MarkdownPreview/models/ — 模型适配器注册表
src/views/chat.vue — 主对话页面

AI 框架定位

部署体验：10 分钟跑起来

前置要求

项目对运行环境有明确要求，体现了对现代工具链的追求：

Node.js >= 22.12.x — 需要 ES Module 和新版本 V8 引擎支持
pnpm >= 10.x — 更高效的包管理器
VS Code 插件 dbaeumer.vscode-eslint — 代码质量保障

启动流程

# 克隆代码
git clone https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git

# 安装依赖
pnpm install

# 配置环境变量
cp .env.template .env
# 编辑 .env，填入你的 API Key

# 启动开发服务器
pnpm dev

打开 http://localhost:5173 即可看到对话界面。从克隆到运行，理论上不超过 10 分钟。

GitHub Pages 部署

局限性与适用边界

核心局限：单轮对话

非通用局限

API Key 暴露风险：项目前端直接持有 API Key，如果部署在公开域名上，需要额外增加后端代理层，避免 Key 泄露。本地开发模式（Ollama）和 GitHub Pages 演示模式都很好地缓解了这个问题。
Ollama 模型受限：Ollama 方案要求用户有一定的本地部署能力，对非技术用户有一定门槛。
不支持长对话：如果 AI 回复过长，项目没有做分页或懒加载，长回复可能导致页面卡顿。