Claude Code#

Wire ClipKit into Claude Code — Anthropic's terminal coding agent — so Claude can author, validate, preview, and render ClipKit videos from your shell.

Two ways to use ClipKit#

Claude Code is a coding agent, so it can work with ClipKit two ways — call ClipKit's hosted MCP tools, or write code against ClipKit's npm packages right in your repo. Both are first-class; pick by where you want the video to live.

	MCP tools (hosted)	npm packages (code)
Wire-up	one `claude mcp add` command	`npx @clipkit/cli init` in your repo
The agent	calls tools (`add_element`, `preview_still`, `render_video`)	edits a `video.ts` Source, runs `clipkit validate` / render
Your video is	scratch state on clipkit.dev, shareable by link	a `video.ts` in your repo — version-controlled, reviewable
Installs	nothing	`@clipkit/cli`, `@clipkit/protocol`, `@clipkit/runtime`
Best for	quick authoring, preview stills inline	videos that live in your codebase, CI renders, reuse

They're not exclusive — wire the MCP tools for fast iteration and keep finished videos as code. New to ClipKit? Start with the connector (Option A) — it's zero-install.

Option A — hosted MCP connector#

One command:

claude mcp add --transport http clipkit https://www.clipkit.dev/mcp

That adds it for the current project (just you). To make ClipKit available in every project, use the user scope:

claude mcp add --transport http clipkit https://www.clipkit.dev/mcp -s user

Prefer to edit config by hand? Add this to .mcp.json (project) or ~/.claude.json (user):

{
  "mcpServers": {
    "clipkit": {
      "type": "http",
      "url": "https://www.clipkit.dev/mcp"
    }
  }
}

Verify the connector#

Run /mcp inside Claude Code — clipkit should show as connected with a tool count. From the shell, claude mcp list shows its status. Then ask Claude to "list the ClipKit tools."

Option B — npm packages (code)#

No MCP server involved — Claude Code writes ClipKit code directly in your project. Scaffold once:

npx @clipkit/cli init my-video
cd my-video && npm install

That pins @clipkit/cli, @clipkit/protocol, and @clipkit/runtime, writes a starter video.ts (a plain, typed Source object), and drops an AGENTS.md that Claude Code auto-loads as authoring context. Then ask Claude to:

edit video.ts — typed by @clipkit/protocol, so the schema drives its edits;
npx clipkit validate video.ts — the same Zod check the runtime and the MCP server run;
render — @clipkit/renderer locally, or POST the Source to the hosted API.

Add @clipkit/patterns for prebuilt scene and data-viz units, @clipkit/lint for soft checks. Full walkthrough: Quickstart.

Notes#

The connector flag is --transport http, not --transport streamable-http. (streamable-http is only valid as a type alias inside JSON config.)
Don't use --transport sse — SSE is deprecated, and ClipKit's connector is single-endpoint Streamable HTTP.
The hosted connector needs no auth — don't pass a --header or token. A CLIPKIT_API_KEY (Settings → API keys) is only needed for the paid render path in Option B (clipkit render / the hosted render API), never by the connector.
A checked-in project-scoped .mcp.json server starts as "pending approval" — approve it once in an interactive claude session.

New to the tools? The MCP server overview has the full tool list and how projects work.