ChatGPT recently opened submissions for their Apps feature to developers, which is a way to display interactive widgets from third-party apps directly into conversations. This opens up interesting opportunities to enhance user experience directly within ChatGPT by offering more than just text interactions.
In this article, I will share my experience exploring this feature so you can easily test and create your own ChatGPT App locally to get started.
I will start by outlining the basics of what a ChatGPT App is and how it works. I will then offer a step-by-step tutorial on how to quickly get started with your own ChatGPT App locally for quick prototyping and experimentation.
What is a ChatGPT App?
A ChatGPT App is an interactive widget that appears directly within the chat from the conversation context or manual triggering.
It can be broken down into 3 main components:
MCP Server - The backend that defines tools which you can think of as functions the model can call (in this case ChatGPTs), and resources (UI templates that ChatGPT renders).
Widget - HTML that runs in a sandboxed iframe with its own state, event handling, and direct communication with your backend through the
window.openaiobject that ChatGPT injects. This object offers different interaction options such as direct tool calls (window.openai.callTool()) or a follow-up message (window.openai.sendFollowUpMessage()) which sends a message back into the chat to keep the conversational loop going.ChatGPT - The host which orchestrates the tool calling, rendering of the widget and the conversation state.
An example of a tool definition is as follows:
Tool: find_houses
# Description used by ChatGPT to decide when to trigger the tool
Description: "Finds houses by location and number of rooms"
# Inputs schema outlines the parameters
Inputs: location (required), number_rooms (optional)
# Outputs defines which resource to render with the data as UI
Output: → ui://widget/list.html
It is useful to visualize the full flow as a diagram:
Let's now build our own ChatGPT App
Here is a simple example of a ChatGPT App I built for local testing. It's open source so you can use the repo as a template as we move along this tutorial.
Let's create the App
The repo structure will look something like this:
chatgpt-app/
├─ public/
│ └─ widget.html
├─ server.js
├─ package.json
└─ README.md
Create your files and adapt your own logic for the widget and server. For the server, register the tools and resources you want. For the widget add the UI elements, state and event handling you want. Please refer to the files in my open source repo for inspiration if needed.
Let's run the App
ChatGPT needs an HTTPS URL to reach our local server. For this tutorial we will use ngrok to provide us with an HTTPS URL.
# 1) create repo + install
npm install
# 2) run local MCP
npm run dev
# 3) in another terminal
ngrok http 8787
# copy https://....ngrok.app and add /mcp
Let's connect this App to ChatGPT
You first need to enable developer mode for ChatGPT. This allows you to add unverified connectors. Memory is disabled in this mode.
Settings > Apps > Advanced settings > Developer mode (toggle)
You can then create your App (ie. establish the connection between your MCP server and the ChatGPT host)
Settings > Apps > Create App
In the form, the connector needs to point to the HTTPS URL from ngrok with /mcp, for eg. https://abcd-1234.ngrok.app/mcp
For this demo we will choose 'no authentication'.
Let's trigger the App
ChatGPT can surface an App based on context or explicit tagging.
And there you go! You should now have your own ChatGPT App running locally. 👏👏👏
Before we end, here are a couple of learnings based on personal experience developing my App:
- due to caching, I often found it faster to delete the connector entirely and establish the connection again instead of trying ot figure out which parts of the UI or metadata were cached
- I caused unnecessary re-renders and behavior that was hard to debug when I leaned heavily on tool calls for state updates. Moving more state locally to the widget made the setup more reliable.
This tutorial is intentionally limited to local development and fast prototyping. It therefore doesn't cover important aspects such as security, authentication, in-depth state management and privacy which are necessary before moving to production. So I strongly advise you to read the official documentation and implement best practices to mitigate any risks before going live. A few considerations on top of mind include idempotent calls, rate limiting and robust error handling.
With over 800 million weekly active users on ChatGPT, ChatGPT Apps could be a huge opportunity for developers to tap into.
What do you think? Is this just another feature or do you see potential in developing your own ChatGPT App?
Top comments (2)
A couple other tips to help with caching:
It's a huge pain, but this is the only way I found to absolutely guarantee a refresh! To skip most refreshes, you can use sunpeak.ai/ (full disclosure, I made it), it has a development server with HMR baked in so your UI changes are reflected instantly in ChatGPT!
Thanks for sharing, this would have been helpful for my caching issues indeed. Nice framework.