Keyframer MCP

An official MCP server for Keyframer that enables AI agents to author, validate, preview, and generate production-ready Reanimated v4 code for React Native animations. It provides tools to search recipes, create and update scenes, and generate QR codes for live mobile preview.

Endpoint and access

No sign-in to connect and list tools. Individual tools may still need a vendor account, credentials, or permissions; check the documented prerequisites.

Vendor evidenceStreamable HTTPNo sign-inEndpoint checked 2026-11-06Operated by Keyframer

You need:OAuth 2.1 sign-in (add the endpoint as a connector in Claude or ChatGPT and sign in when prompted) or `Authorization: Bearer kf_...` API keysAPI keys, created at https://keyframer.dev/app/profile?tab=mcpgenerate_code (paid plans)

MCP endpoint (Streamable HTTP)

https://api.keyframer.dev/mcp

Vendor documentation

What its tools do

11 tools, grouped by the hints the server advertises. Hints are self-declared, not verified behavior.

Can change data (2)

create_scene
update_scene

11 of 11 have a description · 11 of 11 declare behavior hints · 9 of 10 with parameters document them all

Checks and signals

Each line is separate evidence, not a trust score.

Passed Endpoint answered the live check · Nov 6, 2026, 11:36 PM UTC
Passed Official MCP Registry namespace is tied to keyframer.dev · Nov 6, 2026, 11:15 PM UTC
Passed Endpoint is on the registry namespace domain · Nov 6, 2026, 11:15 PM UTC
Availability 1 of 1 checks passed in 30 days

What you can do with it

Search and retrieve animation recipes
Create and validate declarative scene JSON
Generate Reanimated v4 code for production
Preview scenes live on mobile via QR

Source and maintenance

Vendor evidenceRegistry 1.0.0

mcp-registry: dev.keyframer/keyframer@1.0.0 Project website

Protocol and capabilities

Server: keyframer 1.0.0
MCP protocol negotiated in check: 2025-11-25
Tools: 11 advertised
Resources: Not advertised
Resource templates: Not advertised
Prompts: Not advertised

Server-advertised capabilities

{
  "tools": {
    "listChanged": true
  }
}

Server-provided instructions

Untrusted server output shown for inspection. It is not Koskamo guidance and is excluded from knowledge search.

Keyframer (keyframer.dev) is a visual animation editor that generates production React Native Reanimated v4 code. Workflow for building an animation: get_scene_format → author scene JSON → validate_scene (iterate until clean) → create_scene (opens in the visual editor, returns a phone-scannable QR) → update_scene to iterate → generate_code. For known patterns start from search_recipes/get_recipe — recipes include ready, verified code. No key needed for exploration or for create_scene (which then makes a public 24-hour guest scene the user can keep by signing up and pressing Remix). list_scenes/get_scene/update_scene need an API key; generate_code needs a key on a paid plan (Starter and up).

Tools

11 advertised

search_recipes — Search animation recipes

Advertised by the server during the last successful anonymous check.

Advertised read-only

Search 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.

search_recipes input schema

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "query"
  ],
  "properties": {
    "limit": {
      "type": "integer",
      "maximum": 25,
      "minimum": 1
    },
    "query": {
      "type": "string",
      "description": "What to build, e.g. \"snap carousel with parallax\" or \"countdown ring\""
    },
    "category": {
      "enum": [
        "guides",
        "keyframes",
        "node-graphs",
        "shaders",
        "timing",
        "gestures",
        "scroll-lists"
      ],
      "type": "string"
    }
  }
}

search_recipes annotations

{
  "readOnlyHint": true
}

get_recipe — Get a recipe (scene + code)

Advertised by the server during the last successful anonymous check.

Advertised read-only

Fetch 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_recipe input schema

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "properties": {
    "id": {
      "type": "string",
      "description": "Alias for slug — a scene id from a recipe works too"
    },
    "slug": {
      "type": "string",
      "description": "Recipe slug from search_recipes"
    },
    "scene_id": {
      "type": "string",
      "description": "When a recipe has several scenes, pick one (defaults to the first)"
    },
    "include_code": {
      "type": "boolean",
      "description": "Include generated code (default true)"
    }
  }
}

get_recipe annotations

{
  "readOnlyHint": true
}

get_scene_format — Scene format authoring guide

Advertised by the server during the last successful anonymous check.

Advertised read-only

The 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 node-type schema.

