피드로 돌아가기
Dev.toAI/ML
원문 읽기
LangServe와 SSE를 활용한 실시간 RAG 챗봇의 End-to-End 아키텍처 구현
Chat With Your PDFs PART 2: Frontend - An End-to-End LangChain Tutorial
AI 요약
Context
단순한 LLM 응답을 넘어 PDF 문서 기반의 근거 제시가 필요한 RAG 시스템 구축 필요성 대두. 기존 String 기반 응답 구조로는 출처 데이터와 생성 텍스트를 분리하여 프런트엔드에 전달하는 데 한계 존재.
Technical Solution
- LCEL Chain 수정을 통한 String 응답 구조에서 JSON 포맷으로의 전환 및 출처 데이터 포함 설계
- Server Sent Events(SSE) 도입을 통한 LLM 생성 텍스트의 실시간 Stream 렌더링 구현
- React와 TypeScript 기반의 타입 안정성 확보 및 TailwindCSS를 활용한 반응형 UI 구성
- LangServe 서버를 통한 정적 PDF 문서 서빙 구조 구축으로 출처 문서의 즉각적인 접근성 제공
- CORS 설정 최적화를 통한 프런트엔드와 백엔드 간의 보안 통신 경로 확보
- PGVector 기반의 Vector Database 연동을 통한 효율적인 Semantic Search 체계 마련
실천 포인트
- RAG 시스템 설계 시 LLM 응답과 Source Metadata를 분리하여 JSON으로 전송하는 구조 검토 - 사용자 경험 향상을 위해 SSE를 활용한 실시간 토큰 스트리밍 인터페이스 적용 - 정적 파일 서빙 경로를 백엔드 서버와 통합하여 문서 참조의 무결성 확보 - LangServe의 Playground를 활용한 LCEL Chain의 사전 검증 프로세스 구축