# Build Hour: Apps in ChatGPT Source: https://www.youtube.com/watch?v=mFG-4vUJ0kI Recap page: https://rapidrecap.app/video/mFG-4vUJ0kI Generated: 2026-01-23T20:03:11.705+00:00 --- ## Quick Overview The OpenAI Build Hours session provided a comprehensive tutorial on building and deploying custom Apps within ChatGPT using the Apps SDK, emphasizing the importance of solving real user problems, leveraging conversational context, and adhering to UI/UX guidelines, culminating in a live demonstration of building a simple multiplayer Ping Pong game using Codex and the MCP server. **Key Points:** - The session focused on building Apps in ChatGPT, covering the Apps SDK, Codex integration, and the Model Context Protocol (MCP) server. - Key resources provided include documentation for the Apps SDK, UI Guidelines, and GitHub examples like the 'Kitchen Sink' app. - To build an app, developers must enable Developer Mode in ChatGPT settings and use a custom MCP server URL (e.g., via ngrok for local testing). - The recommended development process involves reading docs, downloading sample code, looking at the component library, starting a repo, coding, and fixing deployment. - The demo involved building a simple multiplayer Ping Pong game using Codex for scaffolding and an MCP server for game state management and tools like 'reset_match'. - Valuable apps should solve a user problem better than native ChatGPT by leveraging multi-turn dialog, composition with other tools, or providing something new to know, do, or show. - Upcoming Build Hours topics include Prompt Caching (Feb 18) and Agent Capabilities (Feb 24). ![Screenshot at 04:24: Corey demonstrates the initial setup by running codex mcp add openaiDeveloperDocs --url https://developers.openai.com/mcp in the terminal to connect the OpenAI developer documentation as a knowledge source for Codex.](https://ss.rapidrecap.app/screens/mFG-4vUJ0kI/00-04-24.jpg) **Context:** This video is a tutorial session from the 'OpenAI Build Hours' series, hosted by Christine Jones and Corey, aimed at developers interested in creating custom applications (Apps) that run inside ChatGPT. The session walks through the necessary tools, architectural components (Web component, MCP Server), best practices, and concludes with a live coding demonstration of building a simple multiplayer Ping Pong game using Codex to accelerate development. ## Detailed Analysis The session covered the entire lifecycle of building an App for ChatGPT, starting with an overview of the architecture involving the User, ChatGPT, the Web Component (an iframe containing the app's UI bundle), and the MCP Server (which defines the app's tools and metadata). The presenters emphasized that Apps should solve a specific user problem better than native ChatGPT, leveraging multi-turn dialog and composition. They highlighted the importance of adhering to UI/UX guidelines available at developers.openai.com. A significant portion was dedicated to using Codex for scaffolding, demonstrated by generating a boilerplate for a Ping Pong game that uses a local MCP server running on port 8787 (tunneled via ngrok to localhost:4040). The presenters showed how Codex can scaffold the initial project structure, including creating the `server.js` and `index.html` files. They also demonstrated the interactive nature of the Quiz app example and highlighted the benefits of using Codex for rapid iteration, especially for tasks like generating tests or updating configuration files. The session concluded with a summary of key takeaways and a list of future Build Hours topics, including Prompt Caching and Agent Capabilities. ### Introduction to Apps in ChatGPT - Apps allow developers to expose custom UI and tool capabilities directly within the ChatGPT interface, enabling richer, context-aware experiences. ### What We Launched - Core components include the Apps SDK, ChatGPT App docs, Public app submission flow, App Marketplace, UI component library, App examples, and the Docs MCP Server. ### App Architecture - An App consists of a User interacting with ChatGPT, which communicates with the App's Web Component (UI in an iframe) and the MCP Server (where tools/metadata are defined). ### Building an App Process - The process involves reading docs, downloading sample code from GitHub (linked: github.com/openai/openai-apps-sdk-examples/), looking at the component library, setting up Codex/MCP server, coding, and fixing deployment. ### UX Principles - Key principles are to Extract (don't mirror existing sites), Treat ChatGPT as home (let the model handle routing), Design for conversational entry (support fuzzy intent), and Optimize for conversation over navigation. ### Demo Walkthrough - A live demo showed using Codex to scaffold a simple Ping Pong game, connecting to the OpenAI Docs MCP server for contextual information, and demonstrating multi-turn capabilities by asking for game statistics. ### Additional Resources - Resources include the Apps SDK docs, 'What makes a great ChatGPT app' guide, UI Guidelines, and the Build Hour GitHub repository. ![Screenshot at 00:05: Title slide for the session: 'OpenAI Build Hours' focusing on 'Apps in ChatGPT'.](https://ss.rapidrecap.app/screens/mFG-4vUJ0kI/00-00-05.jpg) ![Screenshot at 00:54: Agenda slide outlining the session structure, including Apps Platform, Building an App, Demo, Best Practices, and Q&A.](https://ss.rapidrecap.app/screens/mFG-4vUJ0kI/00-00-54.jpg) ![Screenshot at 02:44: Slide detailing what was launched, categorized into Core, Open Submission, and Resources, with a visual preview of an app UI.](https://ss.rapidrecap.app/screens/mFG-4vUJ0kI/00-02-44.jpg) ![Screenshot at 04:02: Slide listing the three apps to be demoed: AllTrails, AdobeExpress, and OpenAI - Quizzes.](https://ss.rapidrecap.app/screens/mFG-4vUJ0kI/00-04-02.jpg) ![Screenshot at 11:49: Diagram illustrating the architecture of an App in ChatGPT, showing the flow between User, ChatGPT, Web Component, and MCP Server via the Open Protocol.](https://ss.rapidrecap.app/screens/mFG-4vUJ0kI/00-11-49.jpg)