개발자가 포트폴리오에 Groq API 기반 챗봇을 통합하여 방문자와 개인화된 대화형 상호작용을 구현한 과정을 단계별로 공개했다

Context

포트폴리오 웹사이트에는 방문자의 궁금증에 즉각 응답하는 기능이 없어 정보 접근성에 한계가 있었다. 개발자는 자기소개 챗봇을 직접 구현하면 AI 개발 역량을 보여주면서 방문자 경험도 개선할 수 있다고 판단했다. 구현 목표는 프로젝트, 경험, 관심사 등을 질문하면 답변하는 iREC라는 이름의 대화형 에이전트였다.

Technical Solution

• React 컴포넌트 → useState로 input과 messages 배열 상태 관리하고 메시지 제출 및 자동 스크롤 핸들러 구현
• POST 엔드포인트 → /api/chat 경로에서 Groq API와 통신하고 스트리밍 응답을 text/event-stream으로 반환
• 스트리밍 처리 → Response.body.getReader()로 청크 단위 수신 후 TextDecoder로 디코딩하고 실시간 UI 업데이트
• 시스템 프롬프트 → ROLE, KNOWLEDGE BASE, GOAL, RESTRICTIONS 구조로 개인정보 기반 응답 생성
• 가드레일 설정 → 커리어 관련 질문만 허용하고 악성 프롬프트와 허위 답변 방지

Impact

수치 기반 성능 변화 없음

Key Takeaway

프론트엔드 기술과 API 연동만으로 자신만의 데이터를 이해하는 AI 챗봇을 구축할 수 있다