How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)

Ever feel like user authentication is one hot mess of protocols, random forms, and endless “Sign in with Google” buttons? Or maybe you’ve heard rumblings about “OAuth” and “MCP servers” but wondered how they actually fit into the web (and now, AI) landscape? Well, you’re in the right place!

In this deep dive, I sit down with Max from Stytch, now part of Twilio!, to break down everything you’ve ever wanted to know about OAuth, why it matters, and how it’s suddenly become crucial for connecting Large Language Models (LLMs) and agents to external services in a secure, user-friendly way. Plus, we’ll get under the hood of the coolest Tamagotchi-inspired AI app, Chatagotchi, built using OpenAI’s Apps SDK and MCP.

By the end of this post, you’ll:

Know what OAuth, MCP, and the Apps SDK are and why they’re key for AI integrations
See a real-world Chatagotchi demo and learn how it works
Understand why authentication flows matter—especially when security is at stake
Get actionable insights for building your own secure, interactive AI-powered apps

Ready to level up your understanding? Let’s jump in!

What Is Stytch & Why Authentication Is So Hard

Let’s kick things off with a little background. Stytch (now acquired by Twilio) is one of those rare companies laser-focused on making authentication simpler—think passwords, magic links, Face ID, social logins, and all the enterprise protocols (“SAML,” “OpenID”), often in places you wouldn’t even notice.

When I asked Max, product engineer at Stytch, about the job, his answer was simple:

"We take all of that data and we build tools that help developers manage that so you don't have to worry about building your own sign in form."

Stytch spent their early years helping developers pull user data in securely, but over the past year, their focus has flipped to pushing user data out to other systems—the critical piece for modern integrations, cross-app experiences, and now, AI agents.

Why Is Authentication So Crazy Complicated?

Here’s the fun part: Picking just authentication with passwords is easy-ish if you’re careful with things like hashing. But add multi-factor authentication (MFA), social logins, SAML, OTP, magic links, mobile integrations, and you’re suddenly looking at months of build-out and endless docs.

Max summed it up hilariously:

"You can build a simple login form in an afternoon. You can build like full consumer identity, access management in a lifetime."

And if you’re wondering, “Why not just roll my own?”, you’re not alone. But trust me, it’s a lot of work—unless you tap into an expert solution.

Breaking Down OAuth—More Than Just a “Login with Google” Button

Alright, so what is OAuth? If you’ve ever clicked “Login with Google” (or Facebook, or Microsoft), you’re using OAuth under the hood.

But OAuth is not just a protocol—it’s a collection of more than 40 RFCs (tech specs) developed and refined by thousands of security experts and companies like IETF and the OpenID Foundation.

Here’s why that matters: OAuth lets you securely share user data from one place to another—from web apps to desktop clients, mobile apps, even smart TVs—and every step is designed to keep the user in control and the systems secure.

OAuth: The Three Key Pieces

Let’s nerd out for a second. OAuth relies on three main parts:

Authorization Server / Identity Provider
This is what knows who you are (Netflix.com, accounts.google.com, etc.).
Resource Server
The API that actually holds the data (the giant boxes with Netflix movies, your Google Drive).
Client
The “thing” (app, TV, desktop program) trying to access the data on your behalf.

Here’s how it fits together:

The client asks the authorization server, “Can I get access?”
The authorization server gives the client an access token if the user consents.
The client hands the token to the resource server and gets the data.

Netflix Example

Let’s say you want to watch Netflix on your smart TV:

Netflix.com is your authorization server (handles login and your identity)
Netflix’s servers with all the movies are the resource server
Your smart TV is the client

The flow ensures your TV only gets access to watch movies—not, for example, to change your credit card!

“It's really common to share your data from a website to a native app... even to devices like televisions. And OAuth is about how the user and the service provider work together to agree on how this data should be shared.”

A flow diagram showing OAuth authorization between TV, Netflix, and the servers---

OAuth in Action: Real-World Example

Let's walk through a classic OAuth flow—the Authorization Code Flow—just like you’d see when logging in to a new app:

User tries to connect an app (e.g. smart TV to Netflix)
TV sends login request to the Authorization Server (Netflix.com)
User authenticates (maybe with password, Face ID, or magic link)
Authorization server issues an access token to the TV
TV now uses this token to fetch movie data and play content

OAuth doesn’t tell Netflix how to do its login (could be password, SAML, Face ID, etc.)—that’s left flexible so you can customize for your users.

And that’s where Stytch shines—helping you build flexible login flows so you don’t have to reinvent the wheel.

Why Is OAuth So Important?

Beyond “login with Google,” OAuth lets you:

Limit permissions to just what’s needed (TV can’t change your billing info)
Support lots of login methods (Face ID, magic links, social sign-in, enterprise SSO)
Enable secure integrations between systems
Trust that the protocols have been tested for years by security experts

How OAuth Powers MCP (Model Context Protocol) for AI Agents

So what does all this have to do with AI agents, LLMs (like ChatGPT), and the hot new ecosystem of “apps” running on top of them?

