/chat-ai

OpenAI API를 활용하여 구현한 챗봇 프로젝트

Primary LanguageTypeScript

AI Chat Bot

배포

사용 방법

1. OpenAI API KEY 발급받기

  • OpenAI API KEY 발급 페이지에서 API KEY를 발급 받는다.
    • 발급된 API KEY는 로그인 페이지에서 입력한다.

2. 로그인

  • API KEY를 발급 받은 후, 로그인 페이지에서 API KEY를 입력하고 로그인한다.

3. 채팅방 생성

  • 채팅리스트 페이지에서 우측 상단에 있는 + 버튼을 클릭해서 채팅방을 생성한다.
    • 인원 수는 2~5명으로 설정이 가능하다.

4. 채팅방 입장

  • 생성된 채팅방을 클릭해서 채팅방으로 들어간다.

5. 채팅

  • 채팅방에 들어간 후, AI와 채팅을 나눈다.
  • 첫 대화는 사용자가 보내고, 이후에 AI가 답장을 한다.
  • 사용자가 15초 동안 답장하지 않으면 하단에 '상대방이 메세지를 입력 중입니다...' 메세지가 뜨며, 이 때는 다른 AI가 답장한다.
  • 채팅을 보낼 때 최근 5개의 대화 메시지도 함께 전송되어, 이전 대화를 이어나갈 수 있다.
  • 우측 상단에 있는 3dot 아이콘을 클릭해서 방 정보를 수정하거나 채팅방을 나갈 수 있다.

로그인 페이지

로그인 버튼이 비활성화 상태인 조건은 Input에 아무것도 입력하지 않은 경우이다. Input에 KEY값을 입력하면 로그인 버튼이 활성화 된다. 입력한 KEY값이 올바르지 않은 경우, 에러 메세지가 표시된다. 유효한 KEY값을 입력하고 로그인 버튼을 클릭하면 채팅리스트 페이지로 이동한다.

채팅 리스트 페이지

채팅방 목록 페이지에서는 현재 존재하는 채팅방의 목록을 확인할 수 있다. 또한 상단에 위치한 + 버튼을 클릭하여 새로운 채팅방을 생성할 수 있다. 채팅방을 생성하기 위해서는 방 이름과 방 인원 정보를 입력해야 한다. 채팅방을 생성한 후에는 수정 버튼을 클릭하여 채팅방 정보를 수정하거나 삭제 버튼을 클릭하여 채팅방을 삭제할 수 있다. 채팅방 목록에서 원하는 채팅방을 클릭하면 해당 채팅방으로 이동하여 채팅을 진행할 수 있다.

채팅 페이지

'3dot' 아이콘을 클릭하여 방 정보 수정 또는 채팅방을 나갈 수 있다. AI와의 첫 대화는 사용자가 보내고, 이후에는 AI가 답장을 한다. 사용자가 15초 동안 답장을 하지 않으면 '상대방이 메세지를 입력 중입니다...' 메시지가 뜬다. 이때 AI가 다시 답장을 하며, 사용자는 메세지를 보낼 수 없다. 채팅을 보낼 때 최근 5개의 대화 메시지도 함께 전송되어, 이전 대화를 이어나갈 수 있다.