Call AI Santa to tell him your Christmas List

I remember being a kid on Christmas Eve, adrenaline pumping, knowing the big day was only one sleep away.

What would be under the tree this year? A Nintendo 64? A Tamagotchi? Some cheap-o Foakleys? What was the point of even lying down? There was no chance I was going to fall asleep. The excitement seemed to make my bed pillow more stiff than ever.

I had to stay awake and talk to Santa. To ask him, just this once, what it was like being the Big Guy, which reindeer was his favorite, or why he didn’t bring me a real Starter jacket last year.

But every Christmas Eve, without fail, I’d always pass out before he’d arrived, and wake up to Christmas morning having once again missed his presence (but, luckily, not his presents).

Would I ever get to talk to the real Santa? Or would I always have to succumb to the hokey Mall versions; clearly not the real deal, but possibly as close as I’d ever get?

Using Laravel Cloud, Mux, and the OpenAI Realtime Voice API, my kids and I can all talk to Santa (and receive a video recording to remember it all) with santa.live, a brand new interactive voice chat app I built over the past few weeks.

Let me show you how the app works, the tech behind how it was built, and what kinds of memories it brings to life.

Unwrapping a magical experience on the web

Whether AI or Human, a voice conversation with Santa is exciting. It takes you somewhere—somewhere where anything is possible. But when you’re talking at a screen instead of sitting on Santa’s lap in a room decked with tinsel and boughs of holly, it’s important for the application to go the extra mile to make the whole experience feel particularly well-designed, interactive, and spirited from beginning to end.

Santa.live achieves this with a few approaches. First, the app uses MediaRecorder to capture and record the user’s webcam and audio. It then combines the audio stream from OpenAI’s Realtime API into this MediaRecorder stream and uploads the mixed video up to Mux as the data is captured.

That’s not the only place the app uses audio and visuals to lean into the theme. Throughout the project, there’s animations of snowfall, buttons that explode with presents and stars on hover, retro SVG illustrations, a mini 3D cabin scene, AI-generated holiday music, and a magical real-time transcription as Santa responds to the user’s voice. Santa is also prepared with personalized details about the caller in advance—making the conversation much more realistic and heartfelt.

All of these elements come together to produce an immersive experience that truly is fun for the whole family. It makes you feel like you’re actually connected to the real Santa.

The tooling behind the visuals and animations

Even aside from the real-time audio, there’s no way this app would have come to life without the help of AI. It’s not necessarily because I don’t know how I’d make it—I do— but time is of the essence. There are only so many hours in the day to play around in side-project land, and AI tools were essential in bringing this thing to life in an efficient manner. Here’s everything I used in my workflow to make the app a reality:

Recraft

I have an okay eye for design, but I cannot draw at all. I’m also hesitant to litter the marketing site with generic vanilla stock imagery. Recraft absolutely crushed it by helping turn my ideas into production artwork. I used the recraft-v3-svg model on Replicate to generate SVGs as the ideas came to me.

Cursor

Cursor absolutely transforms the way I work. Not because it’s always right, or because it’s the best UX, but because it removes the minutia of tedious tasks and sets me on the right track for the more complicated ones. For example…

Vue + Tres.js

I’ve used Three.js previously, but I’ve never been very good with it. I’ve always liked those little cutesy Airbnb-esque isometric scenes and wanted to see if I could make one of my own.

Some back and forth prompting with Cursor along with the utility helpers provided by Tres.js and Cientos made this winter cabin scene a reality. Not quite Airbnb-level quality, but not bad for a beginner:

Motion

I’m not exaggerating when I say that Motion is my favorite JavaScript library. Matt Perry is a superhero (and recently went full-time on this project, go support it).

I used Motion to animate Santa’s words on screen as he speaks. I needed to give the user something fun to look at, and didn’t want a typical iMessage chat interface. Also, the user knows what they verbalized – no need for them to see what they just said on screen.

This effect brings a storybook-like feel to the live conversation. The words from the transcript feel like they’re being written onto the screen in real time and have a bit of a weightlessness to them. Super neat.

There are also small moments of animation, like when you hover over the button to start your conversations. Whimsy makes software feel more relatable and less static.

Maybe there’s some way to clean this code up, but hey, the countdown to the holiday season is on. The elves are busy. No time to waste!

Proton.js

The snowflakes that fall on the homepage are driven by Proton.js — a particle system written in JavaScript. The code for that is relatively simple, but adds a nice touch:

There’s also a small bit where snowflakes will be impacted by your mouse cursor. It’s not perfect, but it gives you a feeling of having a presence.

