pdsuwwz/chatgpt-vue3-light-mvp

What it solves

This project provides a lightweight, customizable web-based prototype template for building Chat Bot interfaces. It eliminates the need to build a chat UI from scratch by offering a ready-made frontend that integrates with various Large Language Model (LLM) APIs, supporting essential features like streaming output and rich text rendering.

How it works

Built with Vue 3, Vite 8, and TypeScript, the project uses a modular design to handle AI interactions. It employs a model mapping mechanism that abstracts the different response formats of various LLM providers (such as DeepSeek, Spark, and Moonshot) into a unified interface.

Key technical implementations include:

• Streaming Pipeline: Uses fetch(Response.body) and TextDecoderStream to handle Server-Sent Events (SSE) for real-time responses.
• Typewriter Effect: Decouples network reading speed from UI rendering speed using a buffer to create a smooth typing animation.
• Rich Text Rendering: Integrates markdown-it, highlight.js, KaTeX for math formulas, and Mermaid for diagrams.
• Mock Mode: Includes a local simulation mode for development without requiring active API keys.

Who it’s for

• Frontend Developers: Those looking to quickly prototype AI chat applications without spending time on the UI/UX of the chat window.
• AI Product Managers: Users who need a functional MVP (Minimum Viable Product) to demonstrate AI capabilities.
• Developers integrating LLMs: Those who want a reference architecture for handling streaming responses and multi-model adaptation in a Vue 3 environment.

Highlights

• Multi-Model Support: Out-of-the-box compatibility with DeepSeek (V3/R1), Spark, Moonshot, SiliconFlow, and local Ollama instances.
• Advanced Rendering: Support for Markdown, code syntax highlighting, LaTeX math formulas, and Mermaid flowcharts/sequence diagrams.
• );
• Agent Skill Distillation: Provides the project's engineering experience as a set of "Skills" (blueprints) that AI coding agents can read and reuse in other projects.
• Developer-Friendly Stack: Uses Naive UI, Pinia, and UnoCSS for rapid styling and state management.