Getting Started

5-minute quick start

For React and Next.js projects, we recommend the npm package.

1. Install the package

npm install @coxwave/tap-kit

2. Render the Chatbot

'use client';

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

export function CourseChatbot() {
  const tapkit = useTapKit({
    apiKey: 'your-api-key',
    userId: 'user-123',
    courseId: 'course-456',
    clipId: 'clip-789',
    mode: 'inline',
  });

  return <TapKit control={tapkit.control} style={{ height: '600px' }} />;
}

Next.js App Router

useTapKit uses browser APIs. Add 'use client' at the top of the component file.

3. Verify the installation

The basic installation is complete when:

The Chatbot area appears on the page.
The question input is enabled.
The browser console shows no TapKit initialization errors.
If course preprocessing is complete, the Chatbot answers questions about the lecture.

Common issues

Symptom	Check first
The Chatbot does not appear	The API key and Chatbot container height
The UI appears but does not answer	Course preprocessing and the `courseId` and `clipId` values
Next.js does not initialize	The `'use client'` directive
The CDN script does not load	CSP `script-src` and network firewall rules