Дисклеймер: Эта статья — подробный разбор и выжимка ключевых тезисов из доклада Рубена Касаса «Generative UI & MCP Apps». Повествование ведется от лица автора.
Еще в ноябре 2022 года вершиной взаимодействия с ИИ в веб-разработке была так называемая «пролетарская парная разработка». Мы шли в ChatGPT, просили создать компонент, копировали код, вставляли его в проект, находили ошибку, просили исправить и повторяли этот круг заново. Это работало, это удивляло, но всё же оставалось довольно примитивным процессом.
Однако с выходом моделей нового поколения — условных GPT-5 и Claude 4.5 Opus — индустрия достигла точки перегиба. Нейросети продемонстрировали не просто способность решать долгосрочные задачи, но и поразительное качество генерации высокоточных интерфейсов.
Личный опыт: Я решил провести эксперимент и попросил одну из этих моделей переписать мой личный блог всего одним промптом: «Перепиши мой блог».
Результат меня поразил. Модель сама, без малейшей подсказки, создала красивое поле поиска с плавной анимацией размытия и встроенной поддержкой доступности (accessibility). В этот момент я осознал: всего за три года ИИ прошел путь от написания пары строк кода до создания фронтенда, который написан лучше, чем это сделал бы среднестатистический разработчик.
Если нейросети так хороши в создании UI, почему мы все еще застряли в старой парадигме статичных интерфейсов? Где наш «момент Джарвиса» с футуристичными всплывающими окнами?
Меня зовут Рубен Касас, я ведущий инженер в Postman. Последний год я активно изучаю генеративный UI и приложения на базе протокола MCP (Model Context Protocol). Давайте разберем, где мы находимся сейчас и куда движемся.
Новый компьютер без графического интерфейса
Как точно подметил Андрей Карпати, взаимодействие с современным ИИ похоже на работу с терминалом. У нас есть прямой доступ к мощнейшей операционной системе (суперинтеллекту), но зрелый графический интерфейс для неё еще просто не изобретен. Мы как будто застряли в 1970-х годах, где всё вокруг — это текст.
Сегодня индустрия пытается нащупать этот новый интерфейс. Сейчас все SaaS-компании массово внедряют чат-ботов на свои главные страницы. Чат — это неплохо для старта, но явно не финальная точка эволюции.
Сейчас отчетливо видны два пути развития экосистемы:
- Чат везде: Интеграция окон чата в каждое отдельное приложение и сайт.
- Супер-приложения (Super-apps): Единое окно (например, интерфейс ChatGPT, Claude или Gemini), которое через MCP-приложения подтягивает и рендерит сторонние интерфейсы и сервисы внутри одной агентской среды.
Пока сложно сказать, какой подход победит — выбор за пользователями. Гораздо интереснее другое: как именно модель генерирует этот UI?
Три этапа генерации UI: от статики к коду на лету
Эволюцию подходов к генерации интерфейсов можно разделить на три ключевых этапа.
[Статичные компоненты] ➔ [Декларативный UI] ➔ [Генеративные компоненты]
1. Статичные компоненты
Это самый распространенный подход на сегодняшний день. Агент здесь выступает лишь в роли оркестратора данных.
- Как это работает: Агент делает вызов инструмента (tool call), передает параметры и данные в заранее созданные разработчиками статичные компоненты.
- Аналогия: Это очень похоже на классический клиент-серверный рендеринг последних 20 лет, где вместо бэкенд-сервера данные и пропсы генерирует ИИ.
- Примеры: Протокол AGUI (где вызов инструмента мапится на React-компонент) или Goose (MCP-клиент с функцией Goose Auto Visualizer, который берет любые данные и пытается красиво разложить их по готовым шаблонам визуализации).
2. Декларативный UI
Следующий шаг, который на данный момент представляет собой идеальный баланс между гибкостью и предсказуемостью.
- Как это работает: У разработчиков по-прежнему есть готовая дизайн-система и набор компонентов. Но теперь агент генерирует не просто сухие данные, а дескриптор интерфейса в формате JSON, YAML или даже Python через Fast-MCP. Специальный движок (runtime) берет этот дескриптор и собирает из него персонализированный интерфейс.
- Аналогия: Netflix уже много лет использует подобный Server-Driven UI для полной персонализации главной страницы под конкретного пользователя.
- Примеры: Инструмент JSON Render от компании Vercel, который позволяет описывать сложнейшие динамические взаимодействия.
- Плюсы: Это быстро, существенно экономит токены (а значит, обходится дешевле) и гарантирует, что интерфейс не «развалится», оставшись в рамках гайдлайнов бренда.
3. Генеративные компоненты
Тот самый «некст-левел», к которому мы стремительно приближаемся. Если модели умеют отлично писать на React, JavaScript и CSS, почему бы не позволить им создавать UI полностью по требованию прямо в рантайме?
- Как это работает: Агент генерирует чистый HTML, CSS и JS под конкретную сиюминутную задачу пользователя и мгновенно отправляет это на клиент.
- Эксперимент: В Postman я создал погодного агента. В рамках одного вызова он идет к API погоды, генерирует шутку на основе прогноза и тут же собирает под это уникальный, нигде ранее не существовавший интерфейс. Никаких шаблонов и готовых компонентов — чистый экспромт нейросети.
Проблема доверия и безопасность: роль MCP Apps
Разумеется, в концепции генеративных компонентов есть огромный подвох. Если мы не доверяем чужому коду из интернета, то почему мы должны безоговорочно доверять коду, который LLM сгенерировала на лету? Что если она создаст уязвимость или выполнит вредоносный скрипт?
Генеративному UI жизненно необходима безопасная модель дистрибуции, строгие границы и изолированная «песочница». И здесь на сцену выходят MCP-приложения (MCP Apps).
На сегодняшний день MCP Apps — это лучший механизм доставки генеративного UI.
| Что они обеспечивают из коробки? |
| Изоляцию и безопасность по умолчанию (например, через двойной iFrame). |
| Встроенную аутентификацию и разграничение прав. |
| Удобный обмен сообщениями (двусторонний стриминг) между UI и агентом. |
Стратегически очень показательны действия Anthropic. Для своей функции визуализации (Artifacts) в Claude они не стали изобретать велосипед, а использовали именно концепты MCP Apps, поскольку этот протокол закрывает все вопросы безопасности и взаимодействия ИИ со сторонними интерфейсами.
Будущее: «синдром радио с камерой» и коллаборация
Пытаясь представить интерфейсы будущего, мы часто утыкаемся в банальные летающие окошки из фантастических фильмов. Нам просто не хватает воображения.
Когда в 1930-х годах появилось телевидение, первыми ТВ-передачами были просто радиопередачи, перед ведущими которых ставили камеру. Люди еще не понимали специфику и визуальные возможности нового медиа. Сейчас мы находимся в аналогичной эре «радио для ИИ-компьютеров». Мы пытаемся натянуть старые паттерны (кнопки, чаты, таблицы) на принципиально новую технологию.
Что нас ждет за пределами компонентов?
Будущее генеративного UI лежит не в плоскости «выведи мне красивый график», а в плоскости глубокого взаимодействия человека и машины — Human-Agent Collaboration.
- Яркий пример нового подхода — Excalidraw MCP app. Это приложение используется не просто для демонстрации статичных диаграмм. Оно создает общее рабочее пространство — холст, на котором человек и ИИ-агент могут работать одновременно.
- Вы можете текстом попросить агента: «Измени эту часть схемы», но в то же время можете сами кликать мышкой, перетаскивать элементы и править интерфейс руками так, как вы привыкли.
Интерфейс будущего станет супер-персонализированным, адаптивным и коллаборативным. Мы находимся в самом начале пути, стандарты еще только формируются, и именно мы — разработчики и инженеры — прямо сейчас определяем то, как мир будет взаимодействовать с компьютерами нового поколения.