Vibe-coding a kid-friendly AI fortune teller for your Halloween festivities | Marco Casalaina

Claire Vo 0:00 Welcome to a spooky and unplanned Halloween edition of How I AI. I'm Claire Vo, product leader and AI obsessive, here on a mission to help you use LLMs to do spooky stuff for your kids. Today, we had a haunted episode recording that we couldn't get to work, so instead of our regular scheduled programming, we did a quick Halloween vibe code that I think some of you parents out there will be inspired by. If you have other Halloween vibe codes, please share them with us in the comments, and enjoy this very short episode of How I AI: Halloween Edition. [upbeat music]

Claire Vo 0:40 Marco, we may, we may not be able to do our podcast today. We are haunted by-

Marco Casalaina 0:47 We are haunted

Claire Vo 0:47 ... expired cr- ex- expired corporate credit cards. But you have a, a Halloween-based AI use case [chuckles] we're gonna talk about instead, just for a few minutes before we reschedule.

Marco Casalaina 0:57 I do, I do, and maybe I'll, I'll kind of do it live on the fly here.

Claire Vo 1:01 Yeah.

Marco Casalaina 1:01 And so why don't we, why don't we not just talk about it, why don't we actually do it? So I'm dressed as Captain Picard right now, uh, as I do every year, dressed as Captain Picard. I mean, it naturally fits with my-

Claire Vo 1:13 fits

Marco Casalaina 1:13 ... you know-

Claire Vo 1:13 Brand

Marco Casalaina 1:13 - brand and stuff like that. Of course, I am a huge Star Trek fan. I'm in the middle of Strange New Worlds right now, Season 4. But, uh, by night, at least for Halloween, I do something a little bit different. I am the block fortune teller. So this is the Halloween party block that I live on here in Piedmont, California, and so we will block off the street, and all of our neighbors do crazy stuff. And so, you know, my neighbor across the street is gonna have all this projection stuff going on, and they have, like, fire coming out of something and... But what I do, well, I am a fortune teller. So traditionally, uh, what I have done for the past few years is that I have pre-created fortunes. So I set up this table, and on this table, uh, I have a, a, a crystal ball, and the crystal ball glows and stuff like that. It's not a high-tech crystal ball. It has nothing but a couple of LED lights in it, but the kids come up, and there's lots of kids in town, you know, hundreds of them really, come up, and they, they will get their fortunes from this thing. Now, in reality, what I did was I, in the past, have pre-created these fortunes. So I make a list of them with GPT-3 and then GPT-4, and I store them in a note on my phone, and I kind of keep it between my legs under the table, and I'll kind of pick one at random. So when a kid comes up, I'll pick this one, and I make a kind of kid-friendly fortunes. Now, this year, I, I was thinking about doing this, and since we're talking, I'm gonna do this live now.

Claire Vo 2:38 Yes.

Marco Casalaina 2:38 I'm gonna actually do this live. I'm gonna- let me give you a moment, just-

Claire Vo 2:41 Are you gonna read my fortune?

Marco Casalaina 2:43 Uh, we're gonna, we're gonna make a fortune for you, yeah.

Claire Vo 2:45 Yes.

Marco Casalaina 2:46 So I think that for this... Now, there's lots of tools that I can use to do this.

Claire Vo 2:49 Mm-hmm.

Marco Casalaina 2:50 Uh, I could use Lovable, I could use Bolt, I can use v0. I'm gonna use GitHub Spark for this

Marco Casalaina 2:54 one.

Claire Vo 2:54 Was not expecting a GitHub Spark today on Halloween-

Marco Casalaina 2:58 How about that?

Claire Vo 2:58 - so this is exciting for me.

Marco Casalaina 2:59 How about that? Okay, so I'm gonna say, "Make a mobile app, which, when I click a button, generates a new fortune in the context of a fortune teller." Okay, uh, I don't think I need to tell it much more than that. It's probably gonna kind of work on the first try. Well, we'll see. Let's see what this does. Now, you know, in other circumstances, I have sometimes given it, like, a list of things to scroll between. You might have seen on the screen that earlier I had a chemistry ion flashcards app. My daughter, uh, is in honors chemistry, and she was, at the time, studying polyatomic i- ions, uh, chlorate, perchlorate, you know, sulfate, stuff like that, and, uh, she needed to memorize the name to the, the formula of these polyatomic ions. And so I made a flashcards app with this thing, which actually worked really well. I mean, I just gave it basically the list of the polyatomic ions, and it totally freaking did it in this kind of flashcard interface that worked on the phone. And so that was pretty nice. That's kind of one of the reasons why I decided to go with GitHub Spark for this one, uh, is because I know that kind of worked for me before. And in a way, you could look at this as kind of being a flashcard app, too. It's gonna kind of make these flashcards of fortunes, I guess.

Claire Vo 4:19 Yeah.

Marco Casalaina 4:19 Uh-

Claire Vo 4:19 Oh, my gosh. Well, I, I have a block party tomorrow, so I might steal your idea. [chuckles]

Marco Casalaina 4:26 You could do this.

