Repository files navigation

Based on theOpenAI Apps SDK Examples. This version has been adapted for Heroku deployment.

An interactive Model Context Protocol (MCP) server that brings rich pizza-themed widgets to ChatGPT. Demonstrates the full capabilities of the OpenAI Apps SDK with five different interactive widget types.

This MCP server exposes 5 interactive tools that render beautiful widgets in ChatGPT:

• 🗺️Pizza Map - Interactive map showing pizza locations with markers
• 🎠Pizza Carousel - Swipeable carousel of pizza spots
• 📸Pizza Albums - Photo album gallery viewer
• 📋Pizza List - Scrollable list view
• 🎥Pizza Video - Video player widget

Each widget is fully interactive and demonstrates different UI patterns available in the ChatGPT Apps SDK.

This server uses:

• FastMCP - Python MCP server framework
• FastAPI - Web framework for HTTP/SSE transport
• Model Context Protocol - OpenAI's standard for connecting tools to LLMs
• OpenAI Apps SDK - Framework for rendering widgets in ChatGPT

The widgets are served from OpenAI's CDN (persistent.oaistatic.com) and render as interactive iframes in ChatGPT.

Click the button below to deploy this MCP server to Heroku in one click:

After deployment, your MCP server will be available at:

https://your-app-name.herokuapp.com/mcp

1. Clone this repository:

   git clone https://github.com/dsouza-anush/pizzaz-mcp-heroku.gitcd pizzaz-mcp-heroku

2. Create a Heroku app:

   heroku create your-app-name

3. Deploy:

   git push heroku main

4. Your MCP endpoint will be:

   https://your-app-name.herokuapp.com/mcp

1. Enable Developer Mode in ChatGPT (requires access)

   • See theOpenAI Developer Mode guide

2. Add your MCP server:

   • Go to ChatGPTSettings →Connectors
   • ClickCreate and add your Heroku URL with/mcp path:

     https://your-app-name.herokuapp.com/mcp

3. Test the widgets:

   • Start a chat in ChatGPT
   • Try: "Show me a pizza map" or "Display a pizza carousel"
   • The interactive widgets will render inline in your conversation!

1. Install dependencies:

   pip install -r requirements.txt

2. Run the server:

   python main.py

3. Test locally:

   • Server runs athttp://localhost:8000
   • MCP endpoint:http://localhost:8000/mcp

4. Expose locally with ngrok (to test with ChatGPT):

   ngrok http 8000

   • Use the ngrok URL +/mcp in ChatGPT Connectors

.├── main.py              # MCP server implementation├── requirements.txt     # Python dependencies├── Procfile            # Heroku process configuration├── runtime.txt         # Python version specification├── app.json            # Heroku deploy button configuration└── README.md           # This file

1. Tool Registration: Server registers 5 pizza widget tools with ChatGPT
2. Tool Invocation: When user requests a widget, ChatGPT calls the tool
3. Resource Response: Server returns HTML pointing to pre-built widget assets
4. Widget Rendering: ChatGPT renders the HTML in an iframe with full interactivity
5. User Interaction: Users can click, scroll, and interact with the widgets

Each widget includes:

• OpenAI Metadata: Links tool calls to widget templates
• HTML Template: Iframe-compatible HTML with CSS/JS from CDN
• Structured Content: Data that ChatGPT can understand and reference
• Interactive UI: Full React components with state management

To add OAuth authentication to your MCP server:

heroku buildpacks:add https://github.com/heroku/heroku-buildpack-mcp-auth-proxy -a your-app-name

This buildpack adds authentication to protect your MCP endpoints.

• OpenAI Apps SDK Documentation
• Model Context Protocol
• OpenAI Apps SDK Examples
• FastMCP Documentation

MIT License - Based on OpenAI's Apps SDK Examples