Vibe coding with Windsurf | Vibe Coding with Catherine and Harshil

W coding with Katherine and Hersel. I am excited for this episode. In the first episode, Katherine, what did we do? What did we do? Oh my goodness. Um, we learned a lot of stuff. So, we first thing that we tried to learn was so we used windf um workers and we um tried to vibe code Flappy Bird. My key word being tried. It didn't go that well, but it was an interesting experience. definitely learned um a lot of stuff and it was cool to um use these tools for the first time and Harshell is a great teacher and very patient so it's fun to work with him. Awesome. Thank thank you so much for the compliment. You have been doing fantastic. I have getting like a really good like you know response from folks like hey we want to see more. We want to learn more and Katherine is amazing. So let's you know do more of these things. I'm excited to do it with you again. Uh and the tools that we used in the first one was build.cloudfare.dev. Say someone wants to try to wipe code that application. You can just go in there, ask the AI to build an application and it's going to do that for you. Once you're happy with that the okay you can also try the application within the platform itself which is fantastic. So you can try it out in the platform. We try to play the game in the platform itself. uh we were terrible at the game and but you can also deploy the application once you're happy with the changes or with the application itself and it gets deployed to your cloudfare account. So that's what we did in the last one. We also looked into winds serve as Katherine mentioned and we tried to set up windserve with uh the cloudfare mcp cloudfare documentation MCP server. We ran into an issue and that was that we did not had NodeJS installed on Katherine's laptop. Now for the folks who don't know what NodeJS is, it is basically think of it like a programming language similar to Python, Java, C, C++. You might have heard a couple of these names, right? So you can just go search uh on Google how to download NodeJS. Oh wait, why am I saying Google? You can ask AI how to download NodeJS because AI is going to give you all the step-by-step instructions and you can download it. We have done that before the live stream because we thought that would be a better way to like focus main on the wipe coding part of it and not on the installation part of NodeJS. So, Katherine, are we ready? We are ready. Let's do it. Let's do it. Awesome. Uh so, Katherine, uh let's open up and let's share the screen. I'll share my screen. Yeah. Here's one surf. All right. So, we have wind surf open over here. Uh, now I think Katherine, you you were asking me in the chat like what is windsurf? And there was another question with that. Uh, yeah. Like what what is windsurf? Are there alternatives to windsurf? And these were kind of my questions. So, Windsor is think of it like uh you you use Google Docs and Google Sheets to like you know like manage your event stuff, right? You whether if you're writing some kind of like an article or something, you use Google Docs. If you are like creating tables for your events, you use Google Sheets, right? Sheets. So, think I'm a big fan. Sorry, I'm a big fan of Sheets. I love to make Sheets. I I I want to learn how to use sheets from you one day. Oh, it is it is a fun thing. I love it. So coming back to windsurf, think of it like an application which allows you to write code more easily in a more systematic way because in like the applications like Google Docs or Google sheet, you are actually using English, right? So it's more easy for you to understand what is going on. But in programming, it's English but not really English. you know there's like syntax there's a different format on how you write things and stuff like that so you need a special tool for that and that is what binsf does over here cool the fun thing so it's a translator in a way kind of yeah you can think of it as a translator it does not really I the way I like to think about it is it's like a Google doc for writing code okay yeah because we are not like it's not translating anything for us it's like helping us write the Okay, thanks. That's Windsor and the good thing about Vinsurf is that it comes with like the AI tooling in itself. So, uh in the last uh episode we saw something called casket that winds has so it is like oh yeah awesome. So you already have casket open in here. So you can basically chat with AI. You can tell AI to do you know like build stuff. Let's try something. Let's try asking a question. What do you want to know? me. Yeah. I don't know what I want to know. Um, how long is it going to snow today? [laughter] So, that's that's a fun thing. Uh, okay. This also that's like a fantastic question because while you can ask that question, the chat interface in Windsor is mainly uh fine-tuned or it's prompted to work better with code. So if you try to you know ask it to do like a very general stuff it is going to do it but it's not going to be as efficient as you do it in like I don't know like just the in in Gemini right because it's very much prompted to be a like a code assistant for us. Okay. So so is this a bad question to ask? We can we can try we can try. There's not there's no bad question right under the hood it's basically AI. So if it can answer it it is going to answer. If it cannot answer it is going to hallucinate and give us like a wrong answer. Okay. It will try it. It's going to produce something right. Exactly. Exactly. So before you do that, can you like uh use the command uh the command key and the plus icon to zoom in with your screen? Yeah. Just one more maybe. Awesome. All right. So like let let's ask it. How long is it going to snow today? Yeah, let's do that. In unit. Perfect. Right. I I like how you specified the location. Let's ask this and see what it does. I've never done this before, so I'm going to I'm also very curious what it's going to do. Ooh, as you see it, it is now using like a tool which it has which is like a search tool. It is going to search the internet. So, it's going to this weather.com website. It is trying to find that information. And now it is giving you that information over here. Now this becomes really useful when you are you know like doing anything with code because we are doing stuff we are building stuff uh and we don't know what really want what we want to do or if we are stuck with something right so what this is going to do ideas exactly so uh if let's just say we want to do something with cloudy workers we don't know what it does we can ask wind of uh or cascade over here and cascade is going to search the internet for us and give that information. Okay. So, it's asking me now if you tell me roughly what time it is now for you, I can narrow it down from until when about x:00 it may snow. So, should I tell them it's um 3:00? So, I'm helping it to narrow down its thinking. Is that what I'm saying? Exactly. Exactly. So, you are giving it direction. You are not just you know like saying hey tell me this it tried to get the information for you but it understood all right I have this information but I don't know what time is it so I cannot give the precise answer and that's why it prompted you to you know give a more direction or over here ask for like a question right cool and that's also cool news three to five more hours of snow that's exciting wow I am jealous and not jealous at the same time it's the first snow of the year I love it it's Like in Berlin we did not get snow, but I I I went for a walk after lunch and I saw like a bit of snow. So I don't know when it actually snowed. Oh. So I think last night it did. I'm looking at it from the window. So that's my thing. I'm so jealous. I'm so jealous. Hopefully hopefully in Berlin it's going to snow. Let's see. It will. All right. Uh now before we move on to the next part, I see there is a question in the chat. Uh they're asking what's your go-to model currently. So for me I have been using cloud code a lot and cloud code is like my go-to thing. So I would say sonnet 4.5 is my go-to model. Uh is it in here cuz I remember last time we were looking at that. Yes. So if you see there are a lot of options that 4.5 thinking. Yep. Exactly. So that's another good thing with venerf over here is that it gives you options on you know like the models that you can select. If you use a tool like claude code which is my favorite by the way you are stuck with only the models that claude provides. I think there is a way that you can also have more models in there. I'm not 100% sure. I haven't tried that but that's one thing. So last time we kind of talked about how these are like different tastes. So like if you have different tastes, you will use different like different things. So do you get to like the more you play with them, do you start to learn the tastes and then you kind of develop your own palette, you know, like you're like, "Oh, I really prefer this and I prefer that." And it's like a personal choice, do you think? Or do you think like there's different ones you'd use for different tasks? That's a really good question. uh hm and so the way I try to do it is so one thing in in my experience I have understood is that these models are good at a lot of stuff but you need to know how to talk to them so the more you use a model the more you understand how that model works so I I'll give you an example uh of how I use uh sonnet 4.5 so I it's a wonderful model it works for me but the reason it works for me is because I provided all the required tools. Now in the last uh session we tried to you know have an MCP server added to cascade. So let's try to do that again because that is one of the tools that I provide to sonnet uh that because that allows sonnet to have all the context of our developer platform. Gotcha. If I am using any of our products let us say R2 D1 workers cues durable objects whatever it is now set has the context set has the information. So it knows it goes through that documentation understands what it needs to do and then does the job for me. So that's one thing. The other thing is people try to you know like build like a full application in just one try which hardly works. Yeah, we learned that last week. So the way I like to do is is set up the like the base of the project which we're going to do it uh today as well. Once we set up that base of the project, we're going to like try to do one feature at a time. So it's not like overwhelming the model. Because if you think about just like a developer, right? If you throw a developer like like a full stack application like, hey, build me this Mhm. Even as a developer, we break things down into like different steps. And it's it's not just for developers. It's like for any kind of role you do, right? I'm I'm sure with what you do with events, you also have the same thing, right? Absolutely. So that's what we basically want to do over here, like break things down and give our AI one step at a time. All right. Uh I've been speaking a lot. Let's to take a look at the MCP server that we tried to configure last time. Do you remember how we did that? Oh, I just remember we did it and it didn't work. That's what I [laughter] No worries. So, I think if you click on like the how do you put the pl the plug icon in the casket. Yeah. Uh let's go to let's let's click on that. Uh on the top there is like this icon. I don't know how do you call it? The settings icon I think. Oh, this is what we did last time. See? Yeah, we did it last time. Let's see if you can close it. Close the casket for now because I want to see the whole Close the casket. Sorry. How do I do that? So, as you see there is like this X. No, no, no. That's going to close the MCP config file. That's what I should do. No, no, no. We want that open. So, if you go to casket, the chat window where you're chatting, there's a button to close that. Uhhuh. On the top if you go. Yeah. Perfect. Gotcha. Sorry. Otherwise, uh it's it's difficult to, you know, like navigate when you're on the live stream. It's completely fine. It's completely fine. It's not. Okay. Now, see, we have this running. Uh let's just do command S to save this. Uh and you can close this. And let's open Cascade again. Close this. And how do I open Cascade again? Just click on the W sign uh next to search. Yep. Okay. Uh I'm just trying to think think over here. Let's click on the icon again to just see the MCP servers and click on Can we click on? Yeah, let's click on that. Yeah. Yeah, let's click on the cloud file one. Oh, sorry. It's okay. red. Okay, let's try to click on the disable thing to see if it can we can enable it. Nope. That is interesting. Okay. Uh if this is not working, that's completely fine. I am going to try to figure it out why. But let's let's move on to the next parts. For this, at least we can have like the base project setup and try to add one feature in here so that you have your app to with one functionality. How does that sound? Sounds great. whatever you I'm trusting you here. You're my guide today. Awesome. Uh all right. Okay. Hopefully I figured this out. Uh but while we before we do that, do you want to like do a recap of what we want to build? Like what you want to build? Yeah. So um as we discussed last week, um we use a platform called Luma um for our event registration. And something that would be really helpful is that when we're planning an event in a specific city that we're pulling from that registration from other events that we've had in that city, we're pulling from that registration list and we're automatically inviting those people to the future events. Um I know we talked about we all can relate. We all have jobs or we all have tasks within our jobs that are very time consuming, take some time. Um that would be super helpful if they were automated. So this is one of those tasks. Um, I was talking with Harshel about this in the past and he was like, "You can do it yourself." So that's why we're here. [laughter] Awesome. I I I love this. So, uh, let's do this. Let's take it step by step. The first thing we want to do is try to create a simple Cloudflare application. Right? So, what I want you to do is uh, and I'm trying to think if we can do it within windsh uh so if you see that I is or or maybe we can't just try to do it with that give me a second just trying to find the easiest way to do it take your time one step at a time as you said right exactly uh so if you hit commandshiftp on windshuff it is going to open up a panel awesome And what we want to do is we want to open up a new terminal. So this is what you see a lot of developers doing. Just use the terminal. So let's just uh search for terminal. Yeah. So you can click on create new terminal. It can be passed. That's fine. So what are the like what's the um the difference between all of these? Uh so it's basically how you want to use this. There is like there are like different profiles, different ways of you can configure like a terminal. Everyone has their own preferences. Bash is like the bare bones which is like think of it like there is like no batteries included. So you know it gives like a barebo thing. You might want to add more plugins by yourself. ZSH is very popular. It's open source. You can uh add ZSH which will give you a lot of like shortcuts which makes it easier to use your terminal. You can also uh use that to make your terminal look pretty. So, you know, if you want to like have some fancy things going on in your terminal, you can use that. So, those are like all the different kind of options you can Okay, cool. So, one thing I'm learning is I guess there's a lot of like taste. So, it's kind of like user taste involved in all. Now, you might think we developers don't have opinions, but we have a lot of opinions when it comes to our stuff. Actually, one thing I'm learning is it's much more artistic than I thought. So that's like a a positive for me. I love that convincing you. I'm bringing you to the developer side. I like that. Uh maybe just let's see uh if you can do jet sketch. I I'm not sure if we can but let's do Yeah. So the second one. Okay. Perfect. So now that we have it in here, what we want to do is we want to create a new Cloudfare application. Yeah. Yeah. And to do that we will be using our own uh CLI tool which is like a command line tool called C3 or create Cloudflare. So if you do npm where where am I typing that? Sorry. Yeah, in the terminal itself. Where is the term? Oh, I lost the Oh no, it's it's just below like the custom MCP server if you see that. Oh, this is the terminal. This is the terminal. Oh my gosh. [laughter] What am I supposed to type? Uh just do npm Oh, space create space cloudflare and just hit enter. We going to hit enter again. So what we doing is installing the cloudfare package in your project uh in your uh laptop and then what do you want to call this project? What do we want to call like Luma registration invites or something? Luma. Oh, you can just call it I think Luma automation or something. Yeah. Where do I type stuff? Yeah. Just just start typing. Uh so okay now because you did that one thing uh you can hit enter but it is going to give you kind of an error or it is going to do it automatically. Most of the time you cannot have a space. So I need you to have no space. Yeah. But can Oh, I can't go back. Um, the other way you can do it is have luma hyphen automation. There's there's different ways on how you want to do stuff, right? You don't have to really do that, but just like Yeah. Another option over here. Yeah. Then you can just hit enter error. Uhhuh. As you can see, it also should contain only lower cases. You have upper case in there. Oh, and no dashes. But it dashes. Okay. Sorry. Okay. So, yeah. So, it has to be. Yep. Enter. Enter. And now we give you a couple of options, right? How do you want to like start with uh if you want to like have a very barebone application? If you want to have a framework, uh if you want to have like an application starter, so let's just you building like a very common application, we have templates for that as well. Or if you want to get something that someone has already created and that is open source available on GitHub, so you can do that as well. in here I know where we what we want to do and what we want to do is like have a framework because we don't want to install all the things by ourselves. So let's go ahead and select the framework starter. How do I click on it? Uh you can just use the arrow keys like ah wow okay and then I hit enter and then hit enter and it is going giving us all the uh list of frameworks that you can deploy right this is like list but you can do more than this over here and one of my favorite is hono obviously is it obviously why obviously because it is very easy to use It it does not require like a lot of for me it does not require like a lot of thinking because I have been using it for a while. So it's like quite straightforward as well. So it has like for me this is another taste question. So like different people have different tastes here also. Exactly. Exactly. Also it depends on what kind of application someone is building because this is like a simple application we want to use for ourselves does not have a lot of complexities. Honoi is for me like the perfect framework. Often times people select a framework for like a simple application which makes things complex. We don't want complex please. We don't want complex. [laughter] All right. So let's hit enter. It is going to do uh hono. Yes. Let's enter this. It needs to create uh install the create hono package. So we can do yes and now it's thinking. Awesome. So uh if you remember in in the last episode we just asked AI to you know create a project for us. Or like create the uh the flat the flappy bird game for us. In there there was a step which was called bootstrapping the project. This is what we are doing over here. So we are basically bootstrapping the project. Uh for now I would say do a no because definition of bootstrapping. Sorry. Can you give me like a definition of bootstrap like bootstrapping for dummies like what what would that be like? Uh think of it like just setting up uh your project or think of it think of it like setting up like the Google Docs for your article that you're doing or like the sheet that you are you know like creating for the event right or if you want to take it in a different direction. Uh think of it like creating a event on Luma which is still not public right but you are like still configuring it's draft mode. Exactly. Okay. Yeah, for now uh I don't know if git is installed on your machine. So let's just go with no. We can likely no. Yeah, we can figure out that later. So let's do a no. And we can deploy it on Cloudfare. But for now also let's just keep a no. All right. So we have our application installed or bootstrapped over here. Bootstrap. Exactly. Bootstrap or set up over here. Right now what we can do is um we can open this application in windsurf. So in the terminal itself if you write winds serve and do a space and then luma hyphen automation and let's just hit enter and now okay we don't have that configured that's all right we can do it another way if you click on the open folder option on the left yeah Uh, okay. I am trying to figure out where it created the application for you. Can we do a search? Let's do a search. What should I search? Luma. Luma. Yeah. Oh, okay. Just select it and click on open. Click on just open. Yeah, just click on the open over there. Boom. Boom. And yes, we trust the author over here because it is asking like hey this is a project that I don't know I have not used before. Should I trust it or not? That is one good security practice that you should do if you are just using someone else's code from the internet. Make sure you just don't trust it blindly. All right. So we have the project in here. Uh do you want to ask try asking questions now to Cascade about this project? Yes, we want to use cascade because I don't speak code, right? So, I click on this one. Uh, no. So, click back. That's a new option for me. I would say just open up the cascade window. So, I'll close this. Yeah. Close this. Where's the cascade from? Just click on the W uh. Yeah. Now what what what do you want to know about this project? What do I want to know about this project? How to do it? Awesome. So let's take it step by step. Let's ask casket like hey this is what I want to build. I want to deploy it on cloud workers. Uh like I'm just saying I'm just saying it out. We can verbatim. My bad. Uh [laughter] so what we're going to do is we're going to tell it hey this is what we want to build uh I want to use uh the cloudfare developer platform and it should be deployed on cloudfare workers. So we want to give it context right and then what we are going to ask it like what are the things that I need or how can we build this. So we're going to ask it right we are not going to ask you to directly jump into building it. We're going to ask it to what are the things what are the step by steps exactly exactly to better understand how we can break this down. So as much as my instinct wants to say hey to cascade I now know from last time that it uses tokens. So, I'm not gonna say, "Hey, I'm just gonna say go right into it. We or I maybe we we're a team. I want to be a team with you." So, we want to um use Luma, the Luma platform, for our events. Is this making sense so far? Yeah. Yeah. I can't spell. Oh, for our events and invite. Oh, and period for new events or for future events. Does that make sense? We want to pull from past registrations. that take place in the same city and invite the same folks to the new event. Does that make sense? Oh, I feel like that doesn't really make so sense. Does this make sense, Harshell? No. Yeah, it does make sense to me. I'm curious to know from the chat if there is something we can improve in here. But this for me, let's ask let's ask our audience. I love audience participation. Let's see. Yeah, I'm I'm keep an eye on the chat. Uh let's let's still continue like adding more things over here. Wait, I shouldn't do like enters and stuff because that's also taking tokens, right? Yeah, I would say yeah. I mean, it's still fine. You can do it. You don't have to be too conscious about the tokens. Yeah. Yeah. Because last time I was saying please and thank you and stuff and you were like not sure. Um Okay. So then I want to say can we also want to specify that we want to use cloud developer platform for this. want to use Claude developer Cloudflare. Cloudflare developer platform to build for this. I would say to build this build to build this app app on workers. Yeah. Yes. Perfect. Now I say please no please give me a step by step for how to do this a detail or just like this. Should we ask the audience if they have any um feedback before I send this? I don't see any messages popping in. So maybe we can go ahead with this for now. Okie dokie. Let's see. So again, this is like the good thing about using AI. Don't just go and you know like ask AI to build stuff. Ask AI to break it down for you. Try and understand what is needed in here. because I have built applications like full-blown applications with AI and that it tried to add features which were not needed and when I was trying to look at the code to understand why is it here it took me a while to like understand and at one point I was like okay I'm just going to leave it over here it's like too much work for me I'm going to come back to it later and I never did that so that's one thing that you want to be make sure like you know break it down and see how it works one thing that I like about them breaking it down is you know I I really like I my p my history I'm an artist like not artist but like I study music and I really like creativity and stuff and I've always been very very fearful of AI taking away creativity but I think actually like having that break step-by-step breakdown it allows you to also be creative in a way where you're like I want this I don't want this and it gives you more options you know as opposed to saying do it and then it creates something without your input you know there's still that like human aspect which for me is something that I've always been worried about with AI if that makes sense. Sure. Uh so it looks like there's some steps. I'm scrolling up to the top. Yeah. Let's go. Wait. We still have to go on the top, I think. Oh, wow. Okay. Yeah. Yeah. Yeah. This is going to take a long time, Marshall. I don't know if we can do this in an hour. [laughter] We got only 15 minutes left, FYI. Oh, we definitely don't have time. Okay, come on. Got to speed it up. put this into what? So the flow is the input can be like a new luma event in the city X. So X is over there. Uh input uh pasta registrations from the events in the same city. All right. The output is invitations to those people. All right. So what do we need? Let's scroll down a bit. It says we need uh to store the pass registration. A way to get new registration. All right. Okay. I I can tell that this is going in the wrong direction. In the wrong direction. Yeah. If you scroll down, let's just go scroll down a bit more again. Yeah. Okay. So, this is going in the wrong direction because Luma provides us with API. So, we can use clarify maybe. Okay. What what what do you want me to clarify? Do I need to clarify like to the the machine to this our friend here cascade that Luma already has API? Yeah. Yeah. Luma already has API so we need to specify it like hey Luma already has API and we want to use that and while you do that I'm going to ask like explain people what API is because again this is a stream for everyone. So if you're new to you know uh developing any application we got you covered. So uh API basically stands for application programming interface which I which I kind of got uh recalled by Katherine. Katherine knows what API is. Uh but the way it so the main functionality of an API is to allow different systems to talk to each other. Right? Because we want to talk to Luma. Lumman needs to provide us an API. So think of it like a service. You call up a restaurant, you ask for a delivery uh like you ask for like them to get you some food. They send uh like a delivery person to you, right? So either they are providing that service to you which is like delivering the the food from their restaurant to your house or they are tying up with like a third party service which does the delivery for you. Right? So think of API something like that which is kind of delivering the data from one service to the other service. Does that make it clear? It's harsh. So while you were explaining API um we got a new some updates. So, I'll scroll up. No, I think I think you were going on the very top again. Okay. Okay. So, it's it keeps the history. Sorry. Yes. Okay. Uh, so this is where we want, right? So, Luma just sends a web hook to our worker. Expose our API. your worker calls it or backfill details invites HTTP endpoint for Luma web hooks. Does Luma have a web hook? I am very skeptical about this. What is a web hook? That's a good question. That's a really good question. Uh web hookbook is something I really love and I wish every API had that because what web hook allows you to do is let's just say you build your own uh okay think of it think of webbook as something you know that is calling you to give you an update as simple as that right so that call you to give you an update yeah so let's just say you you have like you know you something wonderful happened and you want to give me an update you call me up you give me an update think of that as like a web hook Right. So in this context it is going to be maybe someone registered on Luma. So Luma calls our application. Exactly. Calls our application and says hey this person registered these are the details and then we can go ahead and save it in example D1. Cool. Right. So that is what a web hook is. I love that question and I love web hooks. Okay. [laughter] All right. Uh I still don't think this is giving us the correct answer. Oh no. Yeah. Again this is AI. This is what happens. And that is why you never ask AI to just build an application in one shot. Always break it down. So the reason why it is not giving us the correct answer is we already have the data saved in Luma. We don't want to like duplicate that data and save it on like a database itself. Okay? Because then it's going to like you know we have to manage it keep make sure that we have all the uh correct data in our database which is a different hasher altogether. So a better way to do is just like use the data that is in Luma. So let's do this for now. Uh if you can open the documentation for Luma. I did share the link with you earlier. Uhhuh. You did you did? Yeah. Exactly. All right. So, this is uh the documentation. Now, almost all APIs out there which are like public facing APIs have some sort of a documentation that you can view uh and understand what the capabilities are for an API. That's cool. On this page we are seeing that you know how you can just kind of get started here. What do you need? So if you're using Luma you need like a Luma plus subscription which we already have configured. You need an API key which is like a new thing. What is an API key? So the API key is like a secure password which allows you to use that particular API. So whenever let's just say if you know if everyone has access to the Luma API everyone has access to everyone's data because in Luma you have your name your email address right also the city where you live that's a big thing we want to protect especially in AMIA exactly so we want to make sure that this data is secure uh but still people can use it so if you have an API key you can use the data which is kind of related to your uh events. Mhm. Does that make sense? Yep. And then how do I like generating an API key? Is that like how do you how do you get that? So different uh applications have different ways of generating API keys. Uh for Luma as it says over here, you have to go to the Luma dashboard. You have to click on generate API and then copy that API. One thing it also says that store it securely. So these API keys you don't have to you should not share it with anyone unless you know you're building an application with them. There's like a different process for that but you basically don't share it with anyone because if you share it with the people out there they now have access to the data to your data basically and you don't is there a way to destroy it if like that accidentally happened? Yeah. Yeah. A lot of again this uh providers they do give you uh the flexibility where you can delete an API key. So excellently maybe you you know expose it you can obviously delete that. Uh one good recommendation is also to like keep on rotating those API keys. So let's just say every six months you can you like update the API key in your application so that if even if it got leaked without your knowledge the person cannot access it uh after like the time period uh because you now have a new API key for this. Security is important. Security is really important especially when you build with AI because I have seen people exposing their API key and then anyone can just use that especially I saw that uh with someone exposing their open AI's API key. So if you have that you can basically use someone else's open AI uh credits to build your own chat application. Oh yeah yeah that's that's scary. Yeah not good. So if you are building with uh AI, please please please make sure that you are not exposing your API keys. And if you're not sure if you are, ask AI. AI knows that. Ask AI. Ask it like, hey, now that we have the application running, now that we have stuff going on in here, how can we make our API key secure? Just ask that and AI will help you with that as well. Okay. So what we going what we going to do is we have like not a lot of time over here. So let's copy the link for the docs. This uh no no on the top you can just copy the link from the top. This URL uh no on the top from the browser itself. Oh this and then just go to windsurf back to our buddy Windinsurf. this. Fantastic. Now tell Vince of here is the documentation for Luma's API. Did I spell docu? I can't spell. And then I just and then paste it. And then uh I also tell it that we want to use the resources from Luma. We don't want to duplicate the data. We don't want to duplicate the data. Right. Now, as you can see, it created a to-do list. All right. Now, I have a list of the Luma API docs. Let me go understand what it actually does. uh once it does that it's going to move on to the next step which is like try to understand how it can work with start workers and then it is going to give us uh the outline. So it is now creating the outline which is good. Let's wait for a couple of more seconds. All right. All right. All right. Let's see. It's diving into that. That's good. pseudo code. Okay, let let's go on the top. This is like the 10th step. Yeah. Okay. And I don't really like what it is saying. Oh, that's not good. Okay. Uh statistics boy. Oh wow. Okay. A lot of steps. There's like steps within the steps. That sounds complicated. Okay. So the core idea is source of truth is going to be Luma. Detect a new city in an event. That sounds good. Qu Luma to find people who attend past events in that city. That's good. Askuma to invite those people. Exactly. And optionally keep a tiny log of who we invited for which event. So we never double check. I like this. So it now got the understanding of what we need to do. Yeah, this is correct. The core idea. Thumbs up. Awesome. Let's let's go and look at step two. Uh all right. It says you have to do this. It's like showing us the steps. That's fine. Uh get from Luma. We need that API key. We got that. It also is now showing how you can securely have this uh in your craftware project which is good. We want to keep it secure. So we know that AI knows that step. Let's move on to the next one. Decide how to trigger the flow or even created web hook. Web hook. You're right. Okay. So this is the step I think where we would have to give more input. So what uh for the interest of time what we can do right now is ask AI to create a document and save it save this plan in that document and I'm not typing it but I'm thinking because I'm not wasting those tokens [gasps] you know I think it's it's it should be fine that I I know. But I It stuck with me when you said that. It It kind of stuck with me when my friend told that to me as well. So yeah, but I think it in my head like I I'm I feel like it knows that I'm saying please. Does it? I don't know actually. [laughter] I'd like to imagine so. Okay. So it's still exploring sailing. kind of walking on that. Uh, I like that it says sailing cuz it's called wind surf diving. It's like very Do you get it? I don't know if they did that on purpose. I got it. I got it. Yeah. I'm not sure if it's on purpose, but I do find that branding pretty cool. Like swimming, wind surf. I think they did it on purpose. This document is intended. Did it? No, it did not create the document. Uh, I think it is asking us to do that. If you scroll up, scroll up, scroll up, scroll up. I think I know why it is not creating a document for us. Uh, let's do let's do this. If you click on the chat, you remember how do we change the Yeah. And let's go to Yeah. Yeah. Let's click on that and let's go to code and let's ask that again. Create the document for me. Yeah, please create this in a document. Yeah, that's it. Yeah, that should be it. I did say please but it's good. It's okay. Uh and while that is happening uh one thing to mention about the MCP server I think that are like two different reasons that might be the issue. One is something to do with the network. So it might be like something is blocking uh on your computer to access the MCP server. That's one theory. The other thing is we can always ret try and restart Windsorf. So hopefully the next time we are on the stream we're doing this uh because that would be like a restart of winds we can use uh the MCP server. So yeah because it is working sorry go ahead I said sounds good. Yeah because it is working on my machine. So I'm pretty sure it's nothing to do with the MCP server. It's it might be something you know like we might have to just restart. Okay. Woo. And it created a dog for us. All right, for now let's just accept all. So we now have this plan in here which we can use in the next live stream. Do I need to save it or it's automatically saved in there? It's automatically saved in there. So if you see now on the left hand side, there is now a new doc lumd invitation plan. I see. Cool. Okay. Thanks. Awesome. All right. Uh so we are almost on time. So, let's do a quick recap of what we kind of covered today. We talked a lot. I I feel like we talked a lot. We did. As always, we're yappers. Big yappers. [gasps and laughter] We we we are the yappers, but again, we also talking to AI, right? So, that kind of goes in there. Uh but but but Katherine, any any thing that was like a highlight from today's live stream for you? Um, I mean, I think it's just a really cool thing for me to practice doing this. I think that like just like I liked like learning, you know, I think it's like a practice thing. Like, you know, I have to also develop like there's many tastes, there's many things that we learned about. And I think just like figuring out what my palette is, practicing using it. I think that that's going to be a really cool thing. And I can see already I have ideas of how I can be using this a lot in my I think everyone can use it a lot. So, I think it's a really cool and important thing for me to be learning. and I'm very excited that you have taken the time to do this with me. Thank you so much for again like joining this live stream. I know it's it's a different kind of a live stream. Uh but thank you so much for like also like being brave and coming on in here and trying out things with me. Thank you so much. Uh and folks, we are going to be back. So keep an eye out on Twitter. We are trying to figure out the schedule for the next one because both Katherine and I are going to be traveling uh at and are going to be at different events. So again, I'm just going to like plug this uh give you like a plug over here. If you want to meet us at any of the events, you can always follow our Luma calendar where you can check where we are going to be next or where someone from the cloudfare team is going to be there. So always like you can go ahead subscribe to our Luma calendar, follow us on Twitter, LinkedIn, anywhere that you are active and just to keep to be posted about what what and where we are in the world. Awesome. Awesome. Thank you so much. Uh and see you soon. Hopefully see you soon in the next one.