ChatFlow.AI (노코드 LLM 챗봇 빌더)
완료OpenAI GPT-4o-mini 기반의 대화 흐름(Flow) 설계형 챗봇 빌더입니다. Greeting, Topic, Action 노드를 시각적으로 연결해 AI 챗봇의 대화 로직을 직접 구성할 수 있으며, 생성형 챗봇을 누구나 쉽게 제작할 수 있는 노코드 툴로 개발되었습니다. 본 프로젝트는 한촌설렁탕의 고객응대/점주운영 AI 챗봇으로 시연되었습니다.
주요 화면 & 기능
대화 흐름 구조
시스템 아키텍처 한눈에
사용자는 React Flow 기반 빌더에서 노드를 추가하고 연결하여 챗봇의 대화 플로우를 설계합니다. 설계 결과는 JSON 형태로 저장되며, 각 Action 노드는 GPT-4o-mini 모델의 응답 로직과 연결됩니다. 실행 시, 입력된 메시지는 주제 분류 → 노드 탐색 → LLM 응답 단계를 거쳐 결과를 반환합니다.
서버 없이 Vercel의 클라이언트 환경에서 동작하며, 대화 및 설정 데이터는 로컬스토리지에 저장됩니다.
수행한 역할 (3개)
플로우 빌더 (Flow Editor)
React Flow를 기반으로 챗봇의 Greeting, Topic, Action 노드를 추가하고 연결하여 대화 시나리오를 시각적으로 설계할 수 있습니다. 각 노드는 설명, 프롬프트, 하위 주제 등 세부 데이터를 포함합니다.
핵심 기여
- Greeting / Topic / Action 노드 타입 정의 및 데이터 구조 설계
- React Flow 기반 드래그·연결형 플로우 편집 UI 개발
- Zustand를 활용한 Bot/Node/Edge 상태 관리 및 Undo-safe 업데이트
- Toast 알림 시스템을 통한 사용자 피드백 (예: 중복 노드 방지, 저장 성공 등)
챗봇 실행 엔진 (Chat Engine)
GPT-4o-mini 모델과의 연동을 통해 플로우 노드 구조 기반 대화 응답을 생성합니다. 사용자의 입력을 Topic 노드에 따라 분류하고, 해당 노드의 컨텍스트를 기반으로 Action 응답을 출력합니다.
핵심 기여
- GPT-4o-mini 모델을 활용한 LLM 기반 대화 로직 구현
- 입력 문장 → 주제 매핑 → Action 실행 구조 설계
- 노드 데이터(JSON) 기반 동적 프롬프트 생성 및 요청
- 세션별 대화 로그 관리 (localStorage 기반)
실제 시연 챗봇
ChatFlow 빌더를 활용해 실제 브랜드 기반 챗봇을 제작했습니다. 외식 프랜차이즈 '한촌설렁탕'을 대상으로 고객 응대용과 점주 운영용 AI 챗봇을 각각 설계했습니다.
핵심 기여
- 한촌설렁탕 고객용 챗봇: 메뉴/지점/영업시간/가맹문의 안내
- 한촌설렁탕 점주용 챗봇: 재고관리, 행사안내, 매출요약, 근무스케줄 추천 등
- 플로우 구조에 따른 노드 세분화 및 액션 프롬프트 커스터마이징
- 브랜드별 색상 테마 및 UI 차별화 적용