Building ChatGPT Apps 101: Fantasy Football Assistant

Overview

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

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:

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:

1. User asks a question → "Show me the top 10 forwards by form"
2. ChatGPT decides which tool to call → show-players with position="Forward", sort="form"
3. Your server executes the tool → Fetches data from FPL API
4. You return structured data + metadata → JSON with player stats
5. 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:

---

Understanding Widgets

I don't know about you, but I get overwhelmed with walls of text sometimes. It's just how we're wired—humans are visual creatures. Good UX means presenting information in the format that makes it easiest to understand.

When I want to pick my captain for the week, I don't want to read paragraphs of stats. I want to see them—form graphs, points per game, fixture difficulty. At a glance.

This is what makes ChatGPT Apps special: the hybrid experience. You get the natural conversation flow AND rich visual interfaces when they're useful.

Widgets are React components that render inside ChatGPT. They consume the structured data from your tools and display interactive UI.

The pattern is simple:

1. Build your React component
2. Bundle it (we use esbuild)
3. Your tool returns JSON data
4. The widget reads data via window.openai.toolOutput
5. ChatGPT renders it inline in the chat

Check out the widgets we created for this app:

---

Bringing It All Together

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

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.

---

We'd Love to Hear From You

Got questions? Want to share what you're building? We're here to help.