DEV Community: Alex Patterson

AJ is Loving Sticker Mule

Alex Patterson — Thu, 12 Mar 2026 15:05:26 +0000

Original: https://codingcat.dev/post/aj-is-loving-sticker-mule

https://codingcat.dev/post/aj-is-loving-sticker-mule

I have tried several sticker places and the images always come back terrible and the customer service stinks. Then I found Sticker Mule and everything has been like a dream! Check out all of their custom stickers!

*Get $10 in Credit from AJ today!*Loading image...

All the stickers a cat could possible need

AJ may have gotten his paws on the keyboard while I was ordering our first set of stickers, but honestly they are such a great deal I still placed the order.

Studio Wall Logo

I was so impressed by how the stickers turned out that I had to get a logo for the new studio!

JAMStackGR

Alex Patterson — Thu, 12 Mar 2026 15:03:46 +0000

Original: https://codingcat.dev/post/jamstackgr-1-sanity-io-as-a-backend

https://codingcat.dev/post/jamstackgr-1-sanity-io-as-a-backend

JAMStack GR #1

https://docs.google.com/presentation/d/1GsitEUyrC0xV4xlpFuRB9QKI5B4hdB5tZ5ldZEbuciU/edit?usp=sharing

Have you ever used Wordpress or Contentful? There is a new Headless CMS that might replace them.

Distribute a single source of truth to any (all) channel, device or product.

Sweet Query APIs Prepare data in queries using joins and projections. CDN cache multiple queries in a single request. GraphQL in beta.

Powerful patching Powerful APIs for patching, exporting, and listening. No locking with real-time syncing.

Secure & Compliant Fully GDPR Compliant. EU Hosted. Data encrypted at rest and in transit. APIs TLS / SSL only.

Apps, not ops Sanity is a full-featured content API and editing solution that lets you concentrate on your core business.

Enterprise comforts Third party login, free-form security rules, transactional writes and millions of documents.

Scale ready Stop worrying about traffic spikes with asset and API CDNs on every continent – excepting Antarctica.

Apps, not ops! Sanity is a full-featured content API and editing solution that lets you concentrate on your core business.

Scale ready. Stop worrying about traffic spikes with asset and API CDNs on every continent – excepting Antarctica.

Flexible and fast Structured content flows easily across APIs and services, enabling rapid innovation.

Distribute freely Deep queries with joins on unstructured data. Select and reproject properties. Combine queries into a single cached result on a global CDN.

Adapt continuously Customize editing environments to fit workflows and quickly iterate on data models.

Ship fast Sanity is a modern, API-first digital content management system that lets developers work fast using technologies they love

Customize Sanity is a headless CMS construction kit that you can adapt to create optimal editing experiences.

Liberate legacy systems Import content in real-time from multiple sources and instantly query across them.

Create custom editing workflows and experiences Icon for Customize in React.js Customize in React.js Open Source JavaScript editor. Full source code, permissive license.

Instant UIs for complex data Model your content exactly the way you want with an extensive toolkit.

Real-time Collaboration Edit structured, highly connected documents collaboratively.

https://medium.com/@kimbjrkman/how-to-use-inline-images-in-rich-text-with-sanity-io-c42594baa509https://jamstackthemes.dev

Updating AJonP's Brand

Alex Patterson — Wed, 04 Mar 2026 21:26:50 +0000

Original: https://codingcat.dev/post/updating-ajonps-brand

https://codingcat.dev/post/updating-ajonps-brand

Another evolution in the AJonP brand has come in the form of standardizing on acceptance. Making the most of neutral (non-stereotyped) colors. Taking a nod from Dev.to and updating AJ's tag to include a rainbow, as every mascot should have gender neutrality.

First the Technology

If you have not checked out Figma yet please do so right meow! It is so powerful when you can take a component and reuse it throughout your site. Checkout how I can change the eyes in all of these different Logos, just by changing the main component.https://www.youtube.com/embed/IFLQySh-Zb4?autoplay=0&rel=0&showinfo=0&modestbranding=1

AJ's New Tag

AJ will now be representing more people equally, and that is really important particularly to web development! We want a community that encourages everyone to share and learn together!

Sanity.io to Builder.io Data Transfer

Alex Patterson — Wed, 04 Mar 2026 21:25:41 +0000

Original: https://codingcat.dev/post/sanity-io-to-builder-io-data-transfer

I am hoping to make a Sanity.io plugin for builder. In doing so I thought I would write a little conversion tool before hand to figure out all the ins and outs of Builder.io and Sanity.io, so I thought I would share some of my findings. I will keep this tutorial updated as the plugin progresses.

The repo example has three things that you might find useful.

Deleting All Data
Creating all new types
Adding all new Data

Repo for conversion example https://github.com/CodingCatDev/sanity-to-builder.git

Deleting All Data

https://github.com/CodingCatDev/sanity-to-builder/blob/84d8b5d436b2d674f916670317cb48de916c8a68/src/index.ts#L175

In order to delete all the data you need to first find all the models you want to delete

Get all Models from Builder (even unpublished)

In sanity you deal with things like draft. in documents. In Builder these items are just known to be unpublished version. So you need to have includeUnpublished=true in your API call. I looked for a while in the sdk and have not found this option so far.

You can handle this by using the fetch command instead of the sdk.

https://github.com/CodingCatDev/sanity-to-builder/blob/84d8b5d436b2d674f916670317cb48de916c8a68/src/config.ts#L134

Creating all new types

First you need to find all the types in your sanity.io database. I find it best to use Groq. So we can find all the types in Sanity and then create those in Builder as new Models.

Adding all new Data

Long Term goal

The End goal is to build a plugin for syncing your data...

Builder content link https://github.com/BuilderIO/builder/tree/main/plugins/contentful

Supabase, Next.js and Builder.io

Alex Patterson — Wed, 04 Mar 2026 21:17:30 +0000

Original: https://codingcat.dev/podcast/supabase-next-js-and-builder-io

The Purrfect Beginning

Alex Patterson — Wed, 04 Mar 2026 21:15:57 +0000

Original: https://codingcat.dev/podcast/0-0-the-purrfect-beginning

We are on a mission to provide you with the latest tools and trends, that take you from a house cat to a fierce LION.

Even when your code isn’t feline that good, we ensure you’ll get there with the right cat-i-tude.

Alright.. Let’s get up and GIT moving..

Right Meow!!!

Learning how to be a developer is hard, Purrfect.dev will show you how to grow as a developer bit by bit.

What We Cover

JAMStack (Javascript, API, MarkUp)
HTML
CSS
Gaming (Unity)
Mobile
AWS, GCP, Azure
Serverless
Agile
Scrum
Project and Program Management
Showing developers the successful path
Quickest way to get PAID

Links

Send in a voice message: https://podcasters.spotify.com/pod/show/purrfect-dev/message

GenAI for Engineers, What's Real, What's Not and What's Coming

Alex Patterson — Wed, 19 Nov 2025 13:16:50 +0000

Original: https://codingcat.dev/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming

By the end of this post, you’ll understand:

The new engineering landscape GenAI has created
Practical best practices for leveraging GenAI in your work
Mistakes and misconceptions you absolutely want to avoid
Inspiring tools and frameworks that are already changing the game
What’s on the horizon, both thrilling and a little overwhelming

Let’s get started!

Introduction: Why GenAI Has Every Engineer Talking

You know the feeling—everyone’s suddenly talking about automation, agents, and how AI is about to revolutionize everything. You read about companies “eliminating jobs” thanks to GenAI, and you’re wondering… Is this really happening? Is this a threat, or is it a huge opportunity?

If you’ve ever sat with those questions, you’re in good company! On our latest episode, I spoke with Balki, a seasoned CTO, about how GenAI is reshaping engineering roles, what’s actually working in startups right now, and how you can avoid the typical pitfalls to come out ahead.

Why this blog post matters:

“First time founders focus on product. Successful founders focus on distribution.” — Balki

That means it’s not just about building with AI—it’s about making it useful, scalable, and profitable.

Meet Balki: Everyday Startup Battles, AI Style

Before we jump into the nitty-gritty, let’s meet our expert guest.

Balki's Career: From BigCorp to Fractional CTO

Balki spent his first decade as an engineer at Fiserv—deep in the online banking trenches, working primarily on Microsoft’s tech stack. Eventually, he pivoted to leading his own startup, taking the leap from “comfortable” to “complete accountability.”

