This starter project provides a minimal Next.js application template for building OpenAI Apps SDK compatible MCP (Model Context Protocol) servers. It enables developers to expose tools and resources that can be called from ChatGPT, with responses rendered natively within the ChatGPT interface as interactive widgets. The primary benefit is seamless integration, allowing Next.js applications to act as dynamic components within the ChatGPT user experience.

How It Works

The project leverages a Next.js application as an MCP server. A dedicated route (app/mcp/route.ts) registers tools and resources, including HTML content for iframe rendering, using OpenAI-specific metadata. Crucially, next.config.ts is configured with an assetPrefix to ensure static assets load correctly within the iframe context. A CORS middleware handles preflight requests for cross-origin communication. The NextChatSDKBootstrap component in app/layout.tsx patches browser APIs like window.fetch and history.pushState to ensure proper functionality within the ChatGPT iframe environment.

Quick Start & Requirements

• Installation: npm install or pnpm install
• Development: npm run dev or pnpm dev
• Prerequisites: Node.js, npm/pnpm. For testing: Deployment to Vercel, ChatGPT developer mode access.
• Links:
  • OpenAI Apps SDK Documentation: https://platform.openai.com/docs/apps/
  • OpenAI Apps SDK - MCP Server Guide: https://platform.openai.com/docs/apps/model-context-protocol
  • Model Context Protocol: https://platform.openai.com/docs/apps/model-context-protocol
  • Next.js Documentation: https://nextjs.org/docs

Highlighted Details

• MCP Server Route: Implements tool and resource registration with OpenAI-specific metadata, including openai/resultCanProduceWidget: true to enable widget rendering.
• Asset Prefixing: Essential assetPrefix configuration in next.config.ts prevents 404 errors for static assets loaded within the iframe.
• SDK Bootstrap: Patches browser APIs for iframe compatibility, requiring suppressHydrationWarning due to initial HTML modifications by ChatGPT.
• Vercel Deployment: Designed for seamless deployment on Vercel, automatically configuring production and preview URLs and asset prefixes.

Maintenance & Community

No specific details regarding maintainers, community channels, or project health signals were found in the provided README.

Licensing & Compatibility

The README does not explicitly state the project's license. Compatibility for commercial use or closed-source linking is undetermined without a specified license.

Limitations & Caveats

Connecting MCP servers to ChatGPT requires developer mode access. The suppressHydrationWarning prop is currently a mandatory configuration due to ChatGPT modifying the initial HTML before Next.js hydration.