A minimal Next.js application demonstrating how to build an OpenAI Apps SDK compatible MCP server with widget rendering in ChatGPT.
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.
app/mcp/route.ts
)The core MCP server implementation that exposes tools and resources to ChatGPT.
Key features:
templateUri
OpenAI-specific metadata:
{"openai/outputTemplate": widget.templateUri, // Links to resource"openai/toolInvocation/invoking": "Loading...", // Loading state text"openai/toolInvocation/invoked": "Loaded", // Completion state text"openai/widgetAccessible": false, // Widget visibility"openai/resultCanProduceWidget": true // Enable widget rendering}
Full configuration options: OpenAI Apps SDK MCP Documentation
next.config.ts
)Critical: Set assetPrefix
to ensure /_next/
static assets are fetched from the correct origin:
const nextConfig: NextConfig = {assetPrefix: baseURL, // Prevents 404s on /_next/ files in iframe};
Without this, Next.js will attempt to load assets from the iframe's URL, causing 404 errors.
middleware.ts
)Handles browser OPTIONS preflight requests required for cross-origin RSC (React Server Components) fetching during client-side navigation:
export function middleware(request: NextRequest) {if (request.method === "OPTIONS") {// Return 204 with CORS headers}// Add CORS headers to all responses}
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 elementRequired configuration:
<html lang="en" suppressHydrationWarning><head><NextChatSDKBootstrap baseUrl={baseURL} /></head><body>{children}</body></html>
Note: suppressHydrationWarning
is currently required because ChatGPT modifies the initial HTML before the Next.js app hydrates, causing hydration mismatches.
npm install# orpnpm install
npm run dev# orpnpm dev
Open http://localhost:3000 to see the app.
The MCP server is available at:
http://localhost:3000/mcp
/mcp
path (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.
app/├── mcp/│ └── route.ts # MCP server with tool/resource registration├── layout.tsx # Root layout with SDK bootstrap├── page.tsx # Homepage content└── globals.css # Global stylesmiddleware.ts # CORS handling for RSCnext.config.ts # Asset prefix configuration
app/mcp/route.ts
templateUri
pointing to a registered resourcefetch
to load RSC payloadsThis 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:
VERCEL_PROJECT_PRODUCTION_URL
VERCEL_BRANCH_URL