Jan 16
Loading video player...
🚀 **Building Interactive Web Apps INSIDE ChatGPT (MCP Server Demo)** We are witnessing a massive shift in how users will interact with the internet. In this video, take a deep dive into the OpenAI Apps SDK and the Model Context Protocol (MCP). Instead of getting standard text responses, see how we can render full, interactive React components—like portfolios and e-commerce product grids—directly within the ChatGPT interface. ✅ **What you'll see in this demo:** * A "Headless" portfolio loaded dynamically inside the chat window. * A live e-commerce integration (Verge Safety Barriers) pulling data from WooCommerce. * Interactive UI widgets: Carousels, pop-up modals, and quote request forms. * How this technology keeps users secure and engaged without leaving the app. * A look at the open-source code behind this technology. ⏱️ **Key Moments:** ► [00:00] - Introduction to OpenAI Apps SDK & Widgets ► [01:06] - Demo 1: Loading a Portfolio Carousel via MCP ► [01:40] - Interactive Elements: Filling out forms inside ChatGPT ► [02:51] - Demo 2: Connecting to WooCommerce (Verge Safety Barriers) ► [03:55] - AI Product Recommendations & Filtering ► [04:10] - Real-time Quote Requests & Form Handling ► [06:55] - The Future of AI: The "Everything App" & Headless Web ► [08:35] - Open Source Code & Tech Stack Overview 🤖 **The Tech Behind the Magic:** - **Protocol:** MCP (Model Context Protocol) - **Frontend:** React + Tailwind CSS - **Infrastructure:** Cloudflare Workers - **Database/Source:** WooCommerce & WordPress REST API - **AI Integration:** OpenAI Apps SDK **🔗 Get the Code:** I have open-sourced this project! Check out the GitHub repository shown in the video to start building your own MCP servers. https://github.com/jezweb/chatgpt-app-sdk https://github.com/jezweb/claude-skills/tree/main/skills/openai-apps-mcp --- **About Jezweb** We build custom AI solutions and intelligent applications to help businesses in Australia and beyond become more efficient and profitable. ► Website: https://www.jezweb.com.au ► Contact Jeremy: jeremy@jezweb.net #OpenAI #MCPServer #WebDevelopment #React #ChatGPTApps #HeadlessCommerce