ChatGPT Interactive Components Examples

# Test the Pizzaz Widget in ChatGPT ## ✅ Server Status - **Deployed**: https://chatgpt-components-0d9232341440.herokuapp.com/ - **MCP Endpoint**: https://chatgpt-components-0d9232341440.herokuapp.com/mcp ## Step 1: Connect to ChatGPT 1. Open **ChatGPT** 2. Go to **Settings → Connectors** 3. Click **"Add connector"** or **"Create new app"** 4. Enter this URL: ``` https://chatgpt-components-0d9232341440.herokuapp.com/mcp ``` 5. Give it a name: **"Pizzaz Demo"** 6. Save ## Step 2: Test the Widget 1. **Start a new conversation** 2. Click the **"More" (⋯)** button or **paperclip icon** 3. Select **"Pizzaz Demo"** from your connectors 4. Ask ChatGPT: ``` Show me a pizza list with pepperoni ``` or ``` I want to see pizza places with mushrooms ``` ## Expected Result You should see: - 🍕 A **beautiful pizza list widget** appear inline - The widget showing **"Featuring [topping] pizzas"** with your chosen topping - A list of 5 pizza places with names, cities, and ratings - Clean, modern styling with hover effects ## Troubleshooting ### Widget Not Showing? 1. **Disconnect and reconnect** the connector in Settings 2. **Start a fresh conversation** 3. Make sure you **added the connector** to the conversation 4. **Check Chrome flags** (if using Chrome 142+): Disable `#local-network-access-check` ### Check Server Logs ```bash heroku logs --tail --app chatgpt-components ``` ## What's Working This is a **working copy** of the official [OpenAI Pizzaz example](https://github.com/openai/openai-apps-sdk-examples): - ✅ MCP server properly configured - ✅ SSE transport working - ✅ Resource handlers serving widget HTML - ✅ Tool definition with proper metadata - ✅ Widget receives data via `window.openai.toolOutput` ## Next Steps Once this works, we can: ### 1. Modify the Widget Edit `widgets/pizza-list.html` to: - Change the styling - Add more data - Make it interactive ### 2. Change the Data Structure Edit `server.js` to: - Pass different data in `structuredContent` - Add more parameters - Create different tools ### 3. Build Target Auth Copy this pattern to create: - `widgets/target-auth.html` - Target-branded login - New tool: `authenticate-target-customer` - Pass session data through `structuredContent` ### 4. Add More Widgets Create additional widgets: - Profile viewer - Order history - Circle rewards dashboard ## Files to Customize ``` widgets/ pizza-list.html ← Modify this for UI changes server.js ← Modify this for data/tools changes ``` The pattern is simple: 1. Widget receives data via `window.openai.toolOutput` 2. Widget renders using that data 3. No API calls from the widget 4. All data comes from `structuredContent` in server response ## Architecture ``` ChatGPT ↓ (calls tool) Server.js ↓ (returns structuredContent) ChatGPT ↓ (requests resource) Server.js (serves HTML) ↓ (renders with toolOutput) Widget displays! ```