Claude-Powered MCP Tool Генерирует Интерактивные HTML-Компоненты Без Инструментов Сборки

Архитектура и рабочий процесс

Разработчик создал daub.dev — систему, в которой Claude выступает в роли «мозга» MCP-сервера (Model Context Protocol), генерирующего интерактивные HTML-компоненты по запросу. В этой настройке Claude подключается к MCP-серверу и вызывает инструмент generate_ui с описанием на естественном языке того, что требуется.

Инструмент возвращает самодостаточный фрагмент HTML+CSS+JS, готовый к вставке на любую страницу без необходимости в React, сборщике или каком-либо конвейере сборки.

Почему Claude хорошо подходит для этой задачи

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

С другими моделями разработчику приходилось добавлять значительную защитную обработку, но с Claude вывод предсказуемо чист. Кроме того, понимание Claude семантического HTML достаточно сильное, чтобы создаваемые им компоненты по умолчанию были доступными — с правильными ролями ориентиров, ассоциациями меток и навигацией с клавиатуры — без явных указаний.

Формат вывода инструмента

Инструмент MCP выводит render_spec — JSON-объект, описывающий макет, слоты и данные компонента, — который клиентская сторона преобразует в HTML. Этот подход чище, чем возврат сырых HTML-строк, потому что его проще сравнивать, кэшировать и обновлять при изменении состояния без необходимости полного перерендеринга.

Разработчик упоминает, что готов обсудить дизайн схемы инструмента, конвейер рендеринга или то, как работает 7-этапная валидация selfCheck. Песочница для тестирования системы доступна по адресу daub.dev/playground.