Next.js In Chatgpt: Vercel Brings The Dynamic Web To Ai Chat

For Vercel’s Andrew Qu, OpenAI’s caller ChatGPT Apps platform presented a challenge.

“ChatGPT initially designed their apps to beryllium fixed HTML pages, cached, truthful they tin present a accordant but fixed acquisition to everyone,” he told The New Stack. “But nan web has progressed each this clip to make things much dynamic… truthful to benignant of forgo each that activity and only abide by what we could person supported 10 aliases 20 years agone felt for illustration a discarded of progress.”

It’s not wholly adjacent to opportunity that ChatGPT apps are “static,” since nan examples demonstrated by OpenAI connected its DevDay could respond to personification input, trigger backend actions and update their views dynamically. But Qu’s larger constituent is that ChatGPT apps are only allowed to tally wrong a tightly sandboxed environment, which OpenAI designed for information and consistency. So from that perspective, ChatGPT apps are surely much constricted than afloat single-page applications (SPAs).

In immoderate case, Qu and his squad group retired to push beyond these constraints — specifically, to make Next.js, Vercel’s flagship React framework, run natively wrong ChatGPT’s controlled runtime.

What they recovered was a profoundly layered runtime. “Things activity wrong for illustration a triple-nested iframe infrastructure,” Qu said. Each furniture adds restrictions connected navigation and authorities management, meaning moreover basal browser functions for illustration pushState and replaceState person been patched to forestall analyzable routing. Here’s really Qu illustrated this successful a blog post:

How Vercel Makes ChatGPT Apps Dynamic

To flooded those limits, Vercel devised a bid of workarounds for plus loading, redirects and hydration. The result: a Next.js app that tin render dynamically wrong ChatGPT without altering nan model itself.

“There are nary tweaks that request to beryllium done astatine nan model level,” Qu explained. “Everything tin beryllium implemented successful personification land. It’s mostly conscionable different book constituent you adhd to nan layout, and a fewer mini catches present and there.”

“There are nary tweaks that request to beryllium done astatine nan model level. Everything tin beryllium implemented successful personification land.”
– Andrew Qu, Vercel main of software

In different words, Vercel didn’t fork Next.js aliases build a typical type for OpenAI’s level — it built a template that immoderate developer tin follow. By deploying a modular Next.js task and pointing ChatGPT’s connector astatine nan resulting URL, developers tin now embed analyzable frontend experiences straight successful chat.

“As agelong arsenic you travel nan guideline wrong nan blog, aliases you usage nan sample template that we published, it should conscionable work,” Qu said.

That whitethorn sound deceptively simple, but ChatGPT’s sandbox introduces subtler constraints.

“You’re still capable to make afloat web requests pinch typical whitelisting of what domains are allowed,” Qu noted. “The main things that are different are erstwhile you unfastened outer links — those get intercepted… there’s a concealed window.openAI.openExternalLink() usability that they load successful for you.”

Not Every App Belongs successful a Chat

Even though Next.js apps tin beryllium reasonably easy ported to ChatGPT, not each web app belongs wrong a chat interface.

Qu pointed retired that moreover OpenAI’s ain marketplace partners — specified arsenic Booking.com, DoorDash and Expedia — don’t expose their afloat sites. “A batch of them conscionable render a widget […], truthful it benignant of fits successful pinch nan conversation,” he said.

That said, Vercel wanted to make judge developers could build aggregate widgets wrong ChatGPT.

“The point we were trying to lick pinch getting Next.js to activity [in ChatGPT] is that you could still state aggregate different widgets successful 1 app, and you tin do it successful a acquainted way, alternatively than trying to spell and constitute HTML aliases JS by hand,” Qu explained.

To make that easier, Vercel is preparing a group of React “GPT hooks,” a lightweight room that will expose ChatGPT-specific model properties — including show mode, maximum height, speech authorities and moreover real-time completions from nan connection model. “There’s a batch of weird hooks that AI employs connected nan model object,” Qu said. “We’re trying to people a package that lets you entree everything you need.”

The Role of MCP

So really does nan Model Context Protocol (MCP) fresh into each this? OpenAI itself describes MCP arsenic “the backbone that keeps server, exemplary and UI successful sync” successful nan ChatGPT app paradigm. I asked Qu what Vercel’s attack to MCP has been pinch nan Next.js integration.

