MCP Apps: Добавление интерактивного UI в диалоги с ИИ

MCP-инструменты всегда хорошо справлялись с получением данных и выполнением действий. Чего они не могли — так это показать вам что-то полезное. Вы просили ИИ-ассистента получить данные о продажах, и получали в ответ стену текста. Хотите отфильтровать по региону? Это ещё один промпт. Отсортировать по выручке? Ещё один промпт. Это работает, но медленно и раздражает.

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

Что такое MCP Apps?

MCP Apps — это первое официальное расширение Model Context Protocol. Они стали официальными в начале 2026 года, стандартизировав паттерны, которые уже исследовались в MCP-UI и OpenAI Apps SDK.

До появления MCP Apps каждый клиент должен был решать проблему UI самостоятельно. Эта фрагментация означала, что сервер, созданный для Claude, не работал бы так же в VS Code или ChatGPT. MCP Apps устанавливают общий стандарт, благодаря которому одна реализация работает во всех поддерживающих клиентах.

Стоит отметить, что MCP Apps всё ещё новы и развиваются. Но они уже поддерживаются в нескольких MCP-клиентах, включая Claude и инструменты разработки — это значимый стартовый состав.

Как работают интерактивные приложения MCP

Архитектура проста. Инструмент ссылается на UI-ресурс, который указывает на интерактивный интерфейс:

{
  "name": "visualize_sales",
  "description": "Returns an interactive sales dashboard",
  "_meta": {
    "ui": {
      "resourceUri": "ui://dashboards/sales"
    }
  }
}

Хост получает этот ресурс — HTML-бандл, предоставляемый по схеме ui:// — и отображает его в изолированном iframe. UI взаимодействует с хостом, используя JSON-RPC поверх postMessage. Это означает, что все сообщения структурированы, проверяемы и согласованы с остальной работой MCP.

ext-apps SDK обрабатывает этот коммуникационный слой:

import { App } from "@modelcontextprotocol/ext-apps"

const app = new App()
await app.connect()

app.ontoolresult = (result) => renderDashboard(result.data)

await app.updateModelContext({
  content: [{ type: "text", text: "User filtered by Q3" }],
})

Модель остаётся в курсе. Когда пользователь взаимодействует с UI — кликает на фильтр, выбирает опцию конфигурации, одобряет раздел документа — модель видит это и может отреагировать.

UI-компоненты MCP — это просто веб-приложения

Это та часть, которую фронтенд-разработчики оценят больше всего. Ваш UI-бандл — это стандартное веб-приложение. Вы можете создать его с помощью React, Vue, Svelte или обычного JavaScript. Не нужно изучать проприетарный движок рендеринга.

Ресурс ui:// — это самодостаточный HTML-файл с упакованными ассетами. Хост загружает его в изолированный iframe, поэтому он работает в знакомой браузерной среде. Вы пишете компоненты так же, как всегда, — единственное новое — это использование App SDK для взаимодействия с хостом.

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

Где интерактивные приложения MCP имеют наибольшее значение

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

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

Shopify наглядно продемонстрировали это на своём примере использования в коммерции — варианты продуктов, конструкторы комплектов и ограничения инвентаря слишком сложны для управления через диалоговые промпты. UI справляется с этим чисто.

Начало работы

Репозиторий ext-apps включает рабочие примеры серверов: threejs-server, map-server, pdf-server и system-monitor-server. Выберите тот, который ближе всего к тому, что вы создаёте, и начните с него.

Заключение

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

Часто задаваемые вопросы

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.