Apps SDK Tutorial

1. What is Apps SDK / Apps in ChatGPT?

Why Was Apps SDK Created?

ChatGPT has evolved from being just a tool for "conversing with AI" to becoming "a platform that integrates with applications" with the introduction of Apps SDK.

OpenAI CEO Sam Altman stated at DevDay 2025:

"Apps SDK enables a new generation of interactive, adaptive, personalized, and conversational applications"

ChatGPT currently has over 8 million users, making it an attractive platform for developers to reach a massive user base.

What Can You Do with Apps SDK?

Apps SDK allows you to create applications that run directly within ChatGPT conversations. Companies like these are already providing apps:

• Spotify: Just say "Spotify, create a playlist for Friday's party" to create playlists
• Figma: "Figma, convert this sketch to a diagram" transforms sketches into FigJam diagrams
• Zillow: "Find apartments in Tokyo under $3000" for real estate search with map display
• Canva: Automatically generate presentation slides from an outline
• Coursera: Ask questions about video content while watching

2. Introduction to the Sample "Pizzaz"

What is Pizzaz?

Pizzaz is a demo application officially provided by OpenAI. It's an app that searches and displays fictional pizza restaurants, allowing you to experience the main features of Apps SDK.

Pizzaz includes 5 types of UI components:

1. Pizza Map: Map display using Mapbox
2. Pizza List: Ranking-style list display
3. Pizza Carousel: Horizontal scroll carousel
4. Pizza Album: Gallery displaying detailed information
5. Pizza Video: Video player

Final Result

The pizza map will be displayed in ChatGPT like this:

3. Prerequisites

Required Environment

To run Apps SDK, you need the following environment:

Essential

• Node.js 18 or higher
• pnpm (recommended) or npm/yarn
• ngrok (installation guide here if you don't have it)
• ChatGPT Account (Plus/Pro/Go)
  • Important: Free plan cannot be used as developer mode is not available

4. Let's Run It

Let's actually run the Pizzaz app.

Step 1: Clone the Repository

First, clone the official sample repository:

git clone https://github.com/openai/openai-apps-sdk-examples.git
cd openai-apps-sdk-examples

Step 2: Install Dependencies

Install the necessary packages for the project:

pnpm install

This will install:

• React/TypeScript related packages
• MCP server SDK (@modelcontextprotocol/sdk)
• Build tools (Vite, esbuild)
• UI libraries (Mapbox, Lucide React, etc.)

Installation may take several minutes.

Step 3: Start the MCP Server

Run the following:

cd openai-apps-sdk-examples/pizzaz_server_node
pnpm start

What's happening:

• The MCP server starts in Node.js
• HTTP server begins listening on port 8000

Logs displayed in terminal:

Pizzaz MCP server listening on http://localhost:8000
  SSE stream: GET http://localhost:8000/mcp
  Message post endpoint: POST http://localhost:8000/message

Verification

Try accessing http://localhost:8000/mcp in your browser.
If you get any response, the server is running properly.

Step 5: Expose with ngrok

Use ngrok to make your local server accessible from ChatGPT.

Open a second terminal window and run:

ngrok http 8000

Display:

ngrok

Session Status                online
Account                       [e-mail]
Version                       3.x.x
Region                        Japan (jp)
Latency                       -
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://xxxx-xxxx-xxxx.ngrok-free.app -> http://localhost:8000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

Important: Copy the https://xxxx-xxxx-xxxx.ngrok-free.app part!

5. Connect to ChatGPT

Now that the server is ready, let's integrate it with ChatGPT.

Enable Developer Mode

1. Access ChatGPT
2. Click on your profile icon in the lower left
3. Open Settings
4. Select the Apps & Connectors tab
5. Click Advanced settings at the bottom
6. Toggle Developer mode on

Add Connector

1. Select the Apps & Connectors tab from settings
2. Click the Create button
3. Enter the following information:

Field	Input	Description
Name	Pizzaz Demo	Any name (will be displayed when selecting in ChatGPT)
MCP Server URL	https://xxxx.ngrok-free.app/mcp	Your ngrok URL + /mcp path
Authentication	No authentication	No authentication for this tutorial
Trust	✓ I trust this application	Check this

1. Click Create

Testing

Let's test it out.

1. Start a New Chat

Open a new chat in ChatGPT.

2. Select the App

• Click the "+" icon to the left of the message input field
• Open the Show more menu
• Select "Pizzaz Demo" that you just created

3. Enter a Prompt

Try prompts like these:

Show me a pizza map

or

Give me a list of pizza places

or

Show me a pizza carousel

Expected Behavior

ChatGPT should display interactive UIs like:

• Pizza Map: Pins displayed on a map, click for details
• Pizza List: Pizza places in ranking format with interactive buttons like favorites
• Pizza Carousel: Swipe horizontally to browse multiple pizza places

🎉 Your first Apps SDK app is running!

6. Troubleshooting

Here are solutions for common issues.

❌ Cannot Connect to MCP Server

Symptoms:

• "Connection failed" error in ChatGPT
• App cannot be selected

Check:

1. Is the ngrok URL correct?

   • Did you forget the /mcp path?
   • Example: https://xxxx.ngrok-free.app/mcp ✅
   • Example: https://xxxx.ngrok-free.app ❌

2. Is the MCP server running?
   

   # Check in another terminal
   curl http://localhost:8000/mcp

1. Is ngrok working properly?
   • Check ngrok's Web UI at http://127.0.0.1:4040
   • Verify requests are being received

❌ "App not found" Error

Symptoms:

• App doesn't appear in ChatGPT
• Doesn't show in the "+" menu

Check:

1. Is Developer Mode enabled?

   • Settings > Features > Developer mode

2. Is the Connector properly added?

   • Check in Settings > Connectors

3. Try reloading ChatGPT

❌ ngrok Session Expires

Symptoms:

• Suddenly can't connect after using for a while

Cause and Solution:

• ngrok free plan has a 2-hour session limit

• Solutions:

  1. Restart ngrok

   # Stop with Ctrl+C and run again
   ngrok http 8000
  

1. Update ChatGPT's Connector settings with the new URL
2. Or upgrade to ngrok Pro (paid)

7. Summary

You should now have experienced the basics of Apps SDK and its actual operation.

The Potential of Apps SDK

Apps SDK is transforming ChatGPT from a simple conversational AI into an application platform.

• 🌍 8+ million user base: Access to a massive market
• 🔧 Flexible development: Build UIs freely with web technologies
• 🔌 Standardization: Based on the MCP open standard
• 💰 Monetization: Monetization features planned within the year

The Future of ChatGPT as a Platform

Just as WeChat became a "super app" for applications, ChatGPT has the potential to become a platform where various apps operate.

ChatGPT = The New OS?

- Conversation as the interface
- Seamlessly integrated apps
- Natural language operation

Now is the Opportunity!

Apps SDK is currently in preview, and anyone can develop and test. Official app submission will be possible within the year.

Benefits of getting started early:

• ✅ Accumulate know-how
• ✅ Become a pioneer in the community
• ✅ Publish immediately upon release
• ✅ Gain market advantage

Happy Coding! 🍕✨

Reference Links

• Apps SDK Official Announcement
• Official Documentation
• GitHub Samples
• Model Context Protocol
• OpenAI Developer Community

This article is based on information as of October 2025. As Apps SDK is in preview, specifications may change.