Takeaway: The happiness came less from money and more from ownership and learning, even when the risks were high.

“There's nobody else to complain about. I’m accountable for everything.”

How the Leap Happened (and What You Can Learn)

Far from a sudden “drop everything and start a company,” Balki’s transition was informed by education (an EMBA program) and practical testing. The final pivot occurred in an entrepreneurship course—where building a product from scratch “felt like coming home.”

Lesson: Big jumps are rarely one moment. Often, it’s a series of small pivots, each featuring late-night emails, experimental coding, and a few “blind confidence” moments.

CTO Roles: Full-Time, Fractional, and What That Means for Startups

Ever wondered what the difference is between a full-time CTO and a fractional CTO? Balki’s journey is a fascinating example:

Full-Time CTO vs. Fractional CTO

Full-Time CTO: Committed to one company.
Fractional CTO: Provides strategic, high-impact guidance to several startups at once—usually part-time.

Fractional CTOs thrive by:

Bringing deep expertise from multiple sectors
Targeting high-leverage activities (think: 20 hours a month laser-focused on the biggest problems)
Accelerating product clarity and distribution

Big insight: Every minute counts. When you’re dropping in for a few hours a week, priorities become crystal clear!

GenAI for Engineers: From “Just Another Tool” To Business Superpower

GenAI isn’t new—but the way it’s used by engineering teams is evolving fast. Balki says:

“The market is flooded with proof-of-concept tools targeting non-engineers. In my world, there’s a big chasm between building a prototype, getting traction, and scaling.”

You can hack together a quick POC with Lovelace or Bolt in minutes. But scaling that prototype—making it reliable, distributable, and profitable—is a different sport.

Why Scaling Is So Hard (and Where GenAI Can Help)

Most startups stall, even after they get initial traction. Balki specializes in bridging this “chasm”—helping teams go from “scrappy” to “scalable.”

“Engineering Excellence”: Balki’s Five Pillars + GenAI

Let’s get super practical. Any successful engineering team needs engineering excellence. Before GenAI, Balki set out four pillars. With GenAI, a fifth was added. Here’s the breakdown:

The Four Classic Pillars

Automated Testing
- Validates code. Makes sure your software can withstand real-world scenarios.
CI/CD Pipelines
- Enables drama-free code deployments.
- Example: GitHub Actions
Observability
- Let’s engineers be the first to know when something breaks (not your customers).
- Example: Datadog
Modular Architecture
- Flexible, scalable code organization—critical for rapid evolution.

The Fifth Pillar: GenAI Fluency

Today, GenAI fluency is just as critical. In fact, Balki breaks this down further into three sub-pillars (detailed below).

Why GenAI Matters

Thanks to GenAI, startups can rapidly accelerate improvement in these pillars—without blowing the budget or risking bankruptcy. You can stay agile and address technical debt much faster.

GenAI and Job Roles: Are We Really Automating Ourselves Out?

The media loves to declare “X jobs eliminated by GenAI!”—but is this really the story?

What’s Actually Changing in Engineering

Specialization is risky.

Engineers who only focus on one niche (e.g., frontend specialist, TypeScript expert) are seeing those tasks rapidly commoditized.

“For 20 years it was similar—good engineers could rest on their laurels. Now that’s been commoditized. Founder mindset is what matters.”

Full-stack skills are becoming standard. The ability to build, deploy, test, and validate end-to-end is the new norm.

So what tasks are ripe for GenAI automation today?

Balki notes: pure specialization may soon be obsolete, and “mundane tasks” (like repetitive API wrappers, boilerplate code, out-of-date documentation) are prime targets for automation.

Real-World Example: API Wrappers & SDKs

Many engineers are scrambling to build “MCP servers”—wrappers around APIs and OpenAI SDKs. With the release of the OpenAI App SDK, a new “walled garden” effect is emerging. Is this healthy? Are we risking another App Store scenario?

It’s still hard to say if this is a passing trend or a lasting shift. For B2B SaaS, the immediate risk may be low, but keeping up AI fluency is more important than ever.

Engineering AI Fluency: Climbing the Three GenAI Sub-Pillars

What does “AI fluency” really mean for engineering teams? Balki’s framework divides it into three practical levels:

Level 1: Leveraging AI Tools for Engineer Productivity

This is all about using AI tools—like Cursor, Claud Code, Code Rabbit, and GitHub Copilot—to supercharge your coding workflow.

Tip:

Cursor and Cloud Code excel for different personalities—Cursor for leaders, Cloud Code for craftspeople. Setting team-wide Cursor rules keeps best practices consistent.

Level 2: Using AI Tools to Boost Engineering Excellence

Apply AI directly to accelerate the four classic pillars.

Testing & Coverage (e.g., auto-generating tests)
Deployment Pipelines (e.g., AI-powered CI/CD suggestions)
Modularity & Code Review
- Code Rabbit: Cuts review time on pull requests, boosting speed.
- Axel AI: Embeds in legacy code to help modernize architecture.
- Antithesis: Runs containers to catch edge-case bugs in staging.

“Anything that can accelerate engineering excellence lights up my eyes.”

Level 3: Incorporating AI Directly Into Product Features

This is the “cool stuff”—voice agents, automated support, and smarter applications.

But beware:

Before over-engineering with tools like LangChain and fancy agents, start simple. OpenAI API calls often get the job done. As you get closer to product market fit, start worrying about human evals, prompt tuning, and security concerns.

Pro move:

Start with human-in-the-loop. Fully automated AI features rarely work perfectly from Day 1.

Building Distributed Teams: How GenAI Changes Remote Collaboration

If your team is spread around the world—Eastern Europe, Latin America, Hong Kong—you know communication and documentation aren’t easy.

GenAI is a game-changer for:

Communication: Coaching team members to use GenAI for clear, culturally-appropriate communication.
Documentation: Auto-generating code and onboarding docs that are actually useful.

“With proper documentation and plan, new engineers can be effective in two weeks—if not one.”

Challenge your team:

No more 90-day onboarding. With GenAI-assisted docs, you can cut that down to 1-2 weeks.

Real-World Use Case: devIQ—Bridging Technical and Non-Technical Teams

Balki’s tool, devIQ (try it for free!), was born from a common startup pain: the disconnect between technical and non-technical staff.

How devIQ Helps

Assesses engineering teams: Across Balki’s five pillars
Translates complexity: Makes technical progress educational for CEOs and business leads
Gives grades and actionable steps:
- “Your grade is C in automated testing, B in GenAI fluency.”
Offers prescriptive paths: Specific ideas to improve grades

Use-case:

When Balki drops into an engagement, devIQ helps quickly pinpoint engineering gaps and opens authentic conversation between product and engineering.

“If you methodically invest in the right pillars, your org will be 95th percentile or better—no matter your product.”

Practical Tips for Staying Current in GenAI Engineering

Let’s face it—AI moves insanely fast. It’s easy to feel lost, overwhelmed, or permanently behind.

Balki’s Learning Strategy

Focus 80% on problems inside your organization. Go out and find solutions that fit your actual engineering needs (e.g., legacy code modernization, engineering excellence pillars).
Spend 20% dabbling in shiny new things. Keeps your creative juices flowing and occasionally unlocks breakthrough opportunities.

Discipline matters.

Without intentional focus, you’ll spend all your time chasing distractions.

“Will AI Replace Us?”: The Real Question to Ask Before Adding GenAI

This is the million-dollar question—and it’s not theoretical. Before shoving AI into your product, be honest:

“Is this something the customers want, and does it make their lives better by using GenAI inside the tool?”

Don’t waste time making your prompts perfect or optimizing the next toolchain before confirming user demand.

Pro advice:

Insert a human eval into early prototypes.
Gradually replace manual involvement as the product matures.
Automation isn’t instant—chip away bit by bit.

The Future: Next-Level Tools and “The Stone Age to Modern Age” Shift

AI moves at a ridiculous pace. Here’s what’s coming—and why you should care.

For New Engineers

Starting today is easier than ever—you’re entering the AI-native world. But those legacy problems will catch up eventually.

Building Team Resilience: Don’t Go It Alone

Here’s a simple tip: get out of your shell. Connect with peer groups, ask for feedback, and share what you’re planning.

“When I see a new tool, I don’t jump in right away. I bring it to my cohorts for feedback, and I shave off weeks and hundreds of hours of research.”

