@overlap.ai/clip-creator NPM

Overlap Clip Creator

A React component for creating and managing video clips using Overlap's AI technology.

Installation

npm install @overlap.ai/clip-creator

Usage

The ClipCreator component comes with all necessary styles bundled - no additional CSS configuration required.

import { ClipCreator } from '@overlap.ai/clip-creator';

function App() {
  return (
    <div className="container mx-auto p-4">
      <ClipCreator
        primaryColor="#007AFF"  // Your brand color
        companyId="your-company-id"  // From Overlap dashboard
        apiKey="your-api-key"  // From Overlap dashboard
        workflowId="your-workflow-id"  // From Overlap dashboard
        nodeId="your-node-id"  // From Overlap dashboard
      />
    </div>
  );
}

Props

Prop	Type	Required	Description
primaryColor	string	No	The primary color used for buttons and accents. Defaults to "#007AFF"
companyId	string	Yes	Your Overlap company ID
apiKey	string	Yes	Your Overlap API key
workflowId	string	Yes	The ID of the workflow to trigger
nodeId	string	Yes	The ID of the node in the workflow

Features

Upload videos or use YouTube URLs
AI-powered video reframing (16:9 or 9:16)
Multiple subtitle styles
Real-time progress tracking
View and manage previous clips
Responsive design

Example with Custom Styling

import { ClipCreator } from '@overlap.ai/clip-creator';

function VideoEditor() {
  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-7xl mx-auto px-4">
        <h1 className="text-2xl font-bold mb-6">Video Editor</h1>
        
        <div className="bg-white rounded-xl overflow-hidden h-[800px]">
          <ClipCreator
            primaryColor="#0066FF"
            companyId="your-company-id"
            apiKey="your-api-key"
            workflowId="your-workflow-id"
            nodeId="your-node-id"
          />
        </div>
      </div>
    </div>
  );
}