How to Build Your First ChatGPT App

Take advantage of 800 million weekly active users. Build an app that gets in front of millions of people.

Hi fellow High Growth Engineer, Jordan here 👋

Today’s article features a special guest, Colin Matthews, instructor of multiple top-rated AI courses on Maven. In this article, you’ll learn how to build ChatGPT apps, enabling you to embed your code directly into ChatGPT.

Since this article is highly detailed, I’m sharing Colin’s links that I recommend exploring up front so they don’t get lost—his new ChatGPT apps course on Maven and a free lightning lesson on the topic. Finally, you can follow him on LinkedIn.

Alright, let’s learn how to build our own ChatGPT app. Take it away, Colin 👏

---

Hey there, Colin here 👋

OpenAI recently announced ChatGPT Apps, a whole new way to interact with ChatGPT. Developers and product teams can now embed apps directly into ChatGPT, enabling users to book hotels, search for properties, and shop online, all within an existing ChatGPT conversation. With more than 800M weekly active users, building ChatGPT apps may be the next great distribution wave.

It’s hard to imagine how this works before you see it, so we’ll start with a quick demo. Let’s say I wanted to get the most recent sales data in a nice dashboard. With the right app, I can just ask ChatGPT to fetch this for me:

In this post, I’ll cover how ChatGPT apps work, what your options and limitations are, and walk through an end-to-end example of building your first app in a few hours.

What are ChatGPT Apps?

All LLMs (ChatGPT, Claude, Gemini) are limited to the tools they have. Think web search, reading files, executing code, or building artifacts. ChatGPT Apps allow developers to expose new tools to LLMs that any user can easily install and use. Specifically, they add the ability to render UI elements through Model Context Protocol (MCP) tools and return structured data for those components to consume. For more on MCP, check out Jordan’s prior post here.

Instead of reading text responses, users can interact directly with UI components you’ve built. For example, let’s try booking a short-term stay without an app installed:

We get back a few photos and information on regulations, but we can’t actually book the property.

With an app, we can get a set of Airbnb listings that match my request and quickly book my next stay.

How ChatGPT Apps Work

There are three main parts that go into a ChatGPT app:

1. Model Context Protocol (MCP) Server (your backend)
This is what ChatGPT talks to. It’s written in Python or Node.js and acts like an API that ChatGPT can call. You define “tools” (functions) that ChatGPT can use, like search_restaurants or book_ticket.

2. Component (your frontend)
This is the interactive UI that users see. It’s typically built with React and runs in a secure sandbox inside ChatGPT. Think of it like building a mini web app that lives in the conversation.

3. ChatGPT (host)
Your app is displayed in an embedded view within ChatGPT. ChatGPT also decides when to call your app based on the conversation so far with the user and the apps they have manually enabled.

Let’s look at how these pieces work together, starting with an example that does not include the component:

In this example, ChatGPT goes through a number of steps automatically after the user asks for help with a short-term stay:

1. ChatGPT decides that an app would be useful to help the user book a short-term stay

2. It reaches out to our app to see which tools are available. It finds two tools: Book Listing and Browse Listing.

3. ChatGPT decides to call the Browse Listing tool with information on where and when we want to stay, which returns the top five listings

4. ChatGPT responds back to the user with the top five listings

This workflow is the foundation of MCP (Model Context Protocol). An AI agent (ChatGPT) is given access to tools that can help it complete an objective. When a user asks for work to be completed, the agent can choose to use these tools to assist along the way. Tools can be as simple as a calculator that adds two numbers together, to complex backend processes like image generation.

Now let’s layer in the final step, returning the component:

When ChatGPT calls a tool, the tool can optionally include information about a UI component that should be used. ChatGPT will then fetch the code from your MCP server and render it directly in the app.

Choosing your display mode

ChatGPT Apps support three different ways to show your interface:

Inline mode
Best for: Lists, cards, small visualizations

Inline is the default for all apps. Most apps transition from inline to another display mode if needed.

Examples: A product carousel or restaurant list

Here’s the code for a simple restaurant list with some state passed between ChatGPT and the component:

View BookingWrapper code snippet

Fullscreen mode
Best for: Maps, complex forms, data-heavy dashboards

Your component takes over the entire ChatGPT window. Use this when you need more space or when the user needs to focus on a complex task.

Example: An interactive map of properties or a spreadsheet editor

Here’s a simplified example for a spreadsheet that transitions from inline to fullscreen:

View FullscreenWrapper code snippet

Picture-in-picture mode
Best for: Persistent tools, games, live updates

Your component floats in a small window at the top of the screen. This is great for things that need to stay visible while the user continues chatting.

