Host Your Own Vibe Coding Platform!

Hey guys, welcome back to the channel. Cloudfare just announced the Vibe SDK. It's a one-click AI powered VI coding platform that you or your customers can use to generate AI powered apps. You can also create previews, iterate on your application idea and also get deployed to Cloudflare's global edge network. I think it's really cool and in this video I'll be showing you what it is, how to get it set up, how to use it, and also how to deploy it to your CloudFare account. But what I think is really cool about this is that you can actually just build apps by saying what you want to build, typing in plain English, and the agent is going to figure out what you need for the app and get it deployed. It's isolated, it's open source, you get live previews, and it's quite fast and efficient. So I have it opened up right here on my screen and uh when you go visit this URL build.cloudf.dev you have a kind of like playground or demo where you can see what this is because the goal of this is to get it deployed to your own instance and you can go ahead to click on this button to get this whole platform deployed to your Cloudare account and then you have your own private vibe coded environment. But we're going to just use this uh demo for now and I'll show you what it is and how it works and then we'll take a look at how to get this deployed to your own cloud account. So here is the landing page sort of and this is where you tell the agent what you want to build and it's going to go ahead to build it with the tools you need. So, let's say um build a single page app that asks for fitness goals, day, week, and equipment, and returns a 7-day workout plan with a short description and embedded YouTube tutorial placeholders. So, want this to build a fitness app. So, I'm going to go ahead to let it run and do its thing. And um this should go ahead to figure out what the project requirements are. And then it's going to generate a blueprint and following the guide of that blueprint, it's going to start writing the code to get this app built. Then it's going to create a preview um review the preview and fix any issues that uh come up. And then we'll be able to see the app on the platform when it is done generated. All right, it looks like it's done generating the code for the platform and we have a preview which is being refreshed right now. So, we should be able to see the preview. Yeah. Um, this looks good. So, this is the app and I can take a look at the preview of the app right here. But I'm just going to copy the preview link and we can go open this in a new tab so that we have a full view of the app that has been generated. So, um, I want to lose fat. Let's say I want to go to the gym 5 days a week and these are the workouts I want to do. All right, let's save the workout and let's see the plan it's generated. So, day one, this is what I should be doing and there should be a YouTube video associated with this as well. Um, oh, this is all for day one, which is Monday. So, these are the things I need to do, the workouts I need to do, and these are the video previews. I don't think the video previews are working, but I'm sure you get the idea. This is the workout for Friday, for example, and these are the things I need to do for Friday and each set of things I need to do for the equipments. And this is cool because it's all being generated on the fly using the Vibe SDK platform. And I can go to take a look at the code for this. So I can click on the code view and this is the code that has been generated for this project. If I need to add more features or iterate on it, I can of course go back to the chat box and tell it, hey uh add more features or maybe create videos uh that should be added to each card for this application. But I think I'm okay with what it has generated. Uh before getting this added to um my cloud account and showing you how to deploy the entire platform to your cloud account, I am just also going to show you a few other parts of this application. You can go take a look at the models that are being used right now for each stage of the application for planning, for coding, for debugging and you can also edit that using the model setting here. Um there's also a built-in debugger where you can see all of the errors, warnings, uh information sent between your browser and the sandbox through websocket and all of that. Uh down here you can download the logs or you can send it uh to the Cloudflare team to take a look at it and uh help you fix issues that may come up. Now this is all built. I love what has been generated. I can go ahead to deploy this application to my Cloud account by clicking the deploy to Cloudfare and that should start the deployment flow or alternatively I can go to also connect this application to my GitHub account and have it committed to Git. And then I can like iteratively make changes to this application, get it synced to Git and then set up a CI/CD flow that gets it deployed to Cloudflare. Um, all right. This has been deployed to my Cloudare account, which is cool. So I can view this. It's been built. It's been deployed. Yeah, this has been deployed to my Cloudare account. That's good. Um, and yeah, that's that's the VIP coding platform. But what is cool about this is that you can deploy this entire VI coding platform to your own cloudare account. So it is isolated to you and your workflows. So go ahead to click on the deploy button here or you can also take a look at the code on GitHub to fork it. So click on the deploy button. Let's get this deployed to my account. And then I can uh go through the flow of getting this configured to be deployed to my CloudFare account. and I hit the button and I'll have that deployed. So, this is really cool. Go check out Vibe SDK. We wrote about it in the blog that went out earlier this week. I'm going to have this linked in the notes below. And definitely go check this out and id love to see what you build using Vibe SDK. Don't forget to get subscribed and I'll catch you in the next one. Take care. N.