SDK Integration
How to integrate TapKit into your project
TapKit provides a Web Component-based API that works easily with any framework.
Architecture Overview
| Component | Role | Updates |
|---|---|---|
| npm package | Entry point, React Hook | Rarely |
| TapKit Core | Actual SDK logic | Frequently (auto) |
| iframe | Chat UI | Server deploy |
Users automatically receive the latest features when we deploy CDN updates — no npm package update required.
Quick Start
CDN (HTML)
<!DOCTYPE html>
<html>
<body>
<!-- Video player -->
<video id="lecture-video" src="/lecture.mp4" controls></video>
<!-- 1. Load from CDN -->
<script src="https://files.edutap.ai/tap-sdk/loader.js"></script>
<!-- 2. Add TapKit element -->
<tap-kit user-id="user-123" course-id="course-456" clip-id="clip-789"></tap-kit>
<!-- 3. Add floating button (optional) -->
<tap-button position="bottom-right" size="large"></tap-button>
<!-- 4. Set API key and connect video -->
<script>
const kit = document.querySelector('tap-kit');
kit.apiKey = 'your-api-key';
kit.videoTarget = document.getElementById('lecture-video');
</script>
</body>
</html><tap-button> is a floating button fixed to a corner of the screen. Clicking it toggles the <tap-kit> chat window. Use position and size attributes to adjust placement and dimensions.
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, // Video sync
onReady: () => console.log('Ready!'),
onTimelineSeek: (time, clipId) => {
// Seek video when clicking in chat
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}>
Ask AI Tutor
</button>
<TapKit control={tapkit.control} style={{ height: '600px' }} />
</div>
</div>
);
}npm (Non-React)
To use with Vanilla JavaScript/TypeScript without React, use the createTapKit function.
npm install @coxwave/tap-kitimport { createTapKit } from '@coxwave/tap-kit';
const tapkit = createTapKit({
apiKey: 'your-api-key',
userId: 'user-123',
courseId: 'course-456',
clipId: 'clip-789',
// Advanced options (for testing/development)
apiUrl: 'https://tapapistaging.coxwave.link',
environment: 'staging',
// Event handlers
onReady: () => console.log('Ready!'),
onTimelineSeek: (time, clipId) => {
videoElement.currentTime = time;
},
});
// Add to DOM (required)
tapkit.mount();
// Wait for initialization
await tapkit.ready;
// Show chat
tapkit.show();
// Cleanup
tapkit.destroy();For React projects, use the useTapKit Hook instead of createTapKit.
Lifecycle management is handled automatically.
Distribution Methods
| Method | Advantages | Recommended For |
|---|---|---|
| CDN | No installation, auto updates | Static HTML, legacy projects |
| npm | TypeScript support, bundler optimization | React, Vue, Next.js |
The createTapKit() function is available in both CDN and npm. See API Reference.
Legacy API
The new TapKit() API from v1.x is deprecated.
For existing projects, see the Migration Guide.