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

 

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

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

 

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

 

---

chatGPT API 연동

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

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

🔗 https://platform.openai.com/docs/overview

 

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

 

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

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

 

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

인코딩 설정

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

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

 

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

 

---

API호출로직 알아보기

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

 

📥 Request

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

🔗 https://platform.openai.com/docs/api-reference/chat

 

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

 

Example request

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

 

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

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

 

📤 Response

Example response

 

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)

 

🔻 CustomFuntion

다음과 같은 기능을 하는 Custom Function 을 확인할 수 있다.

 

---

그 다음 API Call을 이용해 요청한다.

이때 prompt에  Request시 지금까지의 chatHistory를 전달해 주면 된다.
API 세팅 메뉴로 가서 Body를 보면, prompt라는 변수가 messages에 들어갈 내용으로 있는 것을 확인할 수 있다 !

결과값은 액션 output 변수로, chatGPTResponse라고 이름지어져 있다.

 

 

요청이 성공적일 경우, 응답에서 메시지를 꺼내 chatHistory에 저장한다.

저장할 때는 $[’choices’][0][’message’]를 입력해서, 메시지만 전달해준다

 

 

JSON Path 관련 테스트는 API Calls 에서 Response&Test 에서 확인할 수 있다.

여기 key에는 API Key를, prompt에는 [{"role":"user", "content" : "Hello!"}] 를 넣으면 테스트가 가능하다.

 

---

🔗 https://docs.flutterflow.io/resources/backend-logic/rest-api/

API Calls | FlutterFlow Documentation