AI 튜터 챗봇

LMS에 쉽게 연동할 수 있는 AI 튜터 챗봇 위젯입니다.

🚀 빠른 시작

1. 의존성 설치

npm install
cd server && npm install

2. 빌드

npm run build  # 메인 파일 + 테마 파일 빌드

3. 서버 실행 (개발용)

cd server
npm start

4. 데모 확인

• 개발 모드: demo.html - 소스 파일 직접 사용
• 빌드 테스트: demo-dist.html - 빌드된 파일 사용

📦 빌드 시스템

빌드 명령어

npm run build        # 프로덕션 빌드 (압축)
npm run clean        # dist 폴더 정리
npm run dev          # 개발 모드 (감시)
npm run dev:server   # 개발 서버 실행

빌드 결과물

dist/
├── ai-tutor.esm.js     # ES6 모듈 버전 (37.1KB, 압축됨)
├── ai-tutor.min.js     # 일반 자바스크립트 버전 (37.6KB, 압축됨)
├── ai-tutor.umd.js     # UMD 래퍼 (한 번만 생성, 빌드 시 보존)
└── themes/
    ├── default.js      # 기본 테마 (자동 생성)
    └── dark.js         # 다크 테마 (자동 생성)

환경별 테마 로딩

• 개발 환경: src/css/, src/templates/에서 개별 파일 로드
• 프로덕션 환경: dist/themes/{theme}.js에서 번들된 테마 로드
• 자동 감지: 도메인과 프로토콜 기반으로 환경 자동 판별

📦 설치 및 사용법

1. NPM 설치

npm install ai-tutor

2. CDN 사용

JSDelivr (권장)

<!-- 일반 자바스크립트 버전 -->
<script src="https://cdn.jsdelivr.net/npm/ai-tutor/dist/ai-tutor.min.js"></script>

<!-- ES6 모듈 버전 -->
<script type="module">
  import { AITutor } from 'https://cdn.jsdelivr.net/npm/ai-tutor/dist/ai-tutor.esm.js';
</script>

UNPKG

<!-- 일반 자바스크립트 버전 -->
<script src="https://unpkg.com/ai-tutor/dist/ai-tutor.min.js"></script>

<!-- ES6 모듈 버전 -->
<script type="module">
  import { AITutor } from 'https://unpkg.com/ai-tutor/dist/ai-tutor.esm.js';
</script>

3. 사용법

일반 자바스크립트 방식

<!-- 1. 스크립트 추가 -->
<script src="https://cdn.jsdelivr.net/npm/ai-tutor/dist/ai-tutor.min.js"></script>

<!-- 2. 초기화 -->
<script>
const tutor = new AITutor({
    welcomeMessage: '안녕하세요! AI 튜터입니다. 궁금한 점이 있으면 언제든 물어보세요! 😊',
    environment: 'development',  // 개발: http://127.0.0.1:8787, 운영: https://aitutor.apiserver.kr
    width: 400,
    height: 600,
    theme: 'dark',
    suggestedQuestions: [
        '강의 내용을 요약해 주세요',
        '예제와 함께 알려주세요',
        '관련된 추가 정보가 있나요?'
    ]
});
</script>

ES6 모듈 방식

// NPM으로 설치한 경우
import { AITutor } from 'ai-tutor';

// 또는 CDN 사용
import { AITutor } from 'https://cdn.jsdelivr.net/npm/ai-tutor/dist/ai-tutor.esm.js';

const tutor = new AITutor({
    welcomeMessage: '안녕하세요! AI 튜터입니다.',
    environment: 'production',
    theme: 'default'
});

UMD 방식 (레거시 지원)

<script src="https://cdn.jsdelivr.net/npm/ai-tutor/dist/ai-tutor.umd.js"></script>
<script>
// UMD 래퍼를 통한 동적 로딩
const tutor = new AITutor({
    welcomeMessage: '안녕하세요!'
});
</script>

4. 설정 옵션

const tutor = new AITutor({
    // API 설정
    apiEndpoint: '/v1/chat',            // 채팅 API 엔드포인트 (선택사항)
    quizApiEndpoint: '/v1/quiz',        // 퀴즈 API 엔드포인트 (선택사항)
    apiKey: 'your-api-key',             // API 키 (선택사항)
    environment: 'production',          // 'development' 또는 'production'

    // UI 설정
    welcomeMessage: '안녕하세요!',       // 환영 메시지
    theme: 'default',                   // 테마 ('default' 또는 'dark')
    width: 350,                         // 창 너비 (픽셀)
    height: 500,                        // 창 높이 (픽셀)
    mobileFullscreen: true,             // 모바일에서 전체화면 사용

    // 추천 질문
    suggestedQuestions: [               // 초기 추천 질문 목록
        '강의 내용을 요약해 주세요',
        '예제와 함께 설명해 주세요'
    ]
});

환경별 API 엔드포인트

• development: http://127.0.0.1:8787
• production: https://aitutor.apiserver.kr

5. 제어 함수

// 챗봇 열기
tutor.show();

// 챗봇 닫기
tutor.hide();

// 챗봇 토글
tutor.toggle();

// 챗봇 제거
tutor.destroy();

// API 엔드포인트 변경
tutor.setApiEndpoint('https://new-api.com/v1/chat');

// API 키 설정
tutor.setApiKey('new-api-key');

🛠 API 서버 연동

챗봇은 다음과 같은 형식의 API를 기대합니다:

요청 (POST /api/chat)

{
    "message": "사용자 메시지",
    "history": [
        {
            "content": "이전 메시지",
            "sender": "user",
            "timestamp": "2023-01-01T00:00:00.000Z"
        }
    ]
}

응답

{
    "response": "AI 응답 메시지",
    "timestamp": "2023-01-01T00:00:00.000Z"
}

🎨 커스터마이징

CSS 변수로 테마 커스터마이징

:root {
    --ai-tutor-primary-color: #667eea;
    --ai-tutor-secondary-color: #764ba2;
    --ai-tutor-text-color: #333;
    --ai-tutor-bg-color: #fff;
    --ai-tutor-border-radius: 16px;
}

위치 커스터마이징

.ai-tutor-widget {
    bottom: 20px;
    right: 20px;
    /* 또는 */
    bottom: 20px;
    left: 20px;
}

📱 반응형 지원

• 데스크톱: 350px × 500px 고정 크기
• 모바일: 전체 화면 대응

🔧 개발 환경

개발 모드

npm run dev

프로덕션 빌드

npm run build

서버 개발 모드

cd server
npm run dev

📋 요구사항

• Node.js 14 이상
• 모던 브라우저 (ES6+ 지원)

🤝 기여하기

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

📄 라이선스

MIT License

🔗 링크

• 데모 사이트
• API 문서
• GitHub Repository