← 갤러리로 돌아가기

Chatbot

멀티 모델 선택이 가능한 AI 챗봇 UI를 체험해봐요.

AI챗봇

이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.

데모 보러 가기

🛠️ 개발 가이드

실제 AI 호출 없이, 키워드 매칭으로 그럴듯한 답변을 만들어주는 챗봇 UI 데모예요.

기술 스택

Next.jsReactlocalStorage

핵심 구현 포인트

  • 입력 문장에서 키워드를 찾아 미리 준비된 답변 중 하나를 고르는 makeReply() 함수로 응답을 생성해요.
  • 모델 선택 드롭다운은 UI만 있는 코스메틱 요소이고, 실제로 모델을 바꾸지는 않아요.
  • 대화 기록은 localStorage에 그대로 저장돼 새로고침해도 유지돼요.

이렇게 만들면 돼요

  1. 메시지 배열 state를 설계해요 (역할, 내용, 시각).
  2. 사용자 입력을 push하고 setTimeout으로 "생각 중" 딜레이를 흉내내요.
  3. 키워드 매칭 함수로 canned reply를 골라 push해요.

참고 파일

components/gallery/ChatbotDemo.jsx