keyframe-mcp

keyframe-mcp

An MCP server that lets Claude — or any MCP client — rig, animate and export 2D skeletal animations by driving Keyframe.it, a free browser-based animation editor for game sprites.

It opens the editor in your own Chrome and exposes Keyframe.it's window.keyframe scripting API (150+ methods) as tools. Rendered frames, clips and assets come back as real images, so the model sees the art it's working on — and the finished rig is sitting in your browser, ready to keep editing.

Exports are Spine-compatible bundles (3.8 / 4.2 — .json or binary .skel + .atlas + .png) that load in pixi-spine and other Spine runtimes. Free, no account, nothing uploaded.

Install

Claude Code

claude mcp add keyframe -- npx -y keyframe-mcp

Claude Desktop / Cursor / any MCP client — add to your MCP config:

{
  "mcpServers": {
    "keyframe": {
      "command": "npx",
      "args": ["-y", "keyframe-mcp"]
    }
  }
}

Requires Node 18+ and Google Chrome installed. It drives your existing Chrome — no browser download.

Usage

Ask your assistant something like:

Open Keyframe.it, load the noir example, and make a 2-second idle animation where she breathes and her hair sways. Show me the result.

The assistant calls keyframe_open, reads the API with keyframe_methods, then works through keyframe_call. For multi-step jobs it should read the built-in recipes first (keyframe_call {method: "recipes"}) — they encode the right order of operations for slicing sheets, rigging, meshing and weights, idle loops, walk cycles and win FX.

Tools

Tool	What it does
keyframe_open {url?}	Open the editor (launches Chrome on first use, reuses the tab after). Returns an overview. Call first.
keyframe_methods	List every scripting method with a one-line description.
keyframe_call {method, args?}	Call any window.keyframe method. Image results (renderFrame, renderClip, getAssetPng) return as actual images.
keyframe_screenshot	Screenshot the whole editor UI (rarely needed).

Environment

Variable	Default	Meaning
KEYFRAME_URL	https://www.keyframe.it.com/	Editor URL — set http://localhost:5173 to drive a local dev build
KEYFRAME_HEADLESS	1	Set 0 to watch the work happen in a visible Chrome window

Tip: KEYFRAME_HEADLESS=0 is genuinely fun the first time — you watch bones and keyframes appear as the model works.

Docs

The scripting surface is documented in the editor (window.keyframe.help()) and at keyframe.it.com/llms.txt. For the whole product in one fetch, see llms-full.txt.

License

MIT — see LICENSE. This covers the connector; the Keyframe.it editor is a separate hosted application.