# Keyframer Inspector

Connect an AI agent to a mobile animation debugger. It can capture app scenarios, inspect traces, and check changes after a fix.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 4
- Author: keyframer-dev
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/keyframer-dev/inspector
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/mcp/keyframer-inspector

## What it does

Keyframer Inspector captures animation activity in apps built with React Native, iOS, Android, or Flutter. Recordings link animations to their call sites and show frame costs and dropped-frame causes. You can adjust timing or spring values, apply the edits to source, and compare two sessions.

The desktop app includes an MCP server that lets an agent record an app, run scenarios, inspect traces and reported issues, and take screenshots. The `check` and `recheck` tools support another measurement after a code change. The desktop app runs on macOS; recordings and the MCP server stay on the Mac unless you create a share link.

Each mobile SDK has its own setup: React Native uses a Babel plugin, iOS uses Swift Package Manager, Android uses Gradle, and Flutter uses pub. The Claude Code install command starts the package with `npx` and sets `KEYFRAMER_VITALS_READ_KEY`, so that value is part of the required command configuration.

## Requirements
- Needs: Node.js (commands run via npx)
- Environment variables: `KEYFRAMER_VITALS_READ_KEY` — keys and tokens: ask the human for the values, never commit them or put them in shared files.

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add inspector -e KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> -- npx -y @keyframerdev/inspector
```
Replace <…> with your own values

### Codex

**Platform CLI**
```bash
codex mcp add keyframer-inspector --env KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> -- npx -y @keyframerdev/inspector
```
Replace <…> with your own values

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "keyframer-inspector": {
            "command": "npx",
            "args": [
                "-y",
                "@keyframerdev/inspector"
            ],
            "env": {
                "KEYFRAMER_VITALS_READ_KEY": "<KEYFRAMER_VITALS_READ_KEY>"
            }
        }
    }
}
```
Replace <…> with your own values

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "keyframer-inspector": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@keyframerdev/inspector"
            ],
            "env": {
                "KEYFRAMER_VITALS_READ_KEY": "<KEYFRAMER_VITALS_READ_KEY>"
            }
        }
    }
}
```
Replace <…> with your own values

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add -e KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> keyframer-inspector npx -y @keyframerdev/inspector
```
Replace <…> with your own values

## When to use it
- capture a mobile app animation session and scrub through its frames
- identify animations associated with dropped frames
- change animation timing or spring values and apply them to source
- compare recordings from before and after a code change
- give an agent traces and screenshots to inspect a scenario

## Example prompts
- Record an app scenario and show me which animations are linked to dropped frames.
- Compare these two recordings and report what changed after my edit.
- Run the scenario again after the fix and show any remaining issues.

## Similar
- [mobile-mcp](https://affpapa.org/en/nevibecode/mcp/mobile-mcp.md) — MCP server · ★ 10025
- [mobilerun](https://affpapa.org/en/nevibecode/mcp/mobilerun.md) — MCP server · ★ 9833
- [e2e](https://affpapa.org/en/nevibecode/mcp/e2e.md) — MCP server · ★ 11962
- [XcodeBuildMCP](https://affpapa.org/en/nevibecode/mcp/xcodebuildmcp.md) — MCP server · ★ 6511
- [ShipSwift](https://affpapa.org/en/nevibecode/mcp/shipswift.md) — MCP server · ★ 3244
- [agent-device](https://affpapa.org/en/nevibecode/mcp/agent-device.md) — MCP server · ★ 5158

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md