“The ChatGPT app ecosystem is built connected trust,” OpenAI’s guidelines for app developers proclaim.
As nan AI ecosystem expands, OpenAI’s ChatGPT needs thief drilling down connected section accusation — and this is chiefly what nan OpenAI Apps SDK, introduced at nan opening of nan month, is for. The problem for OpenAI is that it is really nan web that is built connected trust; but for each intents and purposes, OpenAI wants to bypass that.
The improvement process is comparatively austere and unapproachable, truthful this station conscionable focuses connected nan basal concepts you request to understand earlier you tin get down to development.
What Are ChatGPT Apps and What Is Their Purpose?
What precisely is simply a ChatGPT App for? The superior constituent of an app is to heighten a ChatGPT conversation, thing more. Think of them arsenic ocular experiences that look successful various guises (for instance, carousels) that merge seamlessly into a speech without breaking nan personification context.
OpenAI is relying connected your app’s metadata to accurately picture nan questions that it tin reply — either arsenic a whole, aliases arsenic portion of nan app. We will spot that travel up later. But beyond this, I ideate this will play retired for illustration nan Apple App Store, pinch immoderate apps being favored by OpenAI and immoderate being blackballed. Without favor, your app will not beryllium capable to enactment arsenic a merchant.
Let’s return a speedy look astatine nan effect OpenAI is hoping for.
Understanding nan Inline App Display
The inline show mode appears straight successful nan travel of nan conversation. Imagine that you are connected ChatGPT and are asking astir pizzas successful San Francisco:

Let’s return a look, from apical to bottom, astatine nan various fixed aspects:
- At nan apical is nan query; this will beryllium what your app’s metadata suggests it tin answer.
- Then, conscionable supra nan main visuals, is an icon pinch nan app sanction “Pizzazz.”
- Then we spot nan inline display, which is your “app content.”
- Finally, it tails disconnected pinch a model-generated response. (Although it mightiness besides beryllium mostly driven by your app; nan archiving is ambiguous here.)
I person nary uncertainty nan preamble of OpenAI’s Atlas browser will summation nan liking successful providing apps — overmuch for illustration nan dispersed of nan web accrued liking successful websites.
In truth you tin moreover inquire Atlas to tally an App example. This 1 didn’t work, but astatine slightest it tried:

