Next.js в ChatGPT: Vercel добавляет динамический веб в чат с искусственным интеллектом

Для Эндрю Цюй из Vercel новая платформа приложений ChatGPT от OpenAI стала непростой задачей.

«Изначально ChatGPT разрабатывал свои приложения как статические HTML-страницы с кэшированием, чтобы они могли предоставлять единообразный, но статический опыт для всех», — рассказал он The New Stack. «Но Интернет все это время развивался, делая вещи более динамичными… поэтому отказаться от всей этой работы и придерживаться только того, что мы могли бы поддержать 10 или 20 лет назад, было бы пустой тратой прогресса».

Не совсем справедливо говорить, что приложения ChatGPT являются «статическими», поскольку примеры, продемонстрированные OpenAI на DevDay, могут реагировать на ввод пользователя, запускать действия серверной части и динамически обновлять свои представления. Но более важным моментом Цюй является то, что приложения ChatGPT разрешено запускать только внутри строго изолированной среды, которую OpenAI разработала для обеспечения безопасности и согласованности. Таким образом, с этой точки зрения приложения ChatGPT, безусловно, более ограничены, чем полноценные одностраничные приложения (SPA).

В любом случае Цюй и его команда намеревались выйти за рамки этих ограничений, в частности, сделать так, чтобы Next.js, флагманская среда React от Vercel, работала в среде выполнения, контролируемой ChatGPT.

Приложение ChatGPT с Next.js. (Источник: Версель)

Они обнаружили глубоко многоуровневую среду выполнения. «Все работает внутри инфраструктуры iframe с тройным вложением», — сказал Цюй. Каждый уровень добавляет ограничения на навигацию и управление состоянием, а это означает, что даже базовые функции браузера, такие как pushState и replaceState, были исправлены для предотвращения сложной маршрутизации. Вот как Цюй проиллюстрировал это в своем блоге:

chatgpt.com └── web-sandbox.oaiusercontent.com (песочница iframe) └── web-sandbox.oaiusercontent.com (внутренний iframe) └── HTML 1234 вашего приложения chatgpt.com └── web-sandbox.oaiusercontent.com (песочница iframe) └── web-sandbox.oaiusercontent.com (внутренний iframe) └── HTML вашего приложения

Как Vercel делает приложения ChatGPT динамичными

Чтобы преодолеть эти ограничения, Vercel разработала ряд обходных путей для загрузки, перенаправления и гидратации активов. Результат: приложение Next.js, которое может динамически отображаться внутри ChatGPT без изменения самой платформы.

«На уровне структуры не требуется никаких настроек», — объяснил Цюй. «Все может быть реализовано на территории пользователя. По большей части это просто еще один элемент сценария, который вы добавляете в макет, и несколько небольших нюансов здесь и там».

«Нет никаких настроек, которые нужно делать на уровне фреймворка. Все можно реализовать на пользовательском уровне».
– Эндрю Цюй, руководитель отдела программного обеспечения Vercel

Другими словами, Vercel не создавала Next.js и не создавала специальную версию для платформы OpenAI — она создала шаблон, которому может следовать любой разработчик. Развернув стандартный проект Next.js и указав коннектору ChatGPT на полученный URL-адрес, разработчики теперь могут встраивать сложные интерфейсы непосредственно в чат.

«Пока вы следуете руководству в блоге или используете опубликованный нами образец шаблона, он должен работать», — сказал Цюй.

Это может показаться обманчиво простым, но песочница ChatGPT вводит более тонкие ограничения.

«Вы по-прежнему можете выполнять полные сетевые запросы со специальным белым списком разрешенных доменов», — отметил Цюй. «Главное различие заключается в том, что когда вы открываете внешние ссылки — они перехватываются… есть секретная функция window.openAI.openExternalLink(), которую они загружают для вас».

Не каждое приложение принадлежит чату

Несмотря на то, что приложения Next.js можно довольно легко перенести в ChatGPT, не каждое веб-приложение входит в интерфейс чата.

Цюй отметил, что даже партнеры OpenAI на рынке, такие как Booking.com, DoorDash и Expedia, не раскрывают свои сайты полностью. «Многие из них просто отображают виджет […]так что это как бы вписывается в разговор», — сказал он.

Тем не менее, Vercel хотела убедиться, что разработчики могут создавать несколько виджетов в ChatGPT.

«Проблема, которую мы пытались решить, заставив Next.js работать [in ChatGPT] заключается в том, что вы по-прежнему можете объявить несколько разных виджетов в одном приложении, и вы можете сделать это привычным способом, вместо того, чтобы пытаться писать HTML или JS вручную», — объяснил Цюй.

Приложение Canva ChatGPT. (Источник: видео OpenAI)

Чтобы упростить эту задачу, Vercel готовит набор React «перехватчиков GPT», легкую библиотеку, которая будет предоставлять свойства окна, специфичные для ChatGPT, включая режим отображения, максимальную высоту, состояние разговора и даже завершение в реальном времени из языковой модели. «Существует множество странных приемов, которые ИИ использует для объекта окна», — сказал Цюй. «Мы пытаемся опубликовать пакет, который позволит вам получить доступ ко всему, что вам нужно».

Роль MCP

Так как же во все это вписывается протокол контекста модели (MCP)? Сама OpenAI описывает MCP как «основу, которая обеспечивает синхронизацию сервера, модели и пользовательского интерфейса» в парадигме приложения ChatGPT. Я спросил Цюя, каков подход Vercel к MCP с интеграцией Next.js.

