This blog post is for developers learning and building ChatGPT apps. It provides an overview of how these apps work, why build them, and how to host one on Azure Functions.
Chat with ChatGPT apps
OpenAI recently launched ChatGPT apps. These are apps you can chat with right inside ChatGPT, extending what ChatGPT can do beyond simple chats to actions. These apps can be invoked by starting a message with the app name, or they can be suggested by ChatGPT when relevant to the conversation. The following shows an example of invoking the Booking.com app to find hotels that meet certain criteria:
OpenAI calls these “a new generation of apps” that “blend familiar interactive elements…with new ways of interacting through conversation.” For users, ChatGPT apps fit directly into an interface they’re already familiar with and can use with little to no learning. For developers, building these apps is great way to get them in the hands of ChatGPT’s 800 million users without having to build custom frontends or worry about distribution and discovery.
The following summarizes key benefits of ChatGPT apps:
- Native Integration: Once connected, users can invoke apps with a simple @ mention.
- Contextual Actions: Your app doesn't just "chat"—it does. It can fetch real-time data or execute actions.
- Massive Distribution and Easy Discovery: ChatGPT has added an app directory and just announced that they’re accepting submissions. Apps in the directory are exposed ChatGPT’s massive user base.
ChatGPT apps are remote MCP servers
ChatGPT apps are simply remote MCP servers that expose tools, but with two notable distinctions:
- Their tools use metadata to specify UI elements that should be rendered when it returns a result
- The UI elements are exposed as MCP resources.
ChatGPT invokes tools the same way agents invoke tools on any MCP server. The difference is the added ability to render the tool results in a custom UI that’s embedded in the chat as an iFrame. A UI can include buttons, text boxes, maps, and other components that users can interact with. Instead of calling a RESTful API, the UI can trigger additional tool calls in the MCP server as the user interacts with it.
For example, when the Zillow app returns results to the user’s question, the results are home listings and a map that users can interact with:
Since ChatGPT apps are just MCP servers, any existing server you may have can be turned into a ChatGPT app. To do that, you must ensure the server uses the streamable HTTP transport if it doesn’t already and then find a place to host it.
Hosting remote MCP servers
While there are many hosting platforms available, Azure Functions is uniquely positioned to host remote MCP servers as the platform provides several key benefits:
- Scalable Infrastructure: ChatGPT apps can go viral. Azure Function’s Flex Consumption plan can handle bursty traffic during high traffic times and scale back to zero when needed
- Built-in auth: Keep your server secured with Azure Function’s built-in server authentication and authorization feature
- Serverless billing: Pay for only when the app is run instead of idle time
Learn more about remote MCP servers hosted on Azure Functions.
Create ChatGPT app
Let’s quickly create a sample ChatGPT app that returns the weather of a place.
Prerequisites
Ensure you have the following prerequisites before proceeding:
- Azure subscription for creating Azure Functions and related resources
- Azure Developer CLI for deploying MCP server via infrastructure as code
- ChatGPT Plus subscription for testing ChatGPT app in developer mode
Deploy MCP server to Azure Functions
- Clone this sample MCP server: `git clone https://github.com/Azure-Samples/chatgpt-app-azure-function-mcp`.
- Open terminal, run `azd auth login` and complete the login flow in the browser.
- Navigate to sample root directory, run `azd up` to deploy the server and related resources. You’ll be prompted with:
- Enter a unique environment name: Enter a unique name. This is the name of the resource group where all deployed resources live.
- Select an Azure Subscription: Pick your subscription
- Enter a value for the ‘location’ infrastructure: East US
- Once deployment completes, copy the app url for the next step. It should look like: https://<your-app>.azurewebsites.net
Sample code walkthrough
The sample server is built using the Python FastMCP package. You can find more information and how to test server locally in this repo. We'll walkthough the code briefly here.
In main.py, you find the `get_weather_widget` resource and `get_current_weather` tool (code abbreviated here):
.resource("ui://widget/current-weather.html", mime_type="text/html+skybridge")
def get_weather_widget() -> str:
"""Interactive HTML widget to display current weather data in ChatGPT."""
# some code...
@mcp.tool(
annotations={
"title": "Get Current Weather",
"readOnlyHint": True,
"openWorldHint": True,
},
meta={
"openai/outputTemplate": "ui://widget/current-weather.html",
"openai/toolInvocation/invoking": "Fetching weather data",
"openai/toolInvocation/invoked": "Weather data retrieved"
},
)
def get_current_weather(latitude: float, longitude: float) -> ToolResult:
"""Get current weather for a given latitude and longitude using Open-Meteo API."""
# some code...
return ToolResult(
content=content_text,
structured_content=data
)When you ask ChatGPT a question, it calls the MCP tool which returns a `ToolResult` containing both human-readable content (for ChatGPT to understand) and machine-readable data (`structured_content`, raw data for the widget).
Because the `get_current_weather` tool specifies an `outputTemplate` in the metadata, ChatGPT fetches the corresponding widget HTML from the `get_weather_widget` resource. To return results, it creates an iframe and injects the weather results (`structured_content`) into the widget's JavaScript environment (via `window.openai.toolOutput`). The widget's JavaScript then renders the weather data into a beautiful UI.
Test ChatGPT app in developer mode
- Turn on Developer mode in ChatGPT: Go to Settings → Connectors → Advanced → Developer mode
- In the chat, click + → More → Add sources
- The Add + button should show next to Sources. Click Add + → Connect more
- In the Enable apps window, look for Advanced settings. Click Create app. A form should open.
- Fill out the form to create the new app
- Name: WeatherApp
- MCP Server URL: Enter the MCP server endpoint, which is the app URL you previously saved with /mcp appended. Example: https://<you-app>.azurewebsites.net/mcp
- Authentication: Choose No Auth
- Check the box for “I understand and want to continue” and click Create.
- Once connected, you should find the server listed under Enabled apps. Test by asking ChatGPT “@WeatherApp what’s the temperature in NYC today?”
Submit to ChatGPT App Directory
OpenAI has opened app submission recently. Submitting the app to the App Directory makes it accessible to all users on ChatGPT. You may want to read through the submission guidelines to ensure your app meets the requirements before submitting.
What’s next
In this blog post, we gave an overview of ChatGPT apps and showed how to host one in Azure Functions. We’ll dedicate the next blog post to elaborate on configuring authentication and authorization for apps hosted on Azure Functions.
For users familiar with the Azure Functions MCP extension, we’re working on support for MCP Resources in the extension. You’ll be able to build ChatGPT apps using the extension once that support is out. For now, you need to use the official MCP SDKs.
Closing thoughts
ChatGPT apps extend the ability of ChatGPT beyond chat by letting users take actions like searching for an apartment, ordering groceries, and turning an outline into slide deck with just a mention of the app name in the chat. The directory OpenAI created where developers can submit their apps reminds one of the App Store in the iPhone. It seems to be a no-brainer now that such a marketplace should be provided. Would this also be the case for ChatGPT? Do you think the introduction of these apps is a gamechanger? And are they useful for your scenarios? Share with us your thoughts!
Microsoft