OpenAI API가 공개되었다는 소식을 듣고 간단한 토이 프로젝트를 진행해보았습니다.
아직 토이프로젝트 주제는 정하지 않고 우선 API 연결부터!

0. 준비물

아래 링크에서 우선 OpenAI API Key를 발급받아둬야한다.
발급받을 때 한번만 확인할 수 있기 때문에 따로 메모해두자

https://platform.openai.com/account/api-keys

발급받은 Key는 안전하게 env 파일에 저장

REACT_APP_OPENAI_API_KEY='YOUR OPENAI API KEY'

---

1. 입력폼 만들기

onSubmit 이벤트에서 connectGPT() 로직을 수행

import { ChangeEvent, FormEvent, useState } from 'react';
import { connectGPT } from './connectGPT';

function App() {
  const [inputValue, setInputValue] = useState<string>('');

  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    connectGPT(inputValue);	  // api 로직 분리
  };

  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  return (
    <>
      <div>OPENAI api</div>
      <form onSubmit={onSubmit}>
        <input
          type='text'
          placeholder='write here'
          value={inputValue}
          onChange={onChange}
        />
      </form>
    </>
  );
}

export default App;

2. 요청 및 응답

axios을 이용해 비동기로 요청 후 응답을 콘솔에 찍어보았다

// /src/api/connectGPT.ts
import axios from 'axios';

export async function connectGPT(inputValue: string) {
  const API_KEY = process.env.REACT_APP_OPENAI_API_KEY;
  const API_URL = 'https://api.openai.com/v1/completions';

  try {
    const response = await axios.post(
      API_URL,
      {
        model: 'text-davinci-003',
        prompt: inputValue,
        temperature: 0.9,
        max_tokens: 100,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0.6,
        stop: [' Human:', ' AI:'],
      },
      {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${API_KEY}`,
        },
      }
    );

    const data = response.data.choices[0].text.trim();
    console.log('data : ', data);	// gpt 답변 콘솔에 출력
  } catch (error) {
    console.error(error);
  }
}

마음에 드는 이름은 없지만 어쨌든 추천은 해줬다!

기본적인 API연결은 성공해서 주제를 정한뒤 완성도를 높여봐야겠다.
그리고 생각보다 응답 대기시간이 있어서 다음 작업으로는 reactQuery를 이용해 조금더 고도화 해봐야겠다!

참고한 링크

https://platform.openai.com/docs/api-reference/completions