Example: A timer, music player, or tic-tac-toe game

PiP requires a bit more thought on UX patterns, especially if you plan to transition between display modes. Here’s an example:

View MusicPlayerWrapper code snippet

Understanding the constraints

Before you start building, there are a few limitations you need to understand.

1) One component per turn
If ChatGPT calls a tool that returns a component, that’s the end of the turn. ChatGPT cannot automatically chain multiple UI-returning tools together.

For example, if a user says “Book a restaurant and order an Uber,” ChatGPT cannot show the restaurant component and then automatically show the Uber component. Instead, it will show the restaurant component first, and after the user books, they can trigger a follow-up that shows the Uber component.

2) Component state is scoped
Each component instance has its own state that only persists within that specific message. If ChatGPT creates a new message with your component, by default it is aresh instance with an empty state. You will need to manage state by persisting and fetching from your backend.

3) No direct DOM access
Components run in a secure sandbox (iframe), so you cannot access the parent ChatGPT page or run arbitrary scripts. All communication happens through the window.openai API.

4) Performance matters
Component state is sent to the AI model with each request. Large payloads slow down responses, so only send what’s necessary.

What you can build: Real-world examples

Let me walk through some practical use cases to show you what’s possible.

E-commerce & shopping
Build an interactive product catalog where users can filter by price, add items to cart, and checkout (usually pushing them to your main app).

Business tools
Create a Kanban board that lets users drag tasks between columns, assign deadlines, and update status. This is particularly powerful for internal tools where you want ChatGPT to both answer questions about projects and let users take action.

Booking & reservations
Build a restaurant booking component that shows availability, menus, and reviews. Users can ask ChatGPT for recommendations and book directly through your interface.

Data dashboards
Display sales analytics with interactive charts. Users can ask “How are Q4 sales?” and get a dashboard where they can drill down into specific regions or products.

Maps & location
Show an interactive map with markers for coffee shops, properties, or any location-based search. This works great in fullscreen mode.

Building your first app

Let’s build a simple restaurant search app. This example will help you understand the full flow from backend to frontend.

Step 1: Build the Component (Frontend)

Create a React component that interacts with the window.openai.* API for communication between your Iframed component and ChatGPT. OpenAI provides some globals to help with API interactions.

View App.tsx code snippet

Step 2: Define the Tool (Backend)

Your MCP server defines the “contract” with ChatGPT. It tells the model what it can do and which component to show when the tool call is complete.

View App.tsx code snippet

Step 3: Register the Resource (Backend)

Your React component needs to be bundled into HTML and hosted as a resource on your MCP server. This allows ChatGPT to pick up the outputTemplate URI from the prior step and send a request to pick up your code to be Iframed.

View server.js code snippet

Step 4: Test the flow

Once your server is deployed…

• Open ChatGPT and enable Developer Mode

• Go to Settings -> Connected Apps (or “My Apps”).

• Click “Connect new app”.

• Enter your server URL (e.g., https://my-mcp-server.com).

• Connect without OAuth

ChatGPT will detect the search_restaurants tool. To test, simply type: “Find me Italian food in Brooklyn”, and ChatGPT will call your tool, fetch the data, and render your interactive React list instead of just writing text.

If you want to quickly spin up a ChatGPT app for testing, you can use my tool Chippy! Chippy is an AI agent trained on the App SDK and can spin up MCP servers in less than 5 minutes.

For a full example of an Apps SDK app, check out MCPJam’s Apps SDK Everything repo.

Putting it all together

ChatGPT was first to the party, but soon the MCP standard will support the same patterns through MCP apps. Claude and other agents will be able to inject mini apps into conversational experiences. Understanding how to architect these systems and build meaningful experiences for users will open a whole new way for AI products to talk with regular SaaS applications.

For more, check out the following:

• ChatGPT Apps SDK Documentation: The source of truth for `window.openai` methods.

• Model Context Protocol (MCP) Spec: Deep dive into how tools and resources are negotiated.

• Example Apps Repo: Reference implementations for the patterns discussed above.

👏 Thank you to Colin

👋 Jordan back. Thanks again, Colin, for covering so much ground in a single article—what ChatGPT apps are, use cases and examples, and how to build our own, with tons of great additional free resources.

If you’d like to follow Colin’s guided course on building your own ChatGPT apps, you can check his upcoming free lightning lesson and course on Maven and use code JORDANxMAVEN for a 15% discount.

---

Thank you for reading and being a supporter in growing the newsletter 🙏

You can also hit the like ❤️ button at the bottom of this email to support me or share it with a friend to earn referral rewards. It helps me a ton!