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 實現快速樣式與狀態管理。