전체 프로젝트

개인 프로젝트

완료

ChatFlow.AI (노코드 LLM 챗봇 빌더)

OpenAI GPT-4o-mini 기반의 대화 흐름(Flow) 설계형 챗봇 빌더입니다. Greeting, Topic, Action 노드를 시각적으로 연결해 AI 챗봇의 대화 로직을 직접 구성할 수 있으며, 생성형 챗봇을 누구나 쉽게 제작할 수 있는 노코드 툴로 개발되었습니다. 본 프로젝트는 한촌설렁탕의 고객응대/점주운영 AI 챗봇으로 시연되었습니다.

Period
2025-10 - 2025-11
Scope
3 areas
  • Next.js
  • TypeScript
  • Tailwind CSS
  • Zustand
  • @xyflow/react (React Flow)
  • OpenAI GPT-4o-mini
  • Vercel

주요 화면 & 기능

플로우 빌더 화면
플로우 빌더 화면
Topic 노드 설정
Topic 노드 설정
생성된 챗봇 대화 예시
생성된 챗봇 대화 예시

대화 흐름 구조

Greeting → Topic → Action → Topic 구조로 연결되는 대화 흐름

시스템 아키텍처 한눈에

사용자는 React Flow 기반 빌더에서 노드를 추가하고 연결하여 챗봇의 대화 플로우를 설계합니다. 설계 결과는 JSON 형태로 저장되며, 각 Action 노드는 GPT-4o-mini 모델의 응답 로직과 연결됩니다. 실행 시, 입력된 메시지는 주제 분류 → 노드 탐색 → LLM 응답 단계를 거쳐 결과를 반환합니다.

서버 없이 Vercel의 클라이언트 환경에서 동작하며, 대화 및 설정 데이터는 로컬스토리지에 저장됩니다.

Contributions

수행한 역할

플로우 빌더 (Flow Editor)

React Flow를 기반으로 챗봇의 Greeting, Topic, Action 노드를 추가하고 연결하여 대화 시나리오를 시각적으로 설계할 수 있습니다. 각 노드는 설명, 프롬프트, 하위 주제 등 세부 데이터를 포함합니다.

  • Greeting / Topic / Action 노드 타입 정의 및 데이터 구조 설계
  • React Flow 기반 드래그·연결형 플로우 편집 UI 개발
  • Zustand를 활용한 Bot/Node/Edge 상태 관리 및 Undo-safe 업데이트
  • Toast 알림 시스템을 통한 사용자 피드백 (예: 중복 노드 방지, 저장 성공 등)
  • React Flow
  • Zustand
  • Tailwind CSS

챗봇 실행 엔진 (Chat Engine)

GPT-4o-mini 모델과의 연동을 통해 플로우 노드 구조 기반 대화 응답을 생성합니다. 사용자의 입력을 Topic 노드에 따라 분류하고, 해당 노드의 컨텍스트를 기반으로 Action 응답을 출력합니다.

  • GPT-4o-mini 모델을 활용한 LLM 기반 대화 로직 구현
  • 입력 문장 → 주제 매핑 → Action 실행 구조 설계
  • 노드 데이터(JSON) 기반 동적 프롬프트 생성 및 요청
  • 세션별 대화 로그 관리 (localStorage 기반)
  • OpenAI GPT-4o-mini
  • TypeScript
  • Zustand

실제 시연 챗봇

ChatFlow 빌더를 활용해 실제 브랜드 기반 챗봇을 제작했습니다. 외식 프랜차이즈 '한촌설렁탕'을 대상으로 고객 응대용과 점주 운영용 AI 챗봇을 각각 설계했습니다.

  • 한촌설렁탕 고객용 챗봇: 메뉴/지점/영업시간/가맹문의 안내
  • 한촌설렁탕 점주용 챗봇: 재고관리, 행사안내, 매출요약, 근무스케줄 추천 등
  • 플로우 구조에 따른 노드 세분화 및 액션 프롬프트 커스터마이징
  • 브랜드별 색상 테마 및 UI 차별화 적용
  • Next.js
  • OpenAI GPT-4o-mini
  • Tailwind CSS
정찬웅 | AI Application & Platform Engineer