# ui-ticket-mcp

Кликаете по элементу в браузере, пишете замечание — агент читает его через MCP и правит код. Пригодится, когда вёрстку проще показать, чем описать словами.

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

## Что делает

Сервер поднимает один Python-процесс и держит сразу два канала: MCP по stdio для агента и REST API по HTTP для панели в браузере. Замечания складываются в SQLite внутри проекта, в `.reviews/reviews.db`. Агенту доступны 10 инструментов — он читает список замечаний, находит исходный файл и закрывает их.

Со стороны фронтенда ставится веб-компонент `ui-ticket-panel`. В корневой шаблон добавляется `<review-panel api-url="http://localhost:3200/api"></review-panel>`, а в точке входа приложения вызывается `defineReviewPanel()`. Работает в Angular, React, Vue, Svelte и просто в HTML; для SSR-фреймворков нужен динамический импорт на клиенте. Без сборщика компонент подключается скриптом с unpkg.

Разметку замечания можно вешать прямо на элемент: Alt+A включает режим аннотации, клик по кнопке или блоку прикрепляет к нему CSS-селектор, координаты, вычисленные стили, текст соседей и ARIA-роли. В `.mcp.json` обязателен `PROJECT_ROOT` — без него сервер не поймёт, где искать исходники и куда писать базу. Порт по умолчанию 3200, но если он занят, задайте свой через `REVIEW_PORT` и укажите тот же адрес в атрибуте `api-url`. Лендинг `https://uiticket.0ics.ai/` — не эндпоинт, обращаться к нему из панели бессмысленно.

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

## Установка

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

**Командой платформы**
```bash
claude mcp add --env PROJECT_ROOT=<PROJECT_ROOT> --env REVIEW_PORT=<REVIEW_PORT> --transport stdio ui-ticket-mcp -- uvx ui-ticket-mcp
```
Вместо <…> подставьте свои значения. uvx запускает команду с именем пакета; если в README она другая — uvx --from ui-ticket-mcp <команда>

### Codex

**Командой платформы**
```bash
codex mcp add ui-ticket-mcp --env PROJECT_ROOT=<PROJECT_ROOT> --env REVIEW_PORT=<REVIEW_PORT> -- uvx ui-ticket-mcp
```
Вместо <…> подставьте свои значения. uvx запускает команду с именем пакета; если в README она другая — uvx --from ui-ticket-mcp <команда>

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "ui-ticket-mcp": {
            "command": "uvx",
            "args": [
                "ui-ticket-mcp"
            ],
            "env": {
                "PROJECT_ROOT": "<PROJECT_ROOT>",
                "REVIEW_PORT": "<REVIEW_PORT>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения. uvx запускает команду с именем пакета; если в README она другая — uvx --from ui-ticket-mcp <команда>

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "ui-ticket-mcp": {
            "type": "stdio",
            "command": "uvx",
            "args": [
                "ui-ticket-mcp"
            ],
            "env": {
                "PROJECT_ROOT": "<PROJECT_ROOT>",
                "REVIEW_PORT": "<REVIEW_PORT>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения. uvx запускает команду с именем пакета; если в README она другая — uvx --from ui-ticket-mcp <команда>

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add -e PROJECT_ROOT=<PROJECT_ROOT> -e REVIEW_PORT=<REVIEW_PORT> ui-ticket-mcp uvx ui-ticket-mcp
```
Вместо <…> подставьте свои значения. uvx запускает команду с именем пакета; если в README она другая — uvx --from ui-ticket-mcp <команда>

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

## Примеры запросов агенту
- Посмотри открытые замечания через `get_review_summary` и скажи, на каких страницах их больше всего
- Возьми замечание про отступы на карточке товара и поправь стили в исходнике
- Покажи список открытых ревью для страницы `dashboard`

## Похожие
- [Front-End Checklist](https://affpapa.org/nevibecode/mcp/front-end-checklist.md) — MCP-сервер · ★ 74559
- [Codebase Memory](https://affpapa.org/nevibecode/mcp/codebase-memory.md) — MCP-сервер · ★ 47392
- [Serena MCP: the IDE for your agent](https://affpapa.org/nevibecode/mcp/serena-mcp-the-ide-for-your-agent.md) — MCP-сервер · ★ 30677
- [Repomix](https://affpapa.org/nevibecode/mcp/repomix.md) — MCP-сервер · ★ 29027
- [Repowise](https://affpapa.org/nevibecode/mcp/repowise.md) — MCP-сервер · ★ 7891
- [sem](https://affpapa.org/nevibecode/mcp/sem.md) — MCP-сервер · ★ 3422

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