Persona.js AI 챗 위젯 만들기
중급45분8시간 전
디자인 상담, 자재 검색, 공정 안내처럼 웹페이지에 흩어져 있던 기능을 Persona.js 기반 AI 챗 위젯으로 하나로 묶고, AI가 페이지 기능을 호출할 수 있도록 WebMCP 도구와 SSE chat API를 연결합니다. 최종 결과물은 Persona.js 위젯이 삽입된 프론트엔드 예제 코드, WebMCP 도구 등록 코드, 그리고 `/api/chat` SSE 응답 예제가 포함된 백엔드 코드입니다.
이 실습은 터미널에서 진행됩니다
오른쪽 패널에서 설치 명령어를 복사하세요이런 걸 배워요
- Persona.js 위젯을 웹페이지에 삽입하는 흐름을 설명할 수 있습니다.
- AI가 페이지 기능을 호출하도록 WebMCP 도구를 등록할 수 있습니다.
- SSE 방식의 chat API 예제 구조를 이해할 수 있습니다.
- 디자인 상담, 자재 검색, 공정 안내 업무에 맞게 챗 위젯을 바꿀 수 있습니다.
어떻게 진행해요
1. 환경 확인
2. 예제 페이지 뼈대 만들기
3. 위젯 패키지 설치
4. 챗 위젯 삽입
5. 페이지 기능 도구 연결
6. SSE 응답 예제 작성
7. 연결 지점 검증
8. 인수인계 메모 작성
AI 튜터가 각 단계를 하나씩 안내해줄 거예요