← Back to Blog

Tutorial: From OpenAI Apps SDK Example to full SaaS ChatGPT App: Explainer

Nicholas Dickey

The companion to the tutorial video.

Tutorial: From OpenAI Apps SDK Example to full SaaS ChatGPT App: Explainer

This blog post accompanies a video tutorial I created on transforming the Apps SDK example Pizza App into a full SaaS ChatGPT application:

https://youtu.be/useoruZzZ28?si=870iAU4_vuOdQpEU

Some context:

On October 6th, OpenAI released the Apps SDK for ChatGPT, enabling developers to build apps with rich UI (using Skybridge HTML) directly inside ChatGPT.

This gives app developers potential access to ChatGPT’s 800 million active users.

The SDK includes an example Pizza App for both Node.js and Python environments.

In the tutorial, I take this example and—without writing any code—convert it into a fully functional SaaS platform for creators and end-users. It brings user subscription management directly inside ChatGPT, eliminating the need for an external SaaS portal for sign-ups or account actions. This unlocks a truly native ChatGPT app experience for users and provides creators with a powerful, integrated SaaS platform (similar to Stripe, Shopify, etc.).

1. Smoke test of the Pizza App connected to ChatGPT

I hosted the SDK example Node.js Pizza server and exposed it to the internet using ngrok. Then I went to ChatGPT, switched to Developer Mode, and created the app using the ngrok endpoint. The tools worked as expected.

2. Findexar onboarding

I went to findexar.com, signed up with a new throwaway email account, and created an organization for my SaaS: SaaSTest Org.

After that, I created a new sandbox (dev) deployment called “End-to-end Demo.”

3. Bring-your-own Stripe

Findexar provides bring-your-own-Stripe functionality for creators. In the Stripe Connect section of the Findexar configuration, I created a new Stripe test account for my user. For the sake of time, I compressed the video to show only the highlights of the otherwise tedious process, which took about four minutes.

From this point on, all end-users for this creator live inside their Stripe account and belong to that user. This alone is a major value that Findexar delivers to its creators.

4. Creating subscription plans

While my creator account was assigned to the Free Trial plan in Findexar, I needed to define a few subscription plans. At a minimum, a Free Plan is required so that new end-users are automatically assigned to it. There can only be one Free Plan at a time for an organization.

I created a Free Trial plan with just 2 credits for tool calls (equivalent to 2 calls using the default 1 credit per call), so I could demonstrate what happens when an end-user runs out of credits.

5. Wiring the real-time MCP path

Findexar creates a SaaS-enabled MCP endpoint for your app. To accomplish this, you must define an upstream connector that specifies the MCP interface to be accessed by ChatGPT or other MCP clients. You then wire this upstream connector to your downstream connectors, including the Findexar Service downstream connector, which adds SaaS functionality to your upstream endpoint.

First, create the downstream connector that connects to the Pizza App’s ngrok endpoint. Then, create an upstream connector wired to both this downstream connector and the Findexar Service. This produces the MCP endpoint that will be used inside ChatGPT.

6. Verify the SaaS functionality

When I created a Free Trial plan for my organization, I set the included credits to 2 to make the free plan very restrictive. This allows us to demonstrate what happens when an end user runs out of free-plan credits.

To verify this, we need to trigger two free tool calls to reach the maximum included calls. The next tool call will then display the manage_my_subscription widget, prompting the end user to upgrade to a paid plan.

During usage testing, we—as creators—can monitor the dashboard in our Findexar organization and deployment to view actual tool calls, charges, and more.

I hope you enjoyed this video tutorial. There’s much more to come—a series on creating ChatGPT apps from scratch using vibe coding (Cursor) for Skybridge widgets, various no-code or vibe-code approaches for backend creation, and Findexar to bring everything together as a full SaaS app on ChatGPT. Stay tuned!

Comments are available in youtube.