Running Next.js inside ChatGPT: A deep dive into native app integration
By Steven Van ·
Vercel details the iframe and routing patches needed to run a full Next.js app inside ChatGPT via OpenAI's Apps SDK, and ships a starter template.
Vercel published a technical write-up on getting a full Next.js application running inside ChatGPT via OpenAI's Apps SDK and Model Context Protocol (MCP). ChatGPT renders apps through a three-layer iframe structure, with a sandbox domain sitting between ChatGPT and the app for security. Because Next.js inside that innermost iframe thinks its origin is the sandbox domain rather than the app's real domain, several core framework features break.
The post details the fixes for each issue:
- Static asset requests to /_next/static/ return 404s because they resolve against the sandbox domain; setting Next.js's assetPrefix to the app's real URL corrects this.
- Relative paths for images, fonts and API calls resolve incorrectly; adding an HTML <base> element fixes this for the whole document.
- Browser history via pushState/replaceState stores full URLs, exposing the app's real domain; patching these to strip URLs down to path, search and hash keeps the sandbox boundary intact.
- Client-side navigation fetches, CORS on React Server Component requests, parent-frame HTML modifications causing hydration mismatches, and external links opening inside the iframe are also addressed.
Vercel has released a Vercel ChatGPT Apps SDK Next.js starter template, deployable directly to Vercel, that applies these patches and MCP server configuration automatically. Read the full announcement for the complete set of fixes.
