Для Ендрю К’ю з компанії Vercel нова платформа ChatGPT Apps від OpenAI стала справжнім викликом.
«Спершу ChatGPT створював свої додатки як статичні HTML-сторінки з кешуванням, щоб забезпечити однаковий, але статичний досвід для всіх користувачів», — зазначив він у розмові з The New Stack. «Однак розробка веб-сайтів значно просунулася вперед, дозволяючи створювати все більш динамічні інтерфейси… тому ігнорувати цей прогрес і дотримуватися обмежень, які підходили 10 чи 20 років тому, вважалося марною втратою здобутків».
Варто відзначити, що описувати ChatGPT Apps виключно як «статичні» було б зайве спрощенням, адже показані на DevDay приклади містили інтерактивні елементи: вони реагували на дії користувача, запускали бекенд-процеси та оновлювали інтерфейси в режимі реального часу. Однак головна думка К’ю полягає в тому, що ці додатки працюють у суворо ізольованому середовищі — пісочниці, розробленій OpenAI для забезпечення безпеки та передбачуваності. З цієї точки зору, можливості ChatGPT Apps значно обмежені у порівнянні з повноцінними односторінковими веб-застосунками (SPA).
Незважаючи на це, Ендрю К’ю та його команда взялися подолати згадані обмеження та домогтися нативного запуску Next.js — флагманського React-фреймворка від Vercel — у контрольованому середовищі ChatGPT.
Під час дослідження вони виявили багаторівневу структуру середовища виконання. «Функціонування базується на триразово вкладених iframe», — пояснив К’ю. Кожен рівень накладає обмеження на навігацію та управління станом, через що навіть базові браузерні методи, такі як pushState та replaceState, були модифіковані щоб заборонити складну маршрутизацію. Схематично це можна зобразити таким чином:
chatgpt.com
└── web-sandbox.oaiusercontent.com (пісочниця iframe)
└── web-sandbox.oaiusercontent.com (внутрішній iframe)
└── HTML вашого додатку
Як Vercel забезпечує динамічність ChatGPT додатків
Щоб обійти ці обмеження, Vercel розробив низку нетривіальних рішень для завантаження ресурсів, перенаправлень і гідратації. У результаті з’явився Next.js додаток, здатний динамічно рендеритися в середині ChatGPT без внесення змін у сам фреймворк.
«На рівні самого фреймворка жодних модифікацій не потрібно», — зазначив К’ю. — «Все можна реалізувати на стороні користувача. Це фактично просто додавання додаткового скрипта у розмітку та кілька дрібних обробників».
Інакше кажучи, Vercel не форкував Next.js і не створював особливу версію під платформу OpenAI, а розробив шаблон, яким може скористатися будь-який розробник. Запустивши стандартний проєкт Next.js і вказавши в конекторі ChatGPT відповідний URL, можна тепер вбудовувати складні фронтенд віджети прямо у чат.
«Якщо слідувати рекомендаціям із нашого блогу або скористатися опублікованим шаблоном, це працюватиме без проблем», — запевнив Ендрю К’ю.
Попри простоту на словах, середовище пісочниці ChatGPT накладає й додаткові, менш очевидні успіхи.
«Можливість виконувати повні мережеві запити з обмеженням тільки на дозволені домени залишається», — пояснив К’ю. — «Однак зовнішні посилання перехоплюються, і для їх відкриття застосовується прихована функція window.openAI.openExternalLink().»
Не кожен додаток підходить для інтерфейсу чату
Хоча перенос Next.js додатків у ChatGPT є доволі нескладним, не кожен вебзастосунок доречний у форматі чатінтерфейсу.
К’ю зауважив, що навіть маркетплейс-партнери OpenAI — такі як Booking.com, DoorDash чи Expedia — не демонструють повні версії своїх сайтів через чат. «Більшість лише рендерить невеликі віджети […], які органічно вписуються у контекст діалогу», — пояснив він.
Vercel прагне полегшити створення у межах ChatGPT кількох виджетів.
«Ми хотіли, щоб в одному додатку можна було декларативно визначати кілька різних віджетів у зручний спосіб, а не писати HTML чи JavaScript вручну», — підкреслив К’ю.
Для демонстрації цієї ідеї варто побачити приклад ChatGPT-додатку від Canva, який ілюструє інтеграцію з використанням віджетів.
Щоб ще більше спростити створення подібних інтерактивних елементів, Vercel готує легку бібліотеку React “GPT hooks”. Вона відкриє доступ до специфічних властивостей вікна ChatGPT, таких як:
- режим відображення,
- максимальна висота,
- стан поточної розмови,
- реалтаймова відповідь моделі,
та інших. За словами К’ю, «є безліч незвичних хуків, які ChatGPT додає у вікно, і ми прагнемо випустити пакет, що дозволить отримати все необхідне».
Роль протоколу Model Context Protocol (MCP)
OpenAI описує MCP як «хребет, що синхронізує сервер, модель і UI у ChatGPT-додатках». Запитавши К’ю про те, як Vercel інтегрує MCP у Next.js додатки, він відповів:
«У мене досить суперечливі думки про MCP», — жартував він. — «Цей протокол мав стати універсальним інтеграційним мостом для AI, але багато користуються ним неправильно, сприймаючи як дзеркало API».
Він радить застосовувати MCP лише тоді, коли розробник не контролює клієнтську сторону — наприклад, при підключенні ChatGPT до Notion або GitHub — а для внутрішніх інструментів краще використовувати прямі API.
Узгодження зі стеком GPT-5
У Посібнику з підказок для GPT-5 OpenAI рекомендує Next.js (з TypeScript), React та HTML як переважні фронтенд-фреймворки для AI-орієнтованої розробки. Чи полегшує це інтеграцію Next.js з платформою ChatGPT?
«Ми прагнемо співпрацювати з усіма лабораторіями моделей, щоб покращувати Next.js», — відповів К’ю. — «Наша мета — щоб усі великі мовні моделі (LLM) генерували якісний код загалом».
Це свідчить про намір Vercel стати стандартним фреймворком веброзробки для всіх AI-чатботів, а не лише ChatGPT. На сайті Next.js з’явилась сторінка “evals” з оцінками продуктивності моделей; наразі модель OpenAI GPT на першому місці, але модель Anthropic поступається зовсім трохи.
Якщо з’явиться чат-апстор від Anthropic чи іншого провайдера, Vercel має намір «витратити час на офіційне співробітництво для розробки специфікацій та поліпшення досвіду розробника». Водночас компанія експериментує з SvelteKit — ще одним проектом, який підтримує Vercel, адже його більш суворий HTML/JS-вивід краще підходить під статичні обмеження ChatGPT.
Веб як основний інтерфейс для AI
В цілому, Ендрю К’ю вважає цю роботу підтвердженням того, що відкритий веб залишається центральною платформою у епоху AI-інтерфейсів.
«Доказом є наш проект з Next.js: навіть якщо користувачі і не взаємодіють із вебом традиційно […], саме розробники створюють досвід, який потім інтегрується у чат-інтерфейси», — пояснив він.
Він не бачить чат-клієнти як заміну браузерам, а радше як додатковий канал розповсюдження вебконтенту — місце, де розробники можуть повторно використовувати знайомі фреймворки й інфраструктуру хостингу.
«Я особисто ставлю на те, що відкритий веб залишиться актуальним», — додав К’ю. — «Ми отримали новий формат взаємодії з комп’ютерами через чат, проте збережемо колишню експресивність та відкриті стандарти».
Агентський комерційний потенціал
Окремим напрямком є «агентський комерс», де магазини і сервіси інтегруються безпосередньо у сесії чату. К’ю вважає, що це робить електронну комерцію відкритішою, а не навпаки.
«Якщо у вас є віртуальний магазин і ви можете його опублікувати, це має бути не важче, ніж поділитися посиланням», — пояснив він. — «Це принципово відрізняється від моделі смартфонних апсторів… Досвід ChatGPT Apps дуже наближує нас до такої відкритості.»
React і Next.js як стандартний AI-стек
З поширенням застосування Next.js, як серед розробників, так і моделей штучного інтелекту, Vercel зафіксував вибухове зростання попиту — «лише за останній місяць кількість установок Next.js перевищила сумарний показник за попередні десять років», — зауважив К’ю. Значною мірою це пояснюється не лише професійними розробниками, а й ширшим рухом зниження порогу входу завдяки коду, що генерується AI.
Коли його запитали, чи стане React з Next.js домінуючим стеком для AI-орієнтованих інтерфейсів, К’ю відповів без сумнівів: «Безперечно. Ергономіка та досвід розробника із залученням AI насправді дуже хороші».
Він також робить акцент на тому, що компонентна модель React забезпечує оптимальний баланс між структурою, створеною машиною, та намірами дизайнера. Хоча хтось може критикувати React за складність і надмірне ускладнення розробки, фактом лишається, що Vercel швидко продемонстрував можливість роботи повноцінних вебзастосунків на платформі ChatGPT.
Отже, перспектива розвитку AI-чатботів охоплює не лише просто інтерактивні віджети, а й складні, динамічні веб-додатки, що вбудовуються безпосередньо в інтерфейси чату.
