View raw

Vercel integration#

One-click Clipkit for Vercel projects: install from the marketplace and your app can render video server-side without touching a key.

What the integration did#

Installing Clipkit from the Vercel Marketplace does exactly one thing:

  • Adds CLIPKIT_API_KEY to the Vercel projects you selected, as an encrypted environment variable on production, preview, and development.

That key belongs to your Clipkit team — you can see, rotate, or revoke it any time under API Keys. Redeploy after installing: environment variables only apply to new deployments.

There is no SDK to install. The render API is plain HTTPS.

Render a video from your project#

Clipkit renders video from JSON — a Source describing text, media, animation, and effects. Submit one from any server-side code (Route Handler, Server Action, cron):

"tok-cmt">// app/api/make-video/route.ts (Next.js Route Handler)
const source = {
  width: 1920, height: 1080, duration: 4, frame_rate: 30,
  elements: [{
    id: "title", type: "text", layer: 1, time: 0, duration: 4,
    text: "Hello from Vercel",
    x: 960, y: 540, x_anchor: "50%", y_anchor: "50%",
    font_family: "sans-serif", font_size: 88, font_weight: "bold",
    fill_color: "#ffffff",
  }],
};

export async function POST() {
  const submit = await fetch("https:">//www.clipkit.dev/api/v1/renders", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.CLIPKIT_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify(source),
  }).then((r) => r.json());

  let render;
  do {
    await new Promise((r) => setTimeout(r, 2500));
    render = await fetch(`https:"tok-cmt">//www.clipkit.dev/api/v1/renders/${submit.id}`, {
      headers: { Authorization: `Bearer ${process.env.CLIPKIT_API_KEY}` },
    }).then((r) => r.json());
  } while (render.status !== "done" && render.status !== "failed");

  return Response.json({ url: render.output_url });
}

output_url is a signed download link for the finished MP4. The link expires after an hour (the video does not) — call GET /api/v1/renders/{id} again any time for a fresh one, so fetch it on demand rather than storing it. For a permanent URL, download the file once and keep it in your own storage (Vercel Blob, S3). Rendering debits your Clipkit wallet; new accounts start with a free monthly grant.

Polling not your style? Add a webhook under Webhooks and Clipkit POSTs render.completed / render.failed to your endpoint instead.

To go past a title card: the quickstart walks the full API, examples are working Sources to copy, and the field reference covers every element type.

Embed the editor#

Every render is human-tweakable. The editor that powers clipkit.dev is an open-source npm package you can mount in your own app:

npm install @clipkit/editor
import { Editor, ADVANCED_CONFIGURATION } from "tok-str">'@clipkit/editor';
import "tok-str">'@clipkit/editor/styles.css';

<Editor initialSource={source} configuration={ADVANCED_CONFIGURATION} />

Browser-native with GPU preview; storage is an injected adapter (local IndexedDB out of the box, your backend when you bring one). See the editor docs.

Or let an agent do the composing#

Writing Source JSON by hand is optional. Connect the Clipkit MCP server (https://www.clipkit.dev/mcp) to Claude, Cursor, Codex, or any MCP client and describe the video in plain words — the agent composes, previews its own frames, and hands back an editor link. Per-client setup: agent quickstarts.

Agents already deployed on this project can render directly with the same env var: Authorization: Bearer $CLIPKIT_API_KEY against the API above.

Uninstalling#

Removing the integration in Vercel does not delete your Clipkit account or your renders. The API key stays valid until you revoke it under API Keys, and any CLIPKIT_API_KEY variables you want gone can be removed in your Vercel project settings.