Episode 1: What is Vibe Coding? | Vibe Coding with Catherine and Harshil
Presented by: Harshil Agrawal, Catherine Pierce
Originally aired on November 14 @ 10:00 AM - 11:00 AM EST
In the first episode of Vibe Coding with Catherine and Harshil, you will learn what exactly is Vibe Coding, and how to get started. Right from setting up tools to deploying your first vibe coded application, you will also learn best practices, and understand technical concepts better.
English
Developer
Transcript (Beta)
Hello, WInternet. I am super excited to bring to you VibeCoding with Catherine and Harshil.
I'm Harshil and I am excited to introduce my colleague Catherine that is over here.
Catherine, do you want to go and introduce yourself? Yeah, hi. So I'm super honored to be here today.
I'm super honored that Harshil reached out to me and had this idea to do a VibeCoding session.
It's something that I've been interested in learning.
I joined the developer relations team in August as an event coordinator and I think this is going to be a really cool step into understanding, you know, I've been doing a lot of hackathons and things like that.
So I think this is going to be a really cool step to get a better understanding of VibeCoding and I'm really excited that I get to do it with Harshil.
Awesome. Thank you again for coming on the stream and being a partner on this series.
So for the folks who don't know what is VibeCoding, but if you have just heard the term about it, don't worry.
That's what this series is for. We're going to show you and help you understand what is VibeCoding and how you can VibeCode your own applications.
And to take a step a few steps back, the idea actually came in because Catherine reached out.
She wanted to build an app and I was like, hey, you know what, let's VibeCode it together on the live stream so that we can also help other people learn how they can do that themselves.
So that's the whole idea for the series. And today what we are going to focus on is just helping you understand what is VibeCoding and getting you started with like a few tools that I have been using myself.
So Catherine, are you excited?
I am excited and nervous. That's the same for me. But that's a good thing.
And you have to be nervous when you are VibeCoding because you never know what the AI is going to generate, which is the fun part of it.
You always have to keep on asking AI to improve the things or make sure it does create what you want to create.
All right, Catherine, I know before this we were talking about your little bit experience of VibeCoding.
Do you want to share about that?
Yeah, so when I first got this role, I decided something that would be a good idea is to practice VibeCoding in order to do some of my stuff, just because, you know, I have a background in acting.
That's like a little fun fact. And something that I wanted to do was like some method acting, so really see what it's like to like play with some of this stuff.
So I actually used Gemini and I was telling Harsha like it was really frustrating because I spent like two full days trying to tweak teeny tiny little things until it was exactly what I wanted.
And then it didn't even work the way I wanted it to.
And it was really frustrating.
And it was a cool experience because I think like I got a little bit of practice with stuff, but definitely it was a big fail.
So I told Harsha already, I'm pretty nervous to do this now because I don't want to fail again.
So I'm glad that Harsha is with me this time to be my coach.
Awesome. I am excited for this. And let's talk a bit about like what is exactly VibeCoding and why it is, you know, taking a lot of this boom, right?
So I'm going to try to take the first step at explaining VibeCoding and Catherine, maybe, you know, if I'm missing out or something, or if you want to add something to it, please feel free to jump in.
So for me, VibeCoding is mainly asking AI to help you build application.
And this AI models are now really good at doing that.
However, there are a lot and lot of things that they are not really good at when it actually comes to coding, but they help you get, you know, like from zero to at least 0.5 there.
So it adds you to like, at least create like an MVP or like a minimal idea of your project, so that's what is VibeCoding for me.
What about you, Catherine? Yeah, I think like, I mean, with my one experience with it, it definitely gave me what I liked, is that it gave me a lot of like ideas.
So basically what I ended up doing in the end was it gave me kind of like a blueprint, some ideas of what I wanted.
And I, you know, was kind of like giving me cool creative ideas.
And then what I did is I manually, because it didn't So I manually took that idea and I created it myself using Canva and was able to use it that way.
So that was kind of cool because it did definitely help me to think differently and give me different inspiration.
So that was kind of cool experience as well as that it served that purpose.
Awesome. I like that. One thing I have also been doing a lot is like, you know, if I have an idea, I just go and ask AI about it before I jump into coding it, or like white coding it, right?
So what I have been doing is like, let's just say I have an idea and I want to build a game.
So I would ask AI like, hey, I want to build a tic-tac-toe game.
What are the things that I need? How do I move forward with it?
What are the tools that I need to be, you know, like consider what are the edge cases that I need to consider?
Because if it's a tic-tac-toe game, there are a lot of like, you know, winning and losing and even like the drop-off probabilities, right?
So you want to keep those things in mind. So that's kind of my approach.
First ask it for like the edge cases, first try to understand what you really want to build and then take that learning, take that approach and then start, you know, like working on one feature at a time.
Okay. So that is something that I have been trying out.
And for me, it has worked out decent enough because I get good outputs over here.
So something that folks can try out as well. And I see we have someone in the chat saying that they are not a coder, but they used AI to make a Python script and a browser extension.
And this is why I love white coding, right?
It enables everyone to build or bring their ideas to life. You don't have to be a coder anymore.
All you need to do is like know how to speak to AI.
Well, I'm a good talker, so. Awesome. So do you want to talk about what you wanted to build and then we can talk about how we are thinking about building it and then we can start probably doing that as well.
Yeah. So we use for events, we use this program called Luma. And this is something that we use for registrations, for events.
One thing, I mean, I think we all can relate to there's these little tasks in our day-to-day lives that are just like, oh, we always put it off because it's kind of annoying and it's very tedious.
So one of these things is just like our registration list. Like we want to be able to invite people who have been to events in that city already, take that list and send them invites to events in the future.
And automating that through Luma would be really cool.
And it would save us a lot of time with like going through lists, sending the invites, these little tiny tasks that take up so much time when we're all super busy.
So that's something that I'm really excited to hopefully build into our Luma.
And for the folks who have never been to a Cloudflare event and are curious where you can find it, I have shared a link in the chat for our Luma calendar.
So you can always go and check that. There is also another link, which is, I think, meetus.pages.dev.
I need to, let me quickly try that as well.
But you can also go to that page and find out where we are in the world. Cool. Cool.
Okay. So the idea over here is to help Catherine with her day-to-day work, automating a bit of it and building an app to do that.
But before we jump into that, let's try out like a few simple applications or like one simple application using our own web coding platform.
That's build. Cloudflare.dev. So if you hop onto that, we can go ahead and try to do that.
So Catherine, do you want to share your screen and maybe we can try building one or two apps just to see how it, how the flow is and how we can improve our workflow over here.
Yes, absolutely. And while we do that chat, if you have any interesting ideas, but simple for today, just let us know in the chat and we'll try to bring it up and try to build that application.
Okay. Harshal, you have to remind me, what website am I going to? So it's build.Cloudflare.dev.
There it is. There it is. So this is Cloudflare's own web coding platform.
You can come over here, build and deploy an application on Cloudflare's global edge network.
All you need to have is an account on Cloudflare, which is free to just sign up.
So you can do that. And I see that Catherine is already logged into her account, which is fantastic.
So let's go ahead and try to build an app.
So I'm looking at the chat that has no recommendation yet. So let's go ahead and try something simple and straightforward.
Catherine, what do you want to do?
Do you have, do you want to like build something fun? Oh no, I have no idea.
Can you give me a suggestion? I was thinking, okay, let's do this. So if you see down below, that is discover apps built by the community so that we can take some inspirations over there.
We can go crazy as well. Oh, I don't know what these things.
Okay. If you click on view all, I think it would show us the, yeah, the directory of applications that the community has built.
The UIs are pretty good.
Okay. I mean, it's cool that you have like this, this way to see what other people are doing.
I think that's quite cool. Yeah. Exactly. Exactly.
And if you want to, you can also share over here so that people can, you know, just take that and build on top of it as well, which is fantastic.
Yeah, it's cool.
Not reinventing the wheel, right? Exactly. Exactly. Okay. For some reason, I just got an idea.
I love that. I love ideas. So I was thinking maybe we try to build Flappy Bird.
I don't know if you remember Flappy Bird. I don't know what that is.
Oh, okay. Flappy Bird is like a really fun and interesting game. You basically have to make sure that the bird is always flying and it does not hit any of those barriers.
That's it. Okay. We can try this. So let's just try to build it and then we can, you know, see how good it is.
Cool. If you click on the plus icon on the top left.
And let's just say create Flappy Bird for me or something like that. Flappy Bird for me.
Just like this? Yeah. And then I hit the little arrow. So what is happening over here is you told AI to build something for you.
Now the AI is trying to understand what did you ask for?
Next thing it's going to do is it's going to generate, as you can see, bootstrapping a project.
Now in the world of development, you basically need a tech stack to build an application.
So the AI is going to take care of that.
It is going to bootstrap the application, the basic application, which is what it's going to use to build the application.
Flappy Pip. And it is now giving us like a blueprint.
Like this is what the AI thinks the game should look like, right?
So you'll see it has given a description. It also gave you a color palette.
And then it is now starting to write the code for us. I'm trying to see if we can go...
If you click on the blueprint.md, we should be able to see that.
Where is that? So in the chat itself. I don't see.
Where it says generating blueprint. In the chat interface, yeah. I hit blueprint.md.
This? Yes. Okay, click it. Yeah. So now we can see what the AI understood from just one single line of prompt that we gave.
And it has come up with, you know, everything that is needed.
So the game view, like how would the game look like?
How would the user flow look like, right? So if you scroll down, you can see like the understanding that the AI had and how now it is portraying out over here.
Cool. And this is really important because this... Think of it like a guideline for the AI.
So we did not give the AI the guideline. The AI generated the guideline for itself.
It knows, all right, this is the color palette that I need to use.
So I need to make sure that I am using these particular colors. These are the things that I want to do.
So I'm doing these particular things, right? So the AI is generating it.
It's already there for you. Wow. Click on tap to flap. Tap to flap.
Love a rhyme. Game over. Wow. Restart. Let's do restart. Let's tap to flap.
Oh, so as you said, right, this is what AI is, right? It does generate the code for us, but it is not perfect.
So what you can do is now you can go and chat with the AI and tell it what the problem is.
Yeah. So we can tell it like, hey, the game renders, which means that we can see the game.
But the game renders. Yeah. But when we start the game, it ends immediately.
We're just basically describing what is happening.
But we now need to be more specific.
Oh, I sent it already. It's okay. I sent it. It's like a text. So what I would also add over here is I would also say, hey, the game starts, but it ends immediately.
I'm not able to interact with the bird. I cannot even see the bird and stuff like that, because it needs just giving it as much context as you can, because for now it kind of becomes a bit vague for AI, right?
So whenever you talk to AI, you have to be as much, think of it like providing it as much information as you can.
Yeah. Well, it's still doing stuff, so I can't tell it to do stuff until it's done doing what I already asked.
It's okay. It's okay. Sorry.
We got a good start. In like one shot, we had the UI, we had like nice looking animation for the game, and we had like the start and the restart, but then working as well.
So this is like a really good start for us. So, you know, that's something like a question I can ask while we're waiting on this is, you know, I am coming from like a marketing perspective.
So if let's say, I mean, I know this is a game, but let's say I'm creating something that I want to use for marketing.
I could change the colors to be like our brand colors.
I could change like the font to be like our brand font and stuff.
Yeah, yeah, yeah. So if you want to do that, exactly. So if you want to do that, what you can do is once it generates this, you can be more specific or in the previous prompt itself, when we said create a flappy bird game for me in that itself, I would be specific.
Like this is the color scheme that I want. This is the font style that it should be using, whatever, like whatever things you want it over there.
Yeah. All right. Now it says, I haven't identified. Anything was fixed now or should I just.
So I would say, let's take a look at what it responded in the text first to understand if it actually resolved it or not.
Right. So, okay.
So it says it's trying to, you know, understand the, trying to figure out what the problem is.
It did that. And it says like, so there is a problem in a function that is called game loop, which is basically like creating a loop for this game.
Okay. So again, if you have any questions where you can have, I'm happy to do that.
One thing I always do is also check the code, but over here, not everyone over here is like a quarter.
So I don't want to like make it a bit intimidating.
So just skip that, but we can always chat and try to understand what is happening over here.
Right. So it gives us a good breakdown of what the problem was and how it tried to resolve it.
So if you click on restart, let's try it again. Okay.
One thing let's, let's refresh this. If you see like where it is like, yeah, yeah.
Let's refresh this and let's try it again. Okay. So let's do this. Now I'm going to go and say, Hey, can you check the game logic?
It does not. It looks like it is not working correctly.
Make sure that the game logic is in that because we are still facing the same problem.
It looks like it's not working correctly. One more time.
Yeah. What do I say now? Sorry. It looks like it is not working correctly. We are still facing the problem we faced earlier.
I like to say, thank you.
So I, I, I, I do that. I do say please and thank you. But someone made me realize that you kind of are wasting tokens for this.
Tokens. Can you explain what a token is?
Okay. Uh, so tokens basically under the hood, this AI is nothing but a token.
All mathematics, right? And, uh, when you send a message, it compiles or breaks it down into mathematics and it understands that to, okay.
I'm going to take a step back and like, just forget what I said about mathematics.
So every time you send a message, one character or each character that you send to AI is kind of a token.
Yeah. Yeah. So you want to make sure you're just sending the character, which is going to be useful to it.
Okay. So no high, like no, none of this polite things that we're trying to use with other humans.
Yeah. Yeah. Which is, I, I, I mean, I don't have any strong opinions, but that is what, you know, someone like made me realize that you are just wasting tokens, which made sense to me.
I'm like. It's an interesting perspective. Yeah. Exactly.
So yeah, again, like there's no harm in saying thank you. And please, it's, there's no harm in being kind.
Right. So it's always good to be kind. That's my motto.
Okay.
So it's still debugging, deep debugging. Okay.
I see a couple of people in the chat already and they, uh, they are sending us some useful thing, uh, handle input tab, jump, update physics.
Well, okay. Someone has tried is, is I, someone has like given us a good output of what might the problem be, but let's see what AI is trying to do over here.
All right. Just the task is complete.
I will verify everything is working correctly and check for any other issues.
Okay. Let's click on tap to flap. Do I need to refresh before? I think it did refresh for us, but we can do it again if you want.
Okay. Let's, let's tap to flap.
Nope. This was like a similar experience to my last time. Not going to lie.
Okay.
But that's, that's basically what live coding is.
You try, have to try, try to break things out and figure out what's going on.
Okay. Uh, so the game is learning.
Things look fine. What we want to do is ask it to break it down. So let us say, uh, can you check the game start logic and help me understand what is going on?
Yeah.
Yeah. I said, no, thank you. This time not wasting any tokens. All right.
So it says the game starts when you, when you press the space bar, the up arrow key, or by clicking your mouse button.
That's cool. When you do this, the game state transitions from ready to playing and the game loop begins.
All right.
Does this make sense to you? No. Either pressing the space bar. So if I press space bar.
Oh, you will have to click on that screen. I think. I am. Let's try it.
Okay. Maybe like refresh it. Okay. So now I've hit the space bar. Yeah. Oh, no.
Okay. Okay. Okay. So the space bar is like doing the refresh thing. So let's click on the game again.
So click the little play button. Okay. Now if you do space bar, would it work?
No. Okay. Okay. So the space bar thing is not working. I like how everyone in the chat is also invested in this.
They're helping us. Thank you.
I love when people are invested. Someone says it's a step-by-step process.
Exactly. It's a step-by-step process. That's what we're going to try to do.
There's also a suggestion that can you try keep pressing the mouse button. I like that idea.
Okay. So what they are suggesting is when you click on restart the game, just click, keep on clicking the mouse button.
Like on re, like, like, like with tempo or hold down.
With tempo, with tempo. Oh, okay.
Oh, that was like something different was happening though.
Right? Yeah. Yeah. Yeah. You do it again.
Okay. This is what, let's don't do the tempo. Let's just keep, when you click on restart, just, uh, keep on clicking on it.
Yeah. Yeah. Click and hold.
Exactly. Oh, just do restart first and then click and hold. Okay. Got it. I'm clicking, holding.
Oh, no. Bummer.
Yeah.
Yeah. Someone is suggesting to check the code, but I want to be like a full white quarter who does not know how to code.
That's what I'm trying to do over here.
Okay. So this addition was still useful, right? Because we were moving a bit forward.
Yeah. I think that this clicking thing, this, like this, we were seeing different stuff.
See this little, this green bar is moving. Yeah. Okay. So let's do this.
So we know things are sort of working. Let's try and ask AI. How do we exactly play the game?
That is, yeah.
The tempo was working.
I think so too, but then for some reason it failed. It wasn't. It was like, so when I was doing the tempo, like the tempo and the green bars were moving.
Yeah. There was no like bird flying. So the yellow thing that you saw. Is that the bird?
I think so. Yeah. Oh no. They need to improve that bird. I will say.
I look like a, I look like a snitch from Harry Potter. Okay.
Okay. So this is how you, to play flappy pip, you need to make pip flap its wings to keep in the air and navigate through the pipes.
You can make pip flap by pressing the space bar, pressing, maybe I need to try this up arrow key and clicking your mouse.
Oh, there's a lot of things at once. I'm not a gamer. I think it's just one of them.
Okay. Okay. I'm not a gamer. Okay.
Okay. Do you want to like check if you want to like keep and keep holding it? Or do you want to like do it in a tempo?
What do you recommend? I would say this. Let's just ask AI, like, should we keep on pressing the key or?
Keep, should we press the space bar on repeat or press and hold it down?
On repeat for each flap you want.
Okay. So like the tempo thing was correct. Exactly. That's why we saw a little movement.
Let's try.
Let's, let's do another try. Yeah. Do you want to maybe use the arrow key?
Yeah, I'm going to try it. Oh no, that didn't work at all. Did it work? You moved like, yeah, yeah, yeah.
But I think what, okay, I also now, okay. I also think I know what the problem might be over here.
I am assuming it. I might be wrong, but what I'm thinking is.
You are the expert. I am. So what is happening is it is hitting the pipe way before it is like, you know, the pipe is there.
Right. So. Oh, like the bird.
Yeah. Yeah. Yeah. So, so for like the game, it's like it for some reason thinks that it has already hit the pipe while the pipe is still far away.
Oh, that's my, that's my kind of logic over here because the keys are working.
A bird is moving forward.
So we know that that's fine. But I think now the problem is with detecting where exactly, you know, the problem is.
All right. Okay. So we're going to do this.
We're going to try it one more time because the idea was not to, to build this.
The original idea is to help build something that is useful for you.
So what are we going to do is we're going to try to do this one more time and then we're going to switch gears and like start talking about what exactly you wanted to build, what tools we are going to use, how we're going to configure them and move forward from that.
Sounds like a plan. So I hit restart again and spacebar or arrow.
I would say let's, let's give AI one more chance to fix this. Okay. So what do I, what should I let him know?
Uh, so I'm, I'm thinking over here. Um, or her. That, uh, can you check, uh, the collision logic?
Because it's like colliding with the pipes, right?
Sorry. Codation. A collision. A collision. Can you check the collision logic?
Uh, it looks like the bird hits the pipe way before, uh, or way early or something like that.
It's trying to form a sentence, but I cannot for some reason. Sometimes it's hard on the spot.
Um, and especially when you're, when you're doing a live stream and people are watching.
Yeah, for sure. There's a lot of nerves involved. But what, so I'm going to, uh, talk about what we are doing now.
So we had like the game created in one go, right?
We started facing some problems. So we are now breaking down those problems in like simple steps that we understand.
And we are asking AI to like, Hey, can you check this for me?
Can you help me understand what is happening over here?
Right. So we are not just telling AI to do this. We are telling AI to fix everything all at once.
Because again, with AI, it might fail often that, you know, it does try to solve one problem.
But when it comes to the second problem, it tries, when it tries to solve the second problem, it introduces another third problem in there.
That has happened. That happens a lot. So make sure you do this step by step.
You recognize the problem, try to understand the problem and try to fix that before we jump onto the next one.
Right. So that's what we did.
That's what we're trying to do over here now. It's loading.
All right, let's try this.
Let's cross our fingers. It's going to work this time. Positive energy.
So tap to flap. And then I'm going to do the spacebar or the arrow. Whatever, whatever works for you.
All righty. I'm going to do spacebar, FYI. Oh, this is already, it looked a little better, but then it did stop.
It looks like the AI is still working on it.
If you see something happening on that, in this little, what is this called?
Does it chat? In the chat. Yeah. Oh, while this is happening, I think it happened.
It's done. Yeah. So restart. Try again. Yeah. Okay, you guys, let's all bring our positive energy.
Oh no. Let's refresh the pages once again.
Yeah. They really, if we got to the level, we would have to edit the bird image.
Okay, ready?
Let's do it, let's do it. Yes. This is it, you guys. This is the one.
Okay, we're getting there.
That's good. That's good. And while you were playing, I had an idea, you know.
I love when you have an idea. It could have, instead of flappy bird, this could be like, you know, like having a bot or a virus trying to attack your application.
And we have Cloudflare Clouds trying to defend it. Something around that range.
I like that. That would be so on brand. Yeah. I like the marketing strategy there.
All right. Cool. Okay. So as I promised, we gave it a shot.
What I want to do is not like, you know, do the same thing again and again. I want to show a few other things for the folks who are over here joining us.
And viewing this.
So as you can see, there is a button that says deploy, right? Which means that you can just click, uh, not that one.
Yeah, this one. Exactly. There's two deploy buttons.
Yeah. I'm going to talk about the other one in a minute, but let's click on this deploy button.
What this is going to do is this is going to deploy this application for you.
So you can then share the link with your friends, with your family, and they can also play this game.
So you basically build a game. That doesn't work, but.
That does work. It's more challenging. They just need to figure out the collision in there.
Okay. So I, it's deployed. Is it deployed? I, yeah, it says, uh, it should show you, show us where it's deployed.
Okay. Let's, let's try to click on deploy again.
But we should get a message. Now there's a, a no sign, but I guess cause it's already in process.
Okay. Oh, I think I know what the problem would be over here because we haven't connected it.
Uh, we haven't connected it with, uh, with your Cloudflare account because you logged in with your Google account, right?
Uh, yes. My, but my Cloudflare Google, is that not good?
Uh, no, we have to connect it with the Cloudflare account. That's fine. Uh, we, we can do this probably in the next one.
Uh, just like the deploy part, because I want to talk.
There is a lot to talk about and I'm excited when it comes to this.
Sorry. Uh, I'm just nerding out. Now you talk about like the first deploy button, right?
Uh, which is deploy and then fork. So the Cloudflare team, they built this, uh, wipe coding platform and they open sourced it, which means that anyone who wants to build their own wipe coding platform can just build and deploy it on their Cloudflare account.
So they can have the same thing on their own domain.
And if they want, they can add payment gateways. They can, you know, change the underlying, uh, AI model that is being used.
They can change the logo. They can like customize it the way they want and basically just have their own wipe coding platform.
So that's something interesting. So folks, if you want to like, if you were thinking about building your own wipe coding platform, which is hot right now, you can just fork this, deploy it on your own Cloudflare account and you have your own wipe coding platform.
Cool. All right. Uh, so this is basically how a lot of people do wipe coding.
It's like, you know, where they have, where they go into wipe coding platform, uh, and then just ask the AI to build something like this over here.
We did it. We build a game. You can do a more useful application.
That's fine. Now, if you think about an application, which Catherine, you really want to use, which is like an automation app for yourself, we want to, you know, make sure it is one secure because over here we are going to deal with people's email address.
And I am very privacy concerned person. I don't want AI to have access to the email addresses of anyone.
So I would, in that scenario, what I would do is try to build things on my local machine, but still wipe code it.
And there are tools and ways to do that. One of that we are going to see today is called windsurf.
So windsurf is a code editor. Now, if folks don't know what a code editor is, think of it like, uh, how do you call it?
Uh, Microsoft docs or like Google docs, but for code, right?
So you basically go in there, you write the code and it gives you a lot of good utility functions out of the box or a lot of good, uh, formatting structure, which you would want to have in a code editor, because if you just write code in like Google docs, it makes it really difficult to read.
And you can also not run that code using, uh, in, if you're like writing it in Google docs, right?
So you need a platform where you can write code more efficiently or in a better, with a better experience and you can run as well.
So Catherine, earlier we did install windsurf on your machine.
Should I open it? Let's open that.
Let's show people what windsurf looks like. So here is windsurf. As you can see, it's like a completely blank window.
There's no project over here. There's nothing that we can do over here, but there's, think of it like a similar experience that we saw earlier, but locally.
So that is on the right hand side, something called cascade code.
Yeah, exactly. So this is, this is where you would basically interact with the AI.
And windsurf has, I think, two different modes.
One is the code and the other one is a chat. And so we want to use chat. I don't speak code.
I speak German and English, but not code. I love that. I love that.
Yet, yet. So, okay.
Well, I was, sorry. Okay. That, that, that was a good joke and it kind of distracted me.
Sorry. Okay.
So in here, when I say about the code mode, it's basically windsurf. Just writing the code for us and we pilot or we, you know, like give instructions to windsurf and it writes the code for us.
Okay. While the chat interface, it's more like, you know, like asking questions and getting more answers for that, getting more understanding of the code.
Right. So it's different. So it's different than like what we were just doing before when the chat was actually actioning things for us.
Yeah. Yeah. Yeah. So over here, the chat is just chat. It's not going to write anything for you.
It's just like a chatbot that's giving you advice, but it's not changing anything.
Exactly. While the code mode is what we did earlier. Yeah. Got it. Okay.
So we, we don't have a lot of time. So we would be, what we would be doing is we would just, you know, like take a explore windsurf a bit.
Right. Try out like the chat mode and probably the code mode.
And I want to also show one more thing, which is going to be really useful for folks who are white coding and want to deploy on Cloudflare.
Right. So the first thing as we see over here on the right -hand side is the, is cascade.
Right. And this is where you can like basically interact with this.
Now just below the text box, you see there is code written. So if you click on it.
Sorry, where? Yep. I click on it. It says now you see that option.
You can switch between chat and code. So let's go to chat. We can do chat over here.
And that is also an option to change the model. So if you click on GPT 5 .1, you can see all the models that you can use with this.
And how do you know which one you want to use for like, how, is it just a taste thing?
Is there like certain things that are better for different activities?
I like that question.
So the interesting thing is that these models keep on, you know, like improving every day.
So the one thing is you kind of want to like keep check of which is like a good AI coding model.
The other way is like try to, you know, use few of these prominent models and see which one works best for you.
So far I have been using Cloud.
So there's Cloud Sonnet 4.5. Yeah. That's the model that I have been using.
So thinking basically is going to like let AI think a little bit first.
It, you know, like proposes a solution.
So that's what the thinking is. It's going to like say, hey, okay, let me take a step back.
Let me try to understand the problem. Let me try to find more resources for this and then write the code for you.
Right. So that's what basically thinking does.
We can just go with Cloud Sonnet 4.5. In my experience, it has always worked well.
The GPT 5.1 model that we had earlier. So if you open that, there is like GPT 5.1.
Yeah. So this is like the latest model from OpenAI.
I think they announced it yesterday. Oh, wow. So it is like. Fresh off the press.
Fresh off the press. Exactly. So we can play around with that as well.
So any model you want to try, we can do that. Uh, but what we want to do is this.
Yeah. Let's just go with GPT 5.1 and let's just ask, uh, let's just, you know, try to build a plan for our application.
So give it a description of what you want to build and ask it what, or maybe just how we can build it.
Just, you know, do that.
What do we want to say? We want to build, uh, the automation app that you want.
Oh, okay. I want to build an app that pulls the attendee list.
From past events that took place in the, I want to say like same city.
And automatically invites them to events taking place in the same city.
Does that make sense?
Or should I reword that? This for me, it makes sense, but I would also give more information now, like what platform you're using.
Because we are using Luma.
Yeah. So list in the platform Luma. Yeah. All right.
Now, one more thing, because we are going to build and deploy it on Cloudflare, we want to also specify that so that it looks into our products, looks into like what Cloudflare has to offer and what we can use for this project.
Use Cloudflare.
I took out, please. No tokens. Um, use Cloudflare to build and deploy. Yeah.
Anything missing? So there is nothing missing over here. Now, if we, if we, you know, just ask this question, what it will happen is AI is going to like try to answer it based on the information it has while it was trained.
Right. Now, I don't really know when GPT 5.1 was trained, but at Cloudflare, as you know, we ship new features, new products almost every week.
So AI would not have that information.
So how do we give AI that information is one of the challenges that I think the industry is trying to understand now.
And the solution for that is giving it access to our documentations MCP server.
So, uh, if you go back to Chrome, I'm going to ask you to like do a few more steps.
Oh, here's Chrome. Yeah. And if you go to developers.Cloudflare .com.
Yeah.
You can do that.
And just on this, in the featured section, you'll see that is AI tools.
Yep. You can click on that and you can see how we are trying to make it easy for, you know, people who want to use Cloudflare and who want to wipe code applications to, for this.
So that is lls .txt. So let's just say you just want to have one particular product that, you know, you want to use and you are letting, and you want to provide the information of that particular product to AI, you can just copy the lls.txt page for that and just send it to AI.
This basically is going to give AI the reference to that whole documentation.
So I would copy all of this?
No, because we don't know what products we want to use. We want AI to have access to our documentation.
So if you scroll down again, that is this MCP section.
Yep. Yep. So over here, MCPs, you can add to any of these coding platforms. What we want to do is if you just click on windsurf, it's going to show you the steps on how you can add it to windsurf.
Now I already know the steps, so we can just skip that.
If you again go back to our documentation. So I go back to windsurf? No, let's go back to our documentation.
We'll have to change the tab, I think. How do I go back?
Oh, just change the tab. There's already the tab AI tooling. Exactly.
Sorry. And if you click on manually. Yeah, there is a link. I'll just copy the link, the link.
docs.mcp. Yeah, just copy that. No, no, no. It's going to copy the whole thing.
We don't want the whole thing. Oh. You can just copy that particular link.
Which? https://docs.mcp .cloudfire.com So that's mcp. Yeah, exactly.
I just copy this and now let's go to windsurf. Back to windsurf. Oh, that's not windsurf.
Here it is. Now if you see on the top in Cascade itself, there is like this plug thing.
Yeah, if you click on it, it allows you to add mcp servers. So if you click on mcp marketplace.
You can now, I'm trying to see where is the option to add a new mcp server.
Settings?
No. Maybe, yeah. Let's click on that. Oh, okay. We can, let's copy and paste the whole thing that we had earlier then.
This would be easier. See, you know already stuff.
I did something correct. Okay, so then I'm going to go. We want to go to AI tooling again.
Let's go to AI tooling, our documentation page. Sorry, here.
Yeah, just copy that, that you did already. Oh, I just do this copy. Click here and then paste.
And then save it. Where do I save? Just do command S. It should automatically figure that out for you.
Yeah. And now you can close that. No, I close, like hit this X button.
Yeah. And that is an error. Okay, there might be an error because of the configuration.
So I'm going to quickly check it on my end. What the error would be?
Fail to create mcp. Okay.
Okay, it's trying to do STDI.
Okay, I know what the problem is. Okay. All right. So we don't have something called a node installed on your computer right now.
And that is why we're running into this problem.
That's fine. But basically, this is the step of how you can add the MCP server in WinServe.
And node is something we will be installing in the next episode because that is what we want to do.
So we are also almost on time.
So Catherine, can you do a quick recap for me? And if you have any questions, ask as well.
Yeah. So today we used workers, right? Yeah. And that's what we used.
And we told it. Basically, we were chatting with them, him, her, I don't know.
We were chatting with the platform and told it what we wanted.
It made something. Was it correct? Did it work? Not really. But it was a cool experience.
We got some ideas. And yeah, so that's what we did first. And then we looked now at WinServe, chatted with Cascade, and told it kind of about, we haven't actually messaged it, but we now know that we tell it what we kind of want, be as specific as possible, adding all the details, let it know, and then it will give us suggestions as to what we should do.
It won't make any actions, but it will give us suggestions as to how we can go about building this automized tool for Luma.
So yeah, I'm excited to see where this goes. And I want to thank you, Harshal, for being so patient with me.
I know that I'm not the most technologically savvy person, but I'm learning and I'm really excited that I get to do this with you, Harshal.
I mean, after this, I feel like you already know everything. You really summarized it well.
You built a game in like, what, 30 minutes, which was fantastic.
So you are already there. It's just, you know, like me just showing you the right direction.
I'm not doing anything. You are doing everything. So you have been doing a fantastic job.
So a couple of quick things from my end. So if you want to try out building your own application and deploy it on Cloudflare, you can go to build.Cloudflare.dev.
That is our own web coding platform. You can play around with it, try to build your own application.
You can also have your own web coding platform.
So if you go to build .Cloudflare.dev, there is an option to deploy or just go and check out the GitHub repository.
So you can do that as well. The last thing is, we have all the MCP servers that you should use for your, with your web coding platform to make sure you are, you have all the, or you are providing the correct context to your AI agents, because these agents have been trained with the data, which is of the past.
They don't have all the recent information.
They would hallucinate a lot. So giving them information or the latest information is going to be really useful when you build any application with AI tools.
So with this, thank you, Catherine, for jumping in. I hope it was fun for you. And now you're more relaxed and you are like excited for part two, because I am.
I'm excited.
Thanks, Harshal, for inviting me to do this with you. It's been really fun and I'm excited to finish.
Awesome. So in the next one, what we are going to do is we're going to now actually start building the application that Catherine wants.
We're going to do it step by step. We may hit into issues. We don't know because this is happening with AI.
It's really undeterministic. So let's see how that goes and let us know what you want to learn more from this series and what more we can help you with.
Thank you so much and see you all next time.