ui-component-judgment-mcp

MCP-сервер, предоставляющий один инструмент, recommend_component, который определяет, должна ли потребность в UI-компоненте быть удовлетворена существующим компонентом shadcn/ui или 21st.dev, или требует кастомной сборки, руководствуясь ссылкой на реальное приложение из Mobbin. Возвращает структурированный вердикт, а не список результатов поиска — создан для потребления агентом в процессе сборки, а не для просмотра человеком.

Это реализует слой оценки, подтверждённый в продуктовом брифe: покрытие полей/требований оценивается на основе реальных доказательств компонентов, порогово разделяется на use_existing / custom_build, при этом категория no_candidates_found остаётся отдельной от низкого покрытия, есть статический список пропуска для тривиальных примитивов и временная метка computed_at, поскольку покрытие — это снимок, а не постоянный факт.

Как это работает

Сервер не скрейпит shadcn/21st.dev/Mobbin самостоятельно. Каждый вызов инструмента делает один запрос к Anthropic Messages API (claude-sonnet-4-6) с включённым серверным инструментом web_search и системным промптом, который кодирует весь процесс: проверка списка пропуска, извлечение требований, поиск кандидатов, оценка покрытия на основе реальных доказательств, порог и — при custom_build — поиск ссылки на Mobbin. Модель возвращает структурированный JSON, который сервер передаёт вызывающему агенту без изменений.

Тривиальные примитивы (button, input, checkbox, label, badge, spinner, tooltip, avatar, icon) перехватываются локально до любого вызова API, поэтому не тратят запрос.

Related MCP server: shadcn MCP Server

Настройка

npm install
npm run build

Требуется переменная ANTHROPIC_API_KEY, установленная в окружении, в котором работает сервер.

Запуск

ANTHROPIC_API_KEY=sk-ant-... npm start

Это запускает MCP-сервер через stdio. Укажите ваш MCP-клиент (Claude Code, Cursor, Claude Desktop и т. д.) на него — точная конфигурация зависит от клиента, но в общем виде выглядит так:

{
  "mcpServers": {
    "ui-component-judgment": {
      "command": "node",
      "args": ["/path/to/ui-component-mcp/dist/index.js"],
      "env": { "ANTHROPIC_API_KEY": "sk-ant-..." }
    }
  }
}

Инструмент: recommend_component

Входные данные:

{
  "component_need": "price breakdown with fees and taxes",
  "domain": "Airbnb-style rental marketplace",
  "framework": "React + Tailwind",
  "existing_stack": "already using shadcn/ui"
}

component_need должен быть конкретным, а не категорией — «разбивка цены с комиссиями и налогами», а не «ценообразование». Расплывчатые названия категорий — это то, что приводило к ложноположительным совпадениям при валидации (общий компонент тарифного плана SaaS оценивался как совпадение для оформления бронирования).

Выходные данные: JSON, соответствующий:

{
  "verdict": "use_existing | custom_build",
  "confidence": "high | medium | low",
  "reason": "scored | no_candidates_found | skip_list",
  "computed_at": "2026-08-23",
  "requirements_checked": [ { "requirement": "...", "met": true, "evidence": "..." } ],
  "coverage": "5/7 (71%)",
  "recommendation": {
    "source": "21st.dev | shadcn | null",
    "install_command": "string | null",
    "reference": { "source": "Mobbin", "url": "...", "flow_name": "..." }
  }
}

Стоимость

Каждый нетривиальный вызов выполняет короткий многоходовой цикл инструментов (поиск → оценка → ответ), что стоит примерно $0.06–$0.10 с Sonnet 5 по текущим ценам ($2/млн входных токенов, $10/млн выходных, $0.01 за вызов web_search) — примитивы из списка пропуска стоят $0, поскольку никогда не достигают API. Три вещи снижают эту стоимость без ущерба для качества:

• Кэширование промптов в системном блоке (cache_control: ephemeral) — инструкции идентичны при каждом вызове, поэтому повторные ходы и повторные вызовы читаются из кэша вместо повторной оплаты полной цены.

• Бюджет в 2 поиска для обнаружения кандидатов (ещё 1, если custom_build запускает поиск в Mobbin), при этом shadcn и 21st.dev ищутся в одном ходе, а не последовательно, поэтому растущий диалог пересылается реже за вызов.

• Переменная окружения UI_JUDGMENT_MODEL (по умолчанию claude-sonnet-5) — позволяет заменить модель на более дешёвую (например, Haiku 4.5) без изменения кода. Прежде чем доверять более дешёвой модели в продакшене, повторно прогоните 5 проверенных тестовых случаев из продуктового брифа (разбивка цены, политика отмены, панель доходов, галерея, обмен сообщениями) и сравните вердикты с вердиктами Sonnet — это не тестировалось, только обдумывалось.

Известные ограничения (перенесены из валидации)

• Нет кэширования, намеренно. Каждый вызов заново ищет и оценивает с нуля. Вердикт custom_build может устареть, поскольку библиотеки выпускают новые компоненты (проверено: чат-примитивы shadcn от июня 2026 превратили вероятный кастомный компонент обмена сообщениями в почти идеальное совпадение). Если вы добавляете кэширование на уровне вызывающего агента, ограничьте его только сессией — никогда не сохраняйте вердикт между сессиями или сборками.

• Список пропуска — это отправная точка, ещё не проверенная на реальном использовании. Логируйте каждый вызов и то, попал ли он в список пропуска; следите за агентами, которые всё равно вызывают инструмент для элементов из списка (список слишком узкий) или отправляют общий UI для того, что должно было быть пропущено (в списке отсутствует запись).

• Невозможно протестировать end-to-end в полностью песочной среде. Этому серверу нужен исходящий сетевой доступ к api.anthropic.com плюс всё, чего достигает инструмент web_search модели — он не будет работать там, где заблокирован общий доступ в интернет.

• Извлечение требований и оценка покрытия — это оценочные суждения, принимаемые моделью за один проход, а не детерминированные поиски. Проверяйте ранние выходные данные на реальных компонентах, прежде чем доверять конвейеру без присмотра, как и при ручной валидации.