Build & Deploy a Website With One Sentence (Full Demo) 🤯

Forget everything that you know about building something online. The endless hours backwards and forwards with web designers, coders, whatever, paying them tens of thousands of pounds for for their services. Forget all of that. What if I told you that this was literally built in minutes using one simple prompt, right? One simple prompt. This is the power of Bolt New. It's an AI tool. It can spin up stunning production ready websites, landing pages and businesses with a little bit of assistance from yourself today in this video. That's just, that's just literally the beginning. Because in this video I'm going to take you step by step through from nothing to building landing pages to then have a fully functioning business online using Bolt New. This is the future of building things online. No dev team, no help me you this video, let's get it pretty cool stuff and we're going to build it together. So let's dive straight into this. All I need you to do is head over to Bolt New and be ready to see some magic happen. We're going to start with a very basic site. So please create me a website for a coffee shop called Coco Loco. A few little tips here. There's a attach icon for files, there's an enhanced prompt icon. If you need some inspiration you can play around with it. You can import from Figma or GitHub. We're not going to do any of those things today. We're just going to hit shoot on this and see what the, what the site produces. Now off of very basic prompts, this site is pretty good. Being able to get one what we, what we need. And I'm pretty confident that this is going to knock something out which is going to be at least very aesthetically pleasing, rounded, just it leave leave. Basically leaving us with a good platform to to base it off of a coffee shop is a really good example of a business that wouldn't need incredible functionality. I've given it no instruction. I've not said that it's a specific pet. I've not said it's specific location. I haven't given it anything. I've just told it. It's a coffee shop called Coco Loco. So so this could pop out anything in related to coffee which is the exciting thing like who knows what it's going to produce. When it comes down to prompt engineering you could obviously be very specific and learn to prompt with Bolt. Use AI to create some really in depth prompts that give you the best output right off the rip, which I would advise if you were ever looking to deploy this and something while this loads that I really want to cover with you, just so you know, for the re. The reason to stick through to the end of the video is that these sites are actually deployable. Like once you build them. These aren't just like paint by numbers. You can actually use these to deploy for a client. I mentioned landing pages. You know, when it comes down to website builds, landing pages, etc. You don't need anything more than this for a coffee shop. Like this is. This is perfect. Like you've got something here at least that you can, that you can work with. And I'm going to show you a few neat tricks now of how we would go through it. So to run you through the interface, we have integrations at the top here and it directly integrates with stripe, Supabase or GitHub. So you can directly integrate with your payment processor and directly integrate with your database in this, you know, in exactly the same place. Now there is a little bit more setting up to do when you connect Supabase, but when it comes down to the. The rest of the interface, it's. It's basically paint by numbers. You have here. We have here the comments box where we literally type in and speak to way back and forward with the AI. Not only that, but there is a discussions button that you can toggle between what do you want to discuss? And effectively, when you hit that button, it turns into an LLM so you can ask it questions without making any changes. So I'll ask it here. Now what do we do? I don't like the orange tin to the HERO section. What would be a good prompt to change? Change just that part. I'm just going to ask it now. This, this will not make any changes to the, to the landing page really important. So the orange tint to change it. So it's given us a quote here. If it says a gradient from a dark to a light blue, I can hit change to blue gradient. And now it's. It will because it's popped up with a, with a message implement this plan. It's allowing us to go through and you'll see that we're. We're no longer in discussion mode. It's popped us out of there and it's now editing the, the hero section. So what I'm going to do is it's changed the gradient to blue so it doesn't match. What do we do? Oh no. Like we're in a position where we're using a prompt and it's not working. Well, what we do here is we click this little icon that's at the top. It's called Inspector. And what that allows us to do is select any individual section of the website that we want. Okay, so we want to change this. We've clicked it. The blue box pops up here. Selected for inspection. Right. Literally all we do now because we're not in discussion mode anymore, please can you update this, this to something quirky? It will now just edit that individual section. And I cannot explain strongly enough how important it is that you use the Inspector when you're editing this. Because as you go and change specific pieces of the site, if you try and prompt the main machine to do it, it will start to make changes to other things. You have to be cute. You have to be strict with the way that you write for the LLM. So it's really important. Well, it's not an LLM, but, you know, for the, for the sas, you have to really laser that in. So what did it change it to? Liquid Happiness and Edible Magic await your taste buds. So it did what I asked it to. It changed it to Quirky. Let's, as a final test, let's change this gradient. So I selected this. Please remove the color gradient and just, and just keep the original image. Okay, so this will now update the image. I'll remove the blue gradient and let the original coffee image show through more prominently by removing it. And we'll do one final thing. Perfect. I've removed and increased the opacity from 30 to 70%. Please increase opacity to 100%. Well, that didn't work. So let's get it to change the image. Please change this to a completely different coffee image. Should we be a little bit more specific here? One with one that's inside of a coffee shop with people in the background. Fire that off. See what happens. Now, at the same time as this, there is a key and core point that I want you to know, and that is that when you are editing in Bolt, whenever you want to change. So like you want to change the, the, the whole theme, let's say, right, you're wanting to change the whole thing to a completely separate site, then what you need to do is, what you need to do is open a new URL and actually, and actually go to Bolt itself and do a new. Doing like a completely new site. So what we would do is we would head over to Bolt new again and I'm going to paste in a, a prompt that I've, that I've got. So now we're going to switch it up from a coffee Shop. I'm going to show you the changes in a second. But this is. Please create me a SaaS landing page for a research tool that allows a user to enter a domain. Once the domain is entered, research begins and it will take users to a new page where they can generate cold emails. We're going to hit that. Let's see what that comes up with. So this has got a coffee shop background. Yeah, lovely stuff. And maybe if we click this section and just said please completely redo this section and just hit it one more time just to see. And I'm just showing you the power of it really. There's not really much else that's, that's required. I'm sure you understand by now the backwards and forwards. The only other thing that I wanted to mention. Well, there's a couple of things that, that I need to mention here. So we not only have. Let's see what this comes out with first and then we'll. Because I want to show you on the, on the SaaS business. So there you go. That's, that's even better. Probably the best that we've had for a landing page. So it's great. Downtown district. Happy days. So we've got the website now we're happy. We need to move on because this is not what we're, we're here for. From a perspective. You now know how to use Bolt new to build landing pages. So the promise has been, has been given. Well, I'm going to deliver on the other promise which is like showcasing to you something that's, that's live, like I always say, something that is salable something or something that is usable at least for you on a, on an ongoing basis. And how we're going to do that is by doing something quite, doing something quite quirky. Let me just load this up and pop this in. It can be a little bit slow and something else as well that you should be aware of when it comes to Bolt is that if you get an error you can click fix errors and then what sometimes happens is you get a little orange bar that pops up at the bottom and it says like, you know, retry on the error but the page will just break. Hopefully we don't get that while through this video but if we do, I'll show you. All you have to do is hard refresh it. Hard refresh it and the landing page will be, will be there. This is going away. This is cooking it's. This is cooking its thing. So now we're going to jump into N8N and I know this is a complete. Like we've just pivoted and spot on its head, but I actually want the landing pages to do something like connecting it with Supabase is something that you can follow a guide, any. A guide for, like an easy guide for. But when it comes down to you as an individual using web hooks, using, you know, using web hooks from a custom built page. So We've started with 0 in this video and we're gonna, we're gonna go into using webhooks to dynamically fire when a form gets. Gets submitted. Okay. So what I'm going to do is I'm going to go back into this SaaS business which is what is produced. This is cool, right? Yeah, we agree that this, this is a quite a nice, this is quite a nice site. This is, this leaves us in a position where we've got a site. Let me. Can I drag this over at all? Let's make it full screen so you can, so you can see it. When it comes down to that. Let me just close this. So when it comes down to, to the site, I mean, you know, there's not much else that we could have asked for based off of the prompt. Ready to send extra outbound results now what can we do? Very modern, very sleek, but let's make some edits. So we go. It'd help if we didn't just close the whole project down. This is the one that we need to close. You have to give it a minute to reload, but this is. I wanted to show you this area. So this section here, next to where we had the discussion, there is a open prompt library. This is a gold mine, right? As I've got a huge digital marketing background work with some of the biggest businesses on planet Earth. And with. When it comes down to the SEO strategies, these have some really cool features inside of them. So Image SEO enhancement, Content readability analysis, Local SEO implementation, header hierarchy. So all the H1 tags, et cetera, internal linking strategy. If you're building out a larger website that. They're all in here. Look at them like you can, you can use them. Usability, form simplification, simplification, navigation, Menu optimization, input validation, ux. There's loads of different things that were available to use. One of the coolest things about this is the API Documentation Generator. Oops API Documentation generator. The fact that you could build a SaaS business and have it build API documentation is disgustingly powerful. Like it's actually mental. Okay. Like you could have all of your API documentation produced and then just polish off with the 10% that's needed to make sure that it's right and fire away. Like, I mean, are you not geeked by that? Like, that's mad. Like, if you think about it, how it used to be, this would take 12 weeks to deploy. You would give it to. And I'm not saying it's the best landing page on the planet. I'm not saying that. But what I'm telling you is I've just done one prompt which had about two sentences in it, and we've ended up with a landing page that looks like this. So to be able to build that in two minutes is crazy. Right? It's mental. But then to have all these features where we can actually go through and. And have API documentation created and let's do one. Let's hit one. Let's hit the. Where are we? Dark mode implementation. Boom. So now we're gonna have a dark mode. Bit weird because it's already purple, but we don't care. So we're just gonna roll with it and we're gonna have a dark and a light mode. It'll be interesting to see what it does with light mode. Will it turn it white, do you think? Maybe it'll turn the background completely white. That could be. Could be something that. That I could see here because it would look quite nice white as well. That white and purple contrast sort of goes it. Change the color of the text. It'd have to. We'll see. But that's. That's great. But we're from a. From a perspective of. Of Nan. This is what we have now. I've renamed these nodes so that you can see them really clearly. And this is an extremely simple flow. Okay. And I'm going to run through it with you so you can build it live. Live with me. I mean, I've got it built because it's. Because it's really simple. But maybe I'll make some tweaks alongside it with you. So we're basically building it together. So this here, we're making a post request. So hit tab and search for webhook. Hit the webhook node and then click inside of this. And what we want to do is we want to set the HTTP method to post the path. Nexus Research. I mean, what's it given the name of this Prospect? Prospect AI. So prospect, Prospect AI prospect slash research. So you can follow along whatever your name is with the path. But we'll just have to edit the prompt when we send it in later on from a From a landing page point of view. Authentication None. Using Respond to webhook node. No other settings are required here. No additional options that should just come out. And then what we do is we head into a basic LLM chain. So hit tab, type basic LLM chain, click the basic LLM chain node. There you go. Add it in. Now rename it. Make sure that you rename it as. I'm big on renaming. Renaming it now. Now what we want is we want an instruction and we want a system prompt. So to showcase you how to do this, because I'm just going to leave them as they are. It's fine. But I'll show you exactly what I did. AI Google, AI Studio. Go to AI Studio or your favorite LLM of choice. I promise you I won't be upset. I. I use the most powerful tools. Whenever I'm using a prompt engine, whenever I'm prompting engineering anything and I actually have a. A saved system prompt. I strongly advise that you do that. Save a system prompt which gives you prompts like just, just do that because it just makes sense and it'll save your life. Seriously, go and do that right now. When it comes down to generating this prompt, all we'll say is we have a. You're a senior engineer, you're a senior research and data. No serious senior research analyst with 25 years experience of analyzing businesses and writing the coldest cold email intros on the planet. Please create me a system prompt. I'm going to use it in sonar Pro brackets in NAN to research companies based off of an input URL because that's what we've asked for in the SaaS business. Based off of an input URL and find key decision makers. Then we need it to write. We need it to write email copy. Right, right, right. Email copy. That is going to spike response rates massively. Let's fire it off. Let's see what we get now while we do that, we're gonna have a look at this. So this is. This is cool. That is like the same thing. So the Lord knows why that's happened, but the point is we have the white turned it white. Knew it would like it white. Reminds me of Internet software businesses which is a good thing because it means that it looks realistic. So I hope you follow me. Guys like you understand the power now Bolt. This isn't a new thing. Lovable etc. They're all around. But if you didn't know about this or you've never built in it before, we're going to. Well, we have already built gold and we're going to continue to build gold here because now what we're going to do is we're going to connect that NAN node that we've just started to the NAN flow that we've just started to build out. We're going to connect that to this system and have it do deep research and pass the emails back so that it's got a brain. The way that we're going to do that is by using the system prompt that this creates. Whoa, that's crazy, baby. Okay, okay, okay. We don't need this anything. Pages about career, business model key decision maker identification. The coldest intro quoted me put on my gravestone. Interesting. Okay, right, well, copy as text. Let's take this over. Inside of here you'd copy that, right? Really importantly, you paste that in. But the top section. Well, let me go back to AI Studio and show you. So this section, you copy first and you put it in the basic LLM system prompt by adding a prompt and then pasting it in. I don't need it because I've got one. And from a prompt perspective you copy the rest and you put it inside of the. Inside of the. Inside of the copy. Now the key thing is, is that I've done this before. So you need to ensure that you're in a position where inside of the instruction itself there's the variable JSON body.com panyurl and that's because of the fact that we're going to going to be sending that through as the webhook we're going to tell Bolt at the moment. Now when it comes to open router, if you need to pause that a minute or rewind it, feel free to do so. But it's not difficult. Copy and paste the prompt in. There's nothing at risk here, it's just a web hook. Copy and paste the prompt in. Just make sure that you take the, the top section, which is the instructions for the system, paste it in the prompt that you've added and add the rest to the. To the. To the next phase. Now I'm using Perplexity Sonar Pro through open router. You can use the LLM of your choice. You don't have to worry about that. Okay, now the only thing that is required here is for us to pass the JSON. Now you could probably get away with just using the required specific output format and then add an output parser, structured output parser and required as JSON. Maybe you can paste in one of the examples that Google AI Studio gave you for whatever your prompt is because it will be different. Make sure you follow your prompt. But this will give you the ability to be able to ensure that the output is right. But as I have previously told you an abundance of times, the let me just quickly edit that. Come back out Command S. Make sure you command s in before we go off of the page. If you go over to NAN IO and you go to Products Integrations, I have no idea why I just said integration Integrations templates. Search for JSON and you'll find an excellent JSON parser which is here. Process AI output structured JSON click use for free import to your cloud workspace. I'll do it anyway. I've already got it, but I'll do it just for you. I love you that much. So you. You look at this. This just. This tells you what it is or you don't have to worry about it. All you need to do is literally inside of nan hit tab, hit search for execute sub workflow. See this here? Hit that. Execute a sub workflow. Choose from list JSON parser. Select it. Okay? That's all you need to do. Once you've got that, there's nothing else stopping you. We need to. We can drag the text, curly brackets, $sign JSON.text and then from there we respond to the webhook, which is literally just the first incoming item. So there is nothing of note in here apart from these variables, which is I guess important to. Is is important to note. So just to show showcase this to you, if we set some mock data and we delete this. We delete this and we go into my system prompt. Oh yeah, make sure we save that. As we're doing this, we're going to my. My system prompt. So you go into your system prompt. Do not copy what I'm writing on the table here. And we. Where is it? Take this JSON. This is. This is the output company underscore name is the output. If I got the right bit, you want to start from. You see where the closed bracket is of the output? You see that, that closed bracket, everything above it from that curly bracket that's there all the way up to where you can see output. That's what you need. Okay? And we're gonna paste this in copy. We're going to go into. I don't know why I'm doing that because I'm on the right page. Go into the web hook and we're going to edit this and we're gonna take everything that's inside of this, the array, which is. Which are the square brackets and we're going to right click paste and match style. So we're, we're cooking now. The thing is, is that I've run this before. Save. Make sure you save command S pin data. Pin that data that we just put in there. Obviously, like that's just mock data just to show you. So like if we execute this step, you're going to see the output. You see the output anyway, excited because we edited the data. But anyway, we can see that we have all the information that we need. But the one thing that we don't have is the company URL which is included in my Sonar Pro because I know what I'm going to call it. So inside of your prompt user message, I want you to go to the bottom where it says company URL or whatever it says for you. If it doesn't, take your prompts back to ChatGPT from the. Well, take your inputs back to Chat GPT or whatever LLM you used and make sure that there's. There's a section here where inputs are here and we have the company URL because that's exactly what we've got on the landing page. So it's going to fire and what we're going to do is we're going to tell Bolt how we want it to be formatted. Okay. So that's really important because the name, if it doesn't match, is not going to fire the rest of the flow. But the first thing, first things first, let's get this. Let me close this tab down and this tab and let's just, let's just hit it, I think. So we now want to go back to this lovely landing page. Do we prefer dark or light? I like the way it won't let you hit Start Research unless you do. So what we're going to do now is we're going to. We're going to now paste in what we're now going to take. If we go back to AI Studio, you'll see the, the example that it gave me, like output format must be in this exact output. You will all, every single one of you that are watching this video will have a different output format. Don't worry about that as such, because we're going to make sure the company URL is. Is correct and you can see inside of here that it says company Analysis, company URL. But we don't need to. I'm basically skipping a step like by going through the bowl flow already because I already know what we need to. What we need to say. So I'm going to save you guys a little bit of time. Might even add this to the, to the description in a Google Doc. But this is all we're going to say. Okay, we're going to type. I've set up a web web hook for the initiate research. Now what what that is, let me use yellow because it stand out on this, whatever the button name is. So this is start research. So let me change this to start research. Start research. I'm matching the, the capitals on it because it can be funny sometimes if you, if you don't. So I am doing that. Once the button is clicked, the following web hook should fire type post because then, because bolt needs to know the method. And then here you'll see my post URL. Okay, you see this? Well, we're going to go inside of our webhook and we are going to go to the production URL and we're going to hit copy. And whatever you change the path to will change your custom, your webhook URL. So if we, we change the prospect to company, you'll see it updates the webhook URL. So whatever you put in the path will be the webhook URL. Come on command S. Now I'm just going to get that one more time to make sure that I've got it. So we go inside of here, we paste in our post URL. Then critically we say it accepts a body parameter called semicolon quote marks company underscore URL. And that is exactly why I have inside of here. It doesn't really matter because when we fire it, we'll see it anyway. Literally expression two curly brackets will open up a new tab for you. JSON.body.company_ URL Done. Typo, but done. So it's that easy. Literally do that in your, in your, in your company URL input section of your prompt I will attach the doc. I will attach a Google Doc which has my prompts in it so that you can use it if you're stuck. But should be easy, should be a piece of cake. So yeah, now backing out of here command S and looking at the bolt prompt once again, we're about to send. Here's an example response and you paste in what I just told you the email template. So whatever you've got in here, like email, email copy, you know your email template here, you would hit copy this to clipboard you. Then you would paste that in. Like I said, I've got one already. So now we're good. This is basically Just giving it examples of what we. Of what we're looking for. So let's ping that to Bolt. And this is really sexy stuff, right? Is because like, I don't know, like being able to do this just by this one specific request means that you could manipulate anything on the site. Like if we wanted to go through this and create a sign in section with Supabase, we could do it. Email verification. You can do it. That would used to take. Like I said, it used to take developers hours. It's crazy to me now. Like it's. I'm in the AI space. I do this. This is one of the biggest things that has changed in my opinion because you know what it's like, you must have been on websites. You load it up. It's like from like 1992. It's like Sega Mega Drive. Like old Zelda or some or whatever games you used to play. Zoom and stuff like that on the Mega Drive. Sonic and Tails, like running around. What was my favorite game? There was a bike game. Can't remember. But there was a. There's a bike game. I used to love it and I rollerblading one. But the point is this. It's that when you. I feel old now. When you are looking at the tools available to us, there's no excuse now. The barriers are knocked down. You can build your own sass in an hour. Like, how does that stop? How does that. You know, how does that. How does the anything stop you these days when you can build stuff like this at the drop of a hat? Enter the company domain. So what we need to do is go to your NAN flow that we've built out, make sure that it's active. Because if it's active, it won't fire the production URL. We can unpin this and save just for good. Just for good use. But even with PIN data, an execution will still fire a live execution if it's active. So we don't. You don't have to worry about it. We'll head over here now. And this is the. This is the test. So let's see. Do we go. Do we just go for nan? Nan IO NAN IO Company domain. Start research. Analyzing company profile. Nice interface there. On what we. On what we're looking. On what we're looking at now what we need to do is go into nan, look at executions. Is it running? Yeah, it's running for some reason. Yeah. There you go. It's a bug. It's running twice. It's completed successfully. It did run twice. Interesting. Fired twice. Wonder if that's because I've had it set up before. I might have a live one. No, because it's got a different URL. Anyway, we'll get rid of this. Nan. Let's have a look firstly at what happened when we did it. Okay, so make this full screen mic so everyone can. I'm just on that mic. Reload preview. Looks like we're. We're booking again. Sorry. I'll move this over so you can see it more clearly. If you go full screen during after a run, it doesn't work. Very weird. So company research NAN4 contacts found NAN positions itself as a leading automation open source workflow Workflow automation platform key personnel confidence high high Kimberly Subjects unblocking new look at that. Like we could have it. We could literally build another flow that I'd send email and pull over some of these things. These icons don't work. So it only gives us the. But look at that. It gives you three individual templates. Industry inside, inside focus. It gives you the. The information that's incredible. It pulls out some individual trends for you that like it's looking at. It's trying to. Came across some interesting developments and the company hires a strong developer centric culture with focus on community contributions. I've been following NAN's growth and recent developments. NAN positions itself as a leading open source workflow platform. Amazing. So you really can see the power of how that would. Would work in a live sort of flow for a client. Which is. Which is absolutely ridiculous, frankly. Let's go back and do one more. Let's go back to the. The other. The original page. Let's go back. Here we are. So now let's try. I don't know. Somebody else should try Amazon. I don't know Amazon. Go back into the domain, paste the domain, hit start research. Is it still doing two executions? It is doing two executions per flight. Weird. You'll probably only be seeing one. I wonder if it's because I set it up as a trigger earlier. I'll have a look into it. But the point is is that we're cooking with gas here. Like this is. We've built our own research analysis tool using Sona, using Sonar Pro. And yeah we have. We have information. So UK Country Manager Amazon uk Let's have a look for this. Dude, what a name. Doug. I need to go for a beer with Doug. Doug LinkedIn. I'm not going to click through to. To this because I don't want him to see that I'm looking at his profile. Sorry Doug. If you get an influx of it. But these key personnel. NAN was, was correct. This key insights is correct. Let's have a look at the output from an N, from a. An NAN point of view. Addresses, company name, Amazon. Yeah. John, Janet. John, Janet. Let's go back through. So it pulled through those, those names but it didn't pass them back. John, unless there's more. Let me have a look at the over execution. Have a look because I've got two executions going. There you go John, Done. Doug, done. Yeah, it's just because it was firing twice. So guys, that's how you build a business from 0 to 30 minutes later. Having a fully functioning research SAS tool. You can imagine you have to use your imagination from a business perspective of what you're going to do to implement that. But it doesn't take much. You could literally build anything inside of there with, with no support. When it comes to hooking up your own custom domain, it's really easy inside of, inside a bolt. There's nothing standing in your way now from creating your pages. Whether it just be for your AI services and you wanted to knock a page together really quick, whether it be a fully functioning SaaS business that you need, whether it be selling landing pages to clients, there is nothing stopping you now from being able to do that. The barriers are gone. You're in a position where you can, you know, build anything that you want. We've just built it together. I'm glad that you were here to join me on the journey. If this is the sort of content that you want to see, you have to let me know, like subscribe, comment and I'll catch you in the next one.