내가 만든 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
