База знаний

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

MCP Apps — первое официальное расширение Model Context Protocol, которое позволяет MCP-серверам возвращать интерактивные UI-компоненты: дашборды, формы, визуализации, многошаговые сценарии. Разбираем, как работает связка OpenAI Apps SDK, MCP-UI и официального SEP-1865.

Опубликовано 01.05.2026 Обновлено 08.09.2026

ИИ-агенты Frontend DevTools

🔄

Актуальность: проверено 8 сентября 2026 года по текущей документации MCP Apps, финальной SEP-1865, спецификации MCP 2026-07-28 и релизам modelcontextprotocol/ext-apps. MCP Apps включён в формальную систему расширений MCP. UI объявляется как ресурс ui:// с MIME-типом text/html;profile=mcp-app, а инструмент ссылается на него через _meta.ui.resourceUri.

MCP Apps позволяет MCP-серверу показывать внутри совместимого хоста интерактивные формы, графики, просмотрщики и другие HTML-интерфейсы. Модель по-прежнему вызывает обычный инструмент, но рядом с его результатом хост может отобразить связанное приложение в изолированном iframe.

📌

Коротко: MCP Apps — официальное расширение Model Context Protocol для интерактивных интерфейсов. Базовая схема состоит из инструмента, заранее объявленного UI-ресурса и защищённого канала обмена сообщениями на основе JSON-RPC и postMessage.

Что добавляет MCP Apps

Обычный MCP-инструмент возвращает текст, изображения, ресурсы или структурированные данные. MCP Apps добавляет ссылку на интерактивный HTML-интерфейс, который хост может загрузить и встроить прямо в разговор.

Основной паттерн использует два существующих примитива MCP:

инструмент описывает операцию и указывает связанный UI-ресурс;
ресурс содержит HTML, JavaScript и CSS приложения;
результат инструмента даёт модели данные, а хост может передать приложению необходимые данные и события;
хост отвечает за загрузку ресурса, изоляцию и разрешённые действия.

UI можно написать на React, Vue, Svelte, Preact, Solid, обычном JavaScript или другом веб-стеке. Класс App из @modelcontextprotocol/ext-apps упрощает интеграцию, но не является обязательным: протокол можно реализовать напрямую на стандартных веб-примитивах.

Как инструмент связан с интерфейсом

MCP Apps использует заранее объявленные ресурсы со схемой ui://. В описании инструмента поле _meta.ui.resourceUri указывает, какой интерфейс нужно показать.

const tool = {
  name: "list_flights",
  description: "Показывает подходящие рейсы",
  _meta: {
    ui: {
      resourceUri: "ui://flights/list"
    }
  }
}

Связанный ресурс содержит HTML с MIME-типом text/html;profile=mcp-app:

const resource = {
  uri: "ui://flights/list",
  mimeType: "text/html;profile=mcp-app",
  text: "<!doctype html><html>...</html>"
}

Это разделяет представление и данные. Хост может заранее получить и проверить шаблон, закешировать его и загрузить до завершения вызова инструмента. Внешние скрипты и другие ресурсы разрешаются только с источников, перечисленных в политике содержимого (Content Security Policy, CSP), заданной в _meta.ui.csp.

⚠️

Не возвращайте встроенный HTML как единственный элемент результата инструмента, если рассчитываете на стандарт MCP Apps. Встроенные (inline) ресурсы относятся к более ранней модели MCP-UI. В актуальном паттерне интерфейс объявляется заранее и связывается с инструментом через _meta.ui.resourceUri.

Как приложение общается с хостом

Интерфейс работает внутри sandboxed iframe и не получает прямого доступа к DOM, cookie или локальному хранилищу страницы хоста. Обмен между приложением и хостом проходит через postMessage, поверх которого MCP Apps использует собственный диалект JSON-RPC.

Операция	Как выполняется	Кто контролирует доступ
Вызов серверного инструмента	JSON-RPC `tools/call`	Хост и его политика разрешений
Инициализация канала интерфейса	Методы с префиксом `ui/`, включая `ui/initialize`	Хост и приложение
Отправка сообщения в разговор	Запрос приложения к хосту через App Bridge	Возможности хоста и согласие пользователя
Открытие внешней ссылки	Запрос возможности хоста, например `sendOpenLink`	Хост может запретить действие
Обновление контекста модели	Запрос UI через JSON-RPC	Хост применяет собственную политику

Ранние реализации MCP-UI использовали собственные сообщения вроде tool, intent и prompt. Они повлияли на проектирование расширения, но не являются нормативной моделью текущего MCP Apps. В стандартном варианте используется JSON-RPC с общими и UI-специфичными методами.

Поддержка клиентов и совместимость

MCP Apps остаётся необязательным расширением к ядру MCP. Его использование согласуется между клиентом и сервером через механизм расширений, поэтому поддержка зависит от хоста.

По официальному обзору MCP, доступному на дату проверки, расширение поддерживают Claude, Claude Desktop, VS Code GitHub Copilot, Microsoft 365 Copilot, Goose, Postman, MCPJam и Archestra.AI. Полный актуальный список следует проверять по матрице поддержки расширений MCP.

OpenAI Apps SDK позволяет создавать приложения с интерфейсом внутри ChatGPT. По справке OpenAI на момент проверки сам SDK доступен в предварительной версии (preview), а тестирование выполняется через Developer Mode.

Серверу стоит сохранять понятный текстовый или структурированный результат для клиента без UI. Это сохраняет работу инструмента в голосовых интерфейсах, фоновых агентах и MCP-хостах без поддержки Apps.

