Apps SDK Tutorial

kamite — Thu, 09 Oct 2025 09:11:24 +0000

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:

Pizza Map: Map display using Mapbox
Pizza List: Ranking-style list display
Pizza Carousel: Horizontal scroll carousel
Pizza Album: Gallery displaying detailed information
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                       your@email.com
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

Access ChatGPT
Click on your profile icon in the lower left
Open Settings
Select the Apps & Connectors tab
Click Advanced settings at the bottom
Toggle Developer mode on

Add Connector

Select the Apps & Connectors tab from settings
Click the Create button
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

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

Give me a list of pizza places

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:

Is the ngrok URL correct?
- Did you forget the /mcp path?
- Example: https://xxxx.ngrok-free.app/mcp ✅
- Example: https://xxxx.ngrok-free.app ❌
Is the MCP server running?

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

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:

Is Developer Mode enabled?
- Settings > Features > Developer mode
Is the Connector properly added?
- Check in Settings > Connectors
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:

Restart ngrok

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

Update ChatGPT's Connector settings with the new URL
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

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

Forem: kamite

Apps SDK Tutorial

1. What is Apps SDK / Apps in ChatGPT?

Why Was Apps SDK Created?

What Can You Do with Apps SDK?

2. Introduction to the Sample "Pizzaz"

What is Pizzaz?

Final Result

3. Prerequisites

Required Environment

Essential

4. Let's Run It

Step 1: Clone the Repository

Step 2: Install Dependencies

Step 3: Start the MCP Server

Verification

Step 5: Expose with ngrok

5. Connect to ChatGPT

Enable Developer Mode

Add Connector

Testing

1. Start a New Chat

2. Select the App

3. Enter a Prompt

Expected Behavior

6. Troubleshooting

❌ Cannot Connect to MCP Server

❌ "App not found" Error

❌ ngrok Session Expires

7. Summary

The Potential of Apps SDK

The Future of ChatGPT as a Platform

Now is the Opportunity!

Reference Links