# Clipkit > Clipkit is the JSON-native video infra for agents. A GPU-rendered engine that turns a structured JSON timeline (the Clipkit Protocol, CKP/1.0) into a finished MP4. Protocol and tooling are Apache-2.0; the engine is source-available (BSL 1.1, converts to Apache-2.0 after four years, free production tier); hosted rendering is a paid managed service. The docs below are also available as raw markdown by appending `.md` to any page URL (for example, `/docs/quickstart.md`). Every page lives under one canonical URL — no duplicate or paginated content. ## Get started - [Quickstart](https://www.clipkit.dev/docs/quickstart.md): Five-minute path from npx to a rendered MP4. - [Architecture: the five layers](https://www.clipkit.dev/docs/architecture.md): How Clipkit fits together: JSON protocol, GPU runtime, embeddable editor, agent tooling, and hosted rendering. What each layer is for, what it costs, and which one you want. - [Examples](https://www.clipkit.dev/docs/examples.md): Working Clipkit Sources you can copy. - [Agent authoring card](https://www.clipkit.dev/docs/agent-card.md): The ~8KB compact context for LLM agents authoring Clipkit videos. ## Pattern cards - [Pattern card: data-viz](https://www.clipkit.dev/docs/patterns/data-viz.md): Count-up flipbooks, growing bars, KPI rows — proven idioms for data scenes. - [Pattern card: cinematic-ui](https://www.clipkit.dev/docs/patterns/cinematic-ui.md): Camera rigs, 3D panel tilts, light sweeps — proven idioms for product hero shots. - [Pattern card: ui-screencast](https://www.clipkit.dev/docs/patterns/ui-screencast.md): Window chrome, typing, cursor travel, state transitions — proven idioms for faked app UI. ## Agent quickstarts - [Claude Code — MCP quickstart](https://www.clipkit.dev/docs/mcp/claude-code.md): Connect Clipkit's MCP server to Claude Code. - [Claude Desktop — MCP quickstart](https://www.clipkit.dev/docs/mcp/claude-desktop.md): Connect Clipkit's MCP server to Claude Desktop. - [Codex CLI — MCP quickstart](https://www.clipkit.dev/docs/mcp/codex.md): Connect Clipkit's MCP server to the Codex CLI. - [OpenAI API — MCP quickstart](https://www.clipkit.dev/docs/mcp/openai-api.md): Use Clipkit's MCP server from the OpenAI API (Responses / Agents). - [ChatGPT — MCP quickstart](https://www.clipkit.dev/docs/mcp/chatgpt.md): Connect Clipkit's MCP server to ChatGPT. - [Grok — MCP quickstart](https://www.clipkit.dev/docs/mcp/grok.md): Connect Clipkit's MCP server to Grok (xAI). - [Cursor — MCP quickstart](https://www.clipkit.dev/docs/mcp/cursor.md): Connect Clipkit's MCP server to Cursor. - [Cline — MCP quickstart](https://www.clipkit.dev/docs/mcp/cline.md): Connect Clipkit's MCP server to Cline. - [Gemini CLI — MCP quickstart](https://www.clipkit.dev/docs/mcp/gemini-cli.md): Connect Clipkit's MCP server to the Gemini CLI. - [Zed — MCP quickstart](https://www.clipkit.dev/docs/mcp/zed.md): Connect Clipkit's MCP server to the Zed editor. - [Nous Hermes — MCP quickstart](https://www.clipkit.dev/docs/mcp/hermes.md): Connect Clipkit's MCP server to Nous Hermes. - [MCP Inspector — quickstart](https://www.clipkit.dev/docs/mcp/inspector.md): Explore Clipkit's MCP server with the MCP Inspector. - [OpenClaw — MCP quickstart](https://www.clipkit.dev/docs/mcp/openclaw.md): Connect Clipkit's MCP server to OpenClaw. ## Core - [Clipkit Protocol (CKP/1.0)](https://www.clipkit.dev/docs/protocol.md): The normative JSON spec the runtime implements. - [Authoring guide](https://www.clipkit.dev/docs/agents.md): Patterns, recipes, conventions for AI agents and humans authoring Clipkit videos. ## Fields - [Fields overview](https://www.clipkit.dev/docs/fields.md): How Source > Element > variant fields are layered. - [Source root fields](https://www.clipkit.dev/docs/fields/source.md): width, height, duration, frame_rate, output_format, elements. - [Common element fields](https://www.clipkit.dev/docs/fields/common.md): id, type, time, transform, opacity, animations — shared by every element. - [text element fields](https://www.clipkit.dev/docs/fields/text.md): Static + template text with full typographic styling and reveal masks. - [shape element fields](https://www.clipkit.dev/docs/fields/shape.md): Rectangles, ellipses, polygons, gradients, strokes. - [image element fields](https://www.clipkit.dev/docs/fields/image.md): Static images with fit modes and color filters. - [video element fields](https://www.clipkit.dev/docs/fields/video.md): Video clips with trim, loop, playback rate, and volume. - [audio element fields](https://www.clipkit.dev/docs/fields/audio.md): Standalone audio with trim, loop, volume. - [caption element fields](https://www.clipkit.dev/docs/fields/caption.md): Word-timed captions with kinetic animation styles. - [group element fields](https://www.clipkit.dev/docs/fields/group.md): Nested element groups with their own coordinate system. - [particles element fields](https://www.clipkit.dev/docs/fields/particles.md): Deterministic particle systems — confetti, sparks, logo convergence. ## Tooling - [CLI](https://www.clipkit.dev/docs/cli.md): clipkit init, validate, preview, render. - [MCP server](https://www.clipkit.dev/docs/mcp.md): Expose Clipkit to Claude, Cursor, and any MCP host. - [Renderer](https://www.clipkit.dev/docs/renderer.md): Render a Source to MP4 locally — headless Chrome + WebCodecs. - [Editor](https://www.clipkit.dev/docs/editor.md): Embeddable, open-source timeline editor (@clipkit/editor). - [Vercel integration](https://www.clipkit.dev/docs/vercel.md): What the marketplace install did (CLIPKIT_API_KEY in your project env) and how to render from your Vercel app. ## Brand - [Brand reference](https://www.clipkit.dev/docs/brand.md): Voice, colors, typography, and asset guidelines. ## Guides & comparisons - [Clipkit vs Remotion: JSON video infra vs React video framework](https://www.clipkit.dev/compare/clipkit-vs-remotion): Clipkit and Remotion solve programmatic video differently: JSON protocol vs React framework. Measured benchmarks, honest tradeoffs, and when to pick each. - [Clipkit vs JSON2Video: two takes on JSON-defined video](https://www.clipkit.dev/compare/clipkit-vs-json2video): Both render video from JSON. The difference is where rendering happens and what it costs. Browser WebGPU vs cloud-only, schemas, MCP support, and pricing compared. - [Remotion alternatives in 2026 (from someone who benchmarked them)](https://www.clipkit.dev/compare/remotion-alternative): Evaluating Remotion alternatives? Honest comparison of Clipkit, Creatomate, JSON2Video and staying with Remotion, with token, validity, and render-speed benchmarks. - [Clipkit vs HyperFrames: JSON protocol vs HTML as the video substrate](https://www.clipkit.dev/compare/clipkit-vs-hyperframes): HeyGen's HyperFrames renders HTML to video; Clipkit renders a validated JSON protocol on the GPU. Measured agent benchmarks, real tradeoffs, and when to pick each. - [How to make videos with Claude (MCP, start to finished MP4)](https://www.clipkit.dev/blog/how-to-make-videos-with-claude): Give Claude a video toolbox via MCP and go from a prompt to a rendered MP4. Setup for Claude Desktop, Claude Code, and the API. No video editor required. - [Agentic video editing, explained](https://www.clipkit.dev/blog/agentic-video-editing): What happens when the editor is an agent: how AI agents author, validate, and render video through structured formats and MCP, and why determinism decides what ships. - [Give your AI agent a video tool (MCP)](https://www.clipkit.dev/blog/give-your-agent-a-video-tool): A working MCP video setup for any agent framework: tool definitions, validation loops, and rendering, with the schema design choices that keep agents at 100% validity. - [The open-source video editor for the web](https://www.clipkit.dev/open-source-video-editor): An Apache-2.0 timeline video editor that runs in the browser and embeds in your app as a React component. Your storage, free in-browser export, agent-ready. - [Build a canvas video editor (or embed one)](https://www.clipkit.dev/blog/canvas-video-editor): What building a browser canvas video editor actually involves: document model, GPU compositor, WebCodecs export, determinism. And the Apache-2.0 embed shortcut. - [Add a video editor to your React app](https://www.clipkit.dev/blog/react-video-editor): Step-by-step: embed an Apache-2.0 timeline video editor in React. Three-line component, your storage via adapters, free in-browser MP4 export via WebCodecs. ## Optional - [All docs concatenated](https://www.clipkit.dev/llms-full.txt): Every doc page bundled into one markdown file. Useful as a single context attachment. - [GitHub repo](https://github.com/clipkit-video/clipkit): Source for the runtime, schema, CLI, MCP server, and these docs.