pdsuwwz/chatgpt-vue3-light-mvp

해결하는 문제

이 프로젝트는 AI 챗봇 인터페이스를 구축하기 위한 가벼우면서도 사용자 정의 가능한 웹 기반 프로토타입 템플릿을 제공합니다. 챗 UI를 처음부터 구축할 필요 없이, 다양한 대규모 언어 모델(LLM) API와 통합된 완성된 프론트엔드를 제공함으로써 스트리밍 출력과 리치 텍스트 렌더링과 같은 핵심 기능을 지원합니다.

작동 방식

Vue 3, Vite 8, TypeScript로 구축된 이 프로젝트는 모듈식 설계를 통해 AI 상호작용을 처리합니다. DeepSeek, Spark, Moonshot 등의 다양한 LLM 제공업체의 서로 다른 응답 형식을 통일된 인터페이스로 추상화하는 모델 매핑 메커니즘을 사용합니다.

주요 기술 구현 사항은 다음과 같습니다:

• 스트리밍 파이프라인: 실시간 응답을 위해 Server-Sent Events(SSE)를 처리하기 위해 fetch(Response.body)와 TextDecoderStream을 사용합니다.
• 타이핑 효과: 버퍼를 사용해 네트워크 읽기 속도와 UI 렌더링 속도를 분리하여 부드러운 타이핑 애니메이션을 구현합니다.
• 리치 텍스트 렌더링: markdown-it, highlight.js, KaTeX를 통한 수식, Mermaid를 통한 다이어그램을 통합합니다.
• 모크 모드: 활성 API 키 없이 개발을 위한 로컬 시뮬레이션 모드를 포함합니다.

대상 사용자

• 프론트엔드 개발자: 챗 윈도우의 UI/UX에 시간을 들이지 않고 AI 챗 애플리케이션을 빠르게 프로토타이핑하고 싶은 사람.
• AI 제품 매니저: AI 기능을 보여주기 위한 기능적인 MVP(Minimum Viable Product)가 필요한 사람.
• LLM 통합 개발자: Vue 3 환경에서 스트리밍 응답과 다중 모델 적응을 다루는 참조 아키텍처가 필요한 사람.

주요 특징

• 다중 모델 지원: DeepSeek(V3/R1), Spark, Moonshot, SiliconFlow, 그리고 로컬 Ollama 인스턴스와의 즉시 호환성.
• 고급 렌더링: Markdown, 코드 구문 강조, LaTeX 수식, Mermaid 흐름도/시퀀스 다이어그램 지원.
• 에이전트 기술 정제: 프로젝트의 엔지니어링 경험을 "기술(블루프린트)" 형태로 제공하여 AI 코딩 에이전트가 다른 프로젝트에서 읽고 재사용할 수 있도록 합니다.
• 개발자 친화적 스택: 빠른 스타일링과 상태 관리를 위해 Naive UI, Pinia, UnoCSS를 사용합니다.