[FlutterFlow] 플러터플로우에서 ChatGPT API 연동하기

Devlog👩🏻‍💻/FlutterFlow

yujjne 2025. 1. 17. 18:16

플러터플로우로 만드는 앱 서비스의 기능은 궁금한 액셀 공식을 물어보면 알려주는 서비스이다.

Micro Saas(소비자의 문제를 해결하는 서비스)의 일종이며, OpenAI의 chatGPT를 활용한다.

우선 chatGPT 와 본격적으로 연동하는 과정을 정리해보자.

chatGPT API 연동

연동 방식은 chatGPT 서버와 통신을 하게 되는데 chatGPT와 통신할 때에는 REST API를 사용해야 한다.

API Key를 아래 사이트에서 발급받아서 사용하자. (키를 발급하기 위해 최소 5$의 카드 등록이 필요하다.)

플러터 플로우에는 아주 친절하게 chatGPT Component Flows가 제공된다. 아래 컴포넌트를 추가해 주자.

aiChat_Component의 iconButton을 눌렀을 때 동작하기 때문에 액션 플로우 에디터를 열어

Backend Call의 apiKey의 값을 발급받은 chatGPT key를 넣어주면 된다.

key 설정 후 추가적인 설정이 필요하다.

인코딩 설정

API Calls의 Send Full Prompt의 Advanced Settings로 들어가 Encode, Decode as UTF-8 두 항목을 체크해 준다.

한글을 깨지지 않게 인코드, 디코드 설정을 해주어야 한다.

위 설정을 해준 후 테스트해 보면 챗지피티가 작동되는 걸 확인할 수 있다.

이 로직의 과정을 이해해야 변형하는 것이 가능하기 때문에 알아보자.

OPenAI API 문서의 Chat 관련 내용을 확인할 수 있다.

요청 URL 은 다음과 같고 Header에는 Content Type과(JSON 사용) 인증 키의 내용이 필요하다.

Body에는 messages와 model, 개별 메시지에는 content, role 2가지가 있다.

플러터플로우에서 chatGPT API 활용은 다음과 같다.

API Calls 탭의 Call Definition에서 MethodType, Header, Body 등 리퀘스트 정보를 입력할 수 있도록 되어 있다.

Response에는 필요한 정보는 message뿐이고 이를 다음 질문에 활용하면 된다.
다시 질문할 때 Request, messages(대화목록)이 필요하기 때문이다.

이 일련의 과정이 버튼 플로우에 등록되어 있는 걸 확인할 수 있다.

messages는 그동안 다 주고받은 message의 히스토리로서 배열(목록)이며,

메세지를 보내면 messages 변수에 저장하며 응답이 오면 이 중에서 message만 빼내어 messages 변수에 저장한다.

aiChat_Component

Local Component State Variables(지역변수) 중에서 chatHistory, aiResponding 두 개가 주로 사용된다.

aiResponding : 답변을 기다리는지 여부 (Boolean)
- 로딩 바의 조건(conditional visibility)이 aiResponding에 따라 설정

chatHistory : 메시지 리스트(messages)를 저장하는 변수
- 문장을 보내는 순간, saveChatHistory 함수 호출
  - saveChatHistory(Custom Function) : newChat을 여태까지의 대화 목록인 chatHistory에 저장
  - newChat 저장 시 message 형식 갖춰야 함 → role, content / JSON 형태로 변환 (convertToJSON)