사이트 챗봇
버튼이 생깁니다
오른쪽 아래 동그란 버튼
그런데 키를 페이지에
02 · 통념
키를 페이지에
방문자가 키를 봅니다
- ❌ 키를 HTML에 적기
- ⭕ 서버 쪽에만 두기
이 방법이 있습니다
03 · 반전
서버 쪽에 둡니다
Vercel이 값을 감춥니다
- 환경 변수에 키
- 접수처가 대신 물음
- 창은 chatbot.js
준비물부터 봅시다
04 · 준비물
사이트부터 필요합니다
배포된 사이트와 구글 계정
- 올라간 내 사이트
- 구글 계정
- 답할 내용
- 카드 등록은 하지 않음
준비됐으면 전체 그림부터
05 · 흐름
여섯 칸만 갑니다
내용부터 확인까지
1내용
2키
3Vercel
4접수처
5창
6확인
먼저 내용과 키부터
06 · 실행1
내용과 키부터
빈칸이면 지어냅니다
- 메모장에 가게 정보
- aistudio.google.com/apikey
- API 키 만들기
⚠️ 키를 코드에 넣지 마세요
✅ 확인: AIza로 시작하는 문자열
이제 Vercel에 넣습니다
07 · 실행2
키를 Vercel에
Key는 GEMINI_API_KEY
- Settings · Environment Variables
- Add Environment Variable
- Save
⚠️ 한 글자라도 다르면 못 찾음
✅ 확인: 값이 점으로 가려짐
이제 파일을 올립니다
08 · 실행3
파일 둘을 올립니다
api/chat.js와 chatbot.js
- Create new file
- Commit changes
- index.html에 script 한 줄
✅ 확인: Deployments 맨 위 Ready
막히면 이 표를 보세요
09 · 검수
점 세 개입니다
| 증상 | 조치 |
|---|---|
| 버튼 없음 | script가 </body> 위 |
| 답 못 가져옴 | Redeploy |
| 지어냄 | KNOWLEDGE를 숫자로 |
다 됐으면 이 목록만