Enter MCP: The “Plug-and-Play” Data Ecosystem for LLMs and AI Agents

The Model Context Protocol (MCP) is trying to standardize how AI agents and LLMs (think ChatGPT, Claude, Gemini) talk to external sources—whether that’s your files, Google Drive, GitHub, Slack, or a custom backend.

Instead of writing custom code for every connector, MCP aims to be a unified protocol so agents and data sources can connect with minimal fuss.

“If you wanted to build an educational service using MCP and roll it out to a high school... are you going to give every student their own API key? I just don't see it going well.”

That’s where OAuth comes in—making these flows secure and approachable for users, versus requiring every person to find and store their own API keys.

Typical MCP Architecture Using OAuth:

MCP Clients (like ChatGPT, Claude): want to access external data
MCP Servers: host the data, are “resource servers” in OAuth terms
Authorization Server: handles identity (as in “who’s asking?”)
OAuth: bridges the gap, so the MCP client gets a token and can do stuff only the user has approved

This design means users never see an API key and MCP servers don’t directly handle logins—they just rely on the secure flow provided by OAuth.

A diagram showing MCP clients, servers, Authorization Server, and OAuth tokens flowing between them---

Local vs Remote MCP Servers—And Why OAuth Wins

Now things get spicy: When you’re building out MCP connectors, you’ll deal with local (on your machine) vs remote (on the cloud) MCP servers.

Local MCP Servers

Great for editing code, local files, or pictures
Doesn’t make sense for mass-market products (people don’t want to install/maintain software, security hassles)
Okay for developer tools, not for mainstream commercial apps

Remote MCP Servers

Typical web APIs, running in the cloud
Easier for everyone to access, but often rely on API keys
Not ideal for mass-market apps (most people don’t know how to manage API keys or environment variables)

OAuth is a familiar and user-friendly solution.

Most people have gone through OAuth flows (“Sign in with Google/Facebook”)
Removes the need for users to wrangle technical setup
Widely adopted and secure

“OAuth is something that all of us do every day, multiple times a day... and you don't need to be technical in order to take advantage of it.”

Chatagotchi: Building a Tamagotchi-Inspired App with MCP and OAuth

Now for the fun part! Max built a Chatagotchi app—basically Tamagotchi for modern AI chat—using the OpenAI Apps SDK and MCP protocol, all securely wired up with OAuth.

Let’s break down how it all fits together.

Step 1: Setting Up Your App in ChatGPT

You start off by:

Running an MCP server (the backend for Chatagotchi)
Going to ChatGPT → Settings → Apps and Connectors → Advanced Settings → Developer Mode
Hitting “Create” to add your app
- Specify name, description, MCP server URL
- See a list of available tools (Start game, Feed pet, Play with pet, List achievements)

Step 2: OAuth Flow in Action

To keep everything secure and remember who you are, you:

Hit Connect inside ChatGPT, triggering an OAuth flow
Log in via Google (with Stytch handling the backend)
Review OAuth consent screen, authorizing ChatGPT to:
- Start a new game, feed your pet, play with pet, list achievements

“So Stytch was responsible... This is our drop-in SDK. This is a little React component and then a little bit about Stytch under the hood... You can use that to build whatever experience you want.”

The cool part? The UI and consent screen are highly customizable, letting you maintain your brand and user experience.

OAuth consent screen inside ChatGPT displaying Stytch’s customized React

Step 3: Playing the Game and Handling Data

With the app installed, you can chat with Chatagotchi inside ChatGPT. For example:

Ask “What tools are available?”
Start a new game (give your virtual pet a name—say, “AJ”)
Feed your pet (“Pizza,” “Apple,” “Cookie,” etc.)
ChatGPT inspects the MCP tool schema and provides valid options
ChatGPT checks with you for permission to invoke each tool

“ChatGPT understands the app and is kind of co-playing it with you. Like a Dungeons and Dragons Dungeon Master experience, almost.”

A Chat session showing the pet’s state changing as you feed or play with it#### All UI interactions, loading screens, and game state are handled by:

MCP server returning JSON data and dynamic HTML for widget rendering
ChatGPT rendering widgets in iframes, powered by your custom React micro-frontends

Inside the Code: MCP Server, OAuth, and Widget Rendering

Okay, let’s get nerdy! Here’s how the MCP tools, OAuth, and output templates work in the actual code.

Defining MCP Tools with TypeScript SDK

Max uses the official MCP TypeScript SDK to define tools—simple, readable, and powerful.

Here’s a snippet for how you’d define the New Game tool:

const newGameTool = { 
    title: "Start New Game", 
    description: "Creates a new Chatagotchi pet.", 
    inputSchema: { 
        type: "object", 
        properties: { 
            petName: { 
                type: "string", 
                description: "Name your pet" 
            } 
        }, 
        required: ["petName"] 
    }, 
    outputTemplate: "pet.html", 
    metadata: { 
        openai: { 
            title: "Waking up your new pet...", 
            outputTitle: "Hello to your new pet!" 
        } 
    } 
};

