Running Next.js in ChatGPT: How to Build ChatGPT Apps

OpenAI's introduction of the Apps SDK with Model Context Protocol (MCP) support has enabled developers to embed interactive web applications, such as those built with Next.js, directly into ChatGPT conversations. By leveraging MCP, which functions similarly to REST or GraphQL for AI models, developers can integrate their applications into ChatGPT's triple-iframe architecture, overcoming challenges such as asset loading, client-side navigation, and cross-origin requests. While the security model of ChatGPT's architecture presents technical hurdles, such as broken Next.js features due to the nested iframes, these can be addressed through various patches like setting asset prefixes, rewriting fetch requests, and using CORS headers. The use of these patches allows developers to maintain the full functionality of Next.js apps, including React Server Components and dynamic routing, ensuring a native-feeling user experience within ChatGPT. Additionally, with the provided starter template, developers can quickly deploy Next.js apps to Vercel, benefiting from seamless user interactions and the extensive reach of ChatGPT's user base.