How to Build a ChatGPT App (March 2026)

TL;DR: ChatGPT Apps are MCP Apps that run interactive UIs inside ChatGPT conversations. You build an MCP server with tools and UI resources, and ChatGPT renders your UI in a sandboxed iframe. The fastest way to start: pnpm add -g sunpeak && sunpeak new && sunpeak dev.

What Is a ChatGPT App?

A ChatGPT App is an interactive application that runs inside a ChatGPT conversation. When a user triggers your app (by @-mentioning it or selecting it from the tools menu), ChatGPT calls your MCP server’s tools and renders your UI directly in the chat.

ChatGPT Apps are built on the MCP Apps protocol, the first official extension to the Model Context Protocol. Anthropic and OpenAI co-developed the spec and released it as an open standard in January 2026. MCP Apps extend MCP with a standard for interactive UIs, so the same app code works in ChatGPT, Claude (via Connectors), Claude Desktop, VS Code GitHub Copilot, Goose, Postman, and MCPJam. You can check the full list on the MCP client extension matrix.

Here’s the architecture at a high level:

1. Your MCP server declares tools (functions the AI can call) and resources (UI templates using the ui:// URI scheme).
2. ChatGPT (the host) calls your tools when the AI decides to use them, then fetches and renders the associated UI resource.
3. Your UI runs in a sandboxed iframe. It communicates with ChatGPT via postMessage using JSON-RPC to receive tool data and call other tools.

This is the same architecture behind Claude Connectors and MCP Apps on every other supported host. Build a ChatGPT App on the MCP Apps protocol and you get multi-host support for free.

Official Resources

Here’s what’s available from OpenAI and the MCP community:

• OpenAI Apps SDK Documentation - OpenAI’s official docs covering app concepts, UX guidelines, building, deployment, and submission.
• MCP Apps in ChatGPT - OpenAI’s guide to MCP Apps compatibility in ChatGPT, including how MCP Apps and the Apps SDK relate.
• openai/openai-apps-sdk-examples - Example apps covering shopping carts, 3D viewers, OAuth flows, and more.
• openai/apps-sdk-ui - OpenAI’s open-source React component library with Radix primitives, design tokens, and Tailwind 4 integration.
• MCP Apps Extension Specification - The official MCP spec for interactive UIs across all MCP hosts.
• ext-apps SDK and Examples - The open-source SDK, reference implementation, and 15+ example apps (maps, 3D viewers, PDF readers, dashboards, and starter templates for React, Vue, Svelte, Preact, Solid, and vanilla JS).
• MCP Apps Blog Post - The official MCP blog post announcing the MCP Apps extension.

OpenAI’s own Apps SDK and the MCP Apps standard have converged. OpenAI contributed elements of the Apps SDK to the MCP Apps spec, so building on MCP Apps gives you compatibility with ChatGPT and every other MCP Apps host. The MCP Apps in ChatGPT guide recommends building with MCP Apps standard keys and bridge by default, and only using window.openai when you need ChatGPT-specific features like file uploads, instant checkout, or host modals.

Getting Started

1. Install and Scaffold

Make sure you have Node.js 20+ installed. Then create a new project:

pnpm add -g sunpeak && sunpeak new
cd sunpeak-app

This generates a project with a working MCP server, tool handlers, Zod schemas, and a sample UI resource. The scaffolded code follows the MCP Apps spec, so it works in ChatGPT, Claude, and other MCP Apps hosts out of the box.

If you already have an MCP server and just want to test it, you can skip scaffolding and run sunpeak inspect --server <url> to open the inspector against your existing server.

2. Start the Dev Server

sunpeak dev

This starts two servers: an MCP App inspector at localhost:3000 that replicates the ChatGPT runtime, and an MCP server at localhost:8000 with hot reload. Every time you save a file, the inspector updates automatically.

The inspector lets you trigger tools, see your UI render, switch between display modes (inline, PiP, fullscreen), toggle between ChatGPT and Claude host themes, and test the full app lifecycle without needing a ChatGPT account.

3. Connect to the Real ChatGPT

When you’re ready to test in the real ChatGPT, create a tunnel so ChatGPT can reach your local server:

ngrok http 8000

Then add the ngrok forwarding URL with /mcp path in ChatGPT:

1. Go to Settings > Apps & Connectors > Advanced settings and enable developer mode.
2. Go to Settings > Connectors > Create.
3. Enter a connector name, description, and the ngrok URL (e.g. https://abc123.ngrok.app/mcp).

This requires a paid ChatGPT account (Plus, Team, Business, or Enterprise). For more on developing without a paid account, see How to Build a ChatGPT App Without a Paid Account.

How Your App’s UI Works

Your app’s UI is a regular web page (HTML, CSS, JavaScript) that ChatGPT renders in a sandboxed iframe. The key difference from a normal web page: your UI communicates with ChatGPT through a postMessage bridge using JSON-RPC instead of making direct API calls.

When ChatGPT calls one of your tools, your MCP server returns data along with a reference to a ui:// resource (declared in the tool’s _meta.ui.resourceUri field). ChatGPT can preload the resource before the tool finishes, so your UI can start rendering while data is still streaming. Once the tool completes, ChatGPT pushes the result to your UI. Your UI can then call other tools back through the host, which means your app can be interactive across multiple turns of conversation.

OpenAI publishes apps-sdk-ui, an open-source component library with Radix primitives, Tailwind 4 integration, and design tokens that match ChatGPT’s native look. It’s optional but useful if you want your app to feel native in ChatGPT. For cross-host styling, see MCP App Styling with Host CSS Variables.

You don’t need to manage the postMessage bridge yourself. The MCP Apps SDK provides an App class and utilities that handle the communication layer. Frameworks like sunpeak build on top of this with React hooks like useToolData that give your component typed access to tool output without writing any bridge code.

Display Modes

ChatGPT Apps support three display modes that control how your UI appears:

• Inline renders your app’s UI within the conversation flow, like a rich message.
• Picture-in-picture (PiP) shows your app in a floating panel that persists as the user scrolls through the conversation.
• Fullscreen takes over the main chat area, giving your app maximum screen space.

You set the display mode in your tool definition. For a deeper look at each mode and when to use it, see the ChatGPT App Display Mode Reference. Apps can also request display mode transitions at runtime, so your UI can start inline and expand to fullscreen when the user needs more space. If you’re building for both ChatGPT and Claude, be aware that Claude Connectors handle display modes slightly differently, so testing across hosts matters.

Testing Your App

Testing in the real ChatGPT on every code change is slow: you’d need to refresh, re-trigger the tool, and wait for the AI to respond each time. That adds up to a 4-click manual refresh cycle per code change, per host. A local inspector gives you instant feedback with hot reload.

For automated testing, you can write unit tests for your tool handlers with Vitest and end-to-end tests for your UI with Playwright. sunpeak includes built-in support for both, so you can run sunpeak test to validate your app in CI/CD without needing a live ChatGPT connection. See the complete guide to testing ChatGPT Apps for the full setup, or MCP App CI/CD with GitHub Actions for pipeline configuration.

Submitting to the App Directory

The ChatGPT App Directory is live and accepting submissions. To submit your app:

1. Create a verified developer account on the OpenAI Developer Platform.
2. Deploy your MCP server to a publicly accessible URL. sunpeak apps can be deployed with sunpeak build && sunpeak start behind any hosting provider, or see the MCP App deployment guide for options including Cloudflare, Vercel, and others.
3. Submit through the Developer Platform with your MCP server URL, app metadata (name, description, icon), testing guidelines, and country availability.

Apps go through an approval process. OpenAI reviews for quality, security, and adherence to their UX guidelines. When approved, your app appears in the directory and OpenAI automatically creates a plugin for Codex distribution too.

Building for Multiple Hosts

Because ChatGPT Apps use the MCP Apps protocol, your app works wherever MCP Apps are supported. As of March 2026, that’s seven hosts: ChatGPT, Claude, Claude Desktop, VS Code GitHub Copilot, Goose, Postman, and MCPJam.

The main things to watch when targeting multiple hosts are display mode differences and host-specific CSS variables. For a practical walkthrough, see Building One MCP App for ChatGPT and Claude. You can also read How to Build a Claude Connector for details on how the same MCP server works on the Claude side.

ChatGPT offers optional extensions like file uploads, instant checkout, and host modals through window.openai. These should feature-detect and degrade gracefully in other hosts. The MCP Apps in ChatGPT guide covers what’s ChatGPT-specific versus what’s part of the open standard.

sunpeak’s inspector lets you switch between ChatGPT and Claude host themes during development, so you can catch cross-host issues before deploying. For styling, see MCP App Styling with Host CSS Variables to make your UI adapt to each host’s design tokens.