get_scene_format input schema

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "properties": {
    "section": {
      "enum": [
        "scene",
        "nodes"
      ],
      "type": "string",
      "description": "Default \"scene\""
    }
  }
}

get_scene_format annotations

{
  "readOnlyHint": true
}

validate_scene — Validate scene JSON

Advertised by the server during the last successful anonymous check.

Advertised read-only

Validate 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.

validate_scene input schema

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "scene"
  ],
  "properties": {
    "scene": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "object",
          "propertyNames": {
            "type": "string"
          },
          "additionalProperties": {}
        }
      ],
      "description": "The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape."
    }
  }
}

validate_scene annotations

{
  "readOnlyHint": true
}

sample_scene — Sample animation values over time

Advertised by the server during the last successful anonymous check.

Advertised read-only

Numerically 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 checks MOTION: confirm ranges, spring overshoot, stagger offsets, and that elements actually move before create_scene. Free to call — iterate: author → sample → adjust.

sample_scene input schema

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "scene"
  ],
  "properties": {
    "scene": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "object",
          "propertyNames": {
            "type": "string"
          },
          "additionalProperties": {}
        }
      ],
      "description": "The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape."
    },
    "samples": {
      "type": "integer",
      "maximum": 25,
      "minimum": 3,
      "description": "Sample count across the duration (default 9)"
    },
    "element_ids": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "description": "Only report these element ids"
    }
  }
}

sample_scene annotations

{
  "readOnlyHint": true
}

create_scene — Create a scene in Keyframer

Advertised by the server during the last successful anonymous check.

Save 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 scannable QR, kept forever by signing up (free) and pressing Remix. With a key it saves to the account (free accounts up to the free scene limit, paid unlimited).

create_scene input schema

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "scene"
  ],
  "properties": {
    "name": {
      "type": "string",
      "maxLength": 120,
      "description": "Scene name shown in the editor (default \"MCP scene\")"
    },
    "scene": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "object",
          "propertyNames": {
            "type": "string"
          },
          "additionalProperties": {}
        }
      ],
      "description": "The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape."
    },
    "make_public": {
      "type": "boolean",
      "description": "Make the scene publicly viewable — its share link (keyframer.dev/share/<id>) and QR then work for anyone, not just this account"
    }
  }
}

create_scene annotations

{
  "readOnlyHint": false,
  "idempotentHint": false,
  "destructiveHint": false
}

update_scene — Update a scene

Advertised by the server during the last successful anonymous check.

Advertised destructive

Replace 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.

update_scene input schema

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "scene_id",
    "scene"
  ],
  "properties": {
    "name": {
      "type": "string",
      "maxLength": 120,
      "description": "New name (unchanged if omitted)"
    },
    "scene": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "object",
          "propertyNames": {
            "type": "string"
          },
          "additionalProperties": {}
        }
      ],
      "description": "The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape."
    },
    "scene_id": {
      "type": "string",
      "description": "Scene id from create_scene or list_scenes"
    },
    "make_public": {
      "type": "boolean",
      "description": "Change public visibility (unchanged if omitted)"
    }
  }
}

update_scene annotations

{
  "readOnlyHint": false,
  "destructiveHint": true
}

list_scenes — List your scenes

Advertised by the server during the last successful anonymous check.

Advertised read-only

List the scenes in the connected Keyframer account (id, name, updated, visibility). Requires an API key.

list_scenes input schema

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "properties": {}
}

list_scenes annotations

{
  "readOnlyHint": true
}

get_scene — Get a scene

Advertised by the server during the last successful anonymous check.

Advertised read-only

Fetch 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_scene input schema

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "id"
  ],
  "properties": {
    "id": {
      "type": "string",
      "description": "Scene id from list_scenes or an editor URL"
    }
  }
}

get_scene annotations

{
  "readOnlyHint": true
}

get_preview_qr — Preview on device (QR)

Advertised by the server during the last successful anonymous check.

Advertised read-only

A 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 a key; private scenes need an API key on a paid plan.

get_preview_qr input schema

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "scene_id"
  ],
  "properties": {
    "scene_id": {
      "type": "string",
      "description": "Scene id from create_scene or list_scenes"
    }
  }
}

get_preview_qr annotations

{
  "readOnlyHint": true
}

generate_code — Generate React Native code

Advertised by the server during the last successful anonymous check.

Advertised read-only

Compile 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). Deterministic — no AI, no credits. Requires an API key on a paid plan.

