Build and Deploy a B2B SaaS AI Support Platform | Next.js 15, React, Convex, Turborepo, Vapi, AWS
- 이 튜토리얼에서는 Next.js 15, React, Convex, Turborepo, Vapi, AWS를 사용하여 B2B SaaS AI 지원 플랫폼을 구축하고 배포하는 방법을 다룹니다. 🚀
- Echo라는 프로덕션급 AI 지원 플랫폼을 구축하며, Convex, Vappy, Clerk, AWS 등을 활용하고 Gemini, OpenAI, Anthropic, Gro와 같은 다양한 LLM 제공업체를 지원합니다. 🤖
- Turborepo를 사용하여 운영자 대시보드, 채팅 위젯, 개발자 툴킷의 세 가지 앱으로 구성됩니다. 🛠️
- Sentry를 사용하여 풀 스택 오류 추적, 실시간 알림, 세션 재생 및 프론트엔드와 백엔드 모두에 대한 가시성을 확보합니다. 🚨
- Convex RAG(검색 증강 생성) 컴포넌트를 사용하여 임베딩을 생성하는 방법을 학습합니다. 🔍
- 대화가 해결되지 않은 상태에서 운영자가 메시지를 보내면 AI가 자동으로 중단되도록 상태를 'escalated'로 변경합니다. 🚦
- 파일 업로드 기능을 구현하고, 파일 이름, MIME 유형, 바이트를 인수로 받아 파일을 추가하는 액션을 생성합니다. 📤
- 파일의 MIME 유형을 추측하는 함수를 만들고, Convex Dev RAG 컴포넌트를 설치하고 구성합니다. 🧐
- Convex 내장 파일 스토리지를 사용하여 업로드된 파일을 저장하고, 저장된 파일의 스토리지 ID를 얻습니다. 🗄️
- 업로드된 파일에서 텍스트 콘텐츠를 추출하는 방법을 배우고, 이를 위해
extract text content 함수를 구현합니다. ✍️
- 이미지, PDF, HTML 파일 등 다양한 파일 형식에서 텍스트를 추출하기 위해 OpenAI를 사용하고, 각 파일 형식에 맞는 시스템 프롬프트를 정의합니다. 🖼️
- Convex Helpers 라이브러리의
assert 함수를 사용하여 런타임에 진실성을 검증하고 타입 가드를 제공합니다. ✅
- 지원되는 이미지 유형(JPEG, PNG, WEBP, GIF)을 정의하고, 이미지에서 텍스트를 추출하는
extract image text 함수를 개발합니다. 📸
- PDF 파일에서 텍스트를 추출하는
extract PDF text 함수를 개발하고, 파일 이름, MIME 유형 등의 컨텍스트를 AI 모델에 제공합니다. 📄