SDK 연동

TapKit는 Web Component 기반 API를 제공하여 모든 프레임워크에서 쉽게 사용할 수 있습니다.

아키텍처 개요

구성 요소	역할	업데이트
npm 패키지	진입점, React Hook	드물게
TapKit Core	실제 SDK 로직	자주 (자동)
iframe	채팅 UI	서버 배포

npm 패키지 업데이트 없이 CDN만 배포하면 모든 사용자가 최신 기능을 받습니다.

빠른 시작

CDN (HTML)

<!DOCTYPE html>
<html>
  <body>
    <!-- 비디오 플레이어 -->
    <video id="lecture-video" src="/lecture.mp4" controls></video>

    <!-- 1. CDN에서 로드 -->
    <script src="https://files.edutap.ai/tap-sdk/loader.js"></script>

    <!-- 2. TapKit 요소 추가 -->
    <tap-kit user-id="user-123" course-id="course-456" clip-id="clip-789"></tap-kit>

    <!-- 3. 플로팅 버튼 추가 (선택) -->
    <tap-button position="bottom-right" size="large"></tap-button>

    <!-- 4. API 키 및 비디오 연동 -->
    <script>
      const kit = document.querySelector('tap-kit');
      kit.apiKey = 'your-api-key';
      kit.videoTarget = document.getElementById('lecture-video');
    </script>
  </body>
</html>

<tap-button>은 화면 구석에 고정되는 플로팅 버튼입니다. 클릭하면 <tap-kit> 채팅창이 토글됩니다. position, size 속성으로 위치와 크기를 조절할 수 있습니다.

npm (React)

npm install @coxwave/tap-kit

'use client';

import { TapKit, useTapKit } from '@coxwave/tap-kit/react';
import { useRef } from 'react';

function VideoLearningPage() {
  const videoRef = useRef<HTMLVideoElement>(null);

  const tapkit = useTapKit({
    apiKey: 'your-api-key',
    userId: 'user-123',
    courseId: 'course-456',
    clipId: 'clip-789',
    videoTarget: videoRef.current,  // 비디오 동기화
    onReady: () => console.log('Ready!'),
    onTimelineSeek: (time, clipId) => {
      // 채팅에서 클릭 시 비디오 이동
      if (videoRef.current) videoRef.current.currentTime = time;
    },
  });

  return (
    <div className="flex gap-4">
      <video ref={videoRef} src="/lecture.mp4" controls className="flex-1" />
      <div className="w-[400px]">
        <button onClick={tapkit.show} disabled={!tapkit.isReady}>
          AI 튜터에게 질문하기
        </button>
        <TapKit control={tapkit.control} style={{ height: '600px' }} />
      </div>
    </div>
  );
}

npm (Non-React)

React 없이 Vanilla JavaScript/TypeScript에서 사용하려면 createTapKit 함수를 사용합니다.

npm install @coxwave/tap-kit

import { createTapKit } from '@coxwave/tap-kit';

const tapkit = createTapKit({
  apiKey: 'your-api-key',
  userId: 'user-123',
  courseId: 'course-456',
  clipId: 'clip-789',

  // Advanced options (테스트/개발용)
  apiUrl: 'https://tapapistaging.coxwave.link',
  environment: 'staging',

  // Event handlers
  onReady: () => console.log('Ready!'),
  onTimelineSeek: (time, clipId) => {
    videoElement.currentTime = time;
  },
});

// DOM에 추가 (필수)
tapkit.mount();

// 초기화 완료 대기
await tapkit.ready;

// 채팅 표시
tapkit.show();

// 정리
tapkit.destroy();