Pinpoint — MCP-сервер для Claude Code: что делает и как установить
Передаёт ИИ-агенту селекторы, цепочки компонентов и скриншоты по клику на элемент в браузере или iOS Simulator. Помогает ставить задачи на правку интерфейса прямо из приложения.
claude mcp add --env PINPOINT_PORT=<PINPOINT_PORT> --transport stdio bridge -- npx -y pinpoint-bridgeЧто делает Pinpoint
Пакет pinpoint-bridge разворачивает локальный stdio MCP-сервер, который связывает работающий интерфейс с ассистентом. Вы выбираете нужную деталь интерфейса на веб-странице или нативном экране в iOS Simulator и вводите комментарий. Сервер собирает карточку правки: CSS-селектор, положение в DOM-дереве, вычисленные стили, иерархию компонентов, подсказку к файлу в кодовой базе и вырезанный скриншот.
Трафик не покидает пределы 127.0.0.1. Сервер выбора элементов для iOS Simulator доступен локально по адресу http://127.0.0.1:7331/ios. Если фоновый процесс моста не запущен, MCP-сервер автоматически считывает ранее сохранённые заметки.
Браузерного расширения нет в составе npm-пакета. Без клонирования исходного репозитория и запуска команды node pinpoint/bridge/cli.js setup передавать клики из веб-браузера не получится.
Какие задачи решает
- отправить агенту стили и скриншот нужной кнопки по клику
- передать селектор и путь в DOM из открытого браузера
- собрать контекст для правок мобильного экрана в iOS Simulator
- подсказать ассистенту путь к исходному файлу компонента
Примеры запросов агенту
- Проверь последнюю заметку из Pinpoint и поправь отступы у выбранного элемента
- Возьми селектор и стили из Pinpoint, чтобы изменить цвет активной кнопки
- Посмотри скриншот и цепочку компонентов из Pinpoint и найди этот блок в коде
Как установить Pinpoint
Командой платформы
claude mcp add --env PINPOINT_PORT=<PINPOINT_PORT> --transport stdio bridge -- npx -y pinpoint-bridgeВместо <…> подставьте свои значения
Командой платформы
codex mcp add bridge --env PINPOINT_PORT=<PINPOINT_PORT> -- npx -y pinpoint-bridgeВместо <…> подставьте свои значения
Файл настроек
{
"mcpServers": {
"bridge": {
"command": "npx",
"args": [
"-y",
"pinpoint-bridge"
],
"env": {
"PINPOINT_PORT": "<PINPOINT_PORT>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"servers": {
"bridge": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"pinpoint-bridge"
],
"env": {
"PINPOINT_PORT": "<PINPOINT_PORT>"
}
}
}
}Вместо <…> подставьте свои значения
Командой платформы
gemini mcp add -e PINPOINT_PORT=<PINPOINT_PORT> bridge npx -y pinpoint-bridgeВместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Pinpoint
Как установить Pinpoint в Claude Code?
Выполните команду claude mcp add pinpoint -- npx -y pinpoint-bridge. Если требуется задать порт, используйте вариант с переменной окружения: claude mcp add --env PINPOINT_PORT=<PINPOINT_PORT> --transport stdio bridge -- npx -y pinpoint-bridge.
Что передаёт Pinpoint ассистенту?
Сервер отдаёт комментарий разработчика, CSS-селектор, структуру DOM, цепочку компонентов, подсказку к файлу исходного кода и вырезанное изображение элемента.
Где взять расширение для браузера?
В npm-пакет расширение не включено. Склонируйте официальный репозиторий и запустите node pinpoint/bridge/cli.js setup.