But don’t publication thing into nan supra until you’ve understood what nan main exertion you request is.
The Core Technology: Model Context Protocol (MCP)
The cardinal prima of immoderate OpenAI App is Model Context Protocol (or MCP), which has fortunately been written astir quite a bit a fewer months ago. We’ve moreover written astir rich components done MCP, truthful moreover that isn’t new. But don’t publication immoderate further until you person grokked nan basics of MCP, because nan Apps SDK leans heavy connected it — treating your app arsenic a group of instrumentality calls.
The thought is that you picture capable astir your devices that ChatGPT knows erstwhile it tin usage them, and will return immoderate type of fixed information format that it tin plug into a design.
But why MCP? A batch of nan reasons travel down to its protocol-agnostic nature, and usage of earthy connection successful descriptions — which ample connection models are bully with. OAuth 2.1 flows are utilized for entree control. Plus, you tin easy tally section MCP servers.
So, your minimal MCP server for Apps SDK has to instrumentality these 3 capabilities astatine least:
- It must database (or advertise) each of its tools, and nan style of nan incoming and return data.
- It must respond to nan exemplary calling nan tool via call_tool.
- The instrumentality must past return system content, and optionally constituent to thing other needed by nan ChatGPT customer to render your content.
One of nan somewhat sinister but well-intentioned quotes successful nan OpenAI Apps SDK archive is this: “Good find hygiene intends your app appears erstwhile it should and stays quiet erstwhile it should not.” What they mean is that each instrumentality consequence needs to beryllium against an “action-oriented” petition initiated by nan personification successful nan conversation.
The Role and Rules of Your MCP Server
So your MCP server is nan instauration of your app. It exposes devices that nan exemplary tin call, and returns nan packaged system information positive constituent HTML that nan ChatGPT customer renders inline. It besides mightiness request to woody pinch immoderate authentication needed to entree definite resources.
Within your server, location are a number of rules. There should beryllium 1 “action-focused” occupation per tool. This whitethorn not beryllium businesslike to write, but it makes nan customer travel much refined. For example, publication and constitute behaviour would surely beryllium different calls.
Apart from nan action-oriented instrumentality name, nan exemplary is besides looking for action-oriented sentences wrong nan explanation of nan instrumentality that commencement “Use this erstwhile ….” The illustration successful nan docs is, “Use this erstwhile nan personification wants to position their kanban board.”
In summation to returning system data, each instrumentality connected your MCP server should besides reference an HTML UI template successful its descriptor. This HTML template will beryllium rendered successful an iframe by ChatGPT. We will look astatine this concisely below.
Example App
The fastest measurement to get started is to usage nan supported charismatic Python SDK aliases nan Typescript SDK. Then adhd your preferred web framework.
We’ll extremity this station pinch nan HTML UI template registration that ChatGPT will render pinch an iframe, arsenic we saw successful nan examples astatine nan top. These are each successful nan documentation. Otherwise, usage nan fixed examples to manner your first attempts.
The node illustration is nan 1 featured. First, nan MCP server is created:
// Create an MCP server const server = new McpServer({ name: "kanban-server", version: "1.0.0"}); |
Then we registry nan UI template:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
// UI assets (no inline information assignment; big will inject data) server.registerResource( "kanban-widget", "ui://widget/kanban-board.html", {}, async () => ({ contents: [ { uri: "ui://widget/kanban-board.html", mimeType: "text/html+skybridge", text: ` <div id="kanban-root"></div> ${KANBAN_CSS ? `<style>${KANBAN_CSS}</style>` : ""} <script type="module">${KANBAN_JS}</script> `.trim(), _meta: { /* Renders nan widget wrong a rounded separator and shadow. Otherwise, nan HTML is rendered full-bleed successful nan conversation */ "openai/widgetPrefersBorder": true, /* Assigns a subdomain for nan HTML. When set, nan HTML is rendered wrong `chatgpt-com.web-sandbox.oaiusercontent.com` It's besides utilized to configure nan guidelines url for outer links. */ "openai/widgetDomain": 'https://chatgpt.com', /* Required to make outer web requests from nan HTML code. Also utilized to validate `openai.openExternal()` requests. */ 'openai/widgetCSP': { // Maps to `connect-src` norm successful nan iframe CSP connect_domains: ['https://chatgpt.com'], // Maps to style-src, style-src-elem, img-src, font-src, media-src etc. successful nan iframe CSP resource_domains: ['https://*.oaistatic.com'], } } }, ], }) ); |
From now on, nan assets is recognised via that uri of ui://widget/kanban-board.html. Also, statement nan required mime type of text/html+skybridge. (It is assumed that CSS and HTML contented exists for nan kanban committee itself.)
Finally, nan instrumentality is registered:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
server.registerTool( "kanban-board", { title: "Show Kanban Board", _meta: { // subordinate this instrumentality pinch nan HTML template "openai/outputTemplate": "ui://widget/kanban-board.html", // labels to show successful ChatGPT erstwhile nan instrumentality is called "openai/toolInvocation/invoking": "Displaying nan board", "openai/toolInvocation/invoked": "Displayed nan board" }, inputSchema: { tasks: z.string() } }, async () => { return { content: [{ type: "text", text: "Displayed nan kanban board!" }], structuredContent: {} }; } ); |
Note that nan outTemplate matches nan template uri.
Conclusion
I’m reasonably definite a friendlier measurement of doing each this will look — either done prime and matched UI templates, aliases pinch amended libraries. But for now, nan pioneers of ChatGPT Apps must activity pinch what OpenAI has provided; nan prize being an early beingness successful nan burgeoning AI-based economy.
YOUTUBE.COM/THENEWSTACK
Tech moves fast, don't miss an episode. Subscribe to our YouTube channel to watercourse each our podcasts, interviews, demos, and more.
Group Created pinch Sketch.
English (US) ·
Indonesian (ID) ·