내가 만든 GPTs를 AI와 거리가 먼😁 지인들도 사용할 수 있는 방법을 찾아보았어요. OpenAI의 API와 챗봇 생성형 AI인 Botpress를 이용해 GPTs를 웹 페이지에 챗봇으로 넣었습니다.
완성한 웹 페이지는 Cosmic Whisper(https://cosmic-whisper.netlify.app/) 입니다.
- 테스트 기간이 지나서 현재(20204.5.20) OpenAI의 API 접속을 닫아둔 상태입니다. 따라서 직접 사용은 안되고 시연 영상에서 확인할 수 있습니다.
목표
내가 작성한 GPTs를 (ChatGPT 이용자가 아니어도) 누구나 사용할 수 있도록 배포하기
Open AI의 API와 챗봇 생성형 AI인 Botpress 활용하기
Claude로 웹 페이지를 만들고, GPTs를 챗봇으로 삽입하기
개요
GPTs를 웹에서 볼 수 있는 방법 탐색하기
Open AI의 API 키 발급받기
Botpress의 API 키 발급받기
Chrome 확장 프로그램 Deploy GPTs 설치하기
나의 GPTs를 Deploy 하기
웹 페이지에 GPTs를 챗봇으로 넣기
1. GPTs를 웹에서 볼 수 있는 방법 탐색하기
ChatGPT와 대화하며 흐름을 이해하기
(하략)
관련 서비스를 검색하여 내용 파악하기
설정한 목표에 맞추어 Botpress를 선택
Botpress의 Share OpenAI GPTs with this Chrome Extension (https://www.youtube.com/watch?v=l446xf-fLhI)을 참고
2. Open AI의 API 키 발급받기
GPTs와 외부 프로그램을 연동하기 위해 필요
OpenAI(https://openai.com/)에 로그인하고 API 페이지의 API Keys 메뉴 사용
Create new secret key로 API 키 생성
3. Botpress의 API 키 발급받기
챗봇 생성형 AI인 Botpress(https://botpress.com/)사용
OpenAI의 API와 연결하여 Botpress의 챗봇을 통해 GPTs를 외부에 배포 가능
로그인한 후 우측 상단의 프로필 메뉴에서 Personal access tokens 사용
Generate New Token을 누르고, 임의의 키 이름을 넣은 후 Generate
4. Chrome의 확장 프로그램 Deploy GPTs 설치하기
Deploy GPTs(https://chromewebstore.google.com/detail/deploy-gpts/blhmcmlfliggcgllbfahfccdjoldgdjb)를 Chrome에 추가
Chrome에 고정하고 실행하기
1단계에서 OpenAI의 API 키 입력
2단계에서 Botpress의 API키 입력
5. 나의 GPTs를 Deploy 하기
ChatGPT에서 내가 작성한 GPTs를 열고, Deploy GPTs를 클릭하기
3단계에서 Workspace 버튼으로 GPTs를 Botpress와 연동하기
연동 과정 중에 멈추지 않도록 주의하기
Talk to your bot을 클릭하여 GPTs를 실행하기
Botpress의 챗봇 환경에서 GPTs 사용하기
위 URL을 이용하면 어디서나 접근할 수 있으므로 메시지 등으로 전달 가능
Botpress에서 내 계정의 대시보드에 등록된 GPTs 확인
6. 웹 페이지에 GPTs를 챗봇으로 넣기
챗봇을 추가할 테스트용 웹 페이지를 제작, Claude를 이용하여 웹 페이지의 구성과 컨텐츠 작성
Deploy GPTs에서 웹 사이트에 챗봇을 넣기 위한 코드를 복사
복사한 코드를 웹 페이지의 HTML 소스에 붙여넣기
나의 GPTs가 챗봇으로 추가된 것을 확인하기
챗봇의 동작을 테스트하기
netlify(https://www.netlify.com/)를 이용하여 GPTs 챗봇을 포함한 웹 페이지를 Deploy 하기
GPTs가 챗봇으로 추가된 웹 페이지 Cosmic Whisper(https://cosmic-whisper.netlify.app/) 완성
정리
OpenAI의 API 키는 누구나 만들 수 있으나, 실제로 사용하려면 Free Trial 이 있거나 유료 계정(ChatGPT 계정과 별개)이어야 합니다. (현재 20$를 결제해두었는데 얼마나 사용할 수 있을지 모르겠어요😅)
OpenAI와 Botpress에서 발급된 API키들은 다시 확인할 수 없으므로 발급 당시에 복사하여 잘 저장해둡니다.
아임웹이나 webflow 등에서 무료로 만든 웹 페이지에 Script를 추가하려면 유료 기능이라 안된다고 나옵니다. 따라서 다른 방법으로 웹 페이지를 제작해야 챗봇을 넣을 수 있어요.
주제에서 벗어나서 자세히 적지 않았으나, Claude를 이용하여 원하는 형태의 테스트용 웹 페이지를 제작할 수 있었습니다. HTML과 CSS로 기본적인 구성을 하고 컨 텐츠도 생성해주었어요.
Botpress를 이용하니 노코드로 어렵지 않게 챗봇을 만들수 있었습니다. API를 이용하는 노코드 툴들이 정말 매력적이라고 느꼈어요😍
#10기AiAtoZ