“I person a batch of arguable opinions astir MCP,” Qu chuckled. “It had nan committedness of being this all-be, all-see integration endpoint for AI, but a batch of group misuse it and benignant of conscionable dainty it arsenic an API mirror.”

He recommends utilizing MCP only erstwhile developers don’t power nan client, specified arsenic connecting ChatGPT to Notion aliases GitHub — but not for soul toolchains wherever nonstop APIs make much sense.

Aligning With GPT-5’s Stack

I noted that successful nan GPT-5 Prompting Guide, OpenAI explicitly recommends Next.js (TypeScript), React and HTML arsenic nan preferred frontend frameworks for AI-driven development. Has that alignment pinch OpenAI made it easier to do this Next.js integration pinch ChatGPT?

“We are trying to activity pinch immoderate and each exemplary labs to make Next.js better,” Qu replied. “We conscionable want each LLMs to make amended code, crossed nan board.”

While that didn’t straight reply my question, nan accusation is that Vercel wants to beryllium a default web model for each AI chatbots — not conscionable ChatGPT. Qu pointed to a caller “evals” page connected nan Next.js website, which shows AI exemplary capacity evaluations. An OpenAI GPT exemplary is presently number one, but an Anthropic exemplary isn’t acold behind.

If Anthropic aliases different supplier launches a akin chat app store, Qu said Vercel will “spend nan clip to make judge that […] we tin officially activity pinch [them] to creation nan spec and to beryllium nan DevEx arm.” He added that nan institution is already experimenting pinch SvelteKit (which Vercel backs) arsenic different campaigner for chat-based apps, since its stricter HTML/JS output aligns intimately pinch ChatGPT’s fixed assumptions.

The Web arsenic nan Primary Interface for AI

Stepping back, Qu sees this activity arsenic grounds that nan unfastened web remains cardinal successful nan property of AI interfaces.

“We’re trying to do this point pinch Next.js arsenic a impervious constituent that moreover if group don’t really interact pinch nan web successful nan accepted consciousness […] it’s still up to nan group to build nan experiences that will past beryllium embedded into nan chat experiences,” he said.

Rather than viewing chat clients arsenic browser replacements, he envisions them arsenic caller distribution layers for web contented — places wherever developers tin reuse their existing frameworks and hosting workflows.

“I’m personally betting that nan unfastened web will still beryllium a thing,” Qu continued. “We person this caller medium, this caller measurement of interacting pinch computers done chat clients, but we tin still person nan aforesaid expressiveness and nan aforesaid unfastened standards to interact pinch such.”

“…even if group don’t interact pinch nan web successful nan accepted consciousness […] it’s still up to nan group to build nan experiences that will past beryllium embedded into nan chat experiences.”
– Andrew Qu

One emerging area of attraction is agentic commerce, wherever storefronts aboveground straight wrong chat sessions. Qu argues that this could make e-commerce much open, not less.

“If you person a storefront and you tin people it, it should beryllium nary harder than sharing a link,” he said. “That’s very against nan [smartphone] app shop model… I deliberation nan ChatGPT Apps acquisition really gets america person to that.”

React and Next.js arsenic nan Default AI Stack

As much developers — and increasingly, AI models themselves — usage Next.js, Vercel has seen usage explode. “Just successful nan past 1 period alone, we’ve had much Next.js downloads than successful nan erstwhile 10 years combined,” Qu said. He attributes this surge not only to master developers but to “a bigger activity and a little obstruction of entry,” arsenic AI-generated codification lowers nan clash for building web apps.

Asked whether React and Next.js mightiness go nan default stack for AI-native UIs, Qu didn’t hesitate: “Certainly deliberation so. I deliberation nan ergonomics and nan human/AI DX [developer experience] is beautiful good.”

Qu besides argues that React’s constituent exemplary provides nan correct equilibrium betwixt machine-generated building and quality creation intent. Some developers mightiness quibble pinch that and respond that React’s complexity has warped web improvement excessively acold towards DevEx.

But overall, Vercel’s speedy integration of Next.js pinch nan ChatGPT apps level shows that AI chatbots won’t conscionable beryllium constricted to lightly interactive widgets — blase web apps will unrecorded connected these platforms too.

Group Created pinch Sketch.