Уроки создания 20 MCP Apps за 2 дня

Моя команда создала 20 MCP Apps за два дня. Это дало мне четкое понимание того, что умеют эти инструменты и где они допускают ошибки.

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

Визуальная информация часто лучше текста. График нагляднее, чем CSV-файл. Список pull-запросов читать проще, чем сплошное полотно текста.

Вот уроки, которые мы извлекли:

• Приложения живут внутри сервера MCP App — это не размещенный по URL-адресу ресурс. Он запрашивается через MCP, а не через HTTP. Код интерфейса поставляется вместе с вашим MCP-сервером.

• Используйте React и Vite Мы использовали React, чтобы задействовать нашу существующую дизайн-систему. Мы настроили один проект Vite в папке /ui. При сборке он создает по одному HTML-файлу для каждого TSX-файла.

• Текст по-прежнему остается основным контрактом Если хост не поддерживает MCP Apps, он игнорирует свойство UI. Пользователь увидит только текстовый ответ. Никогда не делайте UI единственным способом получения ответа. Если вы так поступите, ваш инструмент перестанет работать для пользователей терминальных клиентов. Всегда проектируйте интерфейс так, будто половина ваших пользователей увидит только текст.

• Будьте готовы к разной верстке Каждый хост реализует спецификацию по-своему. ChatGPT отрисовывает широкое окно. Claude — узкое. На мобильных устройствах всё еще иначе. С самого начала проектируйте макеты, которые адаптируются под узкую ширину.

• Цикл разработки (dev loop) медленный Стандартного инструмента для тестирования пока нет. Вам приходится собирать, устанавливать и проверять приложение вручную в каждом клиенте. Это кажется медленным по сравнению со стандартной фронтенд-разработкой.

• Не собирайте секретные данные в приложении Приложения работают в изолированном iframe. Хост может видеть содержимое. Никогда не вводите API-ключи или OAuth-токены в поля форм. Если вам нужны конфиденциальные данные, используйте отдельную защищенную форму.

Если вы начинаете сейчас:

  • Упаковывайте UI внутри своего сервера.
  • Используйте многостраничную (multi-page) настройку Vite.
  • Импортируйте свою существующую дизайн-систему напрямую.

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

Source: https://dev.to/arcade/lessons-from-building-20-mcp-apps-in-2-days-1f98

Optional learning community: https://t.me/GyaanSetuAi