You get richer, higher quality feedback by collaborating—AI or not.

Summary: Key Takeaways for GenAI Engineers

Let’s wrap it all up.

GenAI has transformed engineering—rapid POCs, scalable products, and changed job roles.
“Engineering excellence” depends on five pillars, with GenAI fluency now essential.
Don’t specialize too narrowly—full-stack, founder mindset is becoming the norm.
Use AI for real productivity: code review, documentation, collaboration, and direct product features.
Start simple—and always validate with customer demands before ramping up automation.
Leverage frameworks like devIQ to bridge business/engineering gaps and accelerate progress.
Stay disciplined in your learning, and seek feedback from peers to keep your engineering sharp.

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

Alex Patterson — Tue, 04 Nov 2025 20:08:17 +0000

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.

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, 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

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:

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:

<!-- 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 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! 🚀

Firebase SQL with Data Connect

Alex Patterson — Tue, 28 Oct 2025 17:56:51 +0000

Original: https://codingcat.dev/podcast/firebase-sql-with-data-connect

Introduction: Why Do We Need Firebase Data Connect?

Let’s be real: Firebase has been a go-to for fast app launches for years, but what happens when your app's logic gets complex, your data relationships grow hairy, or you want join-heavy reports, analytics, and powerful search? Google heard the pain points:

“I need relational queries and joins.”
“Can I finally use full text search, not just basic keyword matching?”
“Can my AI agents interact with my database, securely and conveniently?”
“Can I swap between secure APIs and developer-friendly tools on the fly?”

You’re not alone. That’s exactly why Firebase Data Connect was born.

By the end of this article, you’ll understand:

How Data Connect blends SQL (PostgreSQL) power with Firebase’s cloud-native ease.
Where it beats Firestore—and when you should stick with Firestore instead.
How to build secure APIs, type-safe SDKs, and connect your data to AI agents like Gemini.
How to use full text search and vector search (semantic matching) like a pro.
Practical steps to get started—even locally with emulators!

Meet Tyler Crowe & The Birth of Data Connect

Tyler Crowe isn’t just a Firebase PM—he’s been the brains behind Firebase Auth, AppCheck, and now Data Connect. In our season 5 podcast, Tyler explained:

"We built Data Connect under a single premise. You write the query, we do the rest."

The real motivation? Thousands of developers pining for the best of both worlds: Firebase’s developer joy… plus the relational might of SQL.

Want to go deeper into Tyler's journey? Listen to the full podcast episode.

What Is Firebase Data Connect?

In a nutshell: Data Connect is a fully managed, cloud-native SQL database service—built on Cloud SQL (hello, PostgreSQL!)—and deeply integrated into Firebase.

If you’ve ever wrangled cloud infrastructure, worried about scaling, or cursed at manual security configs, Data Connect is your new best friend.

Why is Data Connect Important?

Relational Power: Complex queries, joins, and analytics—finally possible!
No Infrastructure Headaches: Just click, deploy, and go. You never touch a server.
Secure by Design: Auth, AppCheck, and access directives built in.
AI-Ready: Schema and queries can be generated by AI agents like Gemini.
Future Proof: Roadmap includes support for other data sources beyond Cloud SQL.

Highlights

Built on Cloud SQL PostgreSQL
Type-Safe SDKs auto-generated for Android, iOS, and web
Integrated with Firebase Auth and AppCheck
Out-of-the-box support for Full Text Search and Vector Search
Agentic workflows for AI agents and smart queries

Want a more hands-on intro? Check out our beginner’s guide to Firebase.

Data Connect vs Firestore: The Relational Revolution

Let’s break down a classic developer question:

“Should I stick with Firestore, or do I need Data Connect?”

Why This Matters

Firestore (or the classic Realtime Database) was built for real-time sync, offline-first experiences, and mobile scale. But… when your data needs get complex—think relational joins, analytics, extensions—Firestore just isn’t enough.

Data Connect Brings You:

The ease of Firebase SDKs
Pure SQL power (JOINs, aggregation, constraints)
Deep API and security control
Analytics and full text search at scale

Firestore is still perfect for:

Real-time sync
Offline-first mobile apps
Simple, single-table queries

Not sure which is best for you? Check out our full breakdown: Data Connect vs Firestore.

Type-Safe SDKs and Secure API Endpoints

Here’s the developer dream: define a query, get a secure API endpoint—and a fully typed SDK that plugs right into your frontend.

Why Is Type Safety So Powerful?

Type-safe SDKs cut debugging hassles, let your IDE catch mistakes before runtime, and speed up development with auto-completion.

How Data Connect Does It

When you save a query/mutation, Data Connect generates an SDK for your chosen platform. That SDK ensures type safety, authentication, and converts your calls into secure, backend-executed SQL.

Example: Querying Movie Reviews in TypeScript

import { queryReviewsForMovie } from './sdk/movieReviews';
const reviews = await queryReviewsForMovie({ movieID: 'MOVIE123' });

This fetches reviews securely, using the backend’s query definition and type validation.

AI Agents & Schema Generation with Gemini

Here’s one for the future: Let AI design your database. With Gemini, Data Connect enables schema and query generation straight from natural language.

Why Does This Matter?

Instead of fiddling with table structures, just describe your app in plain English and watch Gemini build a solid schema—saving you hours.

Example Workflow

Describe Your App
- "I need a movie review app with reviews, movies, actors, and users."
Gemini Generates SQL

# Movies
# TODO: Fill out Movie table
type Movie
  @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  releaseYear: Int
  genre: String
  rating: Float
  description: String
  tags: [String]
}

# Movie Metadata
# Movie - MovieMetadata is a one-to-one relationship
# TODO: Fill out MovieMetadata table
type MovieMetadata
  @table {
  # @ref creates a field in the current table (MovieMetadata)
  # It is a reference that holds the primary key of the referenced type
  # In this case, @ref(fields: "movieId", references: "id") is implied
  movie: Movie! @ref
  # movieId: UUID <- this is created by the above @ref
  director: String
}

# Actors
# Suppose an actor can participate in multiple movies and movies can have multiple actors
# Movie - Actors (or vice versa) is a many to many relationship
# TODO: Fill out Actor table
type Actor @table {
  id: UUID!
  imageUrl: String!
  name: String! @col(name: "name", dataType: "varchar(30)")
}

# Join table for many-to-many relationship for movies and actors
# The 'key' param signifies the primary key(s) of this table
# In this case, the keys are [movieId, actorId], the generated fields of the reference types [movie, actor]
# TODO: Fill out MovieActor table
type MovieActor @table(key: ["movie", "actor"]) {
  # @ref creates a field in the current table (MovieActor) that holds the primary key of the referenced type
  # In this case, @ref(fields: "id") is implied
  movie: Movie!
  # movieId: UUID! <- this is created by the implied @ref, see: implicit.gql

  actor: Actor!
  # actorId: UUID! <- this is created by the implied  @ref, see: implicit.gql

  role: String! # "main" or "supporting"
}

# Users
# Suppose a user can leave reviews for movies
# user-reviews is a one to many relationship, movie-reviews is a one to many relationship, movie:user is a many to many relationship
# TODO: Fill out User table
type User
  @table {
  id: String! @col(name: "auth_uid")
  username: String! @col(dataType: "varchar(50)")
  # The following are generated from the @ref in the Review table
  # reviews_on_user
  # movies_via_Review
}

# Join table for many-to-many relationship for users and favorite movies
# TODO: Fill out FavoriteMovie table
type FavoriteMovie
  @table(name: "FavoriteMovies", singular: "favorite_movie", plural: "favorite_movies", key: ["user", "movie"]) {
  # @ref is implicit
  user: User!
  movie: Movie!
}

# Reviews
# TODO: Fill out Review table
type Review @table(name: "Reviews", key: ["movie", "user"]) {
  id: UUID! @default(expr: "uuidV4()")
  user: User!
  movie: Movie!
  rating: Int
  reviewText: String
  reviewDate: Date! @default(expr: "request.time")
}

Tweak & Refine On the Fly
- Add constraints, relationships, or new features (“Let’s add a chat!”).

This isn’t just a parlor trick—schema quality is rock solid. Want to try it? Play with Gemini in this hands-on codelab.

Building Your First Data Connect App

Let’s roll up our sleeves. Setting up Data Connect is designed to be painless.

