MCP Apps — интерактивный UI внутри MCP-инструментов

До MCP Apps каждый ответ MCP-сервера был «стеной текста». Агент ходил в инструмент, получал JSON или markdown, и вся «красота» в диалоге жила в силах модели. Это проблема для всего, где нужны кликабельные элементы: выбор товара, чекаут, фильтры, формы, дашборды. В январе 2026-го команды MCP, OpenAI и MCP-UI выпустили первое официальное расширение протокола — MCP Apps. Теперь инструмент может вернуть не только текст, но и интерактивный блок UI, рендерящийся прямо в чате.

Что это такое

MCP — это «oткрытый USB-C для ИИ» (формулировка modelcontextprotocol.io). До MCP Apps сервер мог выдавать лишь текст или structured data в ответ на tool call. MCP Apps добавляет в этот ответ «UI-ресурс» — HTML, который клиент (ChatGPT, Claude Desktop, любой хост на MCP-UI) встроит в диалог.

Где это работает сегодня:

• ChatGPT Apps — реализация OpenAI на базе Apps SDK.
• Клиенты, подключившие @mcp-ui/client, — React-компоненты для рендера MCP Apps.
• Собственные хосты, построенные поверх App Bridge из ext-apps.

Откуда это пришло

История у MCP Apps короткая, но путаная, потому что «UI поверх MCP» делали сразу три команды параллельно:

• MCP-UI (mcpui.dev) — открытый проект под React, стартовавший в 2025-м. Делали Ido Salomon и Liad Yosef. Их же протокол взял Shopify в свои commerce-агенты.
• OpenAI Apps SDK — официальный фреймворк OpenAI для ChatGPT Apps, представленный осенью 2025-го. Расширяет MCP так, чтобы в чате ChatGPT можно было рендерить виджеты.
• MCP Core (Anthropic) — основной протокол, который хотел «общее решение» вместо трёх разных.

21 ноября 2025-го эти три команды пришли к SEP-1865 — общему предложению MCP Apps Extension. 26 января 2026-го MCP Apps объявлен первым официальным расширением протокола и production-ready.

Как работает

MCP-сервер возвращает в ответе три вещи:

1. Текст для модели — как раньше, чтобы LLM понимала результат и рассуждала дальше.
2. UI-ресурс — HTML/JS блок, рендерящийся в изолированном iframe.
3. Метаданные — высота, режим отображения, разрешённые интенты.

Клиент видит этот UI в чате, рендерит его в sandbox-iframe через App Bridge и обеспечивает безопасный обмен сообщениями. App Bridge — ядро расширения. Он делает четыре вещи:

• Рендерит приложение в sandboxed iframe (у него нет доступа к странице хоста).
• Передаёт сообщения между компонентом и хостом через postMessage.
• Проксирует tool calls: UI может запросить сервер «закрыть этот схлопывающийся блок» или «обновить данные» без участия модели.
• Применяет security policy: клиент выбирает, какие интенты разрешить (открыть внешнюя ссылку, вызвать tool, и т. д.).

// Сервер возвращает инструмент с UI
const result = {
	content: [
		{ type: "text", text: "Для вас подобралось 12 рейсов." },
		{
			type: "resource",
			resource: {
				uri: "ui://flights/list?date=2026-06-01",
				mimeType: "text/html+mcp-app",
				text: `<flight-picker data-route="..."></flight-picker>`,
			},
		},
	],
}

Отличие от обычных MCP-инструментов

Обмен сообщениями: intent-based

UI-виджет не имеет доступа к основной странице хоста или LLM. Он всегда говорит с хостом через интенты. Набор общепринятых интентов выработала MCP-UI и Shopify, и они попали в SEP-1865:

• tool — «вызови этот MCP-tool от моего имени». Хост вызывает его, возвращает результат внутрь iframe.
• prompt — «вставь этот текст в диалог как сообщение пользователя». Полезно для кнопок «Объясни подробнее».
• link — «открой внешнюю ссылку» в новой вкладке.
• notify — «покажи тост» или иную системную подсказку.

Хост выбирает, какие интенты разрешить. Например, в корпоративном MCP-сервере разумно запретить link на сторонние домены.

Сценарии

• E-commerce. Shopify построил витрину внутри чата: карточки товаров, выбор размера, корзина. Агент ведёт разговор, UI берёт на себя визуальные решения.
• Дашборды. Tool «покажи метрики» возвращает интерактивный график, где пользователь переключает даты без нового LLM-вызова.
• Формы и визарды. Онбординг, заявки, опросы. Агент объясняет и подбирает дефолты, UI собирает структурированные данные.
• Продуктовые карточки. Карты, расстояния, расписания рейсов, бронирование отелей — всё то, что плохо живёт в виде markdown-списка.
• Многошаговые сценарии. Например, debug-панель для внутреннего инструмента: логи, фильтры, кнопки retry.

Что учесть при реализации

• Capability на стороне хоста. Перед отправкой UI-ресурса проверьте client capabilities. Если клиент не поддерживает Apps Extension — выдавайте текстовый fallback.
• Безопасность. Будьте осторожны с user-supplied input в HTML. Никогда не инжектируйте в markup данные, которые пришли от пользователя или от модели, без экранирования. iframe изолирует от хоста, но не от вашего backend.
• Состояние. Держите его на сервере. UI является «видом», а не «источником правды». Иначе пользователь закроет чат — и всё потеряется.
• Размер UI. Ожидайте узких колонок (chat-левая панель в ChatGPT, панель в IDE). Стройте mobile-first.
• Accessibility. Навигация клавиатурой, focus rings, осмысленные ARIA-роли. Чат и ридеры экрана без этого ломаются.

Ссылки

• Анонс релиза: blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps
• Исходная SEP-1865: blog.modelcontextprotocol.io/posts/2025-11-21-mcp-apps
• Репо с примерами: github.com/modelcontextprotocol/ext-apps
• API-доки App Bridge: apps.extensions.modelcontextprotocol.io/api
• MCP-UI: mcpui.dev
• OpenAI Apps SDK: developers.openai.com/apps-sdk
• Страница MCP Apps overview: modelcontextprotocol.io/extensions/apps/overview
• Shopify про опыт внедрения: shopify.engineering/mcp-ui-breaking-the-text-wall

По теме

• База знаний: MCP (Model Context Protocol) — стандарт подключения ИИ к внешним системам
• База знаний: Notion MCP — официальный сервер Notion для подключения ИИ-агентов
• База знаний: OpenAI Responses API — единый интерфейс для агентских приложений

Если думаете, в какой из ваших внутренних инструментов «стена текста» мешает больше всего и как разложить MCP-сервер на слои без UI-вендора-лока, напишите в Telegram — разберём вместе.