By skyforbes 
Target ~800 million users seamlessly!
OpenAI recently released apps for ChatGPT. This means you can build your app’s custom interface for ChatGPT and it can be invoked either by @your_app_name or by asking ChatGPT to invoke it.
You build your app using their Apps SDK which allows you to expose your system through an MCP server. You can read more about it on their website, this article focuses on how you can build/run your app for ChatGPT.
Pre-requisites
- ChatGPT Pro for Developer mode access
- Installed Node.js 18+
- npm/pnpm (for running MCP server and web components locally)
- Python (for running backend locally)
- uv package manager
- Git
- Code editor (IntelliJ Idea/VSCode)
- MCP Jam for testing local integration
How it works?
ChatGPT interface → Your MCP server (which exposes tools and serves UI) → Backend Server (for bringing in the data)
This article is not a deep dive into the nuances of the code, I have just explained how it’s structured on a high level and how we can add our tools to be exposed from the MCP server. I reverse engineered and understood the core details after I was able to run and build demos, you can do the same.
Let’s get started
Start by cloning this repo. It has everything up and running and you can create new features of your own by understanding how it’s already done for sample features (or ask Claude to build a feature for you, I wouldn’t recommend this in the beginning)
Run the app first
Let’s first run the app and see how it looks and works.
Follow the steps here to run all the three projects first (run all three projects in three different terminals). Build backend, then Web, and then MCP project in the same order to make sure there are no errors.
Once you have all three projects running, start the MCPJam server by the following command (in a new terminal):
npx @mcpjam/inspector@latest
It should open MCPJam in your browser. Continue as a guest. You will see something like this:
Add your server and enter your details like this:
Your MCP server should be hosted on port 3000 too, if it doesn’t make sure you copy the right URL from terminal. Once you add it, you should see something like this:
Now click on tools and try out any one of the tools (try list ideas or list events): click on the tool and click on execute. It should show you something like this:
This means everything is working perfectly fine. You can try it in the playground too by asking something like this: “Give me list of ideas” and it should do something like this:
You will not see the params and all the debugging stuff when you integrate with ChatGPT.
Understanding the project for new feature addition
There are three projects: web, mcp, and backend-server.
Backend
The backend server is returning dummy data and saving ideas in a local db file. It can use REST APIs to bring in data as well. If you are integrating APIs that are already hosted somewhere (like your company’s APIs), you will not need to add anything in backend server, you might as well not need backend server project at all.
For demo purposes you can try the public dummy users API, you won’t need to change anything in the backend project this way!
Web
The web is a typical React project that serves the UI you see in the chat interface.
I have little experience with React so I usually ask Claude to create a suitable UI for the data models for demo purposes.
The generated files in this project are referenced in mcp project so that it can combine UI with the data received from the API or the backend server project.
After doing changes in the MCP project (below), you can ask any AI tool to generate the React code for the data models that you have in your API to save time. If you use Claude or Cursor, it will properly generate files and hook them up to the MCP project as well.
MCP
The mcp project is where your tool is exposed from. You register your tool and resource for ChatGPT and MCPJam here in the server.ts file, check the two functions: server.registerTool and server.registerResource. These functions are written for every feature there is (pardon the single file mess).
registerTool calls the API from backend server to bring in the data
registerResource registers the UI which it finds in the generated files from the web project
When you add your feature, you need to add these two functions just like they are added for other features. You will also have to add your response data model as well in the same file (check how it’s done with other features)
Once you make changes in MCP and Web projects (given you are using dummy users API), you need to stop the projects from the terminals and build them again. Test in MCPJam to see if it works. Sometimes new UI doesn’t appear, so you might have to bump the version of the web project using:
npm run bump
Integration with ChatGPT
Integration with ChatGPT is basically the same as integration with MCPJam, the only difference is that you have to have a Pro ChatGPT subscription, once you have it you will see Developer Mode under Settings →Apps & Connectors→Advanced settings→Developer Mode.
Once you turn it on you will see a create button inside Apps & Connectors tab:
Here you will see the same kinds of input that you saw in MCPJam:
The only difference is, your localhost mcp URL won’t work here. For that you need to install cloudflared:
brew install cloudflared
And then run (without /mcp):
cloudflared tunnel --url http://localhost:3000
After a few seconds you will see a public URL (something like https://uncle-arbitration-disposition-lending.trycloudflare.com) in your terminal, add /mcp at the end of it and enter it in ChatGPT connector. You don’t need authentication so you can select “No authentication”.
Once the connectors connects successfully, you will see your app when you type @ in the chat!
And you are done! You just built and ran your first ChatGPT app!
The apps for ChatGPT are not publicly accepted by OpenAI for now so you can not submit your app to them for public use, this is only experimental so you can use your apps in Developer mode only. OpenAI’s website mentions that they will open apps for submission later this year.
It was a nice learning to know that we are heading towards a new paradigm of building apps with new kinds of UI/UX, user interactions, user behaviour, & user research, keep learning, keep adapting!
A message from our Founder
Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.
Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. ❤️
If you want to show some love, please take a moment to follow me on LinkedIn, TikTok, Instagram. You can also subscribe to our weekly newsletter.
And before you go, don’t forget to clap and follow the writer️!