SDK 연동

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

빠른 시작

CDN (HTML)

<!DOCTYPE html>
<html>
  <body>
    <!-- 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. API 키 설정 -->
    <script>
      const kit = document.querySelector('tap-kit');
      kit.apiKey = 'your-api-key';
    </script>
  </body>
</html>

npm (React)

npm install @coxwave/tap-kit

'use client';

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

function MyComponent() {
  const tapkit = useTapKit({
    apiKey: 'your-api-key',
    userId: 'user-123',
    courseId: 'course-456',
    clipId: 'clip-789',
    onReady: () => console.log('Ready!'),
  });

  return (
    <div>
      <button onClick={tapkit.show} disabled={!tapkit.isReady}>
        AI 튜터에게 질문하기
      </button>
      <TapKit control={tapkit.control} style={{ height: '600px' }} />
    </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();