«У меня много противоречивых мнений о MCP», — усмехнулся Цюй. «Он обещает стать универсальной конечной точкой интеграции для ИИ, но многие люди неправильно используют MCP и рассматривают его просто как зеркало API».

Он рекомендует использовать MCP только тогда, когда разработчики не контролируют клиент, например, при подключении ChatGPT к Notion или GitHub, — но не для внутренних цепочек инструментов, где прямые API имеют больше смысла.

Согласование со стеком GPT-5

Я отметил, что в Руководстве по GPT-5 OpenAI явно рекомендует Next.js (TypeScript), React и HTML в качестве предпочтительных интерфейсных платформ для разработки на базе ИИ. Облегчило ли это согласование с OpenAI интеграцию Next.js с ChatGPT?

«Мы пытаемся работать со всеми модельными лабораториями, чтобы сделать Next.js лучше», — ответил Цюй. «Мы просто хотим, чтобы все LLM генерировали более качественный код по всем направлениям».

Хотя это и не дало прямого ответа на мой вопрос, подразумевается, что Vercel хочет стать веб-платформой по умолчанию для всех чат-ботов с искусственным интеллектом, а не только для ChatGPT. Цюй указал на новую страницу «evals» на веб-сайте Next.js, на которой показаны оценки производительности модели ИИ. Модель OpenAI GPT в настоящее время занимает первое место, но модель Anthropic не сильно отстает.

Next.js оценивает. (Источник: Next.js)

Если Anthropic или другой провайдер запустит аналогичный магазин приложений для чата, сказал Цюй, Vercel «потратит время, чтобы убедиться, что […] мы можем официально работать с [them] разработать спецификацию и стать представителем DevEx». Он добавил, что компания уже экспериментирует со SvelteKit (который поддерживает Vercel) в качестве еще одного кандидата для приложений на основе чата, поскольку его более строгий вывод HTML/JS тесно согласуется со статическими предположениями ChatGPT.

Интернет как основной интерфейс для ИИ

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

«Мы пытаемся сделать это с помощью Next.js как доказательство того, что даже если люди на самом деле не взаимодействуют с Интернетом в традиционном смысле […] люди по-прежнему должны создавать опыт, который затем будет встроен в чат», — сказал он.

Вместо того, чтобы рассматривать чат-клиенты как замену браузерам, он рассматривает их как новые уровни распространения веб-контента — места, где разработчики могут повторно использовать существующие платформы и рабочие процессы хостинга.

«Лично я уверен, что открытая сеть все еще будет актуальна», — продолжил Цюй. «У нас есть эта новая среда, этот новый способ взаимодействия с компьютерами через чат-клиенты, но мы все еще можем иметь ту же выразительность и те же открытые стандарты для взаимодействия с ними».

«…даже если люди не взаимодействуют с сетью в традиционном смысле […] люди по-прежнему должны создавать опыт, который затем будет встроен в чат».
— Эндрю Ку

Одной из новых областей внимания является агентская коммерция, где витрины магазинов появляются непосредственно во время сеансов чата. Цюй утверждает, что это может сделать электронную коммерцию более открытой, а не менее.

«Если у вас есть витрина и вы можете ее опубликовать, это будет не сложнее, чем поделиться ссылкой», — сказал он. «Это очень противоречит [smartphone] модель магазина приложений… Я думаю, что опыт приложений ChatGPT фактически приближает нас к этому».

React и Next.js как стек ИИ по умолчанию

Поскольку все больше разработчиков — и все чаще сами модели искусственного интеллекта — используют Next.js, Vercel наблюдает взрывной рост использования. «Только за последний месяц у нас было больше загрузок Next.js, чем за предыдущие 10 лет вместе взятые», — сказал Цюй. Он объясняет этот всплеск не только профессиональными разработчиками, но и «большим движением и более низким входным барьером», поскольку код, сгенерированный ИИ, снижает трудности при создании веб-приложений.

На вопрос, могут ли React и Next.js стать стеком по умолчанию для пользовательских интерфейсов, ориентированных на искусственный интеллект, Цюй не колебался: «Конечно, так думаю. Я думаю, что эргономика и DX человека/ИИ [developer experience] это очень хорошо».

Цюй также утверждает, что компонентная модель React обеспечивает правильный баланс между структурой, сгенерированной машиной, и замыслом, задуманным человеком. Некоторые разработчики могут поспорить с этим и ответить, что сложность React слишком сильно отклонила веб-разработку в сторону DevEx.

Но в целом быстрая интеграция Next.js со стороны Vercel с платформой приложений ChatGPT показывает, что чат-боты с искусственным интеллектом не будут ограничиваться лишь слегка интерактивными виджетами — сложные веб-приложения также будут жить на этих платформах.

ТЕНДЕНЦИОННЫЕ ИСТОРИИ YOUTUBE.COM/THENEWSTACK Технологии развиваются быстро, не пропустите ни одной серии. Подпишитесь на наш канал YouTube, чтобы смотреть все наши подкасты, интервью, демонстрации и многое другое. ПОДПИСАТЬСЯ Группа, созданная в Sketch. Ричард Макманус — старший редактор The New Stack и пишет о тенденциях в разработке веб-приложений и веб-приложений. Ранее в 2003 году он основал ReadWriteWeb и превратил его в один из самых влиятельных в мире новостных сайтов о технологиях. С самого начала… Подробнее от Ричарда Макмануса

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *