안녕하세요. 저는 버블을 사랑하는.. 버블러인데요..!
버블이 무엇인지 아주 간략하게만 소개하자면, 개발 자율도가 아주 높은 노코드 웹앱 빌더입니다.
프레이머, 웹플로우 등 노코드 웹앱 빌더 툴은 정말 많은데요!
사용하기 쉬울 수록 자율도가 낮고, 자율도가 높을 수록 사용이 어렵긴 합니다. 버블이 노코 드 계에서는 끝판왕이라 불리죠.
버블은 API 연동, 웹훅 연동 등이 모두 지원되며, 아주 고도화된 기능까지도 개발이 가능합니다(물론 고도의 버블실력도 필요..). 자바스크립트 언어 기반으로 동작하며, 필요 시 js 로 개발된 수많은 플러그인을 붙여서 사용할 수 있습니다.
(그리고 8기 챗봇방 후토크 새벽 1시에 끝나고 갑자기 여기에 꽂혀서 개발+로그작성.. 하다가 새벽 5시반이 되어.. 밤을 꼴딱 새어.. 설명은 여기까지만….)
무튼 오늘 챗봇스터디방 후토크에서 한동안 랭체인, flowise, assistant api, 벨루가 등의 개념들에 대해 열심히 파고들다가 새삼 깨달은 것 : 버블에서 gpt api 연동하면 체인으로 연결하여 호출하는 것도 가능하고, 버블 db의 데이터들을 프롬프트 변수로 넣는 게 가능하잖아?! 랭체인에서 api 호출해서 gpt 응답받는 속도보다 버블에서 받는 속도가 체감상 느리다는 단점은 있습니다.(버블은 버블서버 거쳐서 gpt서버와 소통하는 방식인 것 같더라고요? 사실 이거 잘 모름.. 찾아볼게여)
우선 가볍게는 벨루가 위젯을 버블로 만든 플랫폼에 삽입하여 챗봇을 사용하고,
추후 챗봇을 고도화하여 버블 db의 데이터들을 챗봇 입력으로 보내야 할 때 좀 더 파고들어봐야겠습니다!
우선 끄읏!
1. Open AI API 플레이그라운드에서 설정
system 프롬프트 세팅
user 프롬프트 입력 후 submit
assistant 내용이 gpt output
2. Bubble.io API 설정
2-1) 버블 앱 생성, API Connector 설치
bubble.io 가입 후 ‘create a new app’
app editor 들어가서 좌측 ‘Plugins’ 탭 진입
우측상단 ‘Add plugins’ 눌러서 ‘API Connector’ 설치
참고 :
버블 무료플랜에서는 api 연동 불가
처음 앱 생성 시 2주 free trial 제공
가장 낮은금액 유료플랜(starter) 월32달러
2-2) Add another call 눌러서 새로운 API 생성
API Name은 편하게 설정. 추후 버블에서 workflow로 API 찾을 때 해당 이름으로 찾게 됨.
아래 ‘API Call’ 을 설정하기 위해서는 우측 상단 expand 클릭
2-3) Playground view code를 보고 API 세팅
위에 1번 플레이그라운드 세팅에서 ‘view code’ 눌렀을 때 나오는 팝업
우측상단 curl 방식으로 선택
POST 방식 확인, endpoint url 확인, header 값 확인, body data 확인
Header 부분 key, value 입력
API Key 값 앞에 ‘Bearer ‘가 요구되는 것 반드시 확인
아래 API call 설정을 위해 우측 상단 expand 클릭
2-4) API call 세팅
호출방식(POST)와 endpoint url 입력
Use as ‘Action’ → 액션 타입이어야 버블 workflow에서 불러올 수 있음
Data type ‘JSON’ → open ai API 는 기본적으로 json type으로 주고받음
Body 부분에 팝업의 -d 값 입력
단, role:assistant 부분은 gpt의 응답부분. 입력할 프롬프트가 아니므로 제외
<변수명>을 쓰면 자동으로 아래 Body parameters가 생김
추가로 모델명이나 max_tokens 등 파라미터 값들을 <model> 등으로 변수지정하여 동적으로 관리하면 수월
Body parameters 부분의 key 값은 body에서 변수 기입하면 자동으로 생성됨
value 값은 디폴트로 적용될 값을 기입
Private 체크하면 value값에 기입된 디폴트값을 항상 반환
Private 체크 해제해야 이곳에 들어갈 value를 동적으로 관리할 수 있음
Initalize call 버튼 클릭 (저는 한 번 초기화 해서 re가 붙음)하여 초기화 진행
(참고) 다른 파라미터들을 변수로 설정하여 동적 관리하는 법
아래와 같은 팝업이 떠야 초기화 성공
gpt 의 응답이 어떤 구조로 받아지는지 확인가능
아래 Show raw data 눌러서 실제 gpt 응답의 구조를 raw 형태로 파악
우리가 원하는 gpt 응답은
choices 배열의 1번째 값의 message의 content 에 담겨있죠? (이거 중요! 버블에서 gpt 응답 받아오는 표현식에 활용됨)
3. 버블에서 프론트 만들기
자세한 설명은 생략 (본 게시글은 api 연동 방법에 초점)
데이터타입과 프론트 화면 아래에 캡처로 공유. 추가 자세한 설명이 필요하다고 판단되는 경우 추후 게시글 수정.
데이터 예시
이곳에서 gpt 응답을 확인할 수 있음
4. 버블 백엔드 워크플로우 설계하기
‘생성’ 버튼 > Edit workflow
step1 에서 우리가 만든 API 호출 불러오기
변수로 설정했던 시스템, 유저 프롬프트 값을 동적으로 넣어주기
프론트 단에서 prompt 입력하는 multiline input 엘레멘트의 value를 워크플로 단에서 동적으로 넣어줄 수 있음
custom state(임시저장소) 에 gpt response를 저장
result of step 1 → API 호출의 결과(=gpt 응답)
뒤에 choice의 첫번째 아이템의 메시지 content 이건 위에 gpt 응답 구조로 파악한 것
(위에 글 캡쳐해옴)
5. 버블에서 테스트 돌려보기
지금 지피티가 느린지.. 버블이 느린지.. api 응답 받는 게 좀 느리네용. 그래서 영상 중간에 로딩 잘라서 편집했습니다.