Why Building Should Be Instant

No one wants to spend hours on infrastructure just to test an idea. Data Connect delivers with fast onboarding, ephemeral databases for prototyping, and instant querying.

Step-by-Step Setup

Start a New Service in Studio Open Firebase Studio.
Design Schema with Gemini or Wizard Let Gemini handle heavy lifting, or design schema manually.
Deploy to Cloud SQL Choose ephemeral (for prototyping) or persistent DB.
Seed & Query Instantly Input demo data, run live queries, modify as needed.

Get inspired by our movie review app walkthrough.

Browsing Data: Table vs JSON Views

Data Connect gives you classic SQL table views and old-school JSON blobs.

Table View: Rows and columns (easy for relational reasoning)
JSON View: Structured for mutation/debugging

Tip: Vector embeddings (for AI search) show as massive numeric fields—expand for details.

Lightning-Fast Full Text Search

Trust me, this feature is a game-changer. Powered by PostgreSQL, you can search text in ways that Firestore could only dream about.

Why Full Text Search?

Users expect robust search (not just basic string matching)
Multi-field queries (title + description, for example)
Natural language and advanced operators (AND, OR, NOT)

How to Enable Full Text Search

Annotate fields in your schema:

table movies {title TEXT @searchable,description TEXT @searchable,...}

Then craft your query:

query searchMovies($query: String!) {movies_search(query: $query) {...MovieOverview}}

Modes

Plain: General terms
Phrase: Exact phrase
Query: Operators for advanced search (love -potion gets results with “love” but not “potion”)

Check out how full text search works in detail.

Vector Search: Semantic Search for Real Apps

Let’s take your search to the next level—semantic matching with vector embeddings powered by Vertex AI.

Why Go Semantic?

Full text search is great, but what if users type synonyms or phrases? Vector search returns results that mean the same thing, not just match words.

How It Works

Data (titles, descriptions) is fed to an embedding model (text-embedding-gecko-005)
Embeddings live in a vector field (often 768 dimensions!)
At query time, your search input is vectorized and compared for cosine similarity

Example: Vector Search Query

query searchMovies($query: String!) {movies_vectorSearch(embed: $query, model: "text-embedding-gecko-005", topK: 10) {titledescriptionscore}}

This finds “Love Potion” when you search “Love Tonic”—because meaning matters!

Defining Queries & Mutations: Making Your API

Here’s the “internals”: you define your queries and mutations (“operations”). Every operation is tracked with security, parameters, and API surface exposure.

Example: Add a Review Mutation

mutation addReview($movieId: String!, $userId: String!, $review: String!) {addReview(movieId: $movieId, userId: $userId, review: $review) {idreview}}

This gives frontend devs type safety and full API clarity.

Generated SDKs: Streamlining Frontend Integration

Once you’ve built your backend, integrating it is instant just hit “Download SDK” and roll into any modern frontend. Or have it build out your own connector.

Example:

// Example using a React component
import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { getFirebaseConfig } from './firebase-config'; // Your Firebase config
import { SearchMovies } from '@your-project-name/your-connector-name'; // Generated SDK import

function MovieSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    initializeApp(getFirebaseConfig());
  }, []);

  const handleSearch = async () => {
    try {
      const result = await SearchMovies({ query: searchTerm });
      setMovies(result.movies_search);
    } catch (error) {
      console.error("Error searching movies:", error);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search movies..."
      />
      <button onClick={handleSearch}>Search</button>

      <div>
        {movies.map((movie) => (
          <div key={movie.id}>
            <h3>{movie.title} ({movie.releaseYear})</h3>
            <p>{movie.genre}</p>
            <p>{movie.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default MovieSearch;

Fully typed SDKs for React, Next.js, Vue, Angular, and more!
AI agents (like Gemini) plug in seamlessly.

Security: Auth, Row-Level Access, and AppCheck

Security isn’t just a checkbox—it’s part of every query and mutation in Data Connect.

Why Query-Level Security?

Instead of hand-writing complex security rules at the collection/table level, Data Connect lets you lock down each operation directly.

Key Directives:

@user: Requires authentication
@public: Open access
Expression-based (e.g. admin role, claims)

Example: Secure Mutation Directive

mutation addReview($uid: String!) @auth(uid != nil && auth.provider != 'anonymous') {...}

Row-level security: operations filter access using user IDs, roles, and more
AppCheck compatibility—even for APIs like Stripe!

Local Development and Emulators

Yes—you can develop and test everything locally!

Emulator spins up with PG Lite
Seed and mutate data with demo apps in VS Code
Test all queries, mutations, operations, and security

Start Data Connect emulator:

firebase emulators:start --only data-connect

GraphQL Everywhere: Why It Matters

It’s official: Data Connect’s API is GraphQL-powered. Why should you care?

Why GraphQL?

Ask for just what you need: No overfetching or underfetching
Joins, fragments, reusable types: Compose powerful queries quickly
Strong types: IDE/codegen support, easy refactoring
Security at query layer: Fewer surprises

Example: Homepage Query With Fragments

query homepage {newReleases { ...MovieOverview }topMovies { ...MovieOverview }recentReviews { ...ReviewFragment }movie { ...MovieOverview }}

Learning curve? Sure! But flexibility and power make it worthwhile.

Data Connect vs Firestore: How to Choose

Here’s Tyler Crowe’s advice:

“If you need relational joins, heavy analytics, or want to use Postgres extensions—pick Data Connect.

If you need real-time sync, offline support, or fast mobile-first stuff, Firestore is your bread and butter.”

Quick Guide

Firestore:

Real-time sync, offline support
Massive scale
Simple queries
Mobile-first

Data Connect:

Complex queries, analytics
Relational schemas
Joins/aggregations
Full text & vector search
Web or cross-platform workloads

Still unsure? Ask Gemini right in Studio:

"Should I use Data Connect or Firestore for my app?"

What’s Next: Features Coming Soon

The Data Connect team is just getting started. Look out for:

RAW SQL queries (not just views!)
More advanced backend caching/performance tuning
Custom MCP server support for agentic workflows
Multi-data source (not limited to Cloud SQL)
Deeper AI integrations

Stay updated via the CodingCat.dev blog.

Conclusion & Further Learning

There’s never been a better time to be a Firebase developer. Data Connect bridges the world of enterprise-grade SQL and developer-friendly, cloud-native workflows. Building secure apps, powerful queries, and integrating AI is finally within reach—whether you’re launching a startup or scaling to millions.

Key Takeaways:

Data Connect brings SQL, security, and AI together in Firebase.
You can use type-safe SDKs and GraphQL-powered APIs without fighting your infrastructure.
Full text and vector search make your data "smarter" than ever.
Security and access controls are baked in, not bolted on.

🚀 Subscribe to youtube.com/codingcatdev for weekly web dev, Firebase, and AI content!

Now, I’d love to hear from you:

What would you build with Firebase Data Connect? What’s your dream feature or integration?

Drop your ideas in the comments, tweet @CodingCatDev

Happy codingcatting for perfect peeps ✨

Subscriptions

Are you looking to boost your products reach? Have Alex create a video for you https://codingcat.dev/sponsorships

References & More Links

Note:

All code samples and workflows described here are for educational/demo purposes. Please consult the Firebase documentation for production best practices and latest updates.

This post is part of our deep dive series on Firebase. Major thanks to Tyler Crowe and the Google engineering team for moving web development into the AI-powered future!

Identity in AI Agents

Alex Patterson — Fri, 24 Oct 2025 16:09:17 +0000

Original: https://codingcat.dev/podcast/identity-access-management-for-agents-with-tobin-south

Welcome back to CodingCat.dev! If you’ve ever found yourself neck-deep in the rabbit hole of identity, access management, and server security—especially in the brave new world of AI agents—today’s post is for you. I sat down with Dr. Tobin South, a security and AI expert, for a lively and insightful conversation that covers everything from fine-grained authentication and natural language access control (NLAC) to the nuances of Model Context Protocol (MCP) servers.

Whether you’re building your own MCP server or just curious about how identity management is evolving in AI-driven environments, this post will break it all down in simple, practical terms. And of course, we’ll share tons of real-world lessons, tips, and code to keep you safe, sane, and ahead of the curve.

“If you’re building an MCP server, you definitely need to check this out.” — Dr. Tobin South

Introduction: The Identity Management Problem in AI Agents

Have you ever handed over your admin credentials to an AI agent and prayed it wouldn’t accidentally nuke your production server? No? Just me? Well, as AI transforms the way we interact with infrastructure, applications, and even our inboxes, old-school identity and access management (IAM) tools are getting stretched to the limit.

In today's post, we’ll dig into:

What fine-grained authentication looks like when AI agents drive the bus.
How emerging protocols like MCP are reshaping best practices.
The new problems (and hilariously dangerous pitfalls) you’ll encounter when serving up APIs for chatbots and generative models.
Practical, real-world steps for building a secure MCP server today.

By the end of this post, you’ll have actionable advice on securing your MCP servers, managing agentic identities, and setting sane, practical access control—whether you’re at a startup or shipping software at scale.

Meet Dr. Tobin South: AI, Security, and the Academic Hustle

Dr. Tobin South is no stranger to the overlapping worlds of AI research, security, and enterprise software. After a wild ride through MIT’s AI scene (and a ChatGPT moment that changed everything), Tobin plunged into the depths of security—eventually landing at WorkOS, where he leads AI agent security, building MCP and IAM tooling for the world’s biggest AI labs.

“I spent a bunch of years thinking deeply about what AI security means... and there are really unique security challenges for agents.”

Tobin also runs a research lab at Stanford in partnership with Consumer Reports, focusing on consumer protection for the AI age. Think: safe transactional marketplaces, contextualized AI, and interoperable memory management.

Academic meets industry: Practical solutions, experimental research, and policy influence.
Stanford Consumer AI Lab: Where new ideas get dogfooded—and sometimes break stuff in spectacular fashion.

AI Security—The Agentic Future and Why It’s So Complex

Back in the day, security meant writing boring permission lists and hoping users wouldn’t share passwords. Now, with autonomous agents, you need identity infrastructure where an AI can “roam the web,” interact, and actually DO things for you—not just scrape content.

Key problems to solve:

Delegated Authority: How do you ensure an AI agent only acts with your explicit permission?
Safety Guarantees: What does “safe” mean when an agent can kill processes and buy tickets on your behalf?
Fine-Grained Authentication: We’re moving beyond “all or nothing”—think scopes, context, and real-time oversight.

Dr. South’s Stanford research group throws crazy ideas at the wall (“what if agents could actually perform actions for you online?”) and asks the hard questions about identity, permission, and safe delegation.

Stanford Lab & Consumer Protection in the AI Age

It’s not just about writing safe code. What does consumer safety look like when you might soon be buying your next pair of pants through ChatGPT or Gemini? Stanford’s research lab runs experiments, advises students, and crafts real policy (like sections of the UN International AI Safety Report) on privacy and security.

How does an academic research lab work?

Start with wild ideas—take them seriously.
Ask students the off-the-wall questions (“what if agents roam the web?”).
Conduct experiments to figure out what problems we need to solve.
Feed findings into industry, policy, and standards.

Why it matters: As AI marketplaces, automation, and contextual memory get more complex, consumer safety requires new thinking—not just repackaging old IAM best practices.

How Standards Get Built: The OpenID Foundation and Fast-Moving MCP

Ever wondered how standards like OAuth, OpenID Connect, or MCP actually get written? According to Tobin, it’s equal parts collaboration, industry panic, and “LEGOs, not blueprints.” When the OpenID Foundation got curious about AI agents, Tobin helped launch a community group to pull together feedback from vendors, AI experts, and security pros.

Dynamic world: MCP didn’t exist before October of last year.
Fastest white paper ever: Industry is moving in real time, sometimes with “strongly held opinions in multiple directions.”
MCP (Model Context Protocol): Enables standardized tool calling and state management for AI agents.

OAuth 2.1, Dynamic Client Registration, and What’s Next for MCP

Most security pros get nervous when words like "dynamic" and "client registration" pop up together. In the world of AI agents, it means your authorization server might need to let any agent connect—often pseudonymously. That sounds fun until you realize an agent could spawn a million applications in a single afternoon.

Recent changes:

Client ID metadata—allows trusted agents (like Claude, ChatGPT) to declare themselves via DNS roots, so you don’t have to trust a random string.
Dynamic Client Registration (DCR)—good for flexibility, but a big headache for security (“the wild west”).

Here's how it looks:

You get back a client_id and client_secret—but what’s to stop an agent from creating millions of these?

For background on DCR, read OAuth’s Dynamic Client Registration documentation.

The Security Challenges of Dynamic Tools and Agents

Imagine running VS Code and seeing a fresh OAuth client get created EVERY time you close and reopen your app. Or agents spawning millions of applications—each with their own keys and secrets. This is already happening in some test agents.

Some agents create new applications each time
Others reuse access tokens and clients
Lack of standardization makes security unpredictable

Why standardization matters: As Tobin says,

“The wild west of technology is... very fun right up until the scale and the importance gets a bit too large.”

With AI, everything is happening at scale and speed we’ve never seen before. Even major players can’t keep up—hence the push for robust standards to ensure interoperability and safety.

Natural Language Access Control—NLAC, SORA, and the Evolution Beyond RBAC

Traditional access control models like RBAC (Role-Based Access Control), ABAC (Attribute-Based), and FGA (Fine-Grained Authorization) are starting to show their age—especially when AI agents interact via natural language. Enter NLAC—Natural Language Access Control—and new problems nobody saw coming.

Example: SORA App (AI Video Generation)

SORA lets you cameo friends in videos, turning on access so anyone can use your likeness. But the twist? You define what your AI deepfake can do using NATURAL LANGUAGE—just type it into a box.

“This is a crazy vision of the future of access controls on your own identity.”

Problems with NLAC:

It’s not standardized.
Scopes may need to be described in natural language.
Enforcing control over NL is much harder than simple permission strings.

Agent-to-Agent Communication (A2A) — Natural Language, Power, and Worry

Say you want Salesforce AgentForce to talk to ServiceNow Agent—should they use a rigid API, or a more flexible natural language interface? Most agent-to-agent comms will happen over MCP, supporting arbitrary text-based requests.

Benefits:

Unprecedented flexibility
More powerful than strictly structured APIs
Easier automation and integration

Drawback:

Security is “terrifying”—hard to enforce precise control
Restricting agents with scopes and permissions over NL remains challenging

Next-gen approaches may require sending and enforcing natural language scopes throughout the web. It gives users power, but opens new risks.

Fine-grained Permissions: NLAC, SSO, SKIM, and Context Management

We’re not likely to reinvent identity standards from scratch (“No, I don’t think we’re going to scan our eyeballs for World ID anytime soon”). Instead, Tobin argues we’ll adapt existing IAM protocols:

OAuth 2.1, SSO, SKIM: Grabbing primitives from existing systems for provisioning and deprovisioning agents.
Agentic Identity: “Halfway between a service account and a user.”

Problem: The complexity means OAuth standards (and MCP) will remain confusing and hard to use, but also robust.

The Real World: Setting Up an MCP Server the Right Way

Anyone can wrap an API behind an MCP server and throw an API key behind it. But that’s just scratching the surface—if you want safety, flexibility, and proper permissions, you need to go deeper.

Typical setup (v0):

Wrap APIs behind MCP.
Add API key or OAuth for access.
Connect to Claude, ChatGPT, Gemini, etc.
Roll with it.

But what’s wrong with this picture?

Every user might supply an API key in unpredictable ways.
Oauthing gives some identity, but how much access should you grant?
Who controls which tools an agent can use, and when?

Here’s how Tobin suggests you level up your MCP server:

RBAC vs. Agent Trust

Don’t just map roles to permission sets. When an AI agent acts on behalf of an admin, it could have excessive privilege—like the Netlify CEO who accidentally took down the company’s core website!

Building Structured Tool Interfaces

Instead of exposing every API as its own tool, create general-purpose tools tailored to natural-language intents.

Designing Secure, Scalable API Access for AI Agents

Agents operate differently from humans. They can trigger API calls faster, in higher volume, and with less oversight. Standard dev-access patterns may be insufficient or dangerous.

One API key per agent? Maybe for small use cases, but feels risky.
OAuth tokens with scopes? Good, but how detailed and granular should scopes be?
Dynamic tool access: Assigning access per user or per role.

“Your server text—the tool description—can completely change based on who connected to the server.”

Impersonation, Delegated Authority, and the On-Behalf-Of Problem

A common scenario: An executive assistant acts “on behalf of” the CEO, drafting or signing docs, but with more restrictions than the CEO herself. OAuth supports on-behalf-of flows and delegated authority, but actual adoption (especially in consumer use cases) is still spotty.

Delegated Authority: Needed, but not widely supported.
Consumer vs. Enterprise: Consumer platforms (Gemini, Claude, ChatGPT) own their agent ID; enterprises need robust audit, observability, and assurance.

Bottom-up adoption: As agents grow, repeated patterns will emerge, and organizations will need to balance flexibility, visibility, and compliance.

Agent Workflows, Orchestrations, and Real-World Security

Enter the orchestrators: Zapier, N8N, Google’s Agent SDK, OpenAI’s Agent SDK. Workflows let agents run asynchronously, acting on triggers and automating tasks across systems.

Asynchronous agents: Have distinct identity and access challenges.
Service accounts: In essence, but with dynamic, context-driven permissions.
Human-in-the-loop still needed: Draft, review, and approve actions before sending.

This falls short of the holy grail—full workflow without constant approval—but strikes a balance between automation and oversight.

Fine-grained Access Control: FGA, NLAC, and Their Roles

Fine-Grained Access (FGA) lets you enforce dynamic, per-resource permissions—great for complex systems like Google Drive, less so for fast-moving, flexible AI tools. NLAC promises something even more adaptable, using natural language conditions and rules, but it’s hard to standardize.

FGA: Powerful, but complex and heavy-weight for many agents.
NLAC: Flexible, emerging, but not standardized.

Demo MCP Server Implementing FGA

Tobin built an MCP server where FGA is implemented INSIDE the server—tool descriptions and permissions are generated based on context, role, and conditions.

This approach is tricky, and NLAC might eventually overtake FGA in simplicity and flexibility.

What’s Next for MCP: Statelessness, Metadata, and Why the Future Is Fast

With the November 25th release of Model Context Protocol on the horizon, the most exciting development is statelessness in protocol design, making implementation and security easier for everyone.

“I’m very excited for a two-week rollout from a pure engineering perspective.”

Other improvements:

Transport layer fixes
Client ID metadata
Better dev experience
Responsibility in specs and standards

As AI agents go mainstream, and as protocols like MCP evolve at record speed, the standardization and incremental improvements will go a long way toward making this wild ride safe for everyone.

Curious to see all this in action, and hear more war stories from pioneers like Dr. Tobin South? Be sure to watch the full video on YouTube, subscribe to our channel, and join the conversation below.

What’s YOUR biggest challenge with access management for AI agents or MCP servers? Drop a comment, share your wins and “oops” moments, or let us know what you want to learn about next!

And don’t forget to follow us for more deep dives into the cutting edge of web dev, security, and AI!

External Must-Reads:

Stay curious, stay secure, and keep coding!

Firebase Firestore vs. Data Connect: Unlocking Your Data's Full Potential

Alex Patterson — Sun, 19 Oct 2025 23:38:12 +0000

Original: https://codingcat.dev/post/firebase-firestore-vs-data-connect-unlocking-your-data-s-full-potential

Hey everyone, Alex here from CodingCat.dev! If you're like me, you absolutely love Firebase Firestore. It's incredibly powerful for building responsive, real-time applications with its seamless client-side SDKs. But have you ever hit a wall when you needed to run complex analytics, or do a full text search? You start thinking about setting up your own data pipelines, writing complex Cloud Functions to export data, and suddenly, the simplicity you loved about Firebase feels a little... complicated.

What if there was a better way?

That's where the new Firebase Data Connect comes in, and it's a total game-changer. It bridges the gap between your real-time application data and the powerful world of GraphQL-based schemas.

What is Firebase Firestore? The Real-Time Powerhouse

First, let's do a quick recap. Firebase Firestore is a flexible, scalable NoSQL cloud database for mobile, web, and server development.

Its primary strengths are:

Real-time Updates: Data syncs across all connected clients automatically. This is the magic behind building live chat apps, collaborative documents, or real-time dashboards.
Powerful Querying: It has a rich SDK that allows for expressive queries directly from the client.
Offline Support: It caches your app data so your app works smoothly, whether the user is online or offline.

Here’s a classic example of adding a new user to a users collection in a Next.js app.

// Purpose: Add a new user document to our Firestore collection.
import { doc, setDoc } from "firebase/firestore"; 
import { db } from "./firebase-config"; // Your initialized Firestore instance

async function addUser(userId: string, name: string, email: string) {
  try {
    await setDoc(doc(db, "users", userId), {
      name: name,
      email: email,
      createdAt: new Date(),
    });
    console.log("User added successfully!");
  } catch (e) {
    console.error("Error adding document: ", e);
  }
}

This code is straightforward and perfect for handling application state. But if you wanted to find out how many users signed up last month, you'd have to fetch all the documents and process them, which isn't very efficient. This is the exact problem Data Connect is designed to solve.

Introducing Firebase Data Connect: Your Data, Supercharged with SQL

So, what exactly is Firebase Data Connect?

Firebase Data Connect (FDC) is Firebase's first dedicated relational database solution for developers. It is a relational database service for mobile and web applications that allows you to build and scale secure apps using a fully-managed PostgreSQL database powered by Cloud SQL.

Data Connect is designed to bring the ease of use and rapid development of Firebase's ecosystem, but matched with a relational database offering that includes schema and powerful querying capabilities. It accelerates your app development by abstracting away the infrastructure management required to run your application.

Below is a breakdown of how it works and what it delivers:

The Magic: GraphQL, SQL, and Automation Data Connect operates by bridging the gap between your client application and the relational database using GraphQL.

Schema Definition: You define your application's data model using a schema. This schema explicitly maps to an underlying PostgreSQL database schema. You can even use Gemini AI assistance to generate your schema, queries, and mutations from just an app idea or a prompt. Data Connect will then automatically provision a Cloud SQL Postgres database and populate it with that schema.
Query Generation: You declare the exact queries and mutations your application needs. When you craft these queries on your schema, Data Connect translates the GraphQL into SQL to read and write data to the Cloud SQL instance.
Secure Endpoints: Data Connect is built on the principle: "You write the query, we do the rest". When you define a query, you instantly get a secure API endpoint with built-in authentication and authorization policy.
Type-Safe SDKs: Data Connect simplifies client-side development by automatically generating typesafe SDKs for Android, iOS, Flutter, and web, based on your predefined queries. These generated SDKs allow you to call the database with a single line from your client. Data Connect is essentially a "self-driving app server" made-to-order for your specific application. Solving Complex Data Problems Data Connect shines when you move beyond simple application state management and need serious data horsepower:
Advanced Aggregation and Analytics For the complex queries, like "how many users signed up last month," Data Connect enables powerful aggregations using View types. This special type allows you to write arbitrary SQL SELECT statements and bind them relationally to your GraphQL data model. This means you can pull in review statistics or other calculated metrics efficiently alongside your application data.
Full-Text and Semantic Search FDC directly solves the need for advanced search capabilities through its integration with Vertex AI Text embeddings. • Vector Embeddings: A vector embedding represents the meaning of an object (like a movie title or description) as understood by AI in a multi-dimensional space. • Semantic Search: Data Connect makes it easy to generate these vector embeddings and store them in Cloud SQL. When a user enters a search term, Data Connect generates an embedding from Vertex AI and executes a similarity search for related data within Cloud SQL. This enables semantic search that finds results based on the meaning of the search, not just exact text matches. For instance, searching for "mythical creatures" can return highly relevant movies even if those words aren't in the title.
Powering AI Agents Beyond traditional application development, Data Connect is also used to power AI agents. It generates tool definitions for LLMs (Large Language Models). This allows an agent, built using frameworks like Genkit, to access data in your database by calling Data Connect queries and mutations as tools. This process, known as Retrieval-Augmented Generation (RAG), grounds the AI's response in your specific database context.

Make sure to check out this video about Firebase Data Connect that I did with Google Engineer Tyler Crowe for even more details.

Thinking in GraphQL: A Quick Primer

At the heart of Firebase Data Connect is GraphQL, a query language for your API. Unlike traditional REST APIs, where you often have to make multiple requests to fetch related data, GraphQL allows you to request exactly the data you need in a single query.

Think of it like ordering a pizza. With a REST API, you might have to first order the crust, then the sauce, then each topping individually. With GraphQL, you can place a single order with all your desired toppings, and get exactly what you asked for, all at once.

Writing Your First Queries

Let's dive into some practical examples from the codelab. The codelab builds a movie review application, so our queries will be centered around movies, actors, and reviews.

Fetching a Single Movie

To fetch a single movie by its ID, you would write a query like this:

query GetMovieById($id: UUID!) {
  movie(id: $id) {
    id
    title
    imageUrl
    releaseYear
    genre
    rating
    description
  }
}

Here's a breakdown of what's happening:

query GetMovieById($id: UUID!): This defines the query and its name, GetMovieById. It also specifies a variable $id of type UUID! that will be passed to the query. The ! means that this variable is required.
movie(id: $id): This is the root field of our query. We're asking for a movie and passing the $id variable to specify which movie we want.
{ id title ... }: This is the selection set. We're telling GraphQL exactly which fields we want to retrieve for the movie.

Fetching Related Data

Now, let's say we want to fetch a movie along with its main actors and reviews. With GraphQL, this is as simple as extending our selection set:

query GetMovieById($id: UUID!) {
  movie(id: $id) {
    id
    title
    mainActors: actors_via_MovieActor(where: { role: { eq: "main" } }) {
      id
      name
      imageUrl
    }
    reviews: reviews_on_movie {
      id
      reviewText
      rating
    }
  }
}

In this query, we've added mainActors and reviews to our selection set. We're also using a where clause to filter the actors_via_MovieActor to only include actors with the role of "main".

Mutations: Changing Your Data

GraphQL isn't just for fetching data; it's also for modifying it. In GraphQL, these operations are called mutations.

Let's say we want to add a new user to our database. We can define a mutation like this:

mutation CreateUser($uid: String!, $email: String!, $name: String!) {
  user_insert(data: { uid: $uid, email: $email, name: $name })
}

This mutation, named CreateUser, takes the user's uid, email, and name as arguments and uses the user_insert mutation to add a new user to the database.

Maybe you should try Data Connect

Firebase Data Connect, with its GraphQL-powered interface, offers a flexible and efficient way to work with your relational data. By allowing you to specify exactly the data you need, it can significantly improve the performance of your applications and simplify your data-fetching logic. The examples above are just the tip of the iceberg, and I encourage you to explore the official codelab and documentation to discover all that Data Connect has to offer.

To see an introduction to Firebase Data Connect, and how it uses SQL, see the following video: Introducing Data Connect.

Running the Cloud on Your Desktop with LocalStack

Alex Patterson — Sun, 12 Oct 2025 23:15:42 +0000

Original: https://codingcat.dev/podcast/running-the-cloud-on-your-desktop-with-localstack

Welcome back, perfect peeps! Today we’re diving deep into how to bring the power of AWS to your local machine using LocalStack. If you build cloud-native apps, dabble in side hustles as a solopreneur, or want to experiment with AWS services without racking up a bill, this is the post for you. You’ll learn what LocalStack is, why it’s awesome, and how to use it—from setting up buckets to working with Lambdas, CDK, CI/CD, and beyond.

Grab your favorite mug (mine’s a Netlify mug with way too much coffee in it), sit back, and let’s see how LocalStack can seriously change up your cloud development workflow.

Meet the Hosts: Catching Up

“I think it’s actually been about three years since you’ve been on the show, which is insane to me.”

If you’ve tuned in before, you’ll recognize your hosts from the DevRel (developer relations) world: Brian Reinaldi, previously at LaunchDarkly and now at LocalStack, and Alex, your guide here at CodingCat.dev.

Like so many of us, Brian juggles a full-time gig with a bunch of side projects (check out cfe.dev for his event lineup). Burnout happens, life gets busy, and conference schedules never slow down. But the passion for sharing cool tools survives! That’s why Brian’s here to give us the rundown on how LocalStack has changed his approach to both work and play.

What Is LocalStack?

If you’ve ever dipped your toes in AWS, you probably know the pain: spinning up resources is slow, can get expensive, and—let’s be honest—just plain scary when you’re learning. Enter LocalStack.

High-Level Overview

LocalStack is basically AWS on your laptop. You get a Docker image that emulates AWS services locally, so you can spin up buckets, run lambdas, use API Gateway, and much more—without ever touching your actual AWS account.

You don’t need to sign up for an AWS free tier. You don’t have to worry about forgetting to tear down an EC2 instance (and getting surprising bills). Instead:

You experiment and build locally
Everything is ephemeral
You control costs (no “I left a GPU running all weekend” horror stories)
Debugging, iteration, and CI/CD are all much, much faster

And you can reset and restart as often as you want.

Free vs Paid

LocalStack has two flavors:

Open Source (Free)
- ~30 AWS services (S3, Lambda, API Gateway, CloudFront, etc.)
- Use as much as you want, forever
Pro / Paid
- ~120 AWS services emulated (and counting)
- Premium features: more services, tools for debugging, step-through, chaos engineering, more
- This is how the LocalStack team eats (support them!)

Which Services Are Covered?

“We have like really close parity with AWS on certain services (like S3 & Lambda)... Some APIs are partial. But for core stuff, we’re very close.”

AWS itself has ~300 services, but most modern apps rely on a handful: S3, Lambda, API Gateway, DynamoDB, CloudFront. For these, LocalStack hits near parity with AWS. For edge-case services or those you almost never use, some features may lag behind.

Check out their full list of supported services to see if your stack is covered.

Main Features

Some of the headline goodies you’ll find in LocalStack:

Run dozens of AWS services locally
Step Debugging: Attach a debugger to your (Node.js) lambdas, set breakpoints
Hot Reload: Save your code, instantly test the change, no manual deploys
Chaos Engineering: Simulate API slowdowns, outages, or dropped packets to test how your app handles “the real world”
Web-based UI: Inspect resources, invoke lambdas, and debug from your browser
Thin Wrappers for CLI Tools: Keep your workflow—just redirect commands to “local”

“The real savings isn’t just the money. It’s the time you save as a developer. Tests that took 45 minutes now take just a few minutes.”

Setting Up LocalStack – Step By Step

Okay, let’s get hands-on. Here’s how to set up LocalStack on YOUR laptop, with tips straight from Brian and Alex.

The Docker Flow

LocalStack runs as a Docker container. So:

Install Docker
Pull LocalStack:

docker pull localstack/localstack

Run LocalStack:

docker run -d -p 4566:4566 -p 4510-4559:4510-4559 localstack/localstack

By default, LocalStack runs with GUI/API access on port 4566. (Side note: multiple ports are used internally.)
Install the CLI wrapper (optional, but way easier):

pip install localstack-client

Or grab their LocalStack CLI for more features.

Web App UI: Not Just for the Cloud

Here’s something wild: LocalStack’s web UI runs on your laptop, but acts just like a cloud console.

What’s actually happening:

The web app connects to your local Docker instance
You browse buckets, lambdas, APIs…the whole works
Everything is still 100% local to YOUR machine

“People actually get confused. They open the web app and think, ‘Wait, is this running in the cloud?’ Nope! It’s all on your box. But with all the power of a cloud console.”

Learning AWS for Real: Project Walkthrough

CDK, CloudFormation & Infrastructure as Code

To get serious with AWS, you’ll want Infrastructure as Code. Brian’s example uses CDK (Cloud Development Kit)—a tool that lets you build AWS resources in TypeScript, Python, etc., then transpile down to CloudFormation.

CDK Stack: Write resources like new s3.Bucket() or new lambda.Function() in your preferred language.
Bootstrapping: CDK zips everything up, creates CloudFormation, and shoves it into S3 for deployment.
Deploy: Actually builds resources locally—in our case, via LocalStack.

Workflow:

# Start LocalStack (make sure Docker is running)
localstack start
# Run CDK locally (not on AWS)
cdk-local bootstrapcdk-local deploy

If you’re used to writing TF with Terraform, this is a super similar flow.

Makefiles for Convenience

Brian uses a Makefile to automate all his steps, like:

deploy-s3:cdk-local bootstrapcdk-local deploy

So he can just:

make deploy-s3

Easy button!

Example: S3 Static Site Hosting

Let’s walk through building a basic static site—think Netlify in the early days, just HTML/CSS/JS.

1. CDK Stack Definition

Here’s (roughly) what your TypeScript CDK stack might look like:

import * as s3 from 'aws-cdk-lib/aws-s3';
import { Stack, StackProps } from 'aws-cdk-lib'; 
class MyStaticSiteStack extends Stack { 
    constructor(scope: Construct, id: string, props?: StackProps) { 
        super(scope, id, props); 
        const bucket = new s3.Bucket(this, 'MySiteBucket', { 
            websiteIndexDocument: 'index.html', 
            websiteErrorDocument: 'error.html', 
            publicReadAccess: true, cors: [{ 
                allowedMethods: [s3.HttpMethods.GET], 
                allowedOrigins: ['*'], }], 
                enforceSSL: true, 
            }); 
    } 
}

What’s going on?

Defines an S3 bucket for static website hosting
Enables public read, sets index/error documents, CORS, and SSL
(Optionally) Uses S3 deployment to push static files into the bucket

Assets: Your /site-assets folder holds index.html, styles.css, JS, etc.

2. Deploy Locally

With LocalStack running:

make deploy-s3
# or directly:
cdk-local bootstrapcdk-local deploy

3. Inspect in the Web UI

Open the LocalStack web app
Browse to the S3 bucket
See your static assets: index.html, JS, CSS, etc.

4. Access the Hosted Site

LocalStack gives you a special URL pointing to your local instance, like:

https://bucketname.localstack.cloud:4566/index.html

Open in your browser. You’ll see your static site, served by a local clone of AWS S3.

Blockquote

“I'm doing this all locally. This is running, if you see that URL, it's actually pointing at your local instance... Not in the cloud, running on my machine.”

5. Bypass Annoyances

Working on the real cloud often hits you with CORS errors or IAM permission headaches. LocalStack lets you:

Disable CORS for easier development
Bypass IAM (security) during dev, then enable to test before pushing to prod

From S3 to Global: Adding CloudFront

Let’s make things more “real world.” You want to deploy your site globally (via CDN) instead of from a single S3 bucket.

What’s New?

Add a CloudFront distribution in your CDK stack
CloudFront sits in front of your S3 bucket
Disables public access on S3 (only CloudFront has access)

Access the CDN-Backed Site

The app is almost identical visually, but now served through a global CDN—and still completely local. Sound slow? Actually, on LocalStack, these setups build in seconds, not minutes.

“A CloudFront distribution can be super slow to deploy to AWS... This is going to deploy in a matter of seconds with Lambda, CloudFront, and S3.”

Serverless Power: Adding Lambdas

Static sites are fun, but sometimes you want server-side logic. Enter AWS Lambda.

1. Basic Lambda Example (Node.js)

Lambda handler file (e.g., src/handler.js):

exports.handler = async (event) => {const response = {statusCode: 200,body: JSON.stringify({ message: "Hello from Lambda!" }),headers: { "Content-Type": "application/json" }};return response;};

2. Add Lambda to Your CDK Stack

import * as lambda from 'aws-cdk-lib/aws-lambda';const func = new lambda.Function(this, 'MyFn', {runtime: lambda.Runtime.NODEJS_18_X,handler: 'handler.handler',code: lambda.Code.fromAsset('src/')});

3. Expose via Lambda Function URL

You can create a public URL to hit your Lambda directly (for demos, not production!):

const fnUrl = new lambda.FunctionUrl(this, 'FnUrl', {function: func,authType: lambda.FunctionUrlAuthType.NONE,});

4. Deploy, Test, and Play

Deploy with make deploy-lambda
LocalStack instantly exposes your functionUrl
Hit it in your browser or with curl:

curl https://function-id.localstack.cloud:4566/# => { "message": "Hello from Lambda!" }

5. Web UI FTW

Invoke the lambda, add debug payloads, and get instant feedback via the web app. No more click-wait-refresh nightmares!

API Gateway: Real-World Full Stack

Now, let’s build a real API like you’d use for your single-page app’s backend.

1. Integrate Lambda With API Gateway

Instead of exposing your lambda directly, route it through API Gateway.

import * as apigateway from 'aws-cdk-lib/aws-apigateway';const api = new apigateway.RestApi(this, 'MyAPI');const getIntegration = new apigateway.LambdaIntegration(func);api.root.resourceForPath('hello').addMethod('GET', getIntegration);

Now, when you hit /hello on the API endpoint, it triggers your lambda!

2. Deploy & Call

make deploy-apigateway

Get the API endpoint (from CDK outputs or the web UI):

https://api-id.localstack.cloud:4566/hello

Visit in the browser or use your front-end code to call this endpoint.

3. Put It All Together

S3 hosts the static site
CloudFront sits in front as a CDN
API Gateway exposes endpoints
Lambda runs your server code
All running locally

“This is now calling somewhat getting closer to a real app... not just a function URL endpoint, but an API, hit by the front-end.”

Bonus: Other AWS Services

Want more? LocalStack (even in the free version) supports:

DynamoDB: Run a NoSQL backend locally for your app or play with familiar Dynamo queries
SSM (Systems Manager) / Secrets Manager: Store environment variables, secrets, and config
IAM: Simulate auth rules (can be turned off/on to make life easier in dev)

You can use thin wrappers for AWS CLI, CloudFormation, Terraform, CDK, and more.

Example CLI wrapper usage:

aws --endpoint-url=http://localhost:4566 s3 ls# Or use localstack's own CLI for extra features

“We even have a tool (Pro) called IAM Policy Stream that actually tells you what IAM policies you're missing for different services!”

Debugging, Hot Reload, and Chaos Engineering

Step Debugging

With Pro, add breakpoints to your serverless functions, use your favorite IDE, and step through lambdas—something most AWS users only dream about.

Hot Reload

Saving your lambda code triggers instant reload and redeploy. No more zip && upload && test loops.

Chaos Engineering

Want to make sure your app doesn’t break if AWS throws a wrench in the works? LocalStack lets you simulate:

Slow network calls (latency injection)
Dropped packets (simulate outages)
AWS API failures

Great for modern observability/testing practices!

“You’d be surprised how often packets are lost or latency spikes in the real world. Now you can test your resilience before you ship!”

LocalStack in Your Workflow: CI/CD & Team Dev

Developer Workflow

Picture this: Two developers are working on a feature, each running LocalStack on their laptops.

Workflow:

Each dev spins up LocalStack locally
Modifies CDK or Terraform code
Tests lambdas, endpoints, etc., with full hot reload and step debugging
Commits to git

CI/CD Pipeline Integration

Teams often spin up test environments on AWS for every pull request (expensive and slow). With LocalStack:

CI/CD pipeline pulls your code
Spins up LocalStack Docker container
Deploys your full app to local stack in the CI runner
Runs integration and unit tests (all local, zero cloud costs)
If everything passes, deploys to AWS

Benefits

No more “who forgot to shutdown the test instance?” bills
CI builds run faster (tests go from 45min to 2min in some cases)
Easy rollbacks (just restart local stack)
Fast local feedback = more experimentation

Speed Gains

“It’s all faster! Unless you’re paying Buco bucks for your AWS builds, nothing beats your own dev laptop for speed.”

What’s Next for LocalStack? Beyond AWS

LocalStack started as “AWS locally,” but their dream is multi-cloud on your laptop.

GCP, Azure, and More

Snowflake Emulator: Already in pre-release (for data science workflow fans)
Azure: On the roadmap, with early experimental bits already out there
GCP: No timeline yet, but definitely a future goal
Custom Connections: Hook up LocalStack to third-party providers (like Okta, Auth0, etc.) easily

“Big vision: Whatever you do on the cloud, you should be able to do locally in LocalStack—across AWS, Azure, and GCP.”

Why Multi-Cloud?

Companies rarely stick with one provider forever. Multi-cloud is on the rise, and being able to test any cloud workflow locally is going to be a must.

Final Thoughts & Resources

After using LocalStack, Brian’s main takeaway is speed and freedom. It’s not just about saving money—it’s making cloud development fun to experiment with again.

“It let me experiment and iterate without all the pain and delay. Now I’m more likely to try new things, mess with new APIs, because it’s so fast and safe.”

All the demos we saw today (including Lambda, S3, CloudFront, API Gateway, and even DynamoDB) are included in the free version, so you can start experimenting without spending a dime.

Resources & More Reading

For extra hands-on guides and new episodes:

Join the Conversation

Have questions? Want to share your horror stories (or victories) using LocalStack? Hit us up at @CodingCatDev or drop a comment below!