Relume AI: The Secret to Building Custom Websites in 5 Minutes

--- type: transcript date: 2025-01-15 youtube_id: 2H7UgosabMM --- # Transcript: Relume AI: The Secret to Building Custom Websites in 5 Minutes in this video I'm going to be showing you a reloom which is a platform that leverages AI to simplify the website building process with reloom you can create sitemaps and wireframes in seconds and Export them seamlessly to tools like figma web flow and now react so in this video I'll be walking you through how to build out the core aspects of a website quickly and efficiently let's get started first off I want to touch on reloom and why it stands out over my career I've built and maintained countless websites from startups all the way through through to the largest companies in the world at one point I worked for a company that essentially operated as an agency creating websites at scale for Global brands that you would all recognize if reloom existed back then it would have likely saved me as well as my team ours of work in the process of building out websites for clients what sets reum apart from a lot of these AI website builders that we see out there is they really tackle the foundational steps of website building in this video I'm going to be focused on how reloom works and focused on its newest feature which is the react export functionality once you made an account your dashboard will look just like this on the left hand side you'll have the figma web flow as well as the react libraries that you can access and to get started with a new project you can simply click new project in this example what I'm going to say is we have a hypothetical client that just read Sam alman's latest blog post and one thing caught their eye was this line around we believe that in 2025 we may see the first AI agents quote unquote join the workforce and materially change the output of companies what I'm going to say here is I'm going to say I want to build a corporate website for my company and we'll give it a fun name of atifi and I'm just going to paste in that line there so in this case I'm going to select I want 5 to 10 pages but you can go as high and over 20 Pages if you'd like to generate a really big site from there you do have the option to select the language if you want to change it from English I'm going to go ahead and generate the site as soon as you click that you'll see really quickly within seconds it's going to generate the structure of all of the different pages it generated all of the component pieces within the homepage and then from there we have the other pages so you do have the option where you can generate the content of these Pages section by section or alternatively what you can do and I think it just is fun for example sake is if I generate all of the empty pages you can go ahead and see all of the different contents fill out in just a couple seconds now if I quickly hop over to the wireframe tab what's really amazing with this is it's going through and it's finding components that are relevant to those sections that we asked for and it's actually going in and it's filling in relevant copy based on that short block of text that we added within our primary sitemap description effectively we have this six-page website here and it's all specifically related to AI agents within here we see all of the different components that are well structured and we have unique copy that's related to what we asked within that initial prompt so pretty amazing that we're able to get all of this in just a number of seconds now if we go back to the site M what's need with this is you can drag and drop the different sections you can also delete sections another really cool feature is if you just want to change with natural language just one section of it you can just go ahead and say I just want the na contact Section and foot on this page and then from there we can just go and click to regenerate the page and what it will do is it will regenerate it within the site map but now if we click over to our wireframe and we go over to our contact page we see that we just have the contact Section so we have the nav the contact Section as well as the footer as you can likely see is this is something that can potentially save you quite a bit of time often times the best way to iron out and not to have to redo things within development is to really nail down a solid sitemap and wireframe and have everyone sign off before it moves through the various phases of design and subsequently development now I want to show you a couple other features So within the wireframe itself you can change out the copy there are also a ton of different AI features within here if you want to make things shorter longer improve the writing simplify the language whatever it might be just about anything you can ask you can do it right within the panel of The Wire frame but another really great feature is say you get feedback and someone says I don't like how everything is left aligned you can just simply click to Center everything or maybe you get another comment and it's things are too crammed or something like that you can just with one click space that out by being able to do this within a tool like this you don't have to waste a designer's Time by having them go with inigma move things around that can be often times quite tedious and timec consuming you can really just iron out a lot of those subtle nitpicks that you might get in the website building process especially when you have a ton of different stakeholders it is very common where you might have a lot of chefs in the kitchen so to speak where you'll have a lot of different opinions on how things should look being able to have something where you can just quickly iterate and change different aspects of it it goes without saying it's really helpful so now the really exciting piece with this is they just launched this new react capability you can ort this and copy it to webflow and paste it into a webflow no code site you can also paste in these sections directly into figma if you'd like but now you can also export these to both react as well as raw HTML components so now what you can do is you can copy the code for the react component you can download the component or you can even export the entire page so you can export a zip of everything within here and it will be well structured out on what you can just put within your project what I'm going to show you is just a quick example we have an empty directory within our IDE here we're just going to go and initialize a quick V project I'm also going to link everything within the description of the video so you can go and copy all of these commands if you're following along we're just going to install and initialize Tailwind once we've done that what we're going to do is we're just going to go within our Tailwind doc config.js we're going to paste that in and then finally we're just going to grab gra and locate our index.css and replace that with our Tailwind directives once you have that you could start your server but what we're going to do is we're just going to go over and we're going to find a component that we want to export if it's the first time that you're copying or downloading a component and you're exporting it to react once you click copy you'll have this screen here you can copy to install this package what we're going to do is we're just going to copy these two lines here and what we can actually do is we'll just get rid of this and we should be good to go we can save that out we'll just tidy up the file a little bit now what we can do is within the source of our project I'm going to go ahead and make a new components folder and let's just go and let's copy this react component here we see that it's copied to our clipboard Here and Now what I can do is I can create a new file and in this I'm going to say team. jsx and what what I can do within here is just paste in the file here we see our component everything all of the copy all of the pieces that we can tweak and edit we see the icons and everything that we need now you can really edit it and do whatever you want with the component I'm going to rename this to team and then what I'm going to do is within the app.jsx I'm just going to remove a few different pieces within here and I'm just going to get rid of that main section there and then from here we're just going to import that folder I'm just going to go ahead head and tab through here accept the import and save that out now that we have that the last thing that we need to do is we just have to go back and make sure that we do have the package installed I'm going to mpm install reloom and all of the different dependencies that we need to get this started and then as soon as we have that I'm just going to mpm run Dev there we go so there is our component now the other thing that I didn't mentioned is these components are built to be mobile friendly so they'll work on mobile tablet and desktop just like you see here and now you have this and you can edit it to your heart's content this is honestly really great I can just copy this let's say and I'll call this blog. jsx I can paste this in here and we can just change this out to blog and if I go within our app.jsx we can just import our blog and add it below team and now if I go back to our project we have our teams and then we also have our blog you can imagine taking this blog component and making it Dynamic having it render markdown that you might have or what have you this is honestly pretty wild how quickly you can just start building it out and the thing that I like about this is it really gives like a tactile feel like you're able to make deliberate choices on how you might want to structure things and that's one thing that I've noticed with a lot of these AI tools is it will just generate all of these tokens for you and often times you don't need to often generate things that are sort of solve problems Footers are generally speaking a solved problem yes there are creative Footers out there but I would bet you that you would find a perfectly great footer on reloom that you can use that would make sense that's another thing in my experience is being able to have a component Library like this is it can really save a lot of the initial time of building out a website because you could imagine if you had your developers focused on building a footer from scratch every single time that's going to be eating up a ton of time that could have otherwise been spent on finishing other projects or innovating or whatever it might be so what's great with this is I can just go in and copy these well-built components I can put in a nav.png easy as it is this is a fully functional navigation here we have a beautiful structure now obviously there are going to be a ton of design elements that you'll incorporate once you begin to actually build out a site like this but to have all of the structural elements the copy beautiful Footers and navigation like this saves a ton of time across a ton of different disciplines from copy design development all the way through the feedback process another option for exporting the components is you can actually export these both at the page level as well as the entire site level so you can export the entire site just like that and alternatively if you want to download the entire page I'll just show you what that looks like you'll have all of the different components you can just drag them within your components folder just like that and then the whole page is going to be within this index JS all that I'd have to do to get this working is I just have to take this file here and I can put it on whatever page that we're using so if I put this let's say within our app.jsx like I was putting within all of the other components now if I save this out here's our entire homepage completely locally and you can do this for the entire website it's really quite amazing you have the flexibility of getting component by component Page by Page and then a similar thing here is you can also just export the entire website you have the option like I mentioned to export to figma webflow react or HTML just click export on react what you'll get is your site map just like this we see all of our different pages I honestly really encourage you to try out reloom this is a tool that I think I'm going to be using a ton in 2025 but otherwise that's pretty much it for this video I encourage you to check out reloom give it a shot I don't think you'll be disappointed if you found this video useful please like comment share and subscribe otherwise until the next one