Keyframer

Connect it to your AI

Claude Code

claude mcp add --transport http keyframer https://api.keyframer.dev/mcp

Claude, ChatGPT, Cursor and other apps

Add it as a custom connector with this URL (Streamable HTTP):

https://api.keyframer.dev/mcp

This server expects extra headers, usually an API key from its maker.

Cursor, VS Code and other apps (mcp.json)

{
  "mcpServers": {
    "keyframer": {
      "url": "https://api.keyframer.dev/mcp"
    }
  }
}

Tools it offers

11 tools, as the server itself reported during our check on Oct 31, 2026.

• search_recipesSearch 150+ free Keyframer recipes (bounce, carousels, progress rings, particles, text effects, shaders, scroll animations…). Each recipe has a scene + verified React Native Reanimated code. Returns slugs for get_recipe.
• get_recipeFetch one recipe by slug: metadata, the scene JSON (usable as a starting point for create_scene), and the generated React Native Reanimated component code. Recipe code is free to use.
• get_scene_formatThe Keyframer scene JSON format — read this before authoring a scene. Section "scene" covers elements/keyframes/easing; section "nodes" covers node graphs (procedural animation: clocks, springs, repeaters) with the full
• validate_sceneValidate a scene against the Keyframer format before create_scene or generate_code. Returns errors (must fix) and warnings (advisory). Free to call — iterate until clean.
• sample_sceneNumerically preview a scene: evaluates keyframes AND node graphs at N evenly spaced times and returns each moving prop as a value series (the same math the editor preview runs). validate_scene checks structure — this che
• create_sceneSave a scene and get an editor URL where it opens in the visual editor (timeline, canvas, node graphs, mobile QR preview). Validates first. Works without a key: the scene is then a public 24-hour guest scene with a scann
• update_sceneReplace the content of one of your scenes (full scene JSON, validated first) — the edit loop for iterating instead of duplicating. Live previews watching the scene update in place. Requires an API key; own scenes only.
• list_scenesList the scenes in the connected Keyframer account (id, name, updated, visibility). Requires an API key.
• get_sceneFetch one of your scenes (or any public scene) as JSON — edit it and re-save with update_scene, or feed it to generate_code. Requires an API key.
• get_preview_qrA terminal-scannable QR code for a scene. Scan it with a phone camera and the scene runs live in the Keyframer preview app on real hardware — edits sync as they happen. Public scenes (including guest scenes) work without
• generate_codeCompile a scene into a runnable React Native component. Pass inline scene JSON or a scene_id from your account. Output targets Reanimated v4 by default ("animated" targets the RN core Animated API, reduced feature set).

Questions