← Back to directory
O

OpenAI Apps SDK Examples

Official
Tutorial / collection
OpenAI's official Apps SDK example gallery of MCP servers with interactive ChatGPT widgets

This is a tutorial or resource collection; there is nothing to install into a client.

Category
Dev Tools #133 of 438
Stars
★ 2.4k Very popular
Transport
SSE · Streamable HTTP
Runtime
Node.js 18+ · Python 3.10+
Credentials
Optional API key
License
MIT
Last commit
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.

Strongest · Documentation 15/20 Weakest · Reliability 8/20

Reliability
8/20
Security and permissions
13/20
Maintenance
12/20
Documentation
15/20
Setup experience
11/20
Why each score
Reliability 8/20
The README documents several parallel MCP server implementations (Node/Python: Pizzaz, Solar System, Kitchen Sink, Shopping Cart, Authenticated) with plausible build (pnpm run build), static-asset serving (pnpm run serve), and per-server start commands, so the happy path reads as internally consistent. However, no server manifest was cached, and there is no evidence of CI workflows or committed tests validating that declared tool lists/behavior match actual execution, nor any description of error handling for edge cases. Per the static-calibration rule, reliability cannot exceed 12 without verifiable execution evidence (CI plus tests covering key paths), so 8 is given, reflecting a plausible-but-wholly-unverified state.
Security and permissions 13/20
The repo calls out DNS-rebinding protection for ngrok tunneling (requiring MCP_ALLOWED_HOSTS / MCP_ALLOWED_ORIGINS), a positive signal. The Authenticated example claims 'different levels of OAuth' but gives no detail on credential storage, scope limitation, or least-privilege design. The Shopping Cart example explicitly discloses that cart state is not persisted server-side and is demo-only, with a note that production use requires server-side persistence — an honest disclosure of a real limitation. No secret leakage, unconfirmed destructive operations, or covert exfiltration were found. However, since the server manifest wasn't cached, actual tool permission scope and data boundaries can't be verified, warranting a deduction. Score: 13.
Maintenance 12/20
This is an official OpenAI repository under the MIT license, with meaningful star count (2296) and open issues (135), and it is not archived. However, the README gives no release cadence, versioning policy, or security-response channel, and the Contributing section explicitly states the maintainers 'may not review all suggestions,' suggesting limited responsiveness to external contributions. Lacking verifiable governance evidence, the score is 12.
Documentation 15/20
Documentation is fairly layered: prerequisites, dependency installation, build/serve steps, per-server run instructions for each language variant, ChatGPT developer-mode connector setup with ngrok tunneling, DNS-rebinding environment variable configuration, and production deployment env vars (BASE_URL/API_BASE_URL) are all covered, plus a known-issue workaround for the Chrome 142 local-network-access flag. Missing: detailed tool parameter/JSON-Schema documentation, rate limits, and cost information, and OAuth details for the Authenticated server remain shallow. Score: 15.
Setup experience 11/20
Setup steps are concrete and actionable: pnpm install → pnpm run build → pnpm run serve → start the chosen language/server combination → additional ngrok tunnel and allowed-host/origin env vars if testing in ChatGPT. This is a fairly involved, multi-step process spanning two language runtimes (Node and Python virtualenvs) and multiple coordinated services (static asset server + MCP server), plus extra tunneling/env configuration — a 'works but manual' pattern. Since there is no CI or test evidence confirming these steps succeed cleanly on a fresh environment, the static-calibration cap of 15 applies, and given the step complexity the score is 11.

Static review · not runListed 2026-08-26

Read the FMRS scoring method →

Fit and risk

What it can accessUses the network

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

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

Setup

Before you start

Runtime:Node.js 18+ · Python 3.10+

Other optional settings (4)
MCP_ALLOWED_HOSTS optional Hostnames allowed by the Python MCP SDK's DNS rebinding protection when tunneling; set it to your ngrok host (e.g. <custom_endpoint>.ngrok-free.app).
MCP_ALLOWED_ORIGINS optional Allowed origins for the same DNS rebinding protection; set it to the tunnel's https URL.
BASE_URL optional Set when deploying an MCP server; used to generate widget HTML that serves static assets from your hosted URL.
API_BASE_URL optional Used by client widgets to build fully-qualified API URLs; set it to your API service address.
  1. Clone the repo and install workspace dependencies: pnpm install && pre-commit install (npm/yarn also work).
  2. Build the widget bundles: pnpm run build, producing hashed HTML/JS/CSS under assets/.
  3. Serve the static assets: pnpm run serve (defaults to http://localhost:4444 with CORS enabled).
  4. 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 run uvicorn <module>:app --port 8000.
  5. 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).
  6. When tunneling, the Python MCP SDK enforces DNS rebinding protection — set the MCP_ALLOWED_HOSTS and MCP_ALLOWED_ORIGINS environment variables to the tunnel host before starting the server.
  7. For deployment, set the BASE_URL (used to generate widget HTML referencing hosted static assets) and API_BASE_URL (used by client widgets to build fully-qualified API URLs) environment variables.

Check that it works

Start one of the example MCP servers (e.g. run pnpm start in pizzaz_server_node, or uvicorn for a Python server) and expose it via ngrok. Enable developer mode in ChatGPT, add the connector under Settings > Connectors, then ask "What are the best pizzas in town?" — seeing the Pizzaz widget rendered confirms the connection.

Troubleshooting

  1. If widget UI doesn't appear on Chrome 142+, disable the local-network-access-check flag at chrome://flags and restart Chrome
  2. Run `pnpm run build` and `pnpm run serve` to publish static assets before starting any MCP server, or widgets won't load
  3. Restart the Python Pizzaz server after rebuilding or editing assets to clear its lru_cache of widget HTML
  4. If connecting via ngrok to ChatGPT triggers a DNS rebinding protection error, set MCP_ALLOWED_HOSTS and MCP_ALLOWED_ORIGINS to the tunnel hostname

Things to try

Once connected, you can ask your AI assistant things like:

  • What are the best pizzas in town?
  • Show me a 3D solar system view
  • Add a pizza to the shopping cart and show the current cart state
  • Demonstrate the kitchen sink widget's tool calls and host APIs

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

ChatGPT

Listed from the project's documentation, not tested by this site.

Overview

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.

Similar servers

Context7 80 · B

Upstash's official server providing up-to-date third-party library docs for AI coding assistants

★ 62.9k · Tools 2 Compare with this →

Source revision 18cc38e78a96 Data synced 2026-10-12 Read the FMRS scoring method