[ChatGPT 챗봇 실습 3강] ChatGPT API 연동 – 사용자 메시지에 AI 응답 받기

이번 실습에서는 드디어 OpenAI의 ChatGPT API를 연동하여 사용자의 입력에 대한 실제 AI 응답을 받아보는 기능을 구현합니다.

용어 설명

• API 연동: 외부 서버(OpenAI)와 데이터를 주고받기 위해 요청(Request)과 응답(Response)을 주고받는 처리
• POST 요청: 데이터를 서버로 전송하는 방식 (예: 메시지 내용)
• Authorization 헤더: API 사용을 인증하기 위한 키 포함 영역

기본 개념

• 사용자의 입력값을 메시지로 변환해 OpenAI API에 전송합니다.
• 서버 응답에서 AI 메시지를 추출해 대화에 추가합니다.
• 단일 요청으로 이전 대화 히스토리를 함께 보내야 흐름이 유지됩니다.

주요 사용 위치

• 대화형 챗봇 인터페이스에서 실제 응답을 받아야 할 때
• 실시간 채팅 처리 로직 학습
• 프론트엔드에서 REST API 사용하는 기본 예제로 활용 가능

구체적 코드 예시

const handleSend = async () => {
  if (!input.trim()) return;
  const userMsg = { role: 'user', content: input };
  const updatedMessages = [...messages, userMsg];

  setMessages(updatedMessages);
  setInput('');
  setIsLoading(true);

  const res = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer YOUR_API_KEY`,
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: updatedMessages,
    }),
  });

  const data = await res.json();
  const reply = data.choices[0].message;
  setMessages([...updatedMessages, reply]);
  setIsLoading(false);
};

※ YOUR_API_KEY는 OpenAI에서 발급받은 본인 키로 대체해야 합니다.

핵심 요점 정리

• fetch로 POST 요청을 전송
• messages 배열 전체를 함께 보내 대화 흐름 유지
• 응답 메시지를 받아 messages에 추가해 출력
• API 키가 노출되므로 다음 강의에서 백엔드 프록시로 보안 처리 예정

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.