Transcription
Imagine being able to create a million-dollar application using only artificial intelligence and having no coding experience whatsoever. You will not write a single line of code. In addition to this, you'll be able to deploy this application live onto the internet so everyone can enjoy it in less than an hour.
That sounds like something you're interested in? Stick with me in this video because today we're going to break down one of the most popular and one of the biggest revenue-generating applications out there at the moment: Hugging Face Docu. We're going to be building an AI Agent app store, pretty much a carbon copy, and we're going to be using a very special tool in order to clone Hugging Face so that it takes a big portion of the grunt work away and we don't have to reiterate and rebuild this from scratch. We can copy each and every page so that we can have a good starting point; we can just go from there and build it out.
If that sounds like something you're interested in, stick with me in this video. Let's get into it. Okay, so we are in Copy.Coder. What you want to do is come to "New Project," then select your tool. There's a range of different no-code AI builders here, so from Cursor all the way through to Lovable and Bolt.new, and it's optimized for those specific no-code builders. So obviously, building in is the one you want to select. In our case, we're going to use Cursor. Select that and we say "Next." Then we have to upload a page, our main page. This is the main homepage of the app that we want to clone. The application we're going to clone is Hugging Face Docu. Now, Hugging Face is an AI app store; that's the best way you can think of it. I've done a video on this, which I'll link somewhere here that you can check out, but it basically allows you to go and search for any sort of model, data set, or application in the AI realm just by asking a functionality. For example, "AI podcast." If I search that in the "Spaces" tab, you can see it gives me all these different AI applications or models that I can use in order to build an AI podcast just by entering what is the functionality, or maybe "image generation." Right there you go: Midjourney and so forth. So we've got tons of these over here that we want to use.
Now I want to build this because if we go and say "Hugging Face valuation," Hugging Face is valued at $4.5 billion. So saying this is a million-dollar application is being quite modest, and we are going to literally carbon copy this application so that we can maybe build something different, maybe something like an AI agent marketplace. What we're going to do is come back to the Hugging Face main page and we're going to just take a simple screenshot. You can do this for any application. So we're going to take that screenshot and we're going to come back over here, and we are going to copy it into that, and we then going to wait for it to just analyze the design. What it's doing now is analyzing the page. So when you do this, because what it's doing is it's analyzing what's on the page, if we come back over here, you'll see we have all the other menu options in this menu ribbon. So what it's doing is picking up, "Okay, this is the homepage. I recognize that the AI saying this is the homepage, but there is a Models page, a Datasets page, a Spaces page, a Posts page." So what it's doing is it actually is building out all of those pages for us. So we've got the main page with a screenshot, and then we've got a category for Models, for Datasets, for Spaces, for Posts, all the way through to Pricing. So all of these up. So if you are doing a clone, you can clone just one page; that's fine. But I would keep in mind, you know, for whatever application you want to maybe clone, if say it's this one, you want to basically have all the different menu options in a ribbon, so you want to be able to see multiple different categories because those are the other pages you want to link to.
So that's our main page, which has something here. What we can then do is we can use AI for all the other pages. So we can say, "Hey, take this as inspiration and build out similar pages for all of these others." So it will say, "Okay, if this is—I recognize this is an AI community building the future; this is Hugging Face—okay, the Datasets page will probably have datasets," and then it will think for itself of how you want it to look. In our case, we can actually go here, go to Models, and we can then just take those screenshots ourselves. We can literally go and take a screenshot of the Models page, come over there, we can drag and drop that. We can go to Datasets; let's take a screenshot of that just like that. And okay, then we can go to Spaces. Spaces is a favorite because these are the different AI applications, so we definitely want to copy how this looks. Copy that across. Check out Posts. Posts is okay, like a post forum; that's pretty cool. So we can literally go ahead, copy that in there, and then maybe the others we're not really that focused on, so like Docs, Enterprise, it's just Enterprise Hub, pricing, different pricing like that. Okay, so the others, when we go over here, what I'm going to do is I'm going to say, "Use AI for the others," and you can do this for all of the pages if you want. So you can add screenshots on like, "Okay, I like that page; I like that page; I like that page," and the rest of them just use inspiration from what I've given you already. So we're going to use AI for the rest, which will generate pages out of inspiration of the screenshots that we've already added, and we are then going to hit the "Generate Page" button. So what it's going to do now is it's going to generate each of these pages for us and generate the prompts that we're going to then import into Cursor to build out our AI application using Cursor. I'm going to jump to the end, and then we'll go from there.
So these are just loading still. One thing I like about Copy.Coder is you can add screenshots into, you know, ChatGPT or Claude, and you can ask for a prompt to build out that page; that's fine. You can even add the image into Cursor itself or into Lovable or Bolt.new or any of your AI no-code builders, but what I like about Copy.Coder is it's all in one application, and it gives you all the information in one go, and I'll explain why and I'll show you now. So the project is ready, and we've got our page analysis. So we have the prompts, so you can look at the different prompts for each of our pages. Right, so you can literally read through all of them if you want to; go through each one. So that's our page analysis. Now this is the beauty: bringing this into Cursor is so easy. All it is is copying just this project setup via CLI command; that's it. That's all we're copying. So we're going to copy this; literally just tap that button, and we're going to head over to Cursor and we start importing the project.
Okay, so we're in Cursor now, and we've created a new project, "Hugging Face Clone." What you're going to do is open up Terminal, and then you are going to come through to your Copy.Coder, you're going to copy that prompt, the project setup, and come back over here, and you literally are just going to paste it in and hit Enter and let it just run that prompt through. And what it's doing now is it's literally building out all the files that we need, all the parameters, all the base code, and then we'll go from there and we'll start setting up all the files. So all of our files have been imported. You can see all the different pages, and then we have a setup file, a normal setup file, and then a setup authentication file, which is to set up our authentication, sign-up, and log-in pretty much. So what you want to do is you want to come to your right sidebar, you want to navigate to "Agent" rather than "Normal," and make sure—this is a little bit of a trick—make sure you're on Claude 3.5 Sonnet. Everyone's going to 3.7 Sonnet, which is an amazing model, but from a Copy.Coder perspective, in collaboration with Cursor, Claude 3.5 Sonnet is still giving the best results. So that's a little bit of a trick there. Make sure you're on Agents, make sure you're on 3.5 Sonnet, and then what we want to do is we actually want to run the "do setup" file. So you just want to say "Run do setup," literally submit that and let that run, and it's going to start setting up all of our base code and our files. Again, with Cursor, you're going to have to run some commands and approve some commands. You can set your CS environment to YOLO mode, which is basically that it will approve itself, but if not, then just keep an eye out for that; you'll have to literally just approve some of these as it goes through and as it starts building out your code base. So it has set up the Next.js project for us, and what we're going to do now is we want to run our first page. Right, so we're going to say "Run," we're going to say "at," and then this is our main page, right? So we're going to say "one.do-one-page main page," and once you've done that, you're then going to submit that, and it's going to run that first main page for us. So it's literally going to install all the specific requirements we need and literally start building the code. Again, you'll have to run some commands just to install some, you know, like in this—in this case—lcde react, um, but you know, as you go through this, it's more of you just assessing and approving rather than writing any code yourself. So I'm going to jump to the end of this, and we'll then move on to our next step.
So now that our main page is done, we are going to go back to our terminal, and we're actually just going to go back to our root folder. So you're going to go "CD root," goes back to our root folder, and then we are just going to run it in our localhost. So we're just going to say "npm run dev," and that should run us perfectly there. So our local network is localhost.com. Let's click that; that's loading it up over here. So let's bring that across, and it's in our browser, and look at that—it's insane! Interesting that it's put a sidebar here, which we didn't really have before, but something we can work on. We've got the different tasks, libraries, datasets; you've got Hugging Face over here. Obviously, it's used a little bit of a different emoji, which is pretty cool; used its own intuition there. And then we've got all of our different menu items, got our search bar, login, sign-up, and then some base stock images here, but with—you know, I don't think we have a GPT-2, but you know, DALL-E mini and Whisper and, you know, couple of made-up things, featured models, but this is our starting point, and I think it's pretty rock solid. So that being said, let's dive back into Cursor and let's carry on building.
So it's really, really simple. What you want to do is we want to create our next page, which was the Models page, you know, this one over here. So we're literally going to come over here, and we're going to say "Run at two-models.md," and you just—you're going to submit that, and you're going to go through the same process, and you're just going to build out each and every page, and we're going to run through this, and we can have a look at our Models page. Okay, so our Models page is done. We're going to come back to Hugging Face. I've got two up here now, so let's just close the one localhost, let's just refresh that, and let's go to our Models page, and there you go. You can see our different models; pretty cool. We've got text, image, audio; we've got the different filters; we've got our dropdown here, most popular, most recently downloaded, most likes. If we go to the others, Datasets, nothing; Spaces, nothing; it's all kind of 404s because we want to carry on building those, but as you go, you can build out all of these, and this just allows you to have such a better starting point than, you know, "Build me an AI agent marketplace." I mean, if you've used Lovable and Bolt.new or Cursor, the starting point—it doesn't look great, very limited functionality. So something like this allows you to have all those features already up and running, good to go from the start. One of the pages I really like is the Spaces page, so I want to come and run that one quickly just so that we can have a look at how close it gets to creating that—that is the main, like, AI marketplace page. So I do want to run Spaces and then just go have a look at what it looks like at the end, and then we can iterate. So just accepting some of these components. One thing I—I'll definitely have to say is you're using something like Copy.Coder doesn't lead to a lot of errors—at least that's what I found. You know, when you run in all this code, it's more accepting and approving and running different pieces or installing dependencies, but I haven't—so far—like, I haven't run into one error where it's like, "Oh, there's an error, and this needs to be fixed." I may have just jinxed myself, but hopefully not. That's one thing I do like: the way Copy.Coder outlines its prompts is so that you can just literally import it, and you can kind of sit there, and you can run page by page and just start building your application. So that is done. We are going to bring up our page quickly, and let's just reload our localhost, and then let's go to Spaces, and boom—there we go. The colors are on point; it's got, like, obviously some stock images; we have to obviously work on the different categories, but you know, when you hit a category or click a category, it changes to this like orange, which is in line, I guess, with the Hugging Face branding. It just looks like a complete application, and obviously there's a lot of work to do; there's a lot of functionality you want to implement, and you want to go page by page here, but you can add this—you can do this via Copy.Coder—and you can build these pages and then just literally run them one by one and build the application, and you literally will carbon copy something like Hugging Face in such a short amount of time. Since this video started, we've been able to build out this whole application here with all these pages with all these different components, and then obviously we would want to go further and actually be able to use them and click on them and allow people to maybe add their AI agent to sell to other people and create that marketplace, you know, so. But off the bat of just an iteration, really, really awesome. So you can just go from there, and you can build it out, and yeah, you can carry on iterating and carry on building any application that you want by adding more pages to the menu bar and, you know, obviously building in the functionality that you want and then obviously taking that clone and directing it down the path that you want to achieve and building it into an application that you want. Copy.Coder makes it really simple in order to do this. This is version 2.0 of Copy.Coder that allows you to do multiple pages, which will be coming out in the future and quite shortly, but I will pop a link below to Copy.Coder 1.0, which allows you to do singular pages for now. As soon as 2.0 is live and out, I will let everybody know. Also, follow me on my socials, follow my newsletter because I'll definitely do a little piece on that so that goes straight into your inbox and will update you as soon as this is updated. But the ability to build out and clone any application that you want is a massive possibility now with no-code AI builders and tools like Copy.Coder. Other than that, I will see you guys on the next video. Please do like and subscribe; it does amazing things for the channel. Over 95% of the people that watch this channel are not subscribed, so if you got some benefit out of this, I ask you one favor: please like and subscribe. It does amazing things for the channel and allows me to continue bringing out better and better content for you. Other than that, I will see you guys on the next video. Cheers.