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 기반 고객 지원 플랫폼을 구축하여 Intercom과 유사하지만 자체 스택에서 실행되며 음성 에이전트, AI, 멀티 테넌트 B2B 기능을 제공합니다. 🤖
- Convex 에이전트, 검색 증강 생성(RAG), OpenAI, Gemini, Anthropic, Grock 등 다양한 AI 모델을 활용하여 고객 지원을 자동화하고, 문제 발생 시 담당자에게 에스컬레이션합니다. 🗣️
- 대시보드를 통해 지원팀은 실시간으로 모든 상황을 파악하고, 대화에 참여하거나, 직접 응답하거나, 수동으로 문제를 해결할 수 있습니다. 📊
- Echo는 제품 문서를 읽어 학습하고, 임베딩을 생성하여 RAG를 통해 응답의 정확성을 높입니다. 📚
- Vapi를 통해 음성 에이전트, 전화번호, 인바운드/아웃바운드 전화 통화를 지원하며, AWS Secrets Manager를 사용하여 API 자격 증명을 안전하게 저장합니다. 📞
- Clerk를 통해 빌트인 결제 기능을 제공하며, 무료 플랜부터 AI 기능, 음성 에이전트, 지식 기반, 맞춤 설정, 팀원 관리 기능을 제공하는 유료 플랜까지 다양한 옵션을 제공합니다. 💰
- 모든 Echo 계정은 조직별로 관리되며, 팀원 초대, 역할 할당, 작업 공간 관리가 가능합니다. 🏢
- Sentry를 통해 전체 스택 가시성을 확보하여 오류를 추적하고, 실시간 알림, 세션 재생, 프런트엔드/백엔드 로그 추적 기능을 제공합니다. 🚨
- Turbo repo 모노레포지토리에서 대시보드, 위젯, 임베드 애플리케이션을 개발하고, Convex 패키지 및 Shatsen UI 컴포넌트를 공유하여 모노레포 아키텍처를 구축합니다. 📦
- 각 챕터는 Code Rabbit의 코드 리뷰를 통해 버그 및 보안 문제를 방지하고, 프로덕션 수준의 코드를 제공합니다. ✅
- 이 튜토리얼은 AI, 음성 에이전트, 결제 기능을 갖춘 실제 SaaS 비즈니스를 위한 청사진을 제공합니다. 🗺️
- 프로젝트 설정에는 PNPM 10 설치, SHAT CNUI, Next 15, Tailwind 4, React 19를 사용한 Turbo repo 설정이 포함됩니다. ⚙️
- 모노레포를 사용하여 두 번째 애플리케이션을 추가하고, 간단한 내부 패키지 및 Shatsen 컴포넌트를 공유하는 방법을 학습합니다. 🧩
- PNPM은 yarn, npm, bun과 유사한 패키지 관리자이며, Turbo repo는 모노레포 빌드 시스템, Shatsenui는 컴포넌트 라이브러리입니다. ℹ️
- Shatsen UI 템플릿을 사용하여 Turbo Repository 템플릿을 설치하고, PNPM을 사용하여 프로젝트를 개발합니다. 🛠️
- Visual Studio Code를 사용하여 IDE를 설정하고, Turbo를 전역적으로 설치하여 로컬 워크플로우의 유연성과 속도를 높입니다. 💻
- 앱 폴더, 패키지 폴더, pnpm-lock.yaml, pnpm-workspace.yaml, tsconfig.json, turbo.json 등 모노레포의 구조를 이해합니다. 📂
- turbo dev 명령어를 사용하여 앱을 실행하고, localhost 3000에서 웹 애플리케이션을 확인합니다. 🌐
- 앱을 복사하여 위젯 애플리케이션을 만들고, package.json에서 이름을 변경하여 두 개의 독립적인 Next.js 애플리케이션을 구축합니다. 📱
- pnpm install 명령어를 사용하여 종속성을 업데이트하고, turbo dev 명령어를 사용하여 두 개의 애플리케이션을 동시에 실행합니다. 🔄
- 내부 공유 패키지를 생성하여 패키지 폴더의 역할을 이해하고, 워크스페이스를 사용하여 패키지를 별칭으로 지정합니다. 📚