How to create a ChatGPT app with OpenAI's Apps SDK

#ai #openai #tutorial #chatgpt

Introduction

OpenAI has announced the introduction of "apps" for ChatGPT:

Apps are essentially plugins for ChatGPT that can be invoked with natural language. They can render custom user interfaces, which enables richer and more interactive user experiences, and are built on top of the Model Context Protocol (MCP) specification, which means you don't have to learn an entirely new technology.

At this stage, only certain developers are allowed to distribute their apps, but anyone can start developing them. I'm keen to explore possible opportunities for Lingo.dev, so I've immediately started digging into what's possible.

This guide explains what I've learned about how to get an app up and running.

👉 In future articles, I'll be doing deeper dives into ChatGPT app development, so follow me on Twitter or LinkedIn to keep up to date.

Caveat

There is an issue that is preventing developers from running apps within ChatGPT. You'll need to wait for the issue to be resolved before you can test the app.

Step 1. Set up the examples repo

OpenAI has provided a repo of app examples to help understand the basic lifecycle of apps and common patterns, such as creating interactive interfaces.

To set up the repo:

Clone the openai-apps-sdk-examples repo:

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

Navigate into the repo:
```
cd openai-apps-sdk-examples
```
Install the dependencies:
```
pnpm install
```

Step 2. Start the development servers

Apps are made up of an MCP server, which is responsible for defining things like tools and resources, and frontend code, which is responsible for rendering UI elements that can be displayed withi ChatGPT.

Start the frontend server

In the terminal, run the following comand:

pnpm run dev

Start the backend server

In a separate terminal:

Navigate into the directory for the server code:
```
cd pizzaz_server_node
```
Run the server:
```
pnpm start
```

The server should become available at http://localhost:8000.

Step 3. Expose the local server

For ChatGPT to be able to "talk" to an app, it needs to be available via a public URL. During development, the easiest way to do this is with an SSH tunneling tool, such as ngrok. This kind of tool exposes a local server via a publicly accessible URL.

To set up ngrok:

Sign up for an ngrok account.
Install ngrok:
```
brew install ngrok
```
Configure an authtoken for ngrok:
```
ngrok config add-authtoken <authtoken>
```
(You'll see the authtoken after signing up for an account.)
Start a tunnel:
```
ngrok http 8000
```
Here, "8000" is the port number. If the server is not running on port 8000, be sure to specify the actual port number.

Note: There are many alternatives to ngrok, including free and open-source options. For a (very) comprehensive list, see awesome-tunneling.

Step 4. Enable Developer Mode

To test an app that's in development, Developer Mode must be enabled in ChatGPT.

To enable Developer Mode:

In ChatGPT, navigate to Settings.
In the sidebar, select Apps & Connectors.
Scroll down and click Advanced settings.
Enable Developer mode.

When Developer Mode is enabled, ChatGPT should look like this:

Step 5. Create an app

In ChatGPT, navigate to Settings.
In the sidebar, select Apps & Connectors.
Click Create.
In the Name field, enter a name for the app (e.g., "Hello World").
In the MCP Server URL field, enter the URL of the MCP endpoint. This URL must be public, support HTTPS, and point directly to the /mcp endpoint (i.e., not the root server URL).
In the Authentication dropdown, select No authentication.
Enable I trust this application.
Click Create.

Step 6. Use the app

In ChatGPT, start a new chat.
Click the + (Plus) icon.
In the More menu, select the app.
Submit a prompt that explicitly invokes the app:

Using the "Hello World" app, give me a list of pizza places.