Keyframer Inspector — MCP-сервер для Claude Code: функции и установка
MCP-сервер связывает ИИ-агента с отладчиком анимаций мобильного приложения. Агент может записывать сценарии, изучать трассы и проверять исправления.
claude mcp add inspector -e KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> -- npx -y @keyframerdev/inspectorЧто делает 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; без этого значения команда не соответствует требуемой конфигурации.
Какие задачи решает
- записать анимации мобильного приложения и просмотреть их по кадрам
- найти анимацию, из-за которой пропускаются кадры
- поменять длительность или параметры пружины и применить их в коде
- сравнить записи до и после исправления
- передать агенту трассу и снимки экрана для проверки сценария
Примеры запросов агенту
- Запиши сценарий приложения и покажи анимации, которые приводят к пропускам кадров.
- Сравни две записи и найди, что изменилось после моей правки.
- Проверь сценарий повторно после исправления и покажи оставшиеся проблемы.
Как установить Keyframer Inspector
Командой платформы
claude mcp add inspector -e KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> -- npx -y @keyframerdev/inspectorВместо <…> подставьте свои значения
Командой платформы
codex mcp add keyframer-inspector --env KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> -- npx -y @keyframerdev/inspectorВместо <…> подставьте свои значения
Файл настроек
{
"mcpServers": {
"keyframer-inspector": {
"command": "npx",
"args": [
"-y",
"@keyframerdev/inspector"
],
"env": {
"KEYFRAMER_VITALS_READ_KEY": "<KEYFRAMER_VITALS_READ_KEY>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"servers": {
"keyframer-inspector": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@keyframerdev/inspector"
],
"env": {
"KEYFRAMER_VITALS_READ_KEY": "<KEYFRAMER_VITALS_READ_KEY>"
}
}
}
}Вместо <…> подставьте свои значения
Командой платформы
gemini mcp add -e KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> keyframer-inspector npx -y @keyframerdev/inspectorВместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Keyframer Inspector
Как установить Keyframer Inspector в Claude Code?
Выполните claude mcp add inspector -e KEYFRAMER_VITALS_READ_KEY=<KEYFRAMER_VITALS_READ_KEY> -- npx -y @keyframerdev/inspector.
Что делает Keyframer Inspector?
Он записывает и разбирает анимации мобильных приложений, а MCP-сервер передаёт агенту трассы, результаты сценариев и снимки экрана. Параметры анимации можно менять и применять к исходному коду.
Какие приложения подключаются к Keyframer Inspector?
SDK доступны для React Native с Reanimated, iOS с UIKit, Android с Views и Flutter. Приложения подключаются к desktop-приложению для macOS.
