Chapter 42: Apps SDK - Building Interactive ChatGPT Apps

You've built agents that reason, plan, and execute tasks. But they live on your server—how do you get them in front of users who need them?

ChatGPT has over 800 million weekly active users. Over 1 million businesses use it daily, including 92% of Fortune 500 companies. When you build a ChatGPT App using the Apps SDK, your application becomes available in the ChatGPT App Directory—where users can discover it, add it to their ChatGPT, and start using it immediately. No separate website. No app store approval. No user acquisition cost.

This is the distribution opportunity the Apps SDK unlocks.

What the Apps SDK Does

Chapter 34 taught you to build backend agents with OpenAI's Agents SDK—intelligent systems that process requests, use tools, and hand off between specialized agents. The Apps SDK creates the visual layer users see: interactive widgets that render rich UI directly inside ChatGPT conversations.

The distinction matters:

• Agents SDK creates backends—the intelligence behind operations
• Apps SDK creates frontends—visual interfaces users interact with

A complete ChatGPT App combines both: agents process requests while widgets display results with buttons, forms, and real-time updates. If the Agents SDK is the engine, the Apps SDK is the dashboard—and the dashboard is what 800 million users see.

This chapter bridges your MCP server knowledge (Chapters 37-38) with widget capabilities unique to the Apps SDK. You'll build on familiar patterns—FastMCP servers, tool definitions, structured responses—while adding the visual layer that transforms tools into complete applications available to the world's largest AI user base.

What You'll Learn

By the end of this chapter, you'll be able to:

• Explain the three-layer architecture: Understand how ChatGPT UI, widget iframes, and MCP servers communicate to deliver interactive experiences
• Build ChatGPT Apps with FastMCP: Create MCP servers that expose tools with widget resources, using the text/html+skybridge MIME type for ChatGPT rendering
• Implement widget interactivity: Use the window.openai API for action buttons (sendFollowUpMessage), tool chaining (callTool), and state management
• Design response payloads: Separate data the model sees (structuredContent) from data only the widget sees (_meta) for efficient token usage
• Manage state and display modes: Persist user selections across tool invocations with widgetState and control layout with inline, pip, and fullscreen modes
• Build a complete TaskManager ChatGPT App: Apply all patterns to create a working task management application with add, complete, and delete functionality as your capstone project

Chapter Structure: Building TaskManager Progressively

Unlike chapters that teach concepts separately, this chapter builds one application progressively. Each lesson adds a single feature to your TaskManager ChatGPT App:

Lesson	What You Build	New Concept
L1: Architecture	Mental model (no code)	Three-layer architecture, data flow
L2: Hello Widget	Minimal greeting widget (~50 lines)	text/html+skybridge, FastMCP basics, ngrok setup
L3: Refresh Button	Add "Refresh" button to widget	sendFollowUpMessage, API availability
L4: Task List	Display tasks from server	structuredContent vs _meta separation
L5: Task Actions	Add Complete/Delete buttons	callTool, widgetAccessible metadata
L6: State & Modes	Persist selections, fullscreen view	widgetState, display modes
L7: React & Apps SDK UI	Rebuild TaskManager in React	@openai/apps-sdk-ui, React hooks
L8: Capstone	Production-ready deployment	Security metadata, debugging, deployment
Quiz	Assessment	50-question chapter assessment

The Progressive Approach: By Lesson 8, you haven't just learned concepts—you've built a complete, production-ready TaskManager ChatGPT App using both vanilla JS and React approaches.

Prerequisites

• Chapter 34: OpenAI Agents SDK (tools, handoffs, guardrails)
• Chapters 37-38: MCP Fundamentals and Custom MCP Servers (FastMCP, tool definitions)
• Part 5: Python Fundamentals (async/await, type hints, Pydantic)
• Basic HTML, CSS, and JavaScript for widget development

Tools Required

• Python 3.11+ with uv package manager
• FastMCP (mcp[cli]>=1.9.2) and uvicorn
• ngrok for tunneling local servers to HTTPS
• ChatGPT Plus or Enterprise account (Developer Mode access)

Looking Ahead

This chapter gives you ChatGPT Apps with interactive widgets. Chapter 43 (Agent Testing & TDD) adds quality assurance patterns, and Chapter 44 (Evaluation Frameworks) helps you measure agent performance systematically.