Introduction to ChatGPT Apps

So far, you have built MCP servers that provide data (Resources) and perform actions (Tools). However, the interaction has been purely text-based. You ask a question, and the model writes text back.

But what if your agent needs to show a dashboard? Or a form to edit a note? or a map?

This is where ChatGPT Apps come in.

ChatGPT is also becoming a real app platform. With hundreds of millions of users (OpenAI reports ~800 million), an app inside ChatGPT can show up right at the moment of intent, in the same conversation where the need is expressed. That means your app is not just a link or a separate website. It is part of the workflow.

Beyond Text: The Widget

A ChatGPT App is essentially an MCP server that returns UI components (Widgets) alongside data.

When you use the OpenAI Apps SDK, you are still using the Model Context Protocol, but with three specific extensions:

1. The Resource: Your server hosts an HTML file (the Widget) as a standard MCP Resource.
2. The Metadata: Your tools include specific metadata telling ChatGPT: “When this tool runs, don’t just show text—render this HTML widget.”
3. The Bridge: Your HTML widget includes a JavaScript SDK that allows it to talk back to ChatGPT (e.g., “The user clicked ‘Save’, please run this tool”).

The Architecture

In this lesson, we will build NoteTakerPro, a notes app that lives inside ChatGPT. Here is how the pieces fit together:

1. The Backend (Python/FastMCP):

   • It manages a SQLite database for notes.
   • It exposes tools like create_note and list_notes.
   • Crucially, it reads the compiled React frontend and serves it as a resource string.

2. The Frontend (React):

   • A standard React app bundled with Vite.
   • It runs inside an <iframe> within the chat window.
   • It receives data from the MCP tool output and renders it (e.g., a list of notes).

3. The Host (ChatGPT):

   • It orchestrates everything. It calls the tool on your backend, receives the data, loads your frontend resource, and injects the data into the frontend.

By the end of this lesson, you won’t just have a chatbot; you will have a full stack application integrated into the world’s most popular LLM.