Claire Vo 4:27 I'm excited about this.

Marco Casalaina 4:28 You could definitely pass for a fortune teller as well, you know?

Claire Vo 4:31 Yeah.

Marco Casalaina 4:32 And-

Claire Vo 4:32 Oh, my gosh. Okay, so this is gonna... Oh, it made a PRD. That's, you know, I love to see it.

Marco Casalaina 4:36 It made a PRD. Let's see. Can we see it? Let's see if we can see what it's doing while it's doing it. Oh, it does. Okay. So wow, it's really, it's going fast and furious over here. So it's, it's totally writing this PRD over here, and now it's, it's made a page index, so it's starting to make the actual HTML. So it's, it's gonna write this in HTML, and, you know, this is, this is common, and now it's got some CSS, so it's gonna style, uh, the page. Uh, but, I mean, this is, this is vibe coding or any way front-end vibe coding as we do it today. Uh, now, in reality, though, I mean, when I'm doing real vibe coding, uh, projects, and while this thing is working, since I actually already have this on my screen, I'm gonna bust this out over here. Now, if I'm doing a real project, like a serious project, that's not just a little fortune teller app, nowadays, I will 100% use SpecKit. Uh, I absolutely do use SpecKit. In fact, it so happens I was, earlier today, working on just such a project. So I am, by the way, I'm VP of Products of Core AI at Microsoft. However, uh, I do come from an engineering background, and I still code pretty much every day something. So I'm working on this project, and in this project, uh, where I did use SpecKit... So here, like, this is a full feature specification that I'm working on. I have this whole agent thing that I'm, I'm working on, and, uh, I am adding this ability to give user feedback. So this agent will, like, fill out a questionnaire for me, and that's cool, but I want to be able to pick a, a cell, a question, and be like: "No, no, you did that wrong. Fix it," and then the agent should just wake up and do it.... when you use Spec Kit, and so, like, this is the proper way to write a spec, uh, when you use Spec Kit, it does this stuff over here. So you see what it's gonna do? It throws these questions at me. So it's like, "Wait a minute, how long should the feedback be? What if the user gives you, like, a ton of feedback? Then what do I do?" And it, and it- it'll lob all of these questions at me while it does this. So Spec Kit is cool. It's totally free. It works with, like... I'm, in this case, I'm using it with GitHub Copilot, but it works with Claude Code, and it works with Cursor and all these other things. So that is super cool. Uh, I love it. It helps you write a better spec. Uh, but let me-

Claire Vo 6:40 Oh, look at this.

Marco Casalaina 6:41 My app is here. Okay, tap to reveal your fortune, the cosmos.

Claire Vo 6:45 [chuckles] Okay.

Marco Casalaina 6:46 Leave your question.

Claire Vo 6:46 I'm very excited about this.

Marco Casalaina 6:49 Wow, okay.

Claire Vo 6:50 Oh.

Marco Casalaina 6:51 That's a little bit too, uh-

Claire Vo 6:53 Hold on, let me, let me read this for people that are not on video. "In the tapestry of the cosmos, the stars weave a path illuminated by your dreams. Trust in their guiding light." Now, what I like about this is it is completely ambiguous and means nothing.

Marco Casalaina 7:07 Mm-hmm.

Claire Vo 7:07 Excellent. Excellent fortune. But I bet you want it to be a little more fun and kid-friendly for-

Marco Casalaina 7:13 Exactly

Claire Vo 7:13 ... for your use case. [chuckles]

Marco Casalaina 7:14 And so over here on the left-hand side, you can see that I'm saying, "Make each fortune only one sentence, and make it kid-friendly." So now I'm gonna kind of prompt my way towards doing something, and it's starting to generate again. So I mean, I mean, you gotta admit, though, I mean, it's pretty freaking good on the first try.

Claire Vo 7:29 Really good. You know what? I haven't seen, um, this GitHub Spark, uh, done live, but the design is actually really cute. So, so often in these vibe coding tools, you get these incredibly boring designs, but that is actually quite, quite lovely. Okay.

Marco Casalaina 7:48 All right, let's see.

Claire Vo 7:49 Did we get it?

Marco Casalaina 7:50 It's done. It says it's done.

Claire Vo 7:51 Okay.

Marco Casalaina 7:52 So here we go. Let's see what happens.

Claire Vo 7:52 Mystic Oracle, what is my fortune?

Marco Casalaina 7:56 "When you sprinkle kindness like fairy dust, the whole world transforms into a playground of magical adventures and shimmering smiles."

Claire Vo 8:03 Ah, that's it is... That is lovely and kid-friendly.

Marco Casalaina 8:06 Still maybe a little bit on the big words there. I mean, I could-

Claire Vo 8:09 And on the abstract side.

Marco Casalaina 8:11 Yeah, on the abstract side. I mean, uh, let's see. Make the fortunes a little more concrete.

Claire Vo 8:17 And, and let's make them a little more fun.

Marco Casalaina 8:20 And maybe a little more humorous.

Claire Vo 8:24 Yeah.

Marco Casalaina 8:25 Try not to use such big words.

