Pizzaz MCP Server for ChatGPT

Based on the OpenAI 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.

Features

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.

Architecture

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.

Quick Deploy to Heroku

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

Manual Deployment to Heroku

1. Clone this repository:

   git clone https://github.com/dsouza-anush/pizzaz-mcp-heroku.git
   cd 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
   

Connecting to ChatGPT

1. Enable Developer Mode in ChatGPT (requires access)

   • See the OpenAI Developer Mode guide

2. Add your MCP server:

   • Go to ChatGPT Settings → Connectors
   • Click Create 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!

Local Development

1. Install dependencies:

   pip install -r requirements.txt

2. Run the server:

   python main.py

3. Test locally:

   • Server runs at http://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

Project Structure

.
├── 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

How It Works

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

Widget Details

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

Optional: Add Authentication

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.

Learn More

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

License

MIT License - Based on OpenAI's Apps SDK Examples