Back to Learn

Turn Your MCP Server into a ChatGPT App

Learn how to add widgets to your MCP server and deploy it as a ChatGPT App.

20 min read
mcpchatgptwidgetsopenaiapps-sdkfpl

Quick actions

Try the app, view the code, or explore the components.

GitHub
Learning Objectives

By the end of this lesson, you will:

  • Understand how ChatGPT Apps extend MCP
  • Learn the widget pattern for rich UI
  • See the FPL ChatGPT App as a case study
  • Know how to use the OpenAI Apps SDK

From MCP Server to ChatGPT App

You've learned how to build MCP servers. Now let's connect one to ChatGPT.

ChatGPT Apps are MCP servers with one addition: UI components (widgets).

The Architecture

User asks question
    ↓
ChatGPT decides which tool to call
    ↓
Your MCP server executes the tool
    ↓
You return structured data + widget metadata
    ↓
ChatGPT renders your React widget

Why Widgets Matter

AI conversations are powerful, but sometimes you need visuals:

  • Player stats → Cards with photos, graphs
  • Comparisons → Side-by-side tables
  • Search results → Scrollable lists

Widgets let you build hybrid experiences: conversation + UI.

Fantasy Football Example

Our FPL ChatGPT App has three widgets:

WidgetPurpose
Player ListGrid of player cards with key stats
Player DetailDeep dive on one player
ComparisonSide-by-side player comparison

Each widget is a React component that consumes JSON from your tools.

The Widget Pattern

  1. Build your React component
  2. Your tool returns JSON data
  3. Widget reads data via window.openai.toolOutput
  4. ChatGPT renders it inline

The OpenAI Apps SDK

The Apps SDK provides:

  • useToolOutput() hook to read tool data
  • Pre-built components (cards, tables, charts)
  • Styling that matches ChatGPT

Try It Yourself

Experience a full ChatGPT App with widgets.

Resources