Best for
- Developers learning the Apps SDK/MCP component development pattern
- Teams planning to build a custom connector app for ChatGPT
- Engineers who want working Node and Python reference code for widget rendering and state synchronization
O
OpenAI Apps SDK Examples
Official
OpenAI's official Apps SDK example gallery of MCP servers with interactive ChatGPT widgets
GitHub source repository ↗
59FMRS · C
OpenAI's official Apps SDK/MCP example repository, providing several runnable Node/Python server demos (Pizzaz, Kitchen Sink Lite, Solar System, Authenticated, Shopping Cart) plus a widget build pipeline, intended for learning and adaptation rather than direct production use.
This is OpenAI's official repository of example MCP servers and companion UI components (widgets) demonstrating how to build Apps SDK applications for ChatGPT. It bundles several standalone demo servers: Pizzaz (Node and Python implementations showing list, carousel, and map views plus an interactive shop/checkout flow), Kitchen Sink Lite (Node and Python, exercising the full window.openai host surface — reading tool input/output, display mode and theme, writing widget state, calling MCP tools from within a widget, and using host helpers like requestDisplayMode and openExternal), Solar System (Python, a 3D solar system viewer), Authenticated (Python, showing tool calls that require different OAuth authorization levels), and Shopping Cart (Python, showing how widgetSessionId keeps widgetState in sync across tool calls). The repo also ships a Vite-based build pipeline (build-all.mts) that bundles widget source into hashed HTML/JS/CSS assets the servers serve. It is meant as a learning starting point and scaffold for building your own ChatGPT apps, not a production-ready hosted service.
Tools
The tool list has not been reviewed yet.
Setup
- Clone the repo and install workspace dependencies:
pnpm install && pre-commit install(npm/yarn also work). - Build the widget bundles:
pnpm run build, producing hashed HTML/JS/CSS underassets/. - Serve the static assets:
pnpm run serve(defaults to http://localhost:4444 with CORS enabled). - Start whichever demo MCP server you want, e.g. Pizzaz Node:
cd pizzaz_server_node && pnpm start; or for the Python servers (Pizzaz, Kitchen Sink, Solar System, Authenticated, Shopping Cart) create a virtualenv,pip install -r <server>/requirements.txt, then runuvicorn <module>:app --port 8000. - To use it from ChatGPT, enable Developer Mode, then add the server under Settings > Connectors; for a local server, expose it publicly with a tool like ngrok (e.g.
https://<endpoint>.ngrok-free.app/mcp). - When tunneling, the Python MCP SDK enforces DNS rebinding protection — set the
MCP_ALLOWED_HOSTSandMCP_ALLOWED_ORIGINSenvironment variables to the tunnel host before starting the server. - For deployment, set the
BASE_URL(used to generate widget HTML referencing hosted static assets) andAPI_BASE_URL(used by client widgets to build fully-qualified API URLs) environment variables.
Fit and risk
Not for
- Anyone needing a ready-to-use production MCP service (this is example/scaffold code, not a hosted service)
- End users who just want a specific feature without doing any development
- Use cases requiring official support in non-ChatGPT hosts (Claude Desktop, etc.) — these examples are built around the Apps SDK/ChatGPT
Required permissions
- Runs local HTTP servers (port 4444 by default for static assets, 8000 for the various MCP servers)
- The Authenticated example server needs OAuth credentials configured to demonstrate authorized tool calls
- Exposing a local server publicly via ngrok or similar requires authorizing tunnel access and configuring allowed hosts/origins
Risks and side effects
- The examples are learning scaffolds, not production-hardened — e.g. the shopping cart demo shows the widgetSessionId mechanism but does not persist cart state server-side
- Exposing a local server to the internet via ngrok without restricting MCP_ALLOWED_HOSTS/MCP_ALLOWED_ORIGINS could allow unauthorized access
- The Python Pizzaz server caches widget HTML with functools.lru_cache, so rebuilt or edited assets can appear stale until the server is restarted
Troubleshooting
- If widget UI doesn't appear on Chrome 142+, disable the local-network-access-check flag at chrome://flags and restart Chrome
- Run `pnpm run build` and `pnpm run serve` to publish static assets before starting any MCP server, or widgets won't load
- Restart the Python Pizzaz server after rebuilding or editing assets to clear its lru_cache of widget HTML
- If connecting via ngrok to ChatGPT triggers a DNS rebinding protection error, set MCP_ALLOWED_HOSTS and MCP_ALLOWED_ORIGINS to the tunnel hostname
Use cases
Learning how the Apps SDK and MCP work together to render rich interactive UI in ChatGPT
Using Pizzaz, Kitchen Sink, or Solar System as a starting point for building a custom ChatGPT connector app
Studying the shopping cart example to learn how widgetSessionId keeps shared state across multiple tool calls
Studying the authenticated example to learn how to gate tool calls behind different OAuth authorization levels
Supported clients
ChatGPTFull support