Logo

ChatGPT 터미널 앱 자바스크립트로 만들어보기

이번 포스팅에서는 ChatGPT API를 활용하여 자바스크립트로 GhatGPT와 유사하지만 터미널 상에서 돌아가는 간단한 챗앱을 구현해보겠습니다.

사전 준비

최대한 간단한 예제를 위해서 GhatGPT API를 호출할 때 외부 라이브러리를 사용하지 않고 Node.js에 내장되어 있는 fetch() 함수를 사용하려고 합니다. Node.js에서는 v17.5 이상부터 fetch() 함수를 지원하고 있으므로 본인 컴퓨터에 v17.5 이전 Node.js가 설치되어 있다면 현재 LTS 버전인 v18로 업그레이드를 추천드리겠습니다.

원격 API를 호출할 때 사용되는 자바스크립트의 fetch() 함수에 대한 자세한 설명은 관련 포스팅을 참고 바랍니다.

OpenAI API 키 설정

OpenAI에서 회원 가입 후에 API 키를 발급받는 방법은 별도 포스팅에서 자세히 다루었으니 참고 바랍니다.

터미널을 열고 우선 OPENAI_API_KEY라는 환경 변수에 OpenAI에서 발급받은 API 키를 저장해놓고 시작하겠습니다.

$ export OPENAI_API_KEY=sk-...DECr
$ echo $OPENAI_API_KEY
sk-...DECr

이렇게 API 키를 환경 변수에 저장해놓으면 Node.js 프로그램을 실행할 때 process.env를 통해 쉽게 환경 변수를 읽어올 수 있습니다.

Node.js에서 환경 변수를 다루는 방법에 대해서는 관련 포스팅을 참고 바랍니다.

OpenAI API 키 출력

chat.js 파일을 생성하고 그 안에 OPENAI_API_KEY 환경 변수를 읽어서 콘솔에 출력하는 코드를 작성합니다.

chat.js
console.log(process.env.OPENAI_API_KEY);

그리고 작성한 프로그램을 실행했을 때 방금 환경 변수로 설정한 API 키가 출력되는지 확인합니다.

터미널
$ node chat.js
sk-...DECr

ChatGPT API 호출

이제 fetch() 함수를 호출하여 ChatGPT API에 야!라는 메시지를 전송해보겠습니다. 이 때 환경 변수로 설정해놓은 API 키를 빼먹지 말고 헤더로 함께 넘겨주셔야 합니다. 인공지능 모델로는 최근에 많이 사용되는 gpt-3.5-turbo를 사용하겠습니다.

chat.js
fetch("https://api.openai.com/v1/chat/completions", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    model: "gpt-3.5-turbo",
    messages: [{ role: "user", content: "야!" }],
  }),
})
  .then((res) => res.json())
  .then((data) => console.log(JSON.stringify(data, null, 2)));

ChatGPT API로 부터 응답된 내용을 콘솔에 출력해보면 choices 속성 안에 답변이 들어있는 것을 볼 수 있습니다.

터미널
$ node chat.js
{
  "id": "chatcmpl-753aCnaFlh35Cd4gY9vM069KvdhUM",
  "object": "chat.completion",
  "created": 1681439768,
  "model": "gpt-3.5-turbo-0301",
  "usage": {
    "prompt_tokens": 10,
    "completion_tokens": 15,
    "total_tokens": 25
  },
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "네, 무엇이 필요하신가요?"
      },
      "finish_reason": "stop",
      "index": 0
    }
  ]
}

커맨드 라인 인터페이스 구현

마지막으로 터미널 상에서 ChatGPT와 메시지를 주고 받을 수 있는 프로그램을 작성할 차례입니다.

먼저 위에서 작성한 코드를 함수화하면 좋을 것 같은데요. 입력으로 들어온 질문을 ChatGPT API에 그대로 전달해주고, ChatGPT API로 부터 응답된 결과에서 답변만 추출해서 반환하는 함수를 작성하겠습니다. 마지막에 이 함수에 질문을 인자로 넘겨서 호출도 해 볼께요.

chat.js
function chat(question) {
  return fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: [{ role: "user", content: question }],
    }),
  })
    .then((res) => res.json())
    .then((data) => data.choices[0].message.content);
}

chat("야!").then((answer) => console.log(answer));

다시 프로그램을 실행해보면 답변이 출력되는 것을 볼 수 있습니다.

터미널
$ node chat.js
네, 무엇을 도와드릴까요?

이제 터미널을 통해서 사용자의 입력을 받아 이 함수를 호출하고 반환 결과를 터미널에 출력만 해주면 되는데요. Node.js에 내장된 readline 모듈을 활용해서 구현해보겠습니다.

chat.js
const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

console.log("💬 ChatGPT 터미널 챗앱 💬\n");
rl.prompt();

rl.on("line", (question) => {
  chat(question).then((answer) => {
    console.log(`🤖 ${answer}\n`);
    rl.prompt();
  });
});

다시 프로그램을 실행해보면 다음과 같이 터미널에서 ChatGPT와 메시지를 주고 받으며 채팅이 가능하게 됩니다! 🎉

터미널
$ node chat.js
💬 ChatGPT 터미널 챗앱 💬

> 대한민국의 수도는 어디야?
🤖 대한민국의 수도는 서울입니다.

> 서울에서 가장 높은 건물은 뭐야?
🤖 서울에서 가장 높은 건물은 롯데월드타워입니다. 높이는 555m입니다.

>

마치면서

이상으로 ChatGPT API를 활용하여 정말 간단한 터미널 챗앱을 자바스크립트로 구현해보았습니다. Node.js만 있으면 별다른 라이브러리 설치 없이도 이렇게 어렵지 않게 ChatGPT API와 상호작용을 할 수 있겠습니다.

ChatGPT에 대한 포스팅은 관련 태그를 통해서 쉽게 만나보세요!

This work is licensed under CC BY 4.0

messageCircle