Original: https://codingcat.dev/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences
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.
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, since no installing of local software
- 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.”
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
Okay, let’s get nerdy! Here’s how the MCP tools, OAuth, and output templates work in the actual code.
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:
server.registerTool(
'new-game',
{ title: "Start New Game",
description: "Creates a new Chatagotchi pet.",
_meta: {
'openai/outputTemplate': 'ui://widget/pet.html',
'openai/toolInvocation/invoking': 'Waking up your new pet',
'openai/toolInvocation/invoked': 'Say hello to your new pet!',
'openai/widgetAccessible': true,
},
inputSchema: {
type: "object",
properties: {
petName: {
type: "string",
description: "Name your pet"
}
},
required: ["petName"]
},
async ({ name }, { authInfo }) => ...
};
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:
<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.
- 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 tool call details (passed into the iframe via the
window.openai global) as structured HTML to the user
- Keeps everything isolated, so you can use whatever UI stack you want
function App() {
const input = useOpenAiGlobal('toolInput');
const output = useOpenAiGlobal('toolInput');
return (
<div>
<div>Input:</div>
<pre>{JSON.stringify(input, null, 2)}</pre>
<div>Output:</div>
<pre>{JSON.stringify(output, null, 2)}</pre>
</div>
);
}
createRoot(document.getElementById('pet-root')!).render(<App />);
“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 experience_We’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! 🚀
