pdsuwwz/chatgpt-vue3-light-mvp

解决的问题

本项目提供一个轻量、可定制的基于 Web 的原型模板，用于构建聊天机器人界面。它无需从零开始构建聊天 UI，而是提供一个可直接使用的前端，支持与多种大语言模型（LLM）API 集成，具备流式输出和富文本渲染等核心功能。

如何工作

该项目基于 Vue 3、Vite 8 和 TypeScript 构建，采用模块化设计来处理 AI 交互。它使用模型映射机制，将 DeepSeek、Spark、Moonshot 等不同 LLM 提供商的响应格式抽象为统一接口。

关键技术实现包括：

• 流式处理管道：使用 fetch(Response.body) 和 TextDecoderStream 处理 Server-Sent Events (SSE)，实现实时响应。
• 打字机效果：通过缓冲区将网络读取速度与 UI 渲染速度解耦，实现平滑的打字动画。
• 富文本渲染：集成 markdown-it、highlight.js、KaTeX（数学公式）和 Mermaid（图表）。
• 模拟模式：包含本地模拟模式，开发时无需使用活跃的 API 密钥。

适用人群

• 前端开发者：希望快速原型化 AI 聊天应用，而无需花费时间在聊天窗口的 UI/UX 上。
• AI 产品经理：需要一个功能完整的 MVP（最小可行产品）来展示 AI 能力。
• LLM 集成开发者：希望在 Vue 3 环境中获得处理流式响应和多模型适配的参考架构。

亮点

• 多模型支持：开箱即用支持 DeepSeek（V3/R1）、Spark、Moonshot、SiliconFlow 以及本地 Ollama 实例。
• 高级渲染：支持 Markdown、代码语法高亮、LaTeX 数学公式和 Mermaid 流程图/序列图。
• 代理技能提炼：将项目工程经验提炼为一组「技能」（蓝图），供 AI 编码代理在其他项目中读取和复用。
• 开发者友好栈：使用 Naive UI、Pinia 和 UnoCSS 实现快速样式和状态管理。