API to build your own OpusClip-style clipping app

See pricing for what each source minute costs.

1. 1

   Take the upload

   Your server asks for an upload ticket, and the browser PUTs the file straight to upload_url within 1 hour. Big files never pass through your server.

   // Keep it behind your own sign-in: the ticket lets anyone holding it upload to your account
   export async function POST(request: Request) {
     const { filename, size } = await request.json();
   
     const res = await fetch("https://api.clipsdk.com/v1/uploads", {
       method: "POST",
       headers: {
         Authorization: `Bearer ${process.env.CLIPSDK_KEY}`,
         "Content-Type": "application/json",
       },
       body: JSON.stringify({ filename, size }),
     });
     return Response.json(await res.json(), { status: res.status });
   }
   
   // In the browser: the file goes straight to upload_url, never through your server
   const ticket = await fetch("/api/uploads", {
     method: "POST",
     body: JSON.stringify({ filename: file.name, size: file.size }),
   }).then((res) => res.json());
   await fetch(ticket.upload_url, { method: "PUT", body: file });

2. 2

   Start the job

   Send the ticket's video_url to POST /v1/clips with your webhook_url. Add a user's own brief in prompt, up to 500 characters, if your app asks for one.

   // app/api/clips/route.ts: keep it behind your own sign-in, it spends your credits
   export async function POST(request: Request) {
     const { videoUrl } = await request.json();
   
     const res = await fetch("https://api.clipsdk.com/v1/clips?wait=0", {
       method: "POST",
       headers: {
         Authorization: `Bearer ${process.env.CLIPSDK_KEY}`,
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
         video_url: videoUrl,
         webhook_url: `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}/api/clipsdk-webhook`,
       }),
     });
     return Response.json(await res.json(), { status: res.status });
   }

3. 3

   Take the webhook

   clipsdk POSTs the finished job, signed with HMAC-SHA256. Check the signature against the raw body, reject anything older than 5 minutes, then save the clips by job id.

   export async function POST(request: Request) {
     const raw = await request.text();
     const header = request.headers.get("Clipsdk-Signature") ?? "";
     if (!(await verify(raw, header, process.env.CLIPSDK_WEBHOOK_SECRET!))) {
       return new Response("Bad signature", { status: 401 });
     }
   
     // A job can arrive more than once, so save by job id
     const { event, job } = JSON.parse(raw);
     if (event === "job.succeeded") await saveClips(job.id, job.result.clips);
     return new Response("ok");
   }
   
   async function verify(raw: string, header: string, secret: string) {
     const { t, v1 = "" } = Object.fromEntries(header.split(",").map((part) => part.split("=")));
     if (!t || !/^[0-9a-f]{64}$/.test(v1) || Math.abs(Date.now() / 1000 - Number(t)) > 300) return false;
   
     const encoder = new TextEncoder();
     const key = await crypto.subtle.importKey("raw", encoder.encode(secret), { name: "HMAC", hash: "SHA-256" }, false, ["verify"]);
     const signature = Uint8Array.from(v1.match(/../g)!, (byte) => parseInt(byte, 16));
     return crypto.subtle.verify("HMAC", key, signature, encoder.encode(`${t}.${raw}`));
   }