Next.js внутри ChatGPT: как Vercel обошла ограничения iframe с MCP

Команда Vercel объявила о создании Next.js-приложения, которое работает нативно внутри ChatGPT. Это стало возможным благодаря Apps SDK с поддержкой Model Context Protocol (MCP), выпущенному OpenAI. Ранее встроенные в ChatGPT веб-приложения ограничивались статическим HTML в iframe, но инженеры Vercel нашли способ запустить полноценное приложение с клиентской навигацией, React Server Components и динамической маршрутизацией. Такое решение открывает эру интерактивных AI-интерфейсов, где пользователи могут работать с дашбордами, формами и другими сложными элементами прямо в чате, не покидая его.

Как Next.js заработал внутри ChatGPT

Ключевая проблема заключалась в архитектуре ChatGPT, использующей тройные iframe для изоляции контента. В такой среде стандартные механизмы навигации и рендеринга Next.js не работали. Инженеры Vercel применили комбинацию из Model Context Protocol и адаптированной конфигурации рендеринга. MCP позволяет приложению общаться с ChatGPT через структурированные сообщения, а не через DOM-события. Это дало возможность синхронизировать состояние и навигацию между вложенными iframe. В результате Next.js-приложение может корректно обрабатывать переходы по страницам и обновлять интерфейс, не нарушая изоляцию безопасности.

Почему стандартные iframe не подходят для сложных приложений?

Традиционные iframe в ChatGPT ограничены статическим HTML без возможности динамической навигации или взаимодействия с сервером. Они не поддерживают клиентский роутинг, React Server Components или обновление состояния без полной перезагрузки. Для современных фреймворков, таких как Next.js, это непреодолимое препятствие. MCP решает эту проблему, предоставляя унифицированный протокол обмена сообщениями, который работает поверх iframe, не требуя доступа к DOM или глобальным объектам. Таким образом, приложение сохраняет полную функциональность, оставаясь внутри изолированной среды.

Предыстория и контекст

OpenAI выпустила Apps SDK в начале 2025 года, предоставив разработчикам инструменты для создания плагинов и встраиваемых приложений. Однако поддержка MCP появилась лишь в последнем обновлении. Vercel, будучи создателем Next.js, активно экспериментировала с интеграцией фреймворка в различные платформы. Ранее они уже демонстрировали запуск Next.js в WebContainer и на edge-сетях. Нативная интеграция с ChatGPT — логичное продолжение, открывающее путь к созданию AI-агентов с полноценным веб-интерфейсом. Этот шаг также подчёркивает растущую роль MCP как стандарта для взаимодействия между AI-платформами и веб-приложениями.

Как это работает?

Приложение использует MCP для передачи команд навигации между iframe. Вместо того чтобы полагаться на history API браузера, Next.js отправляет сообщения через MCP, которые ChatGPT интерпретирует и обновляет URL в адресной строке. React Server Components рендерятся на стороне сервера Vercel, а клиентские компоненты загружаются через специально настроенный Service Worker, который работает внутри изолированного окружения. Для динамической маршрутизации применяется адаптированная версия Next.js Router, которая читает состояние из MCP. Это позволяет приложению поддерживать все возможности Next.js, включая предварительную загрузку данных и оптимизацию изображений.

Технические подробности интеграции

Архитектура включает три уровня: внешний iframe ChatGPT, промежуточный iframe MCP и внутренний iframe с приложением. MCP-слой выступает как мост, передавая события навигации и данные между ChatGPT и приложением. Vercel также пришлось модифицировать сборку Next.js, чтобы код корректно работал в условиях отсутствия прямого доступа к window.location и другим глобальным объектам. В частности, они заменили стандартный history.pushState на вызовы MCP. Для статической генерации страниц используется Incremental Static Regeneration, что позволяет обновлять контент без полной пересборки. Кроме того, были адаптированы механизмы кэширования и обработки ошибок, чтобы обеспечить плавную работу в условиях ограниченной сетевой среды.

Какие ограничения остаются?

Несмотря на успех, интеграция имеет свои нюансы. Например, приложение не может напрямую обращаться к API браузера, таким как геолокация или уведомления, без дополнительной обёртки. Также возможны задержки при передаче сообщений через MCP, что влияет на анимации и быстрые взаимодействия. Однако Vercel планирует оптимизировать эти аспекты в будущих релизах. Для разработчиков важно учитывать, что не все библиотеки и зависимости могут работать корректно в изолированном окружении, поэтому требуется тщательное тестирование.

Кого затронет и как

Разработчики Next.js получают возможность создавать AI-интерфейсы, работающие прямо в чате. Например, можно сделать дашборд аналитики, который пользователь вызывает командой «покажи метрики», или форму заказа с динамическим обновлением цены. Для конечных пользователей это означает более интерактивный опыт без переключения между вкладками. Российским разработчикам стоит учитывать ограничения доступа к OpenAI API, но техническое решение применимо и к другим AI-платформам с поддержкой MCP, таким как Claude или Bard. В перспективе это может привести к появлению целого класса «чат-приложений», объединяющих преимущества диалоговых интерфейсов и веб-функциональности.

Что будет дальше

Vercel планирует опубликовать reference-реализацию и документацию для сообщества. Ожидается, что OpenAI расширит возможности Apps SDK, упростив интеграцию. В перспективе подобные подходы могут стать стандартом для запуска веб-приложений внутри AI-ассистентов, стирая грань между чатом и полноценным интерфейсом. Конкуренты, такие как Google и Anthropic, также работают над аналогичными SDK, что ускорит развитие экосистемы. Уже сейчас можно представить, как Next.js-приложения для управления умным домом, мониторинга здоровья или финансового планирования будут запускаться одной командой в чате.

Итог

Запуск Next.js внутри ChatGPT — не просто технический трюк, а демонстрация нового подхода к интеграции веб-приложений в AI-среду. Благодаря MCP и инженерной работе Vercel, разработчики теперь могут создавать нативные интерактивные интерфейсы, работающие внутри чат-ботов. Следите за этой областью: в ближайшие месяцы появятся готовые инструменты и библиотеки для упрощения таких интеграций. Если вы используете Next.js, сейчас — лучшее время экспериментировать с Apps SDK и MCP, чтобы быть на шаг впереди.