💡

Практический принцип: бизнес-логику держите в инструментах и серверной части, а UI используйте как представление и средство ввода. Тогда один сервер сможет обслуживать как интерактивные, так и текстовые клиенты.

Полезные сценарии

Исследование сложных данных

Пользователь запрашивает продажи по регионам. Инструмент возвращает данные, а приложение показывает интерактивную карту с фильтрами и детализацией. Результат можно проверить по тому, что выбор региона обновляет представление без нового текстового запроса. Такой интерфейс не нужен, если данных мало и таблица читается быстрее.

Формы с зависимыми параметрами

При настройке развёртывания нужно выбрать регион, размер экземпляра, автомасштабирование и связанные параметры. MCP App показывает все поля вместе, проверяет значения и передаёт структурированный ввод серверному инструменту. Проверяемый результат: после отправки формы сервер получает валидный набор параметров. Для финансовых и необратимых действий закладывайте явное подтверждение пользователя; хосты могут требовать его для UI-инициированных вызовов.

Просмотр документов и медиа

Вместо текстового пересказа приложение может встроить просмотрщик PDF, изображений, видео или трёхмерной модели. Пользователь получает масштабирование, навигацию и другие подходящие элементы управления. Сценарий требует учёта размера ресурсов и ограничений политики содержимого.

Мониторинг и многошаговая работа

Панель может показывать метрики, логи или очередь заявок, получать свежие данные и вызывать разрешённые инструменты. Для состояния, которое должно пережить закрытие чата, используйте серверное хранилище или передавайте между вызовами явный идентификатор.

Архитектура и безопасность

flowchart LR
    M[Модель] --> T[MCP-инструмент]
    T --> D[Текст и структурированные данные]
    T -. resourceUri .-> R[UI-ресурс]
    R --> H[Хост MCP]
    H --> I[Sandboxed iframe]
    I <-->|JSON-RPC через postMessage| H
    H --> T

Хост контролирует iframe, доступные возможности и вызовы инструментов. Ресурс может объявить политику содержимого и запросить дополнительные разрешения, например доступ к камере или микрофону, но окончательное решение остаётся за хостом.

Основные меры защиты:

экранируйте пользовательские и модельные данные перед вставкой в HTML;
ограничивайте внешние источники через _meta.ui.csp;
выдавайте приложению только необходимые разрешения;
проверяйте источник и назначение сообщений postMessage;
требуйте согласие пользователя для чувствительных UI-инициированных действий;
не храните секреты в HTML, JavaScript или состоянии браузерного интерфейса.

Спецификация MCP 2026-07-28 перевела основное клиент-серверное ядро MCP в режим без транспортной сессии (stateless): прежний обмен initialize / initialized и заголовок Mcp-Session-Id удалены из основного протокола. Это не отменяет отдельную инициализацию канала приложения через ui/initialize. Если серверу требуется состояние между вызовами, создайте явный идентификатор (handle) и передавайте его в аргументах следующих вызовов инструментов.

Чеклист реализации

Инструмент содержит _meta.ui.resourceUri.

UI объявлен как ресурс ui://.

MIME-тип указан как text/html;profile=mcp-app.

Инструмент возвращает понятный текстовый или структурированный результат для клиентов без UI.

Интерфейс работает в узкой колонке и поддерживает клавиатуру.

Динамические данные экранируются перед выводом.

CSP разрешает только необходимые внешние источники.

UI запрашивает только минимальный набор возможностей.

Чувствительные действия требуют подтверждения.

Долговременное состояние хранится на сервере или связано с явным идентификатором.

Результат проверен хотя бы в одном совместимом хосте и отдельно без UI.

Для собственного хоста можно использовать React-компоненты @mcp-ui/client либо App Bridge из @modelcontextprotocol/ext-apps. В официальном репозитории есть примеры для нескольких фреймворков и базовый host.

Что делать, если приложение не работает

UI не появляется: проверьте поддержку MCP Apps в клиенте, URI в _meta.ui.resourceUri и доступность объявленного ресурса.
Хост отвергает ресурс: проверьте схему ui:// и точный MIME-тип text/html;profile=mcp-app.
Скрипты или стили не загружаются: сопоставьте их источники с _meta.ui.csp; по возможности соберите HTML, JavaScript и CSS в один ресурс.
Вызов инструмента из UI запрещён: проверьте возможности хоста и его политику согласия. Приложение не может самостоятельно обойти запрет.
Сообщения не доходят: проверьте завершение ui/initialize, направление postMessage и валидацию источника сообщений.
После закрытия чата пропадает состояние: перенесите его на сервер или используйте явный идентификатор между вызовами.
В неподдерживаемом клиенте результат выглядит пустым: добавьте самостоятельный текстовый или структурированный результат.

Официальные источники

Следующий шаг

Для общего понимания протокола перед внедрением интерфейса прочитайте MCP (Model Context Protocol) — стандарт подключения ИИ к внешним системам.

Связанные материалы

Если вы проектируете агентские интеграции, полезно заранее разделить протокол, серверную логику и интерфейс: это помогает выбрать, где MCP Apps действительно нужны.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov

Если хотите разобрать свою задачу — напишите мне

Можно прийти с идеей, черновым контекстом или уже живой задачей. Помогу быстро понять, где реальный следующий шаг, а где лишний шум.

Напишите мне в Телеграм Мой Телеграм канал

Обычно хватает 2–3 сообщений, чтобы понять, могу ли я здесь реально помочь и в каком формате лучше двигаться дальше.