Keyframer Inspector — Claude Code MCP server: features and setup
Connect an AI agent to a mobile animation debugger. It can capture app scenarios, inspect traces, and check changes after a fix.
claude mcp add inspector -e KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> -- npx -y @keyframerdev/inspectorWhat Keyframer Inspector 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.
What it helps with
- 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 for the agent
- 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.
How to install Keyframer Inspector
Platform CLI
claude mcp add inspector -e KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> -- npx -y @keyframerdev/inspectorReplace <…> with your own values
Platform CLI
codex mcp add keyframer-inspector --env KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> -- npx -y @keyframerdev/inspectorReplace <…> with your own values
Config file
{
"mcpServers": {
"keyframer-inspector": {
"command": "npx",
"args": [
"-y",
"@keyframerdev/inspector"
],
"env": {
"KEYFRAMER_VITALS_READ_KEY": "<KEYFRAMER_VITALS_READ_KEY>"
}
}
}
}Replace <…> with your own values
Config file
{
"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
Platform CLI
gemini mcp add -e KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> keyframer-inspector npx -y @keyframerdev/inspectorReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Keyframer Inspector
How do I install Keyframer Inspector in Claude Code?
Run claude mcp add inspector -e KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> -- npx -y @keyframerdev/inspector.
What does Keyframer Inspector do?
It records and examines animations in mobile apps. Its MCP server lets an agent run scenarios, inspect traces and issues, take screenshots, and check the app again after code changes.
Which app frameworks have an SDK?
The SDKs cover React Native with Reanimated, iOS with UIKit, Android with Views, and Flutter. They connect to the macOS desktop app.
