# Pinpoint

Передаёт ИИ-агенту селекторы, цепочки компонентов и скриншоты по клику на элемент в браузере или iOS Simulator. Помогает ставить задачи на правку интерфейса прямо из приложения.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 9
- Автор: gowtham012
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/gowtham012/PinPoint/tree/HEAD/bridge
- Обновлён: 2026-10-22
- HTML: https://affpapa.org/nevibecode/mcp/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` передавать клики из веб-браузера не получится.

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

## Установка

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

**Командой платформы**
```bash
claude mcp add --env PINPOINT_PORT=<PINPOINT_PORT> --transport stdio bridge -- npx -y pinpoint-bridge
```
Вместо <…> подставьте свои значения

### Codex

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

### Cursor

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

### GitHub Copilot

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

### Gemini CLI

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

## Когда брать
- отправить агенту стили и скриншот нужной кнопки по клику
- передать селектор и путь в DOM из открытого браузера
- собрать контекст для правок мобильного экрана в iOS Simulator
- подсказать ассистенту путь к исходному файлу компонента

## Примеры запросов агенту
- Проверь последнюю заметку из Pinpoint и поправь отступы у выбранного элемента
- Возьми селектор и стили из Pinpoint, чтобы изменить цвет активной кнопки
- Посмотри скриншот и цепочку компонентов из Pinpoint и найди этот блок в коде

## Похожие
- [browser-screenshot-diff](https://affpapa.org/nevibecode/skills/browser-screenshot-diff.md) — скилл · 696 установок
- [argent-screenshot-diff](https://affpapa.org/nevibecode/skills/argent-screenshot-diff.md) — скилл · 25000 установок
- [unbrowser by Unchained](https://affpapa.org/nevibecode/mcp/unbrowser-by-unchained.md) — MCP-сервер · ★ 16
- [browser-screenshot](https://affpapa.org/nevibecode/skills/browser-screenshot.md) — скилл · 4100 установок
- [expo-dom](https://affpapa.org/nevibecode/skills/expo-dom.md) — скилл · 21000 установок
- [browser-gateway](https://affpapa.org/nevibecode/mcp/browser-gateway.md) — MCP-сервер · ★ 18

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