fetch
40줄 AI 챗봇과 페르소나
해결하는 문제
챗봇은 복잡한 서비스라고 생각한다.
HTML 안에서 fetch로 AI API를 부르면 40줄로 챗봇이 됩니다. 시스템 프롬프트 한 줄을 바꾸면 부산 아지매 봇, 조선 선비 봇이 됩니다.
서버 의존도
외부 AI·서비스의 API 키가 필요합니다. 키를 페이지에 넣어 배포하면 노출되므로 주의합니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것사용자 메시지와 페르소나
브라우저가 하는 일AI API에 대화 기록과 함께 전송
나오는 것캐릭터 말투의 답변
쓰는 브라우저 기술
fetchJSONDOM
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 시스템 프롬프트 (페르소나)
- 모델 선택
- 대화 기록 길이
자주 막히는 곳
- API 키를 HTML에 넣어 배포하면 누구나 가져갈 수 있다 (엣지 함수로 숨겨야 함)
- 브라우저에서 직접 호출을 막는 API가 있다 (CORS)
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 기관 맞춤 안내 챗봇
웹 서비스
- 역사 인물 대화 수업
피지컬 AI
- 로봇 대화 화면
넓히는 방법
- 로컬 AI(Ollama)로 바꿔 키 없이
- 음성 입력·읽어주기 결합
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
HTML 파일 하나로 AI API를 fetch로 부르는 40줄짜리 챗봇을 만들고, 맨 위의 시스템 프롬프트 한 줄만 바꾸면 말투가 바뀌게 해줘.
같은 분류의 능력
04 브라우저 속 AI에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md