<\/p>\n
With the rapid development of large AI models, building a practical chat application with advanced features has become a hot topic. This article shares the complete process of building a modern AI chat app from scratch, integrating RAG (Retrieval-Augmented Generation)<\/strong>, multi-turn conversation management<\/strong>, and local vector storage<\/strong>.<\/p>\n <\/p>\n Live Demo<\/strong>: https:\/\/chat.erishen.cn<\/a><\/p>\n <\/p>\n <\/p>\n – Streaming responses<\/strong>: Real-time streaming via Vercel AI SDK<\/p>\n – Multi-turn dialogue<\/strong>: Complete conversation history and context retention<\/p>\n – Auto-titling<\/strong>: AI-generated conversation titles based on content<\/p>\n – Persistence<\/strong>: Conversation history survives page refreshes<\/p>\n <\/p>\n – Document upload<\/strong>: Supports TXT, MD formats<\/p>\n – Smart chunking<\/strong>: Auto-splits long documents into semantic chunks<\/p>\n – Client-side vectorization<\/strong>: Using @xenova\/transformers for local embedding generation<\/p>\n – Semantic search<\/strong>: Cosine similarity-based intelligent document retrieval<\/p>\n – Context enhancement<\/strong>: Combines retrieved documents for more accurate responses<\/p>\n <\/p>\n – Responsive design<\/strong>: Adapts perfectly to desktop and mobile<\/p>\n – Theme switching<\/strong>: Light\/dark\/system themes<\/p>\n – Component architecture<\/strong>: Tailwind CSS-based design system<\/p>\n – Fluid animations<\/strong>: Polished interaction experience<\/p>\n <\/p>\n <\/p>\n Next.js 15 + React 19 + TypeScript, Tailwind CSS 4, Vercel AI SDK<\/p>\n <\/p>\n – Client side<\/strong>: Document processing + vectorization + local storage<\/p>\n – Server side<\/strong>: Semantic search + context generation<\/p>\n <\/p>\n @xenova\/transformers (client ML), localStorage (vector DB), cosine similarity, React Hooks<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n – Client-side vectorization<\/strong>: Reduces server load, Web Workers prevent UI thread blocking, local cache avoids recomputation<\/p>\n – Smart chunking<\/strong>: 500 chars per chunk, 50 char overlap, preserves document structure<\/p>\n – Memory management<\/strong>: Lazy loading, LRU cache, proactive garbage collection<\/p>\n <\/p>\n <\/p>\n – Page refresh data loss<\/strong>: Auto-save messages to localStorage on every change via useEffect<\/p>\n – Vector similarity precision<\/strong>: Normalized embeddings, dynamic thresholds, multi-tier ranking<\/p>\n – Large document performance<\/strong>: Web Workers for async processing, prevents blocking<\/p>\n <\/p>\n – First load<\/strong>: < 2s<\/p>\n – Response time<\/strong>: < 500ms<\/p>\n – Document processing<\/strong>: < 3s for 1MB docs<\/p>\n – Search latency<\/strong>: < 100ms<\/p>\n <\/p>\n <\/p>\n Building this project gave me deep understanding of the complete AI application development pipeline \u2014 from UI\/UX design to RAG system implementation, performance optimization to user experience. The RAG system implementation deepened my understanding of vector databases, semantic search, and context generation.<\/p>\n <\/p>\n Links<\/strong>: GitHub<\/a> | Live Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" With the rapid development of large AI models, building […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"english_url":"","chinese_url":"https:\/\/erishen.cn\/?p=127","footnotes":""},"class_list":["post-239","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/pages\/239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erishen.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=239"}],"version-history":[{"count":3,"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/pages\/239\/revisions"}],"predecessor-version":[{"id":255,"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/pages\/239\/revisions\/255"}],"wp:attachment":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Core Features<\/h2>\n
Intelligent Conversation<\/h3>\n
RAG Document Retrieval<\/h3>\n
Modern UI\/UX<\/h3>\n
Technical Architecture<\/h2>\n
Frontend Stack<\/h3>\n
RAG Architecture (Hybrid)<\/h3>\n
Core Libraries<\/h3>\n
Key Implementations<\/h2>\n
Multi-Turn Conversation Management<\/h3>\n
\nexport function useMultiTurnChat() {\n const [currentConversationId, setCurrentConversationId] = useState<string | null>(null)\n const [conversations, setConversations] = useState<Conversation[]>([])\n\n useEffect(() => {\n if (!currentConversationId || messages.length === 0) return\n conversationManager.updateConversation(currentConversationId, {\n messages: messages.map(msg => ({\n id: msg.id,\n role: msg.role as 'user' | 'assistant',\n content: msg.content,\n timestamp: new Date(),\n }))\n })\n }, [messages, currentConversationId])\n\n return { messages, conversations, createNewConversation, switchConversation, deleteConversation }\n}\n<\/code><\/pre>\nRAG Document Processing Pipeline<\/h3>\n
\nclass DocumentProcessor {\n async processDocument(file: File): Promise<ProcessedDocument> {\n const content = await this.readFileContent(file)\n const chunks = await this.chunkText(content, { chunkSize: 500, chunkOverlap: 50 })\n const embeddings = await this.generateEmbeddings(chunks)\n await vectorStore.addDocument({\n id: generateId(), title: file.name, content,\n chunks: chunks.map((chunk, index) => ({\n id: generateId(), content: chunk, embedding: embeddings[index]\n }))\n })\n return processedDocument\n }\n}\n<\/code><\/pre>\nSemantic Search with Cosine Similarity<\/h3>\n
\nclass LocalStorageVectorStore {\n async search(queryEmbedding: number[], topK: number): Promise<SearchResult[]> {\n const allChunks = this.getAllChunks()\n const similarities = allChunks.map(chunk => ({\n ...chunk,\n similarity: this.cosineSimilarity(queryEmbedding, chunk.embedding)\n }))\n return similarities\n .sort((a, b) => b.similarity - a.similarity)\n .slice(0, topK)\n .filter(result => result.similarity > 0.5)\n }\n\n private cosineSimilarity(a: number[], b: number[]): number {\n const dotProduct = a.reduce((sum, val, i) => sum + val * b[i], 0)\n const magnitudeA = Math.sqrt(a.reduce((sum, val) => sum + val * val, 0))\n const magnitudeB = Math.sqrt(b.reduce((sum, val) => sum + val * val, 0))\n return dotProduct \/ (magnitudeA * magnitudeB)\n }\n}\n<\/code><\/pre>\nPerformance Optimizations<\/h2>\n
Problems Solved<\/h2>\n
Performance Metrics<\/h2>\n
Key Takeaways<\/h2>\n