Enables the creation of MCP servers compatible with the OpenAI Apps SDK, allowing ChatGPT to invoke tools and render native widgets within its interface.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@ChatGPT Apps SDK Next.js Startershow the demo interactive widget"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
ChatGPT Apps SDK Next.js Starter
A minimal Next.js application demonstrating how to build an OpenAI Apps SDK compatible MCP server with widget rendering in ChatGPT.
Overview
This project shows how to integrate a Next.js application with the ChatGPT Apps SDK using the Model Context Protocol (MCP). It includes a working MCP server that exposes tools and resources that can be called from ChatGPT, with responses rendered natively in ChatGPT.
Key Components
1. MCP Server Route (app/mcp/route.ts)
The core MCP server implementation that exposes tools and resources to ChatGPT.
Key features:
Tool registration with OpenAI-specific metadata
Resource registration that serves HTML content for iframe rendering
Cross-linking between tools and resources via
templateUri
OpenAI-specific metadata:
Full configuration options: OpenAI Apps SDK MCP Documentation
2. Asset Configuration (next.config.ts)
Critical: Set assetPrefix to ensure /_next/ static assets are fetched from the correct origin:
Without this, Next.js will attempt to load assets from the iframe's URL, causing 404 errors.
3. CORS Middleware (middleware.ts)
Handles browser OPTIONS preflight requests required for cross-origin RSC (React Server Components) fetching during client-side navigation:
4. SDK Bootstrap (app/layout.tsx)
The <NextChatSDKBootstrap> component patches browser APIs to work correctly within the ChatGPT iframe:
What it patches:
history.pushState/history.replaceState- Prevents full-origin URLs in historywindow.fetch- Rewrites same-origin requests to use the correct base URL<html>attribute observer - Prevents ChatGPT from modifying the root element
Required configuration:
Note: suppressHydrationWarning is currently required because ChatGPT modifies the initial HTML before the Next.js app hydrates, causing hydration mismatches.
Getting Started
Installation
Development
Open http://localhost:3000 to see the app.
Testing the MCP Server
The MCP server is available at:
Connecting from ChatGPT
In ChatGPT, navigate to Settings → and add your MCP server URL with the
/mcppath (e.g.,https://your-app.vercel.app/mcp)
Note: Connecting MCP servers to ChatGPT requires developer mode access. See the connection guide for setup instructions.
Project Structure
How It Works
Tool Invocation: ChatGPT calls a tool registered in
app/mcp/route.tsResource Reference: Tool response includes
templateUripointing to a registered resourceWidget Rendering: ChatGPT fetches the resource HTML and renders it in an iframe
Client Hydration: Next.js hydrates the app inside the iframe with patched APIs
Navigation: Client-side navigation uses patched
fetchto load RSC payloads
Learn More
Deployment
This project is designed to work seamlessly with Vercel deployment. The baseUrl.ts configuration automatically detects Vercel environment variables and sets the correct asset URLs.
The configuration automatically handles:
Production URLs via
VERCEL_PROJECT_PRODUCTION_URLPreview/branch URLs via
VERCEL_BRANCH_URLAsset prefixing for correct resource loading in iframes