The Gadget team shares its experience report after several days of intensive development on OpenAI's new ChatGPT Apps SDK. The article details the three essential components of a ChatGPT application: an MCP server compliant with the Model Context Protocol, an extension enabling user interfaces to be displayed within conversations, and optionally an OAuth 2.1 server with OIDC for authentication.
For building MCP servers, the article recommends using the Streamable HTTP transport rather than the SSE version presented in OpenAI's official examples. The provided examples use an in-memory session map that is unsuited to serverless platforms. The MCP Inspector is recommended for initial debugging, since ChatGPT's error messages are not very informative.
Implementing OAuth 2.1 authentication represents a paradigm shift: unlike the usual practice of redirecting to an external provider such as Google, here the application itself must act as the OAuth provider for OpenAI. This requires implementing the OIDC discovery endpoints that allow ChatGPT to obtain tokens.
The most innovative feature is the ability to serve interactive UI widgets to users. These widgets are in fact sandboxed iframes that load a static HTML document, cached at application installation time. This constraint mandates the development of client-side single-page applications, with no dynamic server-side rendering. The team recommends Vite for TypeScript compilation, bundling, hot-module-reloading and Tailwind support. A dedicated Vite plugin is available on GitHub.
For communication with the backend from a widget, two approaches exist. The window.openai object injected by OpenAI allows MCP tools to be called with authentication handled automatically and visibility for the LLM into the interactions. The alternative via direct fetch requires handling authentication manually and loses the LLM's contextual awareness.
CORS is a major challenge, with three distinct configurations to manage: MCP routes, OAuth 2.1 routes, and frontend assets. For the first two, a permissive Access-Control-Allowed-Origin: * header is recommended, since authentication already secures the calls. For widget assets, the origin https://web-sandbox.oaiusercontent.com used by OpenAI must be allowed.
The article concludes that the ecosystem is still very young but promising, with ready-to-use templates available at Gadget to accelerate getting started.