generate_code input schema

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "properties": {
    "api": {
      "enum": [
        "reanimated",
        "animated"
      ],
      "type": "string",
      "description": "Default \"reanimated\""
    },
    "scene": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "object",
          "propertyNames": {
            "type": "string"
          },
          "additionalProperties": {}
        }
      ],
      "description": "The scene as a JSON object (preferred) or a JSON string. Call get_scene_format for the shape."
    },
    "scene_id": {
      "type": "string",
      "description": "Generate from a saved scene instead of inline JSON"
    },
    "relative_positioning": {
      "type": "boolean",
      "description": "Emit flex-relative layout instead of absolute coordinates"
    },
    "gesture_handler_version": {
      "enum": [
        "v2",
        "v3"
      ],
      "type": "string",
      "description": "react-native-gesture-handler major (default v2)"
    }
  }
}

generate_code annotations

{
  "readOnlyHint": true
}

Prompts

Not advertised

No prompt definitions available.

Resources

Not advertised

No resource definitions available.

90-day uptime

A lightweight connection check about every six hours, sampled on hosts with many listings. It shows the server answered, not that its tools work.

Too few checks for a percentage yet (1 of 1 answered).

2026-11-07: 1 of 1 checks answered

30-day availability

Aggregated from read-only remote checks; this is not a tool-execution or security guarantee.

Successful checks: 1 of 1 (100%)
Average latency: 3188 ms
95th percentile latency: 3188 ms

Maintenance history

Public check and source-refresh events. Editorial and ownership records remain private.

Nov 6, 2026, 11:36 PM UTC · probe · passed · 3188 ms · metadata changed · 11 tool(s)

Connect from your client

Each snippet registers the same endpoint; pick the client you use.

This server is operated by the named third party. Listing and endpoint checks are not an endorsement or a security audit. Review the operator's permissions, terms, and data handling before connecting. How listings are checked and corrected.

Claude Code

Run this once in a terminal. It registers the remote server. Use --scope project to write .mcp.json for the repo.

Claude Code configuration

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

Codex

Run this once. Codex stores MCP servers in ~/.codex/config.toml (or .codex/config.toml in a trusted project).

Codex configuration

codex mcp add keyframer-mcp --url https://api.keyframer.dev/mcp

Cursor

Merge this server into .cursor/mcp.json in your project, then enable keyframer-mcp in your MCP settings.

Cursor configuration

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

Cline

Merge this into cline_mcp_settings.json (Cline → MCP Servers → Configure).

Cline configuration

{
  "mcpServers": {
    "keyframer-mcp": {
      "type": "streamableHttp",
      "url": "https://api.keyframer.dev/mcp",
      "disabled": false
    }
  }
}

VS Code

Merge this server into .vscode/mcp.json. Use MCP: List Servers to start keyframer-mcp and inspect its tools.

VS Code configuration

{
  "servers": {
    "keyframer-mcp": {
      "type": "http",
      "url": "https://api.keyframer.dev/mcp"
    }
  }
}

Gemini CLI

Run this once. It writes .gemini/settings.json in the current project; pass --scope user for ~/.gemini/settings.json.

Gemini CLI configuration

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

Claude Desktop

Open Claude Settings > Connectors > Add custom connector, enter this server URL and enable it for the conversation. This is a manual remote-connector handoff, not a desktop JSON configuration.

Claude Desktop configuration

https://api.keyframer.dev/mcp

Windsurf

Merge this into ~/.codeium/windsurf/mcp_config.json, then refresh MCP in Cascade. Windsurf remote servers use serverUrl, not url.

Windsurf configuration

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

Let your agent find its tools

Find servers like Keyframer MCP from your agent. Add Koskamo once to search the index for endpoints, access requirements, and client setup. Public discovery needs no key.

Connect Koskamo Explore workflows

See all 8,787

Do you run Keyframer MCP?

Prove ownership with a DNS record, a well-known file, or your Official MCP Registry entry, and your edits publish immediately. Proofs are re-checked weekly; admins can still hide or remove a listing.

Claim this listing

Keyframer MCP

Endpoint and access

What its tools do

Read-only (9)

Can change data (2)

Checks and signals

What you can do with it

Source and maintenance

Protocol and capabilities

Server-provided instructions

Tools

Prompts

Resources

90-day uptime

30-day availability

Maintenance history

Connect from your client

Claude Code

Codex

Cursor

Cline

VS Code

Gemini CLI

Claude Desktop

Windsurf

Let your agent find its tools

Other developer tools servers

Do you run Keyframer MCP?