What does this do?

Defines the schema
Specifies input requirements
Links to an output template (pet.html) for UI rendering
Includes metadata for special UI handling in OpenAI

Explanation

The tool is registered with the MCP server, so ChatGPT knows its functionality and what data it expects. The metadata allows custom messages and UI rendering to keep the experience engaging and aligned with your brand.

Dynamic UI, Output Templates, and Security Insights

Each tool can return custom HTML/JS to render beautiful widgets directly inside ChatGPT chats. Here’s the basic structure for an output template:

<!-- pet.html -->
<div id="pet-widget"></div>
<script src="https://your-domain.com/pet.js"></script>

pet.js grabs the JSON result (the “structured content”), renders the pet state with React/Vue/vanilla JS—whatever you prefer.

How Does ChatGPT Render Widgets?

Grabs the output template (“pet.html”) from your server
Loads its contents into an iframe, sandboxed for security
Runs your bundled JS code to display the game state, loading screens, etc.
Keeps everything isolated, so you can use whatever UI stack you want

“There's been a lot of work... around iframes since Yahoo days... Now we found out how bad iframes were. Oh, well, don't say that, because this is all iframes too. We'll see how much trouble they cause, but hopefully they stay.”

Security Notes

OpenAI is locking things down—once a tool or app is published, names, signatures, descriptions are locked. No sneaky changes!

If you try to roll out breaking changes or new behavior, you’ll need to resubmit for human review, keeping the ecosystem clean and secure for users.

Also, there are considerations around referencing remote JS/CSS assets: Should your chats be deterministic (never changing), or flexible for updates? Expect best practices around static CDNs, asset hashes, and widget isolation to evolve as these ecosystems mature.

Security, User Experience, and What’s Next in AI App Distribution

As cool as this all sounds, there are big implications for security, user education, and app distribution.

OAuth Isn’t Optional—It’s Essential

Whether you’re dealing with students, mass-market users, or enterprise customers, asking them to manage API keys is dead on arrival. OAuth flows are familiar and easy, allowing anyone to connect apps without technical frustration.

AI Bots and App Stores—The New OS?

ChatGPT and similar platforms are turning into new “Operating Systems” for interacting with external services—much like how the Apple App Store changed mobile distribution.

“Is ChatGPT an app? Is ChatGPT an operating system or a runtime?”

Mockup of ChatGPT with a side bar of installed apps, resembling an app store experienceWe’re already seeing the beginnings of an “App Store” for AI agents and plugins—apps compete for distribution, brand engagement, and new discovery.

Developer Experience

For developers, it’s shockingly easy to get started if you understand web fundamentals and a little OAuth. MCP’s TypeScript SDK, Apps SDK documentation, and Stytch’s drop-in APIs are accessible, flexible, and well-supported.

“I was very surprised by how easy it was to get set up. There's a little bit of a learning curve and a mental curve around the RPC model... but it's not hard to think about—just a little different from classic web dev.”

Conclusion & Key Takeaways

Let’s sum it all up! Here’s what you should remember from this deep dive:

OAuth is everywhere—It’s how most users expect to authenticate and share access, and it’s critical for both web and AI agent integrations
MCP (Model Context Protocol) is the key bridge for enabling LLMs and agents to talk to external data sources and tools, safely and flexibly
Remote MCP servers + OAuth is the right combo for mainstream, user-friendly integrations (not API keys!)
Apps SDK is turning ChatGPT into a new “App Store”—with custom micro-frontends powered by widgets
Building these integrations isn’t rocket science—once you grasp the OAuth flow, MCP protocol, and widget architecture, you’re off to the races
Security and user experience are top priorities—expect standards to keep evolving, but OAuth’s staying power is guaranteed
Open standards (like MCP) mean your integrations can work across many platforms, not just closed ecosystems

What Do You Think?

Have you built an MCP server or a ChatGPT app? What’s your biggest hang-up with OAuth flows or widget rendering? Are you excited about the future of “app stores” for AI agents—or maybe a little worried?

Drop a comment below—we love hearing what fellow developers, educators, and curious minds think!

Ready to Learn More?

Watch the full video with Stytch’s Max and CodingCat.dev on YouTube:
OpenAI Apps SDK Video
Dive deeper into official docs:

And of course—subscribe to CodingCat.dev on YouTube for more in-depth interviews, walkthroughs, and tutorials!

“If you maintain a web presence and care about Google search and reaching customers, ChatGPT is a new distribution mechanism. Even if it’s not ChatGPT, something else will take its place, and OAuth will always be in the mix.”

Thanks again to Max from Stytch for breaking down the intersecting worlds of OAuth, MCP, and AI agent apps. Can’t wait to see what you build next!

Max’s Chatagotchi widget in action inside ChatGPT, showing custom UI, game state, and seamless OAuth flow---

Got questions? Post them below, and we’ll dive in together. Happy coding, perfect peeps! 🚀