ui-ticket-mcp — MCP-сервер для Claude Code: ревью UI из браузера
Кликаете по элементу в браузере, пишете замечание — агент читает его через MCP и правит код. Пригодится, когда вёрстку проще показать, чем описать словами.
claude mcp add --env PROJECT_ROOT=<PROJECT_ROOT> --env REVIEW_PORT=<REVIEW_PORT> --transport stdio ui-ticket-mcp -- uvx ui-ticket-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/ — не эндпоинт, обращаться к нему из панели бессмысленно.
Какие задачи решает
- показать агенту, какой именно элемент сломан, вместо описания словами
- собрать замечания по вёрстке в одном списке с фильтрами и поиском
- передать агенту CSS-селектор и вычисленные стили проблемного блока
- отмечать баги, предложения и вопросы разными тегами
- закрывать и переоткрывать замечания, не теряя обсуждение в тредах
Примеры запросов агенту
- Посмотри открытые замечания через
get_review_summaryи скажи, на каких страницах их больше всего - Возьми замечание про отступы на карточке товара и поправь стили в исходнике
- Покажи список открытых ревью для страницы
dashboard
Как установить ui-ticket-mcp
Командой платформы
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 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 <команда>
Файл настроек
{
"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 <команда>
Файл настроек
{
"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 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 <команда>
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о ui-ticket-mcp
Как установить ui-ticket-mcp в Claude Code?
Выполните claude mcp add ui-ticket-mcp -e PROJECT_ROOT=<PROJECT_ROOT> -- uvx ui-ticket-mcp, подставив путь к проекту. Затем перезапустите агент.
Что делает ui-ticket-mcp?
Это мост между ревью в браузере и ИИ-агентом. Вы оставляете замечания к элементам интерфейса, а агент читает их через MCP и правит код.
Что нужно для работы сервера?
В конфиге MCP обязателен PROJECT_ROOT — по нему сервер находит проект и создаёт базу .reviews/reviews.db. Порт задаётся через REVIEW_PORT, по умолчанию 3200.
