pdsuwwz/chatgpt-vue3-light-mvp

何を解決するか

このプロジェクトは、チャットボットインターフェースを構築するための軽量でカスタマイズ可能なウェブベースのプロトタイプテンプレートを提供します。チャット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キーが不要な開発用のローカルシミュレーションモードを備えています。

対象ユーザー

• フロントエンド開発者：チャットウィンドウのUI/UXに時間をかけずに、AIチャットアプリを迅速にプロトタイピングしたい人。
• AIプロダクトマネージャー：AIの機能を示すための機能的なMVP（最小限の実用製品）が必要な人。
• LLM統合開発者：Vue 3環境でストリーミング応答とマルチモデル対応を扱うための参考アーキテクチャを求める人。

特徴

• マルチモデル対応：DeepSeek（V3/R1）、Spark、Moonshot、SiliconFlow、およびローカルのOllamaインスタンスとの即時互換性。
• 高度なレンダリング：Markdown、コード構文強調、LaTeX数式、Mermaidフローチャート/シーケンス図のサポート。
• エージェントスキルの抽出：プロジェクトのエンジニアリング経験を「スキル（ブループリント）」として提供し、AIコーディングエージェントが他のプロジェクトで読み取り・再利用できるようにしています。
• 開発者向けスタック：ナイスUI、Pinia、UnoCSSを採用し、迅速なスタイル設定と状態管理を実現しています。