Claire Vo 8:27 [chuckles]

Marco Casalaina 8:29 I mean, a lot of times, like, the kids that'll come up to my fortune-telling booth, they'll be, like, you know, two or three years old, you know?

Claire Vo 8:34 Yeah, yeah.

Marco Casalaina 8:35 And for them, sometimes I'll, like, not even use my little app thing-

Claire Vo 8:40 Yep

Marco Casalaina 8:40 ... and I'll be like: You're gonna try a new food today, and it's gonna be yummy.

Claire Vo 8:45 [chuckles]

Marco Casalaina 8:46 And their parents will be like, "Thank you!" [chuckles] Like-

Claire Vo 8:49 Your candy in your Halloween bag will multiply. [chuckles]

Marco Casalaina 8:53 But, I mean, you know, P- Peabod is a small town, and I actually know a lot of these parents and stuff like that.

Claire Vo 8:56 Yeah.

Marco Casalaina 8:56 And sometimes they come back at me later, and they're like, "You told my kid this fortune?"

Claire Vo 9:00 Why did you tell my kid-

Marco Casalaina 9:00 Like, I told one kid a fortune once, and it was like: You're gonna make a new friend today, which actually did come from my, my, the previous version of this, uh, generation.

Claire Vo 9:10 Yeah.

Marco Casalaina 9:10 And, uh, she said he was talking about it for the whole next day. She was like, "The fortune teller said I'm gonna make a friend today. Like, this is gonna be cool."

Claire Vo 9:17 Well, your kid's 15. Should I, uh, tell her she's gonna get a car in her future? [chuckles]

Marco Casalaina 9:23 Now, okay, now, now we're going off the rails here. Okay, here we go. You ready? Here's your... This is- this one's for you, Claire. Okay, ready?

Claire Vo 9:29 Uh-huh.

Marco Casalaina 9:30 This week, you will find a shiny rock that looks like a slice of pizza and makes everyone giggle when you-

Claire Vo 9:35 I do like that. That would entertain my six-year-old.

Marco Casalaina 9:39 I mean, that is very concrete, for sure. And, now, you know-

Claire Vo 9:41 It is

Marco Casalaina 9:41 ... your six-year-old, yeah, would totally be looking for, "Oh, where's that rock that looks like the slice of pizza? I'm gonna find it."

Claire Vo 9:46 That is exactly right.

Marco Casalaina 9:47 Yeah.

Claire Vo 9:47 Okay, I-

Marco Casalaina 9:50 One more, one more.

Claire Vo 9:50 One more? Let's see.

Marco Casalaina 9:51 One more. This week, we... Okay, a- again with the rock, and maybe it's going a little over much on the rocks here.

Claire Vo 9:56 [chuckles]

Marco Casalaina 9:56 You'll discover a rock that looks like a cupcake-

Claire Vo 10:00 [chuckles]

Marco Casalaina 10:00 ... sprinkles of happiness. I mean, this is why you never-

Claire Vo 10:03 Yeah

Marco Casalaina 10:03 ... you gotta, like, integration test these things. Are these all rocks? Oh, no. Today, a fluffy squirrel will steal your snack but then share a secret about the best hiding spots in the park. Okay.

Claire Vo 10:12 [chuckles] I'm surprised the squirrel is not sharing the secret about the best rocks in the park. [chuckles]

Marco Casalaina 10:17 So I mean,

Marco Casalaina 10:20 the, the, I mean-

Claire Vo 10:21 You got it. Okay, I, um... You know, it's, it's Halloween. It's almost 11:00 a.m. I've got, uh, my block party's tomorrow, so we're blocking off the street, and we're doing a post-Halloween, everybody bring your candy so you can give it all [chuckles] more away party.

Marco Casalaina 10:36 Right.

Claire Vo 10:36 And I'm gonna do this. I'm gonna hook it up to voice.

Marco Casalaina 10:41 Sweet.

Claire Vo 10:42 Give it, like, a spooky fortune teller voice and, uh, set it up out front. Well, Marco, despite our haunted podcast episode-

Marco Casalaina 10:52 [chuckles]

Claire Vo 10:52 ... we will get you back on to actually talk about spectrum and development, but thank you for doing our first and maybe an annual tradition of our Halloween AI, How I AI episode. [chuckles]

Marco Casalaina 11:05 Gotcha.

Claire Vo 11:05 Thank you for showing this off.

Marco Casalaina 11:06 We'll involve this every year. We'll have, like, different elements to Halloween every year.

Claire Vo 11:10 Perfect. Well, we'll get you back on, on the pod soon, and I think I'm gonna just- I'm gonna go cut this and-

Marco Casalaina 11:15 All right

Claire Vo 11:16 ... and share it. [chuckles] [upbeat music] Thanks so much for watching. If you enjoyed the show, please like and subscribe here on YouTube, or even better, leave us a comment with your thoughts. You can also find this podcast on Apple Podcasts, Spotify, or your favorite podcast app. Please consider leaving us a rating and review, which will help others find the show. You can see all our episodes and learn more about the show at howiaipod.com. See you next time! [upbeat music]