Building ChatGPT Apps 101: Fantasy Football Assistant

Overview

ChatGPT Apps Marketplace showing featured apps like Adobe Photoshop, Canva, Figma, Apple Music, and Replit - the new distribution channel for AI-powered applications

ChatGPT Apps are a new way to bring your product directly into ChatGPT conversations. Instead of users opening your website or mobile app, they interact with your capabilities right inside ChatGPT.

Why should you care? ChatGPT has 800 million weekly active users. That's not a typo—800 million people every week using ChatGPT to get questions answered, discover products, and solve problems. For consumers and businesses alike, ChatGPT has become a go-to destination.

This changes how you should think about building apps. The question isn't just "what does my app do?"—it's "how does my product drive value in a conversation?"

Look at what's already happening:

Replit lets developers generate prompts they can use directly in their projects—talk about meta-prompting
Canva lets you create and edit designs through conversation
Apple Music lets you speak your playlists into existence
Our FPL App helps lazy fantasy players like me do the tedious research work (I want to top the league, after all)

The key insight: conversation is the starting point, not clicks. Inside ChatGPT, your app is a capability the model can call when it's useful. The "unit of value" isn't your overall experience—it's the specific things you help accomplish at the right moment.

How MCP Servers Work

Diagram showing how MCP Servers connect AI models to external tools, databases, files, calendars, and APIs - the foundation of ChatGPT Apps

ChatGPT Apps are built on MCP Servers (Model Context Protocol). MCP is an open specification from Anthropic for connecting LLM clients to external capabilities.

Think of an MCP Server as a bridge between ChatGPT and your data or services. It bundles three things:

Component	What It Does
Tools	Functions the AI can call (fetch data, take actions)
Resources	Files or data the AI can access
Prompts	Pre-built prompts the client can use

OpenAI extended MCP with something powerful: UI components. Your tools can return structured data that renders as rich widgets inside the chat. This hybrid of conversation + interactive UI is what makes ChatGPT Apps special.

Our Fantasy Football Example

Let's make this concrete. I'm a fantasy football player—a lazy one. I never remember to do player research, and I'd love ChatGPT to help me out.

Here's my problem: I want an app that finds player information and helps me make the best selections for my team. Breaking this down into capabilities:

Search players by position, price, form
View details for individual players
Compare players side-by-side

Each of these becomes a tool in our MCP server. Each tool returns structured content that renders as a widget. Simple as that.

How Tools Work

Tools are functions that ChatGPT can call. When a user asks "Show me the top forwards", ChatGPT calls your show-players tool with the right parameters.

Here's the flow:

User asks a question → "Show me the top 10 forwards by form"
ChatGPT decides which tool to call → show-players with position="Forward", sort="form"
Your server executes the tool → Fetches data from FPL API
You return structured data + metadata → JSON with player stats
ChatGPT renders your widget → Beautiful player cards appear

The magic is in the structured content—the JSON data that your React component will consume. This flows to your widget via the window.openai API.

Explore the tools we built for this app:

Bringing It All Together

Let's trace through what happens when you ask "Show me the top 10 forwards":

Step-by-step flow diagram showing how ChatGPT Apps work: User asks question, ChatGPT calls MCP tool, server fetches data from API, returns structured JSON, ChatGPT renders widget, user sees player cards

Here's the story: First, ChatGPT figures out that it needs to use a tool from your MCP server to answer this question. It looks at the available tools and decides show-players is the right one.

Then it calls your MCP server, which talks to the FPL API to fetch the latest player data. Your server processes the response, structures it into JSON, and sends it back along with widget metadata.

Finally, ChatGPT renders your React widget with all that data—and the user sees beautiful player cards, right there in the conversation.

Why does this change how applications are built?

You can now combine the power of ChatGPT with your data, data from other apps, and rich visual interfaces to create incredible experiences.

Your Turn

You've learned the core concepts. Now it's time to think about what you want to build.

What problem could you solve with the power of ChatGPT plus your data? What experience could you create that feels magical because it shows up exactly when it's needed?

Ready to start?

In future lessons, we'll cover state management and authentication.