# Keyframer Inspector

MCP-сервер связывает ИИ-агента с отладчиком анимаций мобильного приложения. Агент может записывать сценарии, изучать трассы и проверять исправления.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 4
- Автор: keyframer-dev
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/keyframer-dev/inspector
- Обновлён: 2026-10-23
- HTML: https://affpapa.org/nevibecode/mcp/keyframer-inspector

## Что делает

Keyframer Inspector помогает разбирать анимации в приложениях на React Native, iOS, Android и Flutter. Запись показывает места запуска анимаций, стоимость кадров и причины пропусков; параметры вроде длительности и пружины можно менять и применять к исходному коду. Две сессии можно сравнить до и после правки.

Встроенный MCP-сервер desktop-приложения передаёт агенту инструменты для записи приложения, запуска сценариев, чтения трасс и проблем, а также создания снимков экрана. Команды `check` и `recheck` помогают повторить измерение после изменения кода. Desktop-приложение работает на macOS, а записи и MCP-сервер остаются на Mac, пока пользователь не создаст ссылку для общего доступа.

Для подключения SDK нужны соответствующие приложение и среда разработки; React Native использует Babel-плагин, iOS — Swift Package Manager, Android — Gradle, Flutter — pub. В Claude Code команда установки запускает пакет через `npx` и задаёт `KEYFRAMER_VITALS_READ_KEY`; без этого значения команда не соответствует требуемой конфигурации.

## Требования
- Нужно: Node.js (команды через npx)
- Переменные окружения: `KEYFRAMER_VITALS_READ_KEY` — это ключи и токены: значения спроси у человека, в репозиторий и общие файлы не записывай.

## Установка

### Claude Code (родная платформа)

**Командой платформы**
```bash
claude mcp add inspector -e KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> -- npx -y @keyframerdev/inspector
```
Вместо <…> подставьте свои значения

### Codex

**Командой платформы**
```bash
codex mcp add keyframer-inspector --env KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> -- npx -y @keyframerdev/inspector
```
Вместо <…> подставьте свои значения

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "keyframer-inspector": {
            "command": "npx",
            "args": [
                "-y",
                "@keyframerdev/inspector"
            ],
            "env": {
                "KEYFRAMER_VITALS_READ_KEY": "<KEYFRAMER_VITALS_READ_KEY>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "keyframer-inspector": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@keyframerdev/inspector"
            ],
            "env": {
                "KEYFRAMER_VITALS_READ_KEY": "<KEYFRAMER_VITALS_READ_KEY>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add -e KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> keyframer-inspector npx -y @keyframerdev/inspector
```
Вместо <…> подставьте свои значения

## Когда брать
- записать анимации мобильного приложения и просмотреть их по кадрам
- найти анимацию, из-за которой пропускаются кадры
- поменять длительность или параметры пружины и применить их в коде
- сравнить записи до и после исправления
- передать агенту трассу и снимки экрана для проверки сценария

## Примеры запросов агенту
- Запиши сценарий приложения и покажи анимации, которые приводят к пропускам кадров.
- Сравни две записи и найди, что изменилось после моей правки.
- Проверь сценарий повторно после исправления и покажи оставшиеся проблемы.

## Похожие
- [mobile-mcp](https://affpapa.org/nevibecode/mcp/mobile-mcp.md) — MCP-сервер · ★ 10025
- [mobilerun](https://affpapa.org/nevibecode/mcp/mobilerun.md) — MCP-сервер · ★ 9833
- [e2e](https://affpapa.org/nevibecode/mcp/e2e.md) — MCP-сервер · ★ 11962
- [XcodeBuildMCP](https://affpapa.org/nevibecode/mcp/xcodebuildmcp.md) — MCP-сервер · ★ 6511
- [ShipSwift](https://affpapa.org/nevibecode/mcp/shipswift.md) — MCP-сервер · ★ 3244
- [agent-device](https://affpapa.org/nevibecode/mcp/agent-device.md) — MCP-сервер · ★ 5158

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md