사용 팁

시나리오에서 OpenAI API 호출하기

플렉스튜디오 시나리오에서 OpenAI API 호출하기

이전 강의를 통해 OpenAI API 키 발급과 플렉스튜디오에서 API를 연동하는 방법을 살펴봤어요. 이제 실제 시나리오에서 API를 호출해 앱에서 데이터를 활용하는 과정을 소개할게요.

이번 예시는 사용자의 요리 실력을 고려해 맞춤형 레시피를 추천해 주는 앱을 만드는 과정을 담았어요. 사용자가 선택한 정보(요리 실력, 음식명 등)는 카테고리(Category)에 담겨 있어요. 앱의 마지막 단계에서 이 데이터를 조합해 API를 호출하고 결과를 사용자에게 보여줍니다.

 

3-3 시나리오에서 API 호출_블로그_예시앱소개

 

플렉스튜디오 유튜브에서 영상 강의 보러 가기▼

 

1단계 : 이벤트 연결

1. 시나리오의 마지막 스텝 선택

3-3 시나리오에서 API 호출_01

2. 스텝 이벤트 사용 활성화 - 이벤트 발생 시점 : 최초 시작전 (Init) / 이벤트명 : API호출

3-3 시나리오에서 API 호출_02

3. 연결한 이벤트로 이동

3-3 시나리오에서 API 호출_03

2단계 : OpenAI API 호출

1. API 호출에 필요한 데이터 확인
  •  워크스페이스 - 좌측 데이터 메뉴 - API 연동 버튼 - 호출하려는 모듈 클릭 - Script 탭 클릭
  • 전처리 스크립트에서는 role과 content 값을 설정
    • role: user
    • content: 요리 실력 + 음식명을 결합한 메시지

3-3 시나리오에서 API 호출_04

 

2. Script 추가

3-3 시나리오에서 API 호출_05

  • 예시 스크립트

_c.activeSector.role = "user"
_c.activeSector.content = "요리 " + _c.activeSector.level + "인 사람에게 " + _c.activeSector.name + " 레시피를 알려줘."

 

3-3 시나리오에서 API 호출_06

 

3. API 추가

3-3 시나리오에서 API 호출_07


4. 생성한 API명을 지정하고 모듈명은 chatGPTChating으로 변경 (API명 : My OpenAI)

3-3 시나리오에서 API 호출_08

5. 보내는 데이터 : 사용자 정보를 담은 카테고리를 지정 (카테고리명 : menu)


3-3 시나리오에서 API 호출_09

6. 받는 데이터 : 카테고리를 지정하고 덮어쓰기로 설정 (카테고리명 : result)

3-3 시나리오에서 API 호출_10

3단계 : 디버거 실행

1. 시나리오 우측 상단의 화살표( ▶ ) 클릭

3-3 시나리오에서 API 호출_11

2. 마지막 스텝 시작 전 이벤트 실행 → 사용자가 입력한 정보를 기반으로 답변 생성

3-3 시나리오에서 API 호출_12

 

API를 호출하는 또 다른 방법

  • 전처리 스크립트를 통해서도 기능 구현 가능
1. 다시 구현하기 위해 스크립트 스킵 처리
    • 시나리오 - Dev 모드 - Event 탭 - Script의 SKIP 버튼 활성화

3-3 시나리오에서 API 호출_13

2. 워크스페이스 - 좌측 데이터 메뉴 - API 연동 버튼 - 호출하려는 모듈 - Script 탭 클릭

3. 전처리 스크립트 작성

  • 예시 스크립트

const item = paramBlocks[0][0]
let params = [{
"role": "user",
"content" : "요리 " + item.level + "인 사람에게 " + item.name + " 레시피를 알려줘."
}];

return params;

 

3-3 시나리오에서 API 호출_14

4. 변경한 설정을 반영하기 위해 반드시 우측 하단의 배포 버튼 클릭

 

3-3 시나리오에서 API 호출_15


이제 시나리오에서 API 호출까지 완료했어요. OpenAI API를 활용하면 복잡한 AI 모델을 기반으로 한 기능도 간단히 구현할 수 있습니다.

플렉스튜디오에서 직접 AI 기능을 결합해 나만의 멋진 앱을 만들어 보세요!

 
사용 팁 로우코드앱개발

함께 알아두면 좋은 정보

사용 팁

플렉스튜디오에서 OpenAI API 설정하기

이전 강의에서는 OpenAI API를 사용하기 위한 API Key 발급 방법을 살펴봤어요. 이번에는 발급받은 키를 활용해 플렉스튜디오에서 API를 연동하는 과정을 단계별로 소개할게요.