[TIL] React 챗봇 만들기1 - OpenAI api 세팅 및 사용 방법 (ChatGPT)

💡 20230807 TIL : OpenAI api 리액트 프로젝트에 세팅한 과정 정리

 

이번 프로젝트에서 챗봇 기능을 담당하였다. 챗봇은 웹 사이트 어디에서든 모달창으로 접근할 수 있으며, 모달에서 OpenAI api를 이용하여 함수명, 변수명을 지어달라고 요청할 수 있는 챗봇을 만드는게 목표이다. OpenAI api는 처음 사용해보는거라, 공식 문서와 블로그들을 참고하여 일단은 어설프게 구현에 성공하여 그 과정을 정리해보려고 한다.

 

참고로 진행 중인 리액트 프로젝트는 타입스크립트 기반으로 진행 중이다.

 

---

1. 세팅

API 사용 전, API키 발급 및 라이브러리 설치 세팅을 완료하여야 한다.

 

1) React 프로젝트에 openai 라이브러리 설치

// npm 설치
npm install openai

// yarn 설치
yarn install openai

 

 

2) API Key 세팅

• OpenAI 공식 홈페이지에서 발급받은 API Key를 .env 파일에 `REACT_APP_OPENAI_API_KEY` 변수명에 설정해준다.
• .env 파일은 package.json과 .gitignore 파일이 위치하는 루트 경로에 위치하여야 한다.

REACT_APP_OPENAI_API_KEY = "발급받은 API KEY 입력"

 

OpenAI API 키 발급받는 방법은 아래 벨로그에 자세히 나와있으니 참고
프론트엔드 개발자를 위한 chatGPT API 활용법 (+ react, flask)

 

 

---

2. 작성 코드

코드는 우선 api 파일인 openaiapi.ts 파일과, ChatGPT.tsx 컴포넌트 두 파일로 분리하여 작성하였다.

1) openaiapi.ts - api 설정파일

import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
  apiKey: process.env.REACT_APP_OPENAI_API_KEY,
});

export const openai = new OpenAIApi(configuration);

• api 설정 코드를 따로 파일로 분리할 필요 없이 ChatGPT.tsx 컴포넌트에 작성해도 되는데, 그냥 한 줄이라도 깔끔하게 작성하고 싶어서 일단 분리하였다.

 

2) ChatGPT.tsx 컴포넌트

import { useState } from "react";
import { openai } from "../../libs/services/openaiapi";
import styled from "styled-components";

const ChatGPT = () => {
  const [prompt, setPrompt] = useState("");
  const [apiRes, setApiRes] = useState<string>("");
  const [loading, setLoading] = useState(false);

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPrompt(e.currentTarget.value);
  }

  const handlePromptSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    try {
      const res = await openai.createCompletion({
        model: "text-davinci-003",
        prompt,
        temperature: 0.8,
        max_tokens: 256,
      })
      console.log(res);
      if (res?.data.choices[0]?.text) {
        setApiRes(res.data.choices[0].text);
      } else {
        setApiRes("정상적으로 전달되지 않았습니다. 다시 시도해주세요.");
      }
    } catch (err) {
      console.log(err);
      setApiRes("정상적으로 전달되지 않았습니다. 다시 시도해주세요.")
    }
    setLoading(false);
  }

  return (
    <>
      <ChatBotContainer>
        <div>
          <ChatBotTitle>변수명, 함수명을 물어보세요!</ChatBotTitle>
          {apiRes && (
            <ChatBotResContainer>
              <h3>챗봇 🤖</h3>
              <pre>{apiRes}</pre>
            </ChatBotResContainer>
          )}
          <form onSubmit={handlePromptSubmit}>
            <ChatBotPromptInput
              type="text"
              value={prompt}
              onChange={onChange}
              placeholder="질문을 입력하세요!"
            />
            <button
              disabled={loading}
            >{loading ? "답변 생성 중.." : "전송"}
            </button>
          </form>
        </div>
      </ChatBotContainer>
    </>
  );
};

export default ChatGPT;

const ChatBotContainer = styled.div`
  width: 70%;
  margin: 10px;
  padding: 10px;
  border: 1px solid gray;
  border-radius: 10px;
`

const ChatBotResContainer = styled.div`
  padding: 10px;
  margin: 10px;
  border: 1px solid gray;
  border-radius: 10px;
`

const ChatBotTitle = styled.h1`
  font-size: 18px;
  text-align: center;
  margin: 20px;
`

const ChatBotPromptInput = styled.input`
  width: 80%;
  margin: 10px;
  padding: 10px;
`;

 

 

---

3. 결과

함수명을 지어달라고 했는데 함수 전체를 만들어줬다..ㅎㅎ(바보같은 녀석) CSS도 엉망이고 답변도 엉망이지만 일단 검색하면 그에 맞는 답변이 나오는게 신기했다!

 

 

---

4. 해야 할 일

• 우측 하단에 챗봇 버튼 만들기
• 버튼을 클릭하면 일정 크기의 챗봇 모달이 나타나도록 만들기
• 유저가 남긴 질문, 챗GPT가 남긴 답변을 채팅창처럼 로그 남기기
  • 지금은 질문 프롬프트를 새로 submit하면 기존 질문과 답변이 남지 않고 새로운 질문과 답변만 보임

 

 

---

참고 사이트

How to use OpenAI with React

프론트엔드 개발자를 위한 chatGPT API 활용법 (+ react, flask)

ChatGPT API 사용 방법 및 프롬프트 최적화 비법 - 역할(Role), 온도(temperature), 텍스트의 최대 길이(max_tokens) 활용방법