Using Yogiyo Delivery in ChatGPT — An MCP and Widget Integration Development Story

By combining ChatGPT Apps SDK and MCP (Model Context Protocol), a structure was built to embed Yogiyo's delivery features directly into ChatGPT conversations. The core idea was not for AI to replace the delivery service, but for the platform to expose Tools and widgets so that ChatGPT could call only the features it needed and render them immediately.

The starting point was the Node.js example among OpenAI's Apps SDK Examples, and during the prototype stage, Vibe Coding using Claude was used to speed things up. Afterward, Yogiyo's internal APIs were actually connected, and a monorepo structure was organized so that the MCP server and React widgets could be operated together with a single TypeScript stack.

The implementation expanded across several stages.

• Phase 1: Removed mock data and replaced it with Yogiyo's internal APIs, redesigning the tools/list and tools/call flows to fit the delivery domain
• Phase 2: Reorganized the list, detail, menu, map, and review widgets according to the Figma guide and OpenAI's design guide
• Phase 3: Separated the MCP server from static widget file serving, so the server focuses on business logic while the widgets are deployed via S3 + CloudFront
• Phase 4: Organized openai/widgetCSP to explicitly specify allowed domains such as Mapbox, image CDN, and S3
• Phase 5: Attached Datadog APM and dd-trace, adding custom spans for SSE connections and message sending
• Phase 6: Fixed the dd-trace initialization order in the ESM environment to resolve missing traces

The most challenging part was CSP. Since external resources are silently blocked inside the sandbox iframe, missing even a single item among map tiles, images, data: URIs, or external JS would leave the screen blank. In the end, connect_domains, resource_domains, and script_domains had to be managed dynamically per environment, handling local, ngrok, and production separately.

Operations and the registration process were just as important as development. App submission required Business Verification, domain ownership verification, test cases, and OS-specific demo videos, and it took about 50 days from registration until the app reached Approved status. Along the way, a .well-known/openai-apps-challenge endpoint had to be added, and even the order of widget deployment and MCP server deployment had to be fixed to match the exact build hash used in actual production.

In the end, what this project demonstrated is that a delivery experience running inside ChatGPT is completed not through simple text responses, but through the combination of conversation + Tool calls + inline widgets. The next steps are to expand into the order/payment flow, improve widget UX, and integrate usage metrics.