ChatGPT App Basic Rendering Example

[ctufts]

Description

• Add HTTP server with StreamableHTTP transport for ChatGPT Apps integration
• Introduce interactive map widgets that render search results, routes, and isochrones visually in ChatGPT
• Enable widget support across multiple Mapbox tools

Changes

New HTTP Server (src/http-server.ts)

• StreamableHTTP transport for ChatGPT Apps compatibility
• Serves on http://localhost:3000/mcp

Widget System

• New WidgetTemplatesResource serves widget HTML with text/html+skybridge MIME type
• Widget config added to BaseTool for _meta[openai/outputTemplate] in tool descriptors
• React-based map widget (widgets/) with Mapbox GL JS, built to self-contained HTML with inlined JS/CSS

Widget-Enabled Tools

• category_search_tool - Place search by category
• search_and_geocode_tool - Location search/geocoding
• directions_tool - Route visualization
• isochrone_tool - Reachable area polygons

Documentation

• Comprehensive setup guide (docs/chatgpt-integration.md) covering widget builds, tokens, ngrok setup, and example prompts

---

Testing

Local Test Plan

• Set environment variables: export MAPBOX_ACCESS_TOKEN=pk.xxx and export ENABLE_CHATGPT_WIDGETS=true
• Build widgets: cd widgets && npm install && npm run build
• Start HTTP server: npm run dev:http
• Test via ngrok + ChatGPT App with sample prompts
• Verify map widget renders for each enabled tool

---

Checklist

• Code has been tested locally
• Unit tests have been added or updated
• Documentation has been updated if needed

---

Additional Notes