If you pay attention on the homepage, you might also see some accumulation. I’ll leave that one up to you to discover.

Suno

Once again, Suno comes through with a lovely holiday track that appears under the marketing video that I put together. Fun, charming little tune that helps set the tone for the whole experience

On their own, none of these tools are going to create a particularly impressive holiday experience. Collectively though, I’m pretty stoked with how things shaped up.

Santa’s workshop server-side tech stack

Of course, the front-end stack is only half the battle. You can’t build a talk to Santa app without being able to talk to Santa. So what’s behind the backend of this thing?

Laravel and Laravel Cloud

In years past, I would’ve reached for Next.js to spin up a side project like those. Those days are over for me. While it has taken a short amount of time to readjust to PHP, it’s been more than fine. It’s been… enjoyable.

There’s a lot to thank Laravel for here, since it’s really doing the heavy lifting for queues, database, routing etc. But I’ll say it again: it’s just so darn nice to have support for all this stuff built in. No more piecemealing a solution together.

I’m also not entirely dependent on writing PHP. SantaTech uses Vue.js with Inertia, allowing me to write Vue templates that act as entire pages in Laravel. This made the transition from JavaScript-land a lot more simple than it sounds on the surface. You don’t really need to relearn much. It’s super intuitive.

I’m deploying the app to an early access version of Laravel Cloud, and similarly, it’s been a breeze. It just works. I even gave the team the feedback that it’s “Extraordinarily Boring Functional Software” which is exactly what I want in a CI/CD/hosting solution. Just make it work and get out of my way.

OpenAI Realtime API

The star of the show is the new Realtime API from OpenAI. Using the session.update client event, you can provide instructions to help guide the AI towards the impression you’d like it to represent.

I also inject some of the user-provided metadata into this prompt to help customize the conversation. Frankly, there’s probably room for some bad actors here to figure out how to be bad, but you have to pay to use the service so I’m guessing that’ll discourage some of the antics.

Integrating with this API was not a trivial task. I was very happy to find their Console and Reference Client to learn the inner workings of it all. Study this code. I have a feeling we’ll be using more of it in the future. (Swyx also published a stripped-back version of the repo)

Fastify

To make secure and instant interactions with OpenAI’s Realtime API, there needs to be a relay server that proxies events from the client, validates them, and then sends them over to OpenAI with an auth token. For this, I chose Fastify, a simple Node framework that supports both HTTP and WebSocket traffic. I’m anticipating this code base to continue to grow, so I wanted something that can easily handle both types of requests.

The WebSocket endpoint is relatively straightforward, with a few moments of middleware sprinkled through the requests to help guide the AI with timed directions and (gasp) content moderation.

Coolify-managed Hetzner server

Laravel Cloud is awesome, but while it’s in EA, there’s no support for non-Laravel apps, so this Fastify relay server had to be deployed elsewhere. I’ve been looking for an excuse to try out Coolify and Hetzner and this was the right time.

Coolify is super impressive — though I’m still a bit hesitant to be the one managing my own servers. Not the brave young whippersnapper I used to be. Hetzner took a little getting used to, but I’ve heard great things. We’ll see how it holds up if this app ever gets any real traffic.

Mux

Mux is the 🐐 for video on the internet. I wouldn’t trust anyone else—and not just saying that because I work there. Some of the employees are just straight up video savants. I’ve been working with online video for over a decade, and I still get involved in internal conversations that go completely over my head. That’s exactly the type of company I want to entrust with complicated internet software problems.

The Santa app reroutes the audio response from OpenAI and muxes it with the A/V stream from the user’s local media devices using an AudioWorklet. As soon as the data is ready, it’s uploaded to Mux in parallel. When the conversation is complete, the last chunk is pushed up to Mux and the user is redirected to a thank you page. No waiting around here for the upload to complete.

Mux also handles the video playback on a winter-themed page. With Mux Player, I think this page took about 5 minutes to build. Wild times.

A holly jolly experience for all

I have to say: this thing rips. Everyone I’ve showed it to has had a ton of fun with it. Even my in-laws! $10 feels a little silly for talking to an AI, but I have to be sure my OpenAI bills don’t spiral out of control. And hey, after all, I did put a good amount of late nights into this one. I assure you, this thing will make you smile.

That said… there’s only so much Santa conversation one can have during development before you lose your marbles. Instead, I decided to have some fun with the voice instructions:

Combining creativity and tech is the best. I can’t think of a better playground for tinkering as an adult. But this app in particular gave me some insight as to how tech can just as easily be an amazing playground for children as well.

Check it out and let me know what you think. Hopefully you’ll land on Santa’s nice list this year.