Transcription
Hi, my name is Nan, and I'm going to be your instructor for this course. This course is on the Replit AI agent, a tool that allows us to build high-level applications using AI. All we have to do is type in a prompt of our idea, and it builds a really cool application for us based on that prompt. It's accurate, it's free, and it works like magic.
What is Replit Agent? Replit Agent uses AI to create apps from scratch. It's that simple, and we can use it to make many applications. It's used to make many high-level and high-end websites in today's world. If you have any idea that you want to build and you want to convert to an app, Replit AI Agent can do that for you in minutes. It works perfectly and seamlessly. You will build 10 advanced apps with AI by the end of this course, so by the end of it, you will be fully capable in building any application that you want using AI in a few minutes.
All right, so to get started with our Replit Agent, we're just going to head over to replit.com. And what you want to do is click over here and write slash tilda. Right, so this symbol right here, that's tilda, and we hit enter, and it's going to take us to this login page. Now, where we um considering that you have a Replit account, you would just enter in your account details over here. And if you don't, then you can sign up over here. It's completely free, and continue with Google or GitHub or X, whatever you want, or your email and password, and you want to create a Replit account that way. You're ready to start using Replit's inbuilt AI agent to build applications through AI.
So now that we have Replit ready, we can start building our first application. As a demo, let's create a stock price tracker app using Replit AI Agent and let's see how it works. And then we'll start with the course fundamentals and building our 30 different projects.
All right, so let me just input something here. Let's say I want to input a stock stock symbol, uh, and get a summary of financial data. Give me a table and a chart tracking the stock price and other key financial financial information, right? And use Yahoo Finance to fetch the data. Right now, um, this is the prompt that we've put in. It's in complete natural language. We don't need to do anything else. Completely naturally, we told it what we want it to do. And we're going to cover and study a feature later on called "Improve Prompt," which basically uses AI to improve the prompt that we're giving the AI agent. And that basically, um, allows the AI agent to produce a more effective output, a more accurate output, and a a better representation of what we want. But for now, we're not going to do that because we want to keep it as natural as possible for the demo. And I'm going to click on "Start Building." And let's also write, "Make it super attractive," all right, so that it looks really good. And let's click on "Start Building."
So now what the agent is going to do is it's going to create a separate window and it's going to present a plan. So as you can see, it's already created a separate window called "Financial Track," and now it's going to present a plan to us or the user, and then it's going to ask us to approve the plan. All right, so I'll help plan a project for stock data visualization tool based on your requirements. Let me analyze what you're looking to build and create a comprehensive plan. So it's going to keep us updated over here. It's saying it's considering its options. It was reviewing data, and as you can see, it is, uh, given us the plan to build the initial prototype, and it's asking if we would like certain additional features. So for now, let's just add a Newsfeed feature. We don't need anything else, and let's click on "Approve Plan and Start." Now, you can do whatever you want. It's completely editable, completely, um, flexible for your preferences, but I'm going to click on "Approve Plan and Start" right now.
And as you can see, it's opened up a progress pane on the right, which is going to tell us what the agent is doing and how the agent is doing it as it's doing it. So we, so it's telling us that the agent is working now. And as you can see, the agent has started coding in Python in a file called app.py, and the agent is now coding our app for us. One of the really cool things about the progress pane is that you can learn what it is doing. It never hides what the agent is doing, and it's completely transparent. So it's actually a great way to learn how to code something because the agent is explaining itself as it's coding for us. So as you can see, it's coding really rapidly, and this is the speed that a developer can never match. And unlike ChatGPT and other large language models, it actually shows you exactly what it's doing. And it's also going to provide you with a feedback mechanism later on where you can, uh, give it feedback and tell it whether or not you're satisfied with the app. So it's exactly like, uh, a human developer that you would pay to develop an app.
So now you can see it's installing dependencies like Streamlit. It's later on going to install various other dependencies that it's going to need. And this is all within a few minutes. So it's also going to give you, um, an indication of the time being taken. So as you can see, it's telling us that it started 1 minute ago, and it's giving us updates as to what's happening on the right. So it's installed the Yahoo Finance module, which we would have done through pip if we were manually, manually installing the application. And now it's ready. It's hosting it on port 5000, and it's going to show us the application. So as you can see, it's going to ask us to review the changes as well, and it's loading our page. So like I mentioned earlier, the progress pane has kept us updated throughout the entire process. So now the site is ready, and it's made a checkpoint. Uh, throughout the course, I'll explain what that is, but let's see what it's saying. So it's saying, "I've set up a stock data visualization tool using Yahoo Finance API," and it's asking us to try a stock symbol like Apple, Microsoft, or Google, and select a time period to see if, uh, the stock data loads properly and a variety of other things.
So right now, it's loaded in Apple as the default, but we're going to enter in a variety of different stocks. So as you can see, this is really aesthetically pleasing, and it's a really good-looking website that is created in literally 2 minutes. So it's showing us everything we need to know: the PE Ratio, um, everything that you would need to know while buying a stock, a financial summary, and a description of the entire company. So Apple Inc. designs, manufactures, and, uh, markets smartphones, personal computers. So it's accurate, and it looks really good. There's color, there's graphs, and this is actually surprisingly really, really good.
So now let's try in a bunch of different companies. So let's put in TSLA for Tesla and hit enter. And now it's going to fetch the data for Tesla, and it's showing us that. So it's showing us that the industry for Tesla is auto manufacturers, and it's showing us everything that we would want to know about the Tesla stock. So this is right now for one year, but we can do it for any, uh, time period that we want. Let's say we want to go for 3 years, we can have that. So it's running over here, and now it's going to show it to us for 3 years. So this is a graph of Tesla stock for 3 years. So that's what it's doing. This is a basic demo of how it created an app in less than 2 minutes, and it's even asking us if the app is as per our needs or not. Is there anything you'd like to improve or add to this tool? So this app is perfect for now. I mean, it's a web page that gives us exactly what we asked for within 2 minutes, and that's exactly what Replit AI Agent is oriented around. It brought our idea to life within a minute, and it did that while explaining to us how it did it and what it used to do it.
App number one: SpaceX. One of the most high-end applications in the world is of the rocket engineering brand SpaceX. Today, in this video, we are going to build the exact same website using artificial intelligence in just a few minutes. We're going to use the Replit AI Agent, and we're going to build a very high-end and good-looking website. Let's get started.
So while we're building our SpaceX website, let's explore a bunch of features that the Replit AI Agent has as well. So the first thing that we see here is it's asking us to describe an app or site that you want to create. Now, Replit AI Agent uses large language models to recognize whatever you're typing. So you can be 100% comfortable, and even if your prompt is not grammatically accurate, it will still recognize the prompt and build your app for you. So we're going to explore all of that throughout the course, but for right now, let's write a normal, pretty average prompt for our SpaceX website, and we're going to reiterate it a bunch of times to make sure that it's exactly what we want by the end. So for this tutorial, let's just call our SpaceX website "Space Z" instead of SpaceX. All right, so build me a website for my rocket engineering brand, Space Z. All right, and let's give it a, um, use black and gray as its color scheme. Would black and gray look good together? We can also try, use black and white, right? Matte black. You can put in whatever you want, but let's just experiment and let's go with matte black and white as its color scheme, and use gradients as well. Make it look super attractive, and use images of rockets and space vehicles. All right, so this is a very basic prompt. Now we can make it super long and add a lot of different things, which we will explore in our prompt writing section, but for now, let's just keep it as that, and we'll reiterate and, um, make the program better every single time by giving, uh, Replit AI Agent feedback. But for now, let's just say "Start Building."
All right, so we're going to wait for it to start, uh, presenting us with a plan. So, so it's created it as "Space Z Navigator," and it's taken in our prompt, and now it is thinking and reviewing our message. It's considering its options now, and we'll also cover, um, a little bit on how the AI agent is doing all of this, um, on top of everything that the AI agent is doing, and how to control it. We'll also be covering how and why it is able to render these applications for us. So saying, "I'll help you create a visually stunning website for Space Z using React." Now, we can also ask it to use any other programming language. We can ask it to build our website in HTML, CSS, and JavaScript. We can ask it to build it in Python and Flask or Django. We can do whatever we want because it supports 50 plus languages, but we're usually going to go with its recommendation because the AI agent knows what's best for us. So it's saying, "We'll implement a sleek design with matte black and white colors, gradients, and space imagery. Would you like to proceed with this implementation?" And that's exactly what we asked for. So yes, and it's also asking us if we would want some additional features like interactive 3D rocket models, live, uh, launch countdown timer, news blog section, and career portal. So, you know what, let's, let's go with the career portal and with the news blog section. We don't need to add this, but you can while you're building it to see how it works, but for now, I'm trying to keep it, um, a completely normal web page. So we're going to click on "Approve Plan and Start."
And now it's going to start coding on the right-hand side, and it's going to keep us updated on the left side. So let's wait for the code to pop up, and as you can see, it is started coding. So it's coding really fast, and it's creating a variety of different files. Now we can see all of the files that it's creating and what it's done in each file. So it's created server routes, right? And it's created client source components, uh, UI, and it's doing all sorts of different things that we can actually analyze later on once it's made, and we can actually go through everything that the AI agent has done to make, um, our clone or application. So if we go over here, I saw Dragon and Starship, which are actual SpaceX rockets. So it's pretty clear that it knows what it's supposed to do, and it's doing a great job at that. So let's just watch it. There's not much to do here. The AI agent does, uh, all of it for you. All you have to do is sit back, relax, and watch it build your application. Our work is going to be when the AI application is created, and it's up to us to decide whether or not we want to give the AI feedback for improvement of the application. So I want you guys to just look very carefully on what it's doing on the right because it's coding something that would take a human a lot of time to do, and it's really impressive considering the fact that it's just one artificial intelligence model that it's using. So that's really cool. And, um, like I showed in the demo, it's giving us the, the amount of time that it's taken over here. And let's see everything that it's done here. So we can see all of the different files that it's created. So it's installed the dependencies, and it's now it's starting the application, but we're going to go over all of the files that it's created, um, right after we check the application. So let's just wait for the application to load. But as you can see, it's created a JSON file, it's installed dependencies, and it's created a lot of different files.
All right, so this website looks great, but there's a lot of things that we might want to change. So let's just wait for it to present it to us completely. Right now, it's still analyzing and doing things. Um, all right, so now it's asking us, "How do you find the Space Z website's design and functionality? Are the animations smooth, and can you interact with the contact form and newsletter subscription?" So let's see what the website looks like. All right, this is good, but the image has nothing to do with space. So we're going to tell it that. All right, this looks good, but it looks blank, right? It's just white on top of white. There's no color, there's no, uh, font changes. So we want to make sure that works. And here again, the this image is not related to space. All right, and this image is also not related to space. So we'll tell it that the contact us looks nice, but again, white and black doesn't look, um, too great. So we'll ask it to change that. And let's see what it has on the nav bar. So if we go to "About," what does it have on the "About" page? Um, let's see. So if we extend this, the nav bar is available on the top. It looks much better, and it's a responsive website, as you can see. So we click on "About," and it's not doing anything. So we're going to tell us, okay, we're going to tell it that as well.
All right, so now let's give it feedback. This is really important, and one of the most important parts of the course because while you're building an application, you want to make sure that you know how to improve it because obviously, in most cases, the AI agent is not going to produce a perfect application on its first try. You're going to have to iterate a bunch of times. So let's say, um, everything that we want to change. So first of all, the black and white color scheme looks really dull. Change it to black and red. All right, so that's the first feedback. Then let's also write, "Also, the about, clicking on the different buttons in the navbar does not do anything." All right, and some of the images are not space-related, like the image above, I think it was Dragon. Let's just check, um, above Falcon X, like the image above Falcon X. Fix that. All right. All right, what else can we do? Um, Falcon X, and let's just go to be safe and about Space Z for now. Let's just tell it to fix all of this, and then we'll iterate again once it brings us a better result. So it's reviewing our message, and let's wait for it to produce a response. "I'll modify the color scheme to black and red, fix the navigation links, and update the space-related images."
So what it's doing here is it's first analyzing all of the errors that we've mentioned. Now, as we saw in the previous tutorial, and as you'll see later on in the course, this is capable of debugging in a really, really good way. So as a developer, one of the major issues that you face is of debugging, but an AI agent doesn't really face that. If you get an error, all you have to do is copy the error and paste it into the agent, and the agent is going to fix it seamlessly. Unlike ChatGPT and other, uh, artificial intelligence models, this agent does that perfectly, and you don't really have to waste too much time debugging code. So it's edited, um, a bunch of different files, and it's restarted the application, and it's going to ask us if this looks better. And it actually does look better. We're going to make it look even better, but for right now, it looks pretty good. So let's see what it's going to say to us on the left. "Could you check if one, the color scheme now includes red accents? Two, the navigation links scroll smoothly to their sections? And three, the images are more space-related?" So let's do exactly that. So the color scheme does include red. All right, this looks good. This looks really good. I mean, this is super high-level. I mean, the quality of the image and the way it's been presented on the website in a completely responsive manner. I mean, that is really, really good. And then we look at the vehicle section, and they're all space-related images. This looks really good. I mean, it would take a developer time to make this, and it's also the quality of a website that people pay for. People pay for this level of web development. So this is really good.
All right, this looks great. If we click on "Learn More," what, all right, nothing happens. So we're going to mention that to the agent. "Nothing happens when I click on 'Learn More.' If I click on 'About,' it takes us to About. Click on 'Vehicles,' takes us to Vehicles. Click on 'Missions,' and it does nothing. And 'Contact' also does nothing." All right, and what happens when we click on "Launch with Us"? Nothing. So let's tell it all of that.
All right, so as you can see, the website looks great, but it's not perfect. And to make it perfect, we have to keep telling the agent exactly what we want. Yes, now, um, when I click on "Launch with Us," "Learn More," "Mission," and "Contact," nothing happens. Fix and "Contact" nothing happens. Fix that as well. Also, I feel like this Space Z doesn't look too great. So also in the top left corner, this Space Z doesn't look too great. And now let me show you something really cool. As a human, sometimes I don't really have the perspective as to what could make this look better. So I'm going to leave that to the AI as well. The AI has some creative capabilities as well. So if I tell the AI to just do something about it, it can do that as well. So also in the top left corner, the Space Z doesn't look too great. Do something about that. And now it's going to figure out what to do to make it look better. So let's hit enter and see, um, what it does. But until then, let's explore what's happening here. So "Space Z is revolutionizing space technology, making interplanetary, uh, travel accessible and sustainable for the next generation of explorers." So it's actually writing accurate things. It's writing great English, completely accurate. Um, it's great. I mean, this is a really, uh, high-end website that I'm super impressed by. So, you know, it has complete accurate, uh, descriptions of what the website is supposed to be. And on the left, it's telling us that it's going to enhance the Space Z logo, fix the navigation, and now it's actually debugging in front of us and showing us exactly what it's doing. I mean, it's making the changes in front of the user, so we can actually see how it's doing it. And like I mentioned earlier, this is a great way to learn. You're learning from the AI agent, um, how to code and how to debug. So whatever it identified that needs to be changed, changed, it's actually going into those respective files and changing that. So as you can see, it mentions exactly what it's done. It's edited these three files, it's created this file, and it's restarted the application now for us. So let's just wait for it to restart the application. Determining next steps, and you don't really want to mess, um, with this by clicking on things that you're not supposed to because it has caused errors in my experience. So let's just wait for it to present the application to us ourselves, otherwise, we could click on this and ask the application to pop up, but it does cause errors in many cases. So I'm not going to meddle with that.
All right, um, it's making some more changes. All right, and now it's restarted our application on port 5000. So let's see if it's improved, uh, the website. All right, so as you can see, it has actually added its own logo. So it's added a rocket image over here, and that is super sick. I mean, I was not able to think what could we do to make this look better, but it used its creative capability and it created a logo, and it makes this look better. So that's all goes to say that this artificial intelligence doesn't just do what you ask it to do, but it can also use creative capabilities to enhance your application and your website. So that is something that is really cool. And later on in the course, as we learn how to make money and monetize this skill of making applications with AI, you'll understand why that's such a big thing. It's like you have a business partner with you while you're building applications.
"Could you please check if the Space Z logo in the top left looks better with the rocket icon?" Yes, it absolutely does. "All navigation buttons work." Let's test that. So let me just expand this. All right, so "Missions," perfect, it works. And wow, this is super cool. So Leo satellites, Mars colonization, space tourism. It's mentioning all of the different missions of SpaceX or Space Z. And we click on "Contact," still nothing is happening, but it does have the contact here, but I don't think it's taking us to contact if we click on this. So the contact isn't working. And "Launch with Us," what happens when we click on "Launch with Us"? Still nothing is happening when we click on "Launch with Us." So that is not a great thing because it is saying that the navigation buttons should work. So let's try and see. Let's try and tell it that. And the mission section does show up. All right, so let's mention that to the agent. "The 'Launch with Us' button is still not working. Make it work for sure this time." We can express natural human tendencies like frustration as well, and the agent will accept that. So that's pretty cool. I like messing around with it. "Make it work for sure this time." And what else? "The contact, the contact button is still not scrolling to the contact us section." And "Explore our missions" does take us to missions, and "Learn More" also takes us down here. Perfect. So let's just tell out this. And let's also add some more things. So we can ideate here, but let's just tell it to do that. Add some more features as well.
So one of my favorite things about this agent that I'm going to stress on right now is its creative capabilities. As an agent, as an AI agent, what we expect an AI agent to do is simply do what we're asking it to do and make our life easier. But it's, but this agent is doing that in a much more different way. It's using its artificial intelligence capabilities to actually help us out with the ideation and brainstorming part of building an application as well. For example, when we presented it with a plan, it gave us the, when we presented it with a prompt, it gave us a plan that included additional features that we haven't even thought of. So those additional features were super cool, and they make a crucial part of the website. And now that I'm having trouble thinking more ideas for the website, I can say, "Add some more features as well." And in fact, I can say, "Add some more interesting and super cool features as well." So it's really fun to play with as well. And if you're working for a client and using the AI agent, you can actually have your AI agent come up with super cool ideas that would probably impress your client as well and get you a better paycheck. So let's hit enter and see what it does here. I'm pretty sure it's going to do exactly what we've asked because that is the accuracy level of this agent. Even if not now, after a few more iterations, it will do exactly what it's being asked to do. Meanwhile, we can explore the rest of our website. It's pretty basic, as it's just a website that we have for SpaceX. But as we move on throughout the course, we're going to build a variety of other applications like a map app system, like a GPS, like Google Maps. We're going to build a lot of different clones, um, which will be a little bit more complex than this.
So let's see what it's saying. "I'll fix the 'Launch with Us' and 'Contact' button scrolling issues and add some cool new features to enhance the website." So it's on its own, using its creative capabilities, it is going to add new features to enhance the website. So that is something that I find really cool about this AI agent. Not only is it so good at coding that it beats any human on the planet, but it can also creatively add new things and create its own ideas for our applications. So it's editing, it's restarted the application after making some changes, and it's serving it on port 5000. I don't think it has added features that quickly, but let's see. Let's see if it has. It's going to tell us on the left, so we don't have to rely completely on ourselves on the right, um, to to check what's happening on the right because it keeps updating us on the left as to what is happening. So "I've added smooth scrolling to all navigation buttons, including, uh, 'Launch with Us,' enhanced animations." All right, so "Launch with Us," perfect, "Launch with Us" takes us over here. All right, and "Contact" also takes us over here. Let's just go up and click on "Contact," see if that, and perfect, so "Contact" is now working. "Launch with Us" is also working. And "loading spinner." Where is the loading spinner? Let's look at that. All right, wow, this is really cool. It's saying, "Subscribe to our newsletter." It has so many different things over here, and it's even written "Space Z All Rights Reserved." So it's a completely accurate website, looks exactly like a real one. But I'm still having trouble identifying what these, uh, what this loading spinner is. So all right, let's just tell it what, let's just ask it, "What is the loading spinner? I can't see it." Also, "Add some more space-related super advanced [Applause] features."
So as you can see, I'm interacting with it as if it's a complete human, as if I would interact with a paid developer. I'm telling it what I don't understand, super simply. No question is too dumb for the AI, and no question is too smart either. So "I'll enhance the loading spinner's visibility and make more, uh, space-themed features to make the website more engaging and futuristic." I still don't understand what the loading spinner is. Does that mean that it, uh, there's like a circle that rotates when to indicate that the page is loading? I'm not sure, but we'll find out. Um, it's also going to add some more features to make it look futuristic. And later on, once you're done with the application, the entire code is yours. You can use the code for future projects. You can enhance the code by yourself, although I don't see why you would do that once you have such a great application in front of you. But yeah, you can enhance the code yourself. You can copy the code and paste it inside your code editor, and yeah, there's a lot of cool things that you can do with this agent that we're going to explore throughout this course. So I'm just waiting for this to, "I've added several new features and enhanced loading spinner and animated star background." Wow, this is really, really cool. You look at the stars behind, they are moving. The stars are actually moving. An animated star background, parallax scrolling. This is really cool. I mean, this is something that I don't even think the real SpaceX website has. So what this proves is that we not only we having trouble finding an idea, but we did not know how to implement this, but it did both those things. Not only did it create this idea of having animated stars behind our space website, it's also coded that for us in less than a minute. That's how impressive this technology is. So we can scroll through the entire website like a normal website, but this time it has animated stars. The website is pretty heavy now, so it's glitching a little bit, but that's fine. I mean, I'm really impressed with this animated star thing that it's done. And it's added a launch countdown timer, which we could probably see downstairs, uh, downstairs, uh, down here if the website hadn't crashed, but it is crashing, probably because it is a very heavy one. Now, after all of these features, but yeah, once the website loads, you can probably check it out. But yeah, so as you can see, we've built a successful, uh, perfectly working website using the Replit AI Agent, and we've also gone over the creative capabilities. So just like that, when we're building each and every single application throughout this course, we're going to cover special features of the agent. So like this time, we covered the creative capability of the agent. Further on in the course, we're going to cover a variety of different features that the agent possesses, so that by the end of the course, you'll have a complete idea of everything that the agent is capable of doing, and you'll be able to make the best use of the agent for building any application that you want.
Google Maps is one of the most advanced GPS apps in the world, and today we're going to build it using our Replit AI Agent. We're going to be building a local landmarks app for any location in the world, and we're going to build it in a few minutes. It's using AI. So now let's build a local landmarks app, and we're going to use, um, some of the extra features or the additional features, uh, provided by Replit to build this one so that we can cover them while we're building the application. So the way we're going to build it is we're going to write a prompt in our natural English language, but then we're going to ask it to improve the prompt. We're going to ask the AI to make our prompt more effective and more efficient, and then we're going to use that prompt, that AI-generated prompt, um, to develop our code. All right, and we're also going to question the AI agent when it presents, uh, the application. We're going to ask it why it did things a particular way and why not another way, and we're going to experiment, um, with having conversations with the agent as to why it's doing what it's doing. So let's get started with building our local landmarks app. So we're going to ask it to do that. Let's say, "Create a local landmarks map of London. Use Wikipedia to fetch the landmarks. Make it look aesthetically pleasing." All right, that looks pretty great. And now we're going to ask it to improve the prompt. This is an "Improve Prompt" button that you can see over here, and by clicking it, the artificial intelligence, uh, of the agent is going to improve our prompt into a longer prompt and a prompt that is easier for the AI to recognize, and it's more organized, and it's just better in a variety of different ways. So let's see what that prompt looks like. So right now, we've written a prompt that is just three really small sentences, but if I click on "Improve Prompt," you'll see that it's going to make a much longer prompt of this. So let's just wait for it to do that. Shouldn't take this long, but yeah. So we can see that we have a prompt here, and so it's saying, "A web-based interactive map showcasing notable landmarks across London, integrating Wikipedia data to provide information about each location." So that's pretty self-explanatory about how much better this AI-generated prompt is than, uh, what our prompt was. It's the same thing essentially, but it's much easier for the AI to understand, for the agent to understand. And then it has a core feature section of our application. So an interactive map displaying London's major landmarks, Wikipedia source description for each landmark, and ser your filter landmarks by category or by location, and clickable markers with landmark information popups. So that's perfect. And then visual references inspired by Google Maps, point of interest, and Visit London's, um, interactive guides, known for their clean presentation and location-based information. And there's a bunch of stuff here, um, style guides, right? So it's, it's already planned out how it's going to style it. Uh, it's going to use the colors navy blue, medium blue, British red, off-white, and in dark gray, um, to make it aesthetically pleasing. And it's also mentioning the exact design. So even before getting started, we know exactly what it's going to do and in which way it's going to do that. So that's a really good feature that I recommend that you explore as you get better and better at using this agent. All right, so I think that's perfect. We don't need to add anything here. Um, this is undo. So if you don't like the prompt that the AI has made and you like your prompt better, you can click on the undo button and get your prompt back. All right, so that was the improved prompt feature. We'll be using it more throughout the course, but for now, I think you have a basic understanding of how that works. So let's click on "Start Building" and let's see how it makes our local landmarks app.
So as you can see, already on the top left, it's saying, uh, it's named our application "London Landmarks," which is pretty cool. And now it's taken in our entire prompt, and it's reviewing our message. And there's a lot of things that we're going to go over, um, later on in the course, like attaching files, which you can see over here, and what that basically does is it allows us to use pre-existing material into our new applications, and it gives the agent a way to do that.
All right, so now the agent has presented us with a plan. Let's read out the plan, understand what the agent is ready to build, and we'll confirm if we want the agent to build exactly that. "I'll help you create an interactive London landmarks map with Wikipedia integration. We'll implement the map interface with your specified color scheme and focus on delivering clean, informative landmark displays. Would you like to proceed with the implementation?" So that's what the initial prototype is going to look like, and yes, we would like to proceed. Let's look at the additional features that it's suggesting. "Offline mode support." Sure. All right. "Advanced search." We don't need that right now. "User contribution." We don't need that right now. "Customer route to tour route generation." We don't need that right now. But feel free to add your own features, um, among these or ask for more features. Obviously, this plan is completely editable. So you can tell it to add more features or reduce features, do whatever you want. But for now, we're just going to add "Offline mode support" and click on "Approve Plan and Start."
All right, so now on the right, as you can see, the progress pane has popped up, and it is going to start coding for us. So it's basically a Google Maps clone, but it's specific to London. Now, I've just chosen London randomly, but you can choose any city, any location, any country, whatever you want, or even the entire world, and build a map for that. The agent is completely capable of doing that as well. So now it's creating a variety of landmarks, and it's using a Wikipedia API, as you can see on the right-hand side. API, for those of you who are new to programming or not, um, interested in programming and are simply using the agent to build applications, API is an application programming interface, and it allows us to interact with different websites. For example, there's an OpenAI API that allows us to integrate OpenAI's large language models like ChatGPT into our programs, and there's a lot of different APIs that we can cover. But for now, it's just using the Wikipedia API to fetch the landmark data, uh, within London. So you can try different cities if you want to try New York or New Delhi or Shanghai, Beijing, whatever you want, you can try different cities and build that for each individual city.
All right, so it's created the theme.json file, and it's installed Leaflet and a bunch of other things. So the cool thing is it also tells you what, uh, dependencies it's installing and when it's installing them. All right, so now it's hosted it on port 5000, and it's going to present our application to us. We'll cover what exactly this "took a screenshot" means in detail as we move forward, but for now, you can ignore that. For now, I noticed there's an error with a category filter component. So as you can see, it is identifying errors in its own code itself sometimes, and that's a really great thing. I mean, we don't even have to do anything. It's identified the error and it's fixing it itself. Um, that's really cool. I mean, out of this world. I mean, if I think about five or six years ago when I started programming, I never would have thought that this would exist because if it would, then I wouldn't even have learned how to program. This is completely self-sufficient. A beginner can use this to develop really high-end applications, and that's exactly what this course is all about for any beginner who wants to create really high-end applications. That's exactly what we're learning to do step by step. So it's fixing the error. It's looking at the map view.tsx file. So on the right-hand side, it's actually explaining everything that's happening. We're going to review that after, uh, the website is created. So, uh, it says, "I noticed there's another error in the map view component. We need to import create root from React. Let me fix that and ensure all components are working properly." You don't really have to give it much attention. It's pretty useless for us. It's going to keep on doing that, but if you're interested in understanding how it's working, that's when you can read it, um, but for now, I'm just going to ignore it because we just want to see our application. So let's let the AI agent do its magic again. It's serving up the port. Hopefully, there's no error this time. Again, there is an error. It appears there's an error. "Thinking deeply." That's creepy, but yeah, let's wait for it to come up with something. If that's an error, runtime error, no query set. Well, this is really advanced application, so it's okay, and it's not really causing us many, uh, difficulties. It's doing it all itself. "I'll fix that issue as well," is what it's saying. So let's just, um, give it space, give it time. But I can already see on the right, this looks really cool. This application. It looks really advanced, and it looks exactly like Google Maps, if not better. I mean, the user interface is really, really good. So as you can see, it goes back into the code where it identified the error, and it edits that, as you can see over here, and then it restarts the application, and it's doing that. It's reiterating that a bunch of times, and now it's finally presented a working application.
"Could you check if the map loads with markers and if clicking on a marker shows the Wikipedia information in a popup?" So let's look at the map. Let's just create a much larger view here, and let's look at the map. So as you can see, this is a map of London, and it has mapped the different landmarks. All right, but there's no, okay, so if I hover over it and I click on it, it's going to show me the landmark, and this is a really good UI. I mean, this looks really, really attractive. Tower Bridge, and it's giving us a short description of Tower Bridge, and we can, uh, read more here. And that's just one of the landmarks. Right now, I only see two landmarks. We're going to ask it to add more, but if I click on this, it gives us Big Ben, and Big Ben is one of the most famous things in London. So "Big Ben is the nickname for the Great Bell of the Great Clock of Westminster and by extension for the Clock Tower." So, so it's describing everything about Big Ben, and this is an accurate map. I mean, there's Hampstead, there's Dartmouth, uh, Holloway, Finsbury Park. This is an exact map of London. Westminster, Millbank, Elephant and Castle. I mean, there's, it's pretty accurate. It's, and it has two landmarks. So that's exactly what we asked for, but we are going to ask it to add some more, uh, landmarks to the application. So let's do exactly that.
All right, we're going to ask it to add more landmarks, and let's say, "Make the background black." All right, so add more landmarks. Right now, only two are visible. And also, "Make the background of the page black." I think that would look better. So while it's doing that, I just want to acknowledge that this artificial intelligence, in 5 or 10 minutes, has created a Google Maps clone that is completely accurate, looks great, and actually gives us data about the different locations when we click on them. That is really impressive, and we just coded a complete map app. So think about the really high-level things that you could do, uh, if you spend a lot of time on this agent. I mean, this is just 5 to 10 minutes, and we haven't even iterated once. So if we iterate two or three times, it's actually going to look much better and work much better. But if you dedicate yourself to using the agent, you could exponentially, uh, increase the efficiency and the quality of the applications that you create. And we're going to cover all of this later on throughout the course. We're going to cover how to make money from the skill and, uh, all of the different features within the agent, and we're also going to understand how the agent works fundamentally.
So now, as you can see, it looks much better. I've added more landmarks and changed the theme to dark mode. "Could you check if all the landmarks are visible on the map and if the dark theme looks good?" This looks great. Um, what I'm going to ask it to do is change the font of this "London Landmarks" and make it red. That would look great. And also, we're going to ask it to change this as well. And we can actually zoom in the map, close out the map, zoom out the map. And now it's showing us all of the different landmarks. So now it's showing us London Eye and Hyde Park and, um, Big Ben. Perfect. This is actually really great. Um, here it's showing us the British Museum and the City of London, St. Paul's Cathedral. So yes, it has added more landmarks, but they're not showing images. So we're going to ask it to do that over here. And we're also going to tell it to change, uh, the color.
Change the color of the heading London landmarks to red and make it a more attractive font that suits the page. Also, the new landmarks are working, but they do not showcase [Music] images. Uh, like the original ones, make that work as well.
All right, and I hit enter, and it should make all of those changes. But for now, this application looks really, really good. And we don't need that for now, but this is just to give you an idea of all of the different landmarks that it has over here. We can sort them out, and we'll get to that later. But this is, uh, pretty right. So I'm going to close that, and you can see the entire map from here. You can zoom in, zoom out, uh, do whatever you want, and view all the different landmarks. So if you're a tourist or you're developing some sort of application like that, this was really quick, and it was really efficient.
So this was exactly what we typed in. But if you want to alternate the app and have different things, you don't need to stress about it. Just in the prompt, mention that, uh, whatever different, different things that you want, and it will make that seamlessly. You don't have to, uh, worry about what we, what we're doing in the course. And if you want to do something separate, you can do entirely whatever you want, and it will work. Just don't be afraid to reiterate, uh, keep entering whatever it's doing wrong if it can't identify that by itself. And eventually, within a few tries, you'll see the awesome work that this AI can do.
So this looks much better now. It looks like an actual application that, um, I could see on the internet for a London landmarks website. It actually looks much better than all the pre-existing ones. I can search landmarks over here. So let's search Big Ben, and I hit enter, and I don't think that's working for now. We'll ask it to fix that. And oh, it actually is working. And now the only one that is showing is Big Ben. Wow, that is really impressive. So if I searched Big Ben, it singles out Big Ben on the map of London, and it shows us Big Ben right over here. That is actually really, really cool. And now let's just remove the search here, and now it's showing us all of the landmarks again.
And let's just make sure that the landmarks have have images along with them. Uh, British Museum still not showing us an image, right? All right, let's check out the other ones. Hyde Park still not showing us the images, but everything else is perfect. So, um, the images are still not visible, visible. All right. And let's also add one or of New Delhi. So we can actually do a lot of different things. I mean, if you want to creatively make changes, then do that. So if you've been following up all the way until this point, I recommend that you pause the video and try for yourself to add a map of New Delhi below the London map, or any other city that you want, your preferred city. And that way, you'll understand that you have a sufficient amount of knowledge to build and extend applications of this level. So that's what I would recommend that you do.
Um, let's just wait for it to correct the images. But for now, I think this is great. We have a working London landmarks app that is completely accurate, and it's made it, um, and we have access to the code. We have access to whatever we want to do. So, um, it's just going to fix this image error. But until then, I would recommend that you, uh, I would really recommend that you, uh, extend this application with one more location, whatever city, whatever country you want. Create a map of that as well, alongside or below this one, or as a separate one. But make sure to do that so you know that you are, uh, capable of building these applications yourself.
So it's looking at the potential issues to fix. So you can see that it's debugging, uh, really smartly. It's identifying the issues that it needs to fix, and then it's doing exactly what it needs to do, like updating the landmark data. And it's actually telling us exactly what it's doing while it's doing it. That, that's my favorite feature. So now it is ready, and it looks great. This is really, really good. It looks very aesthetically pleasing, and I can scroll down here and I click on this, and it's not showing an image still. But I think it's adjusted it to not require an image. All right, so it is showing images now too. So now it's showing images for all of the landmarks, the British Museum and St. Paul's Cathedral. So for the, for I guess the ones that don't have an image, it's not showing the image, but for one, for the ones that do, it is showing the image. So that's pretty cool. It's improvising. I do believe that if we reiterate and ask it to fetch the images from other sources, it can happen. But I don't want to waste too much time on that for this course. If you do want to try and fix that error, obviously, you just have to reiterate with the agent, and the agent will fix it for you.
So that's it for our Google Maps clone or our landmark map clone. And now let's move on to another project. Before proceeding with building the rest of our applications, I want to study the Repet documentation with you so that you get a better understanding of what Repet is, what distinguishes it from other large language models, and how to use the agent to the best of your ability. So let's just go over this. I'll leave the link for this page down in the description, and yeah, let's study it.
So it says, no code needed. Tell Repet agent your app or website idea, and it will build it for you automatically. Now, we've already understood and seen how that works, and it's like having an entire team of software engineers on demand, ready to build what you need, all through a simple chat. And that is true. It debugs it quickly, it builds it quickly, and it, it's actually faster than a team of software engineers. So that is that statement is entirely true.
So make apps and sites with natural language prompts. And introducing Repet AI agent. Ask for an app and watch it get built. Deploy right away and share with the world. So one thing that I didn't mention yet is that Repet AI agent contains a deployment feature through which you can deploy it to the cloud. Whatever application that you build can be deployed on the cloud using the agent. And we're not going to go into too much detail when it comes to that, but that is a feature that the agent contains.
So over here, you can see that the Repet agent brings your projects to life from ideas to working prototypes. And it's the best tool for anyone, whether you're technical or a non-technical creator. And you can see an app or website that inspires you. Simply screenshot, upload, and the agent will build it. So like I mentioned earlier, there was an attach files feature when we were writing our prompt, and that feature exists exactly for this reason. If there's any app or website that we want to recreate or build on or add on, then we can take an image or a screenshot of that application, insert it inside our prompt, and Repet AI agent will build that for us.
So on top of the agent, there is a Repet assistant which complements the agent, but we're not going to get into that. Um, if you guys comment it down below, I can create a separate course on the Repet assistant. Anyways, that's pretty much it. But you can also see that Repet AI agent can be used to build things in business software, where AI chatbots, characters, games, online shops, blogs, health and fitness trackers, marketing tools, courses, and storytelling. And we're going to go through almost all of these throughout this course so you have an idea of how to build applications in a variety of different fields, industries, and sectors.
All right, so this is just some basic stuff. You can get inspired. There's a whole community that uses Repet agent to do a lot of different things. As you can see, people are posting what they've done on X. This guy, uh, created something for his real patient, and there's a lot of different things that you can engage with the community in.
So now let's study, um, a bunch of different things about Repet. So what makes Repet unique versus other AI tools like ChatGPT, Gemini, Perplexity, and all of those? So first of all, you don't need to copy and paste from ChatGPT, and you can stay within the flow, and the agent edits the code directly across multiple files. So instead of having to go through the code manually and hunting down what you have to fix, you get to save time and focus completely on the creative work and the managing work of just managing the agent, instead of having to do things yourself. And the AI agent, as we've already seen throughout this course, is smart enough to fix our bugs and debug programs. We've seen this multiple times. The AI agent can identify the errors, and it can also fix the errors, um, when they pop up. So instead of having an AI coding assistant just recommend what to fix, the agent actually fixes it for you and proactively identifies areas where the code is broken and repairs what is needed. So you can focus on creating. And it has everything you need to build in one place. It's not like your editor is someplace else, and it's just giving you the code, or it's doing just half of the job. Everything that you need to build the application is with the agent. And it's more powerful than any other solution. That's what Repet claims. Um, I'm not really interested in all of that. We're basically interested in the functionality, and that is working perfectly.
So yeah, this is something that we've experimented with already. Here are some frequently asked questions. Is Agent an AI? Yes, Agent is an AI. How good is it? All of this is just basic stuff. You can, uh, check this out. I'll leave the link in the description, and this is exactly what it is. So, idea to software, fast. That pretty much sums up what Repet is. So I just created this section to give you another understanding of what the team at Repet is trying to convey to us as to what the agent is capable of doing, and so that you guys can correlate what we've already built with everything that, um, Repet agent can do.
Let's build a fitness tracker app that tracks your daily health, diet, exercise, workouts, and water intake in a super simple and easy way. We're going to build this using the Repet AI agent. Let's get started.
Now, let's build a fitness tracker app that can track our health and fitness throughout the day. We don't need it to look perfect. Let's just try and get the basic functionality working in a couple of lines, uh, to the agent. All right, so let's just tell it to create a fitness tracker application for me. Make, make it track my daily workout, diet, and steps. And what else can we have in a fitness tracker app? And reminders to drink water. And, um, make sure it has, has colors and, um, looks good. All right, so create a fitness tracker application for us. Make it a tracker, daily workout, diet, steps, reminder to drink water, and make sure it has colors and has a good-looking UI. There's nothing wrong in just asking it to make it good-looking, um, but we're not going to stress on it, um, throughout the video. So let's just click on, uh, this improve prompt button. Actually, first, let's use it, and it's going to take a minute, but it's going to give us a much better prompt, a much more clear prompt, which the AI agent can recognize. And as you can see, a comprehensive web-based fitness and wellness tracker that helps users monitor their daily health activities, including workouts, diet, step count, and water intake, with an aesthetically pleasing interface. Core features: It has all of the features that we asked for. And visual references. So it's going to use Nike Training Club and MyFitnessPal. MyFitnessPal is one of the most popular fitness apps, and Nike Training Club, obviously, is. And modern, motivational, and user-friendly interfaces. And it's just, um, talking about the style and everything. So this is a really good prompt, and let's start building.
Now, on the top left, you're going to see what it's named it. All right, so it's Health Harbor. The names are creative as well. And now it's going to think, and it's going to present us with a plan, like always. And the, the objective of creating this fitness tracker is just to see the variety of apps that it can create, um, with different functionalities. So this is completely unrelated to the previous two ones that we've made. The first was a stock market app, the second was a SpaceX clone, the third was a local landmarks map, and now we're doing something completely different. So we're just going to go over a variety of the different functionalities that the Repet agent can build, and that's kind of the objective of why I'm covering such a wide array of different projects.
So I've created a plan for your fitness tracker application with the specified styling and core features. Um, the MVP will focus on essential tracking functionality with a modern motivational interface inspired by. All right, and would you like to review the plan? Right, so let's review the plan. Do we want any of these additional features? Um, I don't think we need that for now. You can add that, but I'm just trying to get the basic website going. So we don't need any of this, or the basic app going, I should say. So I'll just say, approve plan and start. All right, so it's going to build that now. We can see how it's going to code that on the right. We don't really have to do anything. We can just sit back and watch it build our application for us.
So it's loading the progress pane, it's thinking, um, about what it has to do, and now it's going to start coding. So it started coding in a JSON file, and now it's starting, um, a variety of other things. So importing schemes, types. The comments are really helpful, and I think it's really important that if you have the time while it's coding, you at least see what the comments are, if not the entire code, because it at least gives you a very, uh, basic overview of what's going on, so that you're not completely oblivious to what the agent has done to build your application.
All right, so now it's setting up the workouts and meals, water intake, all of the different features that we asked for, step count, uh, goals. And so you can see that it's not only using, uh, all the features that we asked for, but it's also added additional features based on its own aptitude, like goals. We did not mention fitness goals, but since it's a fitness tracker app, the AI agent recognized that and is adding goals. So it's actually really, really smart. It's not just an AI like ChatGPT that does exactly what it's told. It's actually using creative capabilities to expand on whatever we've asked it to do. So we can see that it's doing error handling, and it's doing everything that it needs to do to build a working application. We can also see all of the different files by clicking on this button right over here, and we can see all of the different files that it's creating. And we can also see how long it's taken, um, over here. So it should be done pretty quickly, but this is really impressive because I do not know how to code such advanced things. Whatever it's coding on the right is something that I'm completely unaware of. So that is really cool. The fact that it's able to build this level of application without costing me anything, and for completely for free, without having to hire a developer, without any software knowledge, um, that's really impressive. I mean, this is going to reshape at least freelancing on a large scale when it comes to development, because it's really difficult to pay freelancers good money when you can have the same thing made for free by an AI agent. So let's see where the market goes, um, as we proceed with this level of artificial intelligence in agents.
Until then, I want to talk to you guys about what Nvidia CEO Jensen Huang has said. But he said that, uh, agentic AI, which is exactly what this AI is, I'll explain that later on in the course, all the four different levels of AI and what agentic AI is. But he says that agentic is AI is going to be one of the largest portions of our economy. So it's really good if you're here and you're learning this skill about how to operate and manage this, uh, particular agentic AI for development. It's, it's a really good thing, and it's a really valuable skill.
So it's installing the dependencies now. That means we're pretty close. So it's going to install all the necessary packages that it needs, and it's all installing within the Repet agent. Nothing is on our computer. So that's a really good thing. Now it's going to probably recognize a couple of errors, if any, and it's going to solve them by itself. We don't really have to do anything. "I'll fix the React Query configuration error by correcting the import statement in the files where query client is referenced." So not only did it recognize the error, but it's also telling us exactly what it is going to do to fix the error. And that is something that I really love because as a developer, that helps me to understand that if I was fixing this code and I had to debug and find the error and solve the error, what should my thought process have been? So that's a really good thing because you can see its entire thought process over here, all of this, its complete thought process on how to debug and how to, uh, error handle. So that's something really cool about this AI agent. We can learn from the agent, especially software developers. And even if you're not a software developer, you can learn how the AI has fixed things in your app, and that's really cool.
So anyways, the agent is working. Um, let's wait. Let's scroll to latest. "We couldn't reach the app. Make sure this app has a port open and is ready to receive HTTP traffic." So it usually hosts on port 5000. So let's just wait for that to happen. All right, so now it's looking at an error, okay, because it hasn't mentioned the path. So it's explaining exactly what it needs to do. We need to modify the routes to, and it mentioned exactly what we want to do, and it's doing that. So as you can see, I don't really have to do anything. I don't have to worry if the code is working or not. It's doing that completely by itself. And now our application looks ready, at least on a basic level. So it's asking us on the left, "Can you check if the application loads properly now?" So now, right, that's emphasis on the fact that it wasn't working before, and that's a really good thing that it's able to acknowledge that. And if you can see the navigation bar at the top with Dashboard, Workouts, Meals, and the Goals section. All right, so this looks really good. This is a complete fitness tracker app, and we can scroll here, see everything that we want to do. So if I drank water, I can add, um, my water intake, for example, if I drank 250 ml of water, 500 mL of water, or 1 liter, I can add that and log it into my water intake. Um, we can add that feature later on if we want to, but that is the water intake for now, and it's going to track that water intake over here. The same thing for the step count. If we connected it to a device like a phone or a smartwatch, and it would log all of this over here. Then there's workouts. We can add a workout, select a workout type, and this is really impressive. I mean, it has added individual workout types over here. So if I put in swimming, duration, let's just go with 30 minutes, intensity high, and calories burned, I can put in like 800 calories. So I can log that workout. It might give us an error right now. "Expected number received string." Why is that? How is that a string? But anyways, like I've taught you earlier on in this course, all of these errors can be fixed by just mentioning these errors over here in natural language. I don't think we need to do that right now because we achieved our basic goal of building a functional, uh, fitness website. But if you do want to, for the purpose of making it, uh, work better, you can tell it that whenever I log, there's an error while logging water intake, and then we check what the error is. "Fail to log water intake, please try again." The error is, "Failed to log water intake, please try again." And then while logging a workout, what error do we have? The error is, um, the same error. Sorry about that. That's my emoji panel. The error is the same, same for logging, logging a workout. Fix it. So if I hit enter, it's going to fix that. But we don't really need to get into too much depth because we're confident that it will be able to fix that. We just want to check out what the app looks like.
So we can enter in a different meal, for example, if I had lasagna, I can add lasagna over here, mention the calories, and mention the protein quantity, the carbs quantity, whatever you want to do, and it's pretty functional. We can make it look better, we can do everything, we can fix all of these errors. It's not too hard, but I don't really want to go into too much depth because that wasn't the objective. The objective is simply to create a functional health tracker app, which we've done.
So now, while it's fixing the error, I'll just discuss what we're going to do, um, after this. We're going to start building a couple of games, as game development is a large part of development. So if you have any game ideas that you want to build, we're going to learn how to do that through Repet AI agent as well. So that's pretty cool. And yeah, let's just wait. So I think it's ready now. "Can you try logging water intake and a workout to see if they work now, please?" My computer is probably crashing. Anyways, log water intake. Log water intake. All right, why is it giving me this error? Um, all right, you know what, we don't really have to debug this. If we wanted to, we could just by telling it that this error, we're receiving this error, but I don't really want to get into debugging right now because it's going to waste a lot of our time. We should just focus on building as many applications as possible so that we understand the, uh, wide variety of applications that it can create. But I'm confident that throughout this course, I've taught you how to debug using this agent. All we have to do is mention to the agent, completely naturally, whatever errors we're facing, and reiterate again and again, and eventually it is going to fix the errors for us. So you don't have to worry if this application is not working entirely right now. Um, all you have to do is just reiterate. You know what, let's reiterate. I don't want to leave anything pending. So let's say that while adding, it's saying "expected number received string" in red. All right, and now let's see what it does. As you can see, I've made a grammatical error here, saying "instead of saying but." It's probably going to, uh, ignore that and be able to do the exact same thing. So it's not like, uh, it needs something very specific. It's completely natural. "I see the error message 'expected number received string.' This is happening because the form is submitting string values for numeric fields. I'll fix the type conversion in both the water and workout forms." So now it's going to tell us exactly what it's doing. "A common issue when working with HTML form inputs, as they always return strings even for number type inputs." So it's cool, it's explained the error, it's telling us why the error is common, it's just like a human developer would try and comfort us and say that it's a normal error and it can be fixed immediately. So it's a really nice agent when it comes to things like that. "Could you try logging water intake and check if it works now?" Sure, we can do that. All right, so I'm clicking on the log water intake button, but let's see what's happening. Well, at least it's not giving us an error now, but it's still, nothing is happening. So nothing happens when I click on log water intake. Make it so that it adds onto the water intake progress bar, 0 to 2 liters, right over here. We want that when we log our water, it moves up. Make the color of the progress bar for the water intake bar blue. All right, and we hit enter, and let's see how it fixes that. "Now I'll update the water intake tracking to properly update the progress bar and make it blue in color." All right, so it's pretty good at recognition of what we're trying to say. But one thing that I want you guys to take away from this process is that even if it doesn't solve your error on the first try, you want to keep reiterating, keep, uh, telling it what exactly you need, because the agent takes time to fully comprehend exactly what's going on in the entire web page, and you have to give it the benefit of the doubt sometimes. So I would really recommend that you stay consistent with the agent rather than giving up after one or two reiterations.
So now it's saying, "Finally, you need to update the water form to invalidate the water intake query after successful submission so that the progress bar updates immediately." Right, so now it's restarting our application, and all right, so it's presenting our application to us now. Hopefully, this time it works. So it's asking us to check, first, if the water intake progress bar is blue, and second, the progress bar intake, progress bar updates when you log water intake. So let's log this. And no, it is not updating. If I say 25, or if I just go with 700, and I log water intake, it is still not updating. If I go with one liter, and I log water intake, it is still not updating.
All right, so this is just constant reiteration. That's why I don't want to get into it because it would take a lot of time. For those of you who aren't interested in the whole error process, you can skip ahead, as the time stamps are mentioned in the video, and move forward with the course. But until then, I'm going to fix this. I'll fix the water intake tracking functionality. Let me check the implementation and make the necessary corrections. We're going to wait for it to fix it. So now it's heading over to the server route section, editing things in there. Now it's going to update the water form to ensure proper data handling and immediate user interface updates. So you can see that it knows what it's coded in depth. It's not just one-time coding. It has a thorough understanding of what it's made and how it's made it, so it can go back and make changes as well. So hopefully this time it works. I wouldn't be surprised if it doesn't, because it's said it's fixed it, um, multiple times. But we can obviously reiterate and give it a more, uh, a deeper prompt to get it to work.
All right, so let's just go with 500 mL. Log water intake. And it is still not working. No, it is not working. I am talking about the progress bar in the water intake section on the dashboard. Why isn't it working after so many tries? Do what you have to and make it work. All right, so I'm sounding a bit frustrated. Let's see if there's any specific response towards that, or if it's just going to do the same thing. I've also, um, gone a little bit in depth by specifying that I'm talking about the water intake progress bar on the dashboard. Now it's saying, "I'll do a thorough check and fix the water and fix the water tracking functionality, focusing specifically on the dashboard's water intake progress bar." Let's see if that makes a difference. Otherwise, I think we should move on. This is just going to take a bunch of reiteration, and I don't think we want to waste too much time on that, just for the functionality, because we've created what we wanted to create. All right, all right, so it's restarting the application. Let's hope that it works better this time. All right, so I can see that the water intake is now blue. At least that's working this time. So that looks better. All right, so now this is blue, which is good. Let's just hope that now if I put in 500 mL, I log water intake, the progress bar does not update. Oh, and it actually gives us a lot of ideas. This is really cool. So we can see all of the additional ideas that it has. This would be really cool if it actually started working, but it's not working. And all of these features kind of do not matter if everything looks good. I can start working on a few new features. No, agent, everything does not look good because the progress bar isn't updating. Are we doing something wrong? If I take in 450, right, and I click on log water intake, I hit enter over here, enter, it should log, right? But it's not logging. So no, agent, it isn't working.
We're just telling it the error that we're going through. There is no update on the progress bar. Make it work. And now I'm going to hit enter, and it should work now. Seeing how angry I am, but if it doesn't, then we are moving on. This is our last try. But as you can see, uh, the app is kind of what we wanted. It is what we wanted, apart from the functionality. My goal was to show you how it can create a fitness app as well. So we can, um, take in all of our different fitness goals. This is really cool. We can have a daily steps target, and we can have a lot of different things within our fitness app, which is pretty cool. So it's doing some error handling now, and let's wait for that to happen.
All right, so it's restarted the application. All right, log water intake. It is still not working using either the form or quick add buttons. Nope, so it's not working. All right, I think that's, uh, we can pause that for now because that's not, uh, a functionality that we're stressing on. But if we keep on reiterating here, doing something, maybe asking it to change the UI a bit, or asking to rebuild the whole water feature, it will definitely work. I am completely confident in that. But for now, we're going to move on with our next application.
Before moving forward, I just want to show you that the app is working now. I just had to reiterate with the errors a couple of times with the agent, but now it is working. If I go down and I add a custom amount, for example, 250, then it's going to reflect that over here. So you can see it's moved to 1.3. I can add, uh, 500, and now if I go up here, it's going to add that over here. So now the progress bar is working. It is blue in color. It looks great, and everything else is working perfectly as well. So this is adding a workout, workout type. So the app is fully functional now, and that's exactly what we wanted. So I just had to reiterate a couple of times. This is just to show you that the agent can make errors, but you always move forward and continue reiterating, and eventually it will give you a working product.
Now that we are done building our fitness and health tracker application, we can start moving onto game development using the Repet AI agent, which is going to be super fun, advanced, and awesome. So let's get started. We're going to ask it to build a game dashboard for us, or like a gaming hub, which contains multiple different games in boxes. We're going to describe it in detail, and this is going to be one of our longer prompts. So we're going to spend some time writing a structured, good prompt rather than just putting in natural sentences. That is fine too, but this time we're doing a very advanced creation. So we want an adequate prompt to be, uh, there for the games. So let's get started with describing what we want to create.
So I want to build a gaming platform in the sense that it is a gaming hub. It should have many games, full of colors on the home page, and all of them should be working. When I click on a particular game, it allows me to start playing that game. All right, make the background black. Use images from the web as and when necessary. It should look completely like a game hub. Make it look super attractive, fun, and use good styling. All right, so that is that. We can add a couple of more things as well. We can tell it that the games can be simple, but they should be really good and advanced looking. Looking. All right, and now if we click on improve prompt, it's see, it's quite a long prompt. So the improved prompt is also going to be pretty long and pretty in-depth, but that's okay because it's an advanced project, and we are going to reiterate a bunch of times on this because we want it to be as good as possible. So let's read out this whole thing and really understand what we're about to build.
So it's going to be a vibrant web-based gaming hub platform that hosts multiple interactive games with an arcade-style interface and sleek dark design theme. Design and the features are going to be: playable browser-based games, including simple yet visually polished games, interactive game cards and thumbnails that launch individual games when clicked, dark-themed homepage with dynamic game categories and featured titles, seamless game switching and navigation between games and hub, inspired by Steam's library interface and Congregate's game portal, known for their engaging game presentation and intuitive navigation. And then it styled all this. So I'm really impressed that it picked up Steam here. Steam is a gaming engine, for those of you who don't know, and it's going to use, um, Steam's model and UI to build ours. So this is cool. All right, let's click on start building and let's see what it does from here. It's going to present us with a plan. I'm really excited about this. I haven't built this before, and it's an app that I personally would enjoy playing if the games are fun. So this is going to be fun. And all of the games in here, we'll learn how to, uh, edit and build each and every single individual game through this one. So it includes multiple apps within one application. So that's something that's really cool about this gaming hub. We'll have multiple game apps within this gaming hub.
So add more complex games with better graphics. Sure, we can do that later, but we'll add it here. Add game scoring, game creation. Um, all right, game creation toolkit sounds really cool. So while you're building, I also want you to understand that you can further your applications using this additional feature thing. It's going to be really cool. Um, there's a famous Mark Zuckerberg quote that ideas don't come out fully formed, they become clear as you start working on them. And I think that really applies with this AI agent. When you type in your prompt, you're not really sure exactly what you want because you haven't seen it, but the agent can visualize much better than you, um, to a much further extent. So that's why it's giving us suggestions, and that can actually bring to you ideas that you haven't even thought of. For example, this game creation toolkit for adding new games was something that I didn't think of. So that's really cool. I want you guys to experiment with this and use your imagination combined with the agent's imagination to build really cool things. So let's, um, approve plan and start.
All right, so now let's wait for this to work. Designing our application. All right, so this time it's coding within the app because it's, we mentioned a black background and all sorts of things. So that's cool. Oh, wow, this looks really good. I mean, look at this UI. This is impressive. So this time it's actually showing us what it's building while it's building it. Um, we, wow, wow, just look at that UI. This is super, super impressive. I mean, this looks really professional. This is really impressive. I'm actually really excited, uh, while I'm watching this come to light. This looks really advanced. I mean, this is something that I would maybe even pay for. This is a really, really cool gaming engine. And wow, I love the font for the arcade hub and game categories. This is looking really great, and that just goes to show how advanced this agent is. It's even rating the games, rating the games out of five, 4.8, 4.5, 4.7. It looks so real and so realistic. The images are cool. It understood exactly what I had in my mind. This is really, really cool.
So as you can see, we've developed a variety of different games within the arcade hub. There's so many different applications that it's created. A space shooter, pixel racer, cyber puzzle, neon jump. I can't even wait to play all of these games. And if you're following along with me, I recommend that you try and play all of these different games that, uh, it's presented. But this is really, really cool. Looks really great. I'm actually quite surprised. But let's just wait for it to continue building. Um, I shouldn't really be messing with this right now, but I'm kind of curious because I can't see the code right now. Um, let's see. It's still building. I'm sure about that because if it wasn't building, it would have, uh, stopped thinking here. But this looks really, really good. Page unresponsive. Let's just wait for it to become responsive. But yeah, anyways, so we'll get back to this later, but this looks really great. It's exactly 100% what I wanted to create. So we've built our gaming hub, and it looks perfect. This looks really, really good. We can play these different games once the site, uh, starts working again, and I'll get that done. But once the site starts working, you can see that there's different game categories as well: racing, arcade, strategy, puzzles, action. So this is really cool. We did not mention any of this, but the engine and the agent using artificial intelligence has created this, and it looks much, much better than I had even imagined.
So I just restarted the web page because the site had crashed, and by that time, it has built the entire gaming platform that we asked it to build. So I haven't added anything else. It's just the same prompt that we've put in, and the same output that it was creating. And you will not believe what it has created. I mean, this has blown my mind. This looks really, really good. It's a really pleasing aesthetic UI, and this looks exactly like an online game engine. In fact, better. Arcade Hub: Your one-stop destination for browser-based retro and modern gaming experiences. And all of these different categories, quick links, top-rated games, subscribe to our newsletter, a Discord, Twitter, Instagram, YouTube. It's, it's really cool. I mean, you can see there's Puzzle Masters, Neon Boxer, Cyber Racer. There's a lot of things. We can try playing each one of these applications. Crypto Defense, Space Shooter, Pixel Racer, Cyber Puzzle, Neon Jump. Retro Tetris. Retro Tetris sounds fun. But the best part is it's actually conscious of the fact that what you, each game is like. Retro Tetris is a puzzle classic block game, and it recognized that and it coded that according to that, and it even gave it a rating of 4.9 out of 5. So it is really cool that it's able to like, Pixel Racer, it recognizes that it's about speed and racing. So there's actually a lot of thought behind this that we can actually see while we're reviewing the application. So I recommend that if you've built this with us, you play all of these individual games, get a hang of all the game development features that the application has. I'm not going to play the games right now because that's going to take a lot of time, and in case your games or some of your games aren't working, always feel free to reiterate with the agent, and obviously, it will work eventually.
So this is a really cool page that it's built in a couple of minutes with a simple prompt. So this goes to show us that first, a good and thorough prompt makes the application better. In this case, at least, so I would recommend that you put a lot of thought into your prompt if you're serious about building a really good application. I mean, if you're just trying the app out or trying to get a hang of Repet AI agent, it's fine to put in prompts out of natural language, but since we're trying to build the best applications possible, it's really good if we, uh, use thorough prompts. So that's one thing. And the second thing is, this Repet AI agent is capable of building applications in a wide different, a wide variety of fields, like gaming, health, and Google Maps, and websites. So it's really cool. I'm really impressed. And you can see that it's asking us to try all of these games, play these games, like new arrivals. That is really cool. I mean, it's put a lot of thought into this. So that's it for the game development section. If you want to go into depth, um, for building these individual games, you can obviously do that, like we've done over here. You can tell the agent if you want to build any specific game or, um, how you want to go. So the app crashed, but that's fine. It was a pretty heavy application, I guess. But all I'm trying to say is, uh, that you can further this app with each individual game with the agent. So you can explore the agent, you can tell it that you want, for example, a Mario game or a Fortnite game, Minecraft, whatever you want, and you can integrate that. It's pretty easy. And by this, uh, time in the course, you are 100% capable of doing that. So feel free to leave down in the comments all of the cool things that you've done with the gaming arcade.
Before moving forward with our next applications, I think it's really important that we understand how the agent is working. So let's do that. All right, so the agent uses several industry-leading AI models to create our applications. The core technology of the agent revolves around the following models. First is Agent version one, which revolves around Cloud 3.5 Sonnet, and version two revolves around 3.7. So these are the models. You can check them out in depth, but we just want to know how it works. All right, so, um, agent, we've already done all of this. We can work with database structures as well. We can integrate APIs into the agent and, uh, streamline environment setup and dependency management. We've seen how it does that. It installs dependencies for us, and it manages the environment for us as well. And we've learned how to use the agent, obviously. So we've, um, gone in depth of all of these features. You can, uh, I'll leave this link for this documentation down in the description, and you can study this in depth. Right now, I'm just giving you guys a basic overview.
So it mentions a couple of actions that you can perform using the agent, and then there's something about the prompts here. Like I mentioned earlier, you can add in files and attachments, uh, using the paperclip icon right over here, and you can include text data from a web page by entering in a URL and selecting copy page content. Um, so you can try that out. We've already talked about take screenshot, which you can do to, uh, use a web page that you want to build. For example, if there's a website like YouTube that I want to build using agent, I can take a screenshot and add it here. All right, prompt refinement. We've already done that in depth, and then there's feedback, which you can send to Repet, and there's a pause button, which you can use to stop the agent. All right, so that's that. And checkpoint. Right, this is something that we want to understand. You might have already noticed checkpoints. If you haven't, then let's understand what they are. So a checkpoint is a saved snapshot of the state of your Repet app. Agent automatically creates checkpoints at logical points while working.
On your request, complex tasks can generate multiple checkpoints. So, basically, a checkpoint is like a benchmark or a landmark that the agent creates while it's writing your code. It's a logical place to stop and to save your code and the current state of your application. So that's exactly what a checkpoint is. It's a spot inside your application, a stage inside your application, which is saved to a certain level. And as you move forward and you expand the application, you go on creating more and more checkpoints, and that's basically what checkpoints are.
And each checkpoint lets you perform two actions. The first is roll back, so you can undo the changes made by the agent, uh, and return to the state of the previous checkpoint. It's like saving a file while you're editing it. So you can save a file at each stage, so that even if later on you've done something that you don't want, you have access to the previous, uh, file without the recent edits. So that feature is called roll back.
And then there's track usage. So you can hover over the icon, this icon right over here, and, uh, when you do that in a checkpoint, you can view the amount billed for that checkpoint. That's not really necessary right now, but if you go into depth with Repet and the agent, you can use that. So that's that for the agent.
We've already worked with the progress pane in the progress tab, which shows a record of the agent's actions. We can use it to view real-time updates and the chronological history of what the agent is doing. This is used when you want to understand the details of the changes and troubleshoot issues. We also have real-time updates, which means that we can monitor, monitor the agent's progress and navigate directly to relevant files by clicking on this icon over here. And this animation is just to show you the progress tab in action.
All right, so that's pretty much it for Repet agent. There's also a lot about Repet assistant, but we're not going to get into that in this course. If you guys are interested in a Repet assistant course, feel free to leave that down inside the description. I'll release that too.
Now, let's create a chatbot using a Repet agent. Now, usually, to create a chatbot, people integrate OpenAI and make an AI chatbot. But in this case, OpenAI's API is paid beyond a certain extent, and that is not the type of chatbot that we want to create. So we're going to be very specific with the type of chatbot we want to create. But let's create a chatbot using the agent. So let's write, "Make a make a chatbot for me, but I want it to be independent of OpenAI API. So make sure it works and it looks good."
All right, let's click on improve prompt and see what it has to say. So, "A web-based chatbot application that operates independently without relying on OpenAI's API, focusing on both functionality and aesthetic appeal." So you can read through the core features that it's suggesting and what exactly it's going to do. But for now, let's just start building and see what it, uh, does and where it takes us.
So the agent is thinking, and by now you're probably getting a hang of how this whole thing works. So that's pretty good. It's a simple, and it's monotonous, and it's repetitive. So you can get an understanding of how to build apps, and by the end of this course, you'll be able to build any app that you want because you will have practiced building applications of different types so many times.
All right, so would you like any of these additional features? Um, read receipts? No. Conversation context awareness? No. Chat, um, right. So customizable chatbot personality settings is a really cool feature that I recommend that you experiment with because you can have your chatbot talk to you like a mentor, like a student, like a friend, like a parent. You can do a lot of fun things. So if you're interested in messing around and having some fun and learning in the process, I would recommend that you, uh, try these additional features out. But for now, let's just create a functional chatbot.
So let's approve the plan and now it's going to start building this for us. So I'm going to put this down here and let's see how it starts building. This may take longer than usual because we've made a lot of apps now. So the app, the whole program is much heavier, but it will begin. And when it does, uh, we'll start with the development. Right.
So it took a few minutes, but it's loaded and then started building. So I haven't done much. All I've done is, um, wait for it to start, and it has started coding. The app is a much slower thing than it was a couple of hours ago because we've created so many applications ever since then, but that's fine. It's doing exactly what it used to do, but it's just taking a bit more time. So, so anyways, we are working here, and it's going to be a fixed input output chatbot. Right now, it's not exactly an AI chatbot because the outputs and inputs are predefined, and I'll explain what that means in depth, uh, once the application is ready and we're ready to test it. But this isn't an AI chatbot because we're not using any API key, and that is a negative. But there's also a positive to this, and that means that you can run it offline, and you can run it completely independent of anything. You don't need any external API keys, you don't need anything. All you need is your own code, and you can run it, and it will work. So that is that.
We can see that it's designing and it's doing a bunch of, uh, code over here. If you want, you can pause the video or pause the agent and see what it's doing. But right now, we just want a working chatbot. So let's wait for that. So we can see, uh, by the comments that there's a fun format, U, message timestamp, to, to do a bunch of things, get a random response from an array of, um, responses. And now it's installing dependencies, and it's probably going to present the page to us after this. So I don't really have an idea of what it's doing, and we don't need to have an idea of what it's doing because that's the whole point. The whole point is that the AI builds apps for us, and we just sit back and watch it do that. So it's installing dependencies, and all we need to do is have a basic overview of what's going on because I'm being completely honest, I have no idea what it's done and what it's doing. But I told it that I wanted a chatbot independent of any API, any external API, and that's what it's doing.
So I see there's an issue with the code. There seems to be an import error that's preventing the application from running properly. Let me fix it and get the chatbot working. So that's completely seamless for me. It's, um, found an error. It's apologizing for the error, and it's going to fix the error itself. Uh, let me try viewing the file again with the correct parameters. I don't have to do anything. The agent is operating completely independently, and that is super cool. So let's just wait for the agent to, uh, fix the errors.
I found the issue. So you can see that it's debugging, and it's actually showing us exactly what it's doing. So it found the issue, it found where the issue was, it's heading over there, and it's going to update the chat.tsx file to fix the issue. I fixed one issue, but now there's another problem. We need to update the use of use media query to use isMobile in the chat component. I see there's also a type error in the server file. Let's address that. Let's fix both remaining issues. So it's doing everything that it needs to do without us having to tell it anything or do anything.
So we've created a lot of apps by now. We're going to create more, but I just want to understand whether or not, uh, the agent is capable of creating really high-level applications. I just wanted to do that, and we've done that. So the rest of these applications are just going to be to help you guys practice more and more. But I recommend that you practice by yourself if that's better for you because obviously practicing by yourself independently will help you get a better hang of how to build. So just try and build any application that comes to mind, see how it works, see the, how the agent responds, and have fun. That's the most important thing, and it will eventually be a really valuable skill. After this, all of the applications that we're going to build will be related to making money using the agent. We're going to do that by exploring different, uh, websites that are willing to pay for certain types of applications, and we're going to build those exact applications using Repet AI agent.
All right, so great. The application is now running successfully. The server is running on port 5000, and we fixed all the issues. So let's see how the chatbot interface looks and test its functionality. So it already looks really great as far as I can see. This looks really, really good. All right, so, so this looks good. It is an AI chatbot showing that it's online now. Let's type in a message. Um, can you send a message and get a response? So let's send in a message. Um, hi. All right, well, we sent hi, but I don't see anything. All right, let's try something else. Let's try hello. All right, so every message I send, I can't see it after sending, sending it, sending it, and I can't see any response either.
So we've told it what issues we're facing, and it's going to fix that eventually. But before we get started with, um, how it's going to fix this, in case that the API is working correctly, but there might be an issue. So it's using websockets, apparently. I don't think it's using OpenAI's API, obviously, because we told it not to. But it is using some other API, which is not exactly what I wanted. So I think I should have been more specific while writing the prompt. But yeah, that's a mistake that we should, uh, keep in mind for the future. If we want it not to use an API, we should mention that. I just mentioned, "Don't use OpenAI as API." That doesn't necessarily mean that it won't use any API.
But right, so what I was going to talk to you guys about is how to make money from this skill. So the way we're going to do that is there's a lot of freelancing websites like Fiverr and Freelancer and a lot of other gig websites that pay coders and developers to build certain applications and websites. Now, our agent is just as good as a team of full software engineers. So I can see the application is working, but before that, I'm going to finish what I'm saying. So our agent is just as good as that. So what if we use the agent to build these applications for those clients? That would be a really, really good situation, and we could make a lot of money off of it. So what we're going to do for the rest of this course is look at the applications that clients demand for. I'm going to show you real clients asking for real applications that I have personally, and we're going to build those exact applications using the Repet AI agent. So you'll have a skill that is capable of making you money, and you're on top of the AI development skill.
All right, so also, you can see here, there's a deploy feature, which is pretty cool. We'll talk about that in depth later, but it's basically if you want to deploy your app to the cloud.
All right, so now let's say I'm your friendly chatbot. How can I help you today? Let's just say hi and let's see what it says. So I hit hi, and it says nothing. All right, let's do hello. Oh, wait, it's still working. My bad, my bad. It's still working. You shouldn't mess with the agent while it's working. But yeah, so the agent is still fixing the errors. We should probably check what it's doing. Right.
So it's fixing this over here. So now it's updating the final query invalidation call for sending messages. All right, now it's checking and updating. It's doing a bunch of different things. Um, but you can see that it's actually going through a full thought process after fixing the ability to send messages. Now it's making sure that the messages can be displayed properly. So it has a structured thought process, and that's really, really important in an AI model. I've noticed a potential issue. It's even noticing potential issues, not existing issues. So that's really good for building strong programs that have a lower chance of errors and are less, uh, and are less prone to, um, issues within the code. So let's just wait for it to fix all the errors.
Also, something that I haven't mentioned yet is what we're doing is also called vibe coding. It's basically when you are a developer and instead of actually coding applications yourself, we're using AI to build applications, and our job is to just manage and run the AI, and that's what vibe coding is. So this is actually vibe coding. Everything that we're doing in this course is vibe coding.
I've made several fixes to the chatbot functionality. I've corrected the query paths to properly fetch messages, fix timestamp handling, and, uh, ensured chat session creation and welcome message display. Let me know if you can see messages appearing properly in the chat interface. All right, let's check if this is working. Probably won't, but nothing wrong in trying. So I click hi. Oh, and it's working. It's working. So that's why being pessimistic can make you happy. So I wrote hi, it shows the timing of the message. This is the correct time. It is 2:29 p.m., and it's responded perfectly. So we have built a functioning chatbot, um, using our agent. Now we can use this for a lot of different things, like, um, there's a lot of different websites that have chatbots integrated into them for customer service and customer help, and this is a really useful tool.
Now, I don't know why it's taking this much time. All I've written is hello, but there may be something there. But anyways, we have a working chatbot. Now we can iterate if we want it to be faster and work better, but for now, I think this is great. Uh, did it not even process my error? Hello, error, failed to send message. All right, so well, if we want to iterate, we can tell it that it's, it isn't taking in my second message. It's saying, "Error, failed to take in second message." We can say that and hit enter, and it's probably going to. The app has crashed. Perfect.
So anyways, we saw that at least one message worked, and if we iterate, obviously the entire application is going to start working. We're not going to go into too much depth with that for now, but I think it's a, a great way for us to understand how these customer service chatbots and these help chatbots and all of these chatbots that we see on different websites are built. So we've actually built the exact same thing, except ours isn't really AI integration. Um, we can check the code to see exactly what it's doing with the API, but for now, I think we're cool with what it's built. If you want to iterate and make it better, more work, uh, more functional chatbot, you can obviously do that. But for now, I just want to cover the basic functionality of each app and move on. My entire goal of covering all of these apps is just to help you guys practice using the agent, not actually to build these applications. But if you're actually interested in building each one of these applications to the fullest extent, all you have to do is just keep iterating with the agent, and it will eventually be exactly what you want it to be.
So it's presenting us with the chatbot again. I'm just going to test it. If it works, then great. If it doesn't, then great. We'll move on on either way. So it's loading the page. All right. "Hi there, I'm your friendly chatbot. How can I help you today?" Um, "How are you?" Enter. "Hm, I don't have information about that. Is there something else I can help you with?" No. All right. So Elise is now, it's logging in multiple functions. The thing here is, like I mentioned earlier, this is a fixed input output chatbot. So it's not using any artificial intelligence. So basically, unless it has this in its array for, uh, recognizable inputs, it's not going to be able to generate an output. For example, "hi" is probably in one of its recognizable outputs. So, "Hey, how can I assist you?" If I type in, let's say something like "user interface" or actually, I type in "mobile," let's see if that works. "I'm not sure to understand that." User interface. User interface. All right, let's ask it. Let's ask our agent what are the things I can say to it that it will respond to. I'm pretty sure there are some fixed things that I have to say. So what this basically means is the program works on, uh, that idea that the code knows, or chatbot knows, that if it has a certain input, it's going to give out a certain output. And there's an error handling in that, that if it's any other input, then we're going to return, "All of these, I'm not sure I understand that. I don't have information about that." So all right, let's see. Right.
So this is what it can say. Let's type in "mobile app." Right now, it's going to work perfectly. Let's type in "mobile." I really hope this doesn't crash. M, "mobile app." And hit enter, and now it's going to give us, uh, really good responses. So this is super cool. "We develop mobile apps for both iOS and Android platforms using native technologies as well as cross-platform frameworks like React Native and Flutter. Our entire team can help you." All right, now let's, uh, let's say "pricing." "Our pricing varies depending on the specific project needs. Would you like to schedule a consultation to discuss your requirements?" This is exactly how chatbots work in different websites. If you ever head over to a really good website and you see that they have an inbuilt chatbot, this is exactly what that is. So we've not only understood the functionality, but we've also built it in around 15 minutes using the agent, which is super cool. So we can say everything that it says over here, and you can add an infinite number of inputs and outputs so that it eventually becomes just as good, if not better, than an AI chatbot because you've written the outputs yourself. So this is how businesses use chatbots, and this is actually one of the projects that you can monetize, selling this to a business, building a website. These are really cool and advanced applications that we've built using the Repet AI agent. Let me just type in a couple other things. Let's get a general overview of all the services. Hit enter, and it's going to give us all of the services. For example, this chatbot would be for a web development company. So if there's a web development company, let's say named Monx, so they offer these services, and this is their chatbot. They offer web development, mobile apps, UI/UX design, digital marketing. And then we want to, let's say, go for contact. We want to contact these guys. So the chatbot does that perfectly. So this is a really, really cool chatbot. I'm pretty impressed with it. So you can reach our team at contact@example.com or call us at this fake number. So this is really, really cool. We've built a completely functioning chatbot, and we've understood how it works.
So now let's move on to some of the other apps that we can monetize through Repet AI agent. There are many ways to make money through this skill of using the Repet AI agent. Freelance developers across the world charge clients large amounts of money for building websites and applications. We can do that much faster and much better than them using AI. So you can leverage this skill in many ways. Firstly, on websites like Freelancer, Fiverr, and Upwork, you can build these exact same websites and applications. But since you're using AI, you can build it much faster and much better for your clients. You can also use the Repet AI agent to debug and to optimize pre-existing code that clients have. That is also a great way to make money and is in great demand. So by building applications and websites that developers normally build for their clients, but building it in a much more efficient and better way using AI, you can make money through freelance websites by charging clients. You can also improve their code and remove the errors from their code using AI, like we've covered throughout the course. So those are the ways to make money using the skill.
Now we're going to cover some of the most in-demand applications that clients have, and then we'll wrap up with the course ending. One of the most in-demand applications that clients have is for a blog site. Now, blog sites are one of the most common websites in the world, and bloggers across the world and companies managing blogs need blog sites to be looking good and to be aesthetically pleasing. So let's create exactly that super quickly so that you can learn how to create this for multiple clients and make a lot of money doing so.
All right, so we're just going to tell it to make a blog website. We're going to do the same thing that we've done throughout the course, just we're going to tell it very clearly what we want to do, completely openly, and we're going to watch it build it for us. So, "Build me a blog website." All right, and we're going to keep it on AI. On AI, it should be super good-looking. Keep it with a blue color scheme and many gradients as well. Use images of high-tech AI as and when necessary to make it look even better. All right, and that's it for now. We can also say, "Make it super good and attractive." All right, so that is that, and let's click on start building. Now you can sell this to bloggers or blog companies that write blogs, and you, you don't actually have to make it specifically about AI. Whatever the request is, you can make it in a couple of minutes on anything. So as long as you are on freelance websites like Fiverr, Upwork, and Freelancer, you'll find work like this pretty easily, and you can do it super faster than any other developer using AI.
So the AI is going to generate a plan for how to create an attractive AI blog with a blue color scheme and gradients. All right, so this is cool. "Create author profiles and attributions." Sure. "Add related post suggestions." Sure. And I think that's enough. But if your client, for example, wants a commenting system for blog posts, then you can mention that to them as well. And if even if they don't want it, you can at least ask them if they are interested in additional features because we're using Repet AI agent, and we have tons of additional features that we can offer them. So that's why this is much better than other developers who would just build them exactly what they need. We can actually add on using the agent's creative capabilities, and they'll probably be happy with it.
All right, so approve plan and start. And let's see where this goes. So we're going to just put that down, and it's going to start coding over here. It's going to build the initial prototype for our blog website. This is going to take a little while as the application is quite heavy now, but we're going to wait for it to move forward. Also, for those of you who don't know how to work on Fiverr, Freelancer, Upwork, these are basically freelance websites where people pay you a certain amount of money for a certain amount of work or a certain project or a certain script, and that's exact, everything in front of you.
All right, and as I was teaching you guys earlier in the course, roll back basically means in a checkpoint that we can return to this initial position. That's why we have checkpoints. So later on, even as we build more and more checkpoints, we can always return to each individual checkpoint, uh, if we want to. It's like we saved a particular position. All of what we've done till yet.
All right, I like the name AI Blue Pulse, but let's just wait for it to start coding. I'm going to refresh this page. It's probably crashed, and let's see what happens. So the application crashed, uh, once, but now it is working. It's just the same thing. It's writing the code, and right. So let's just wait for it to create AI Blue Pulse, which is going to be our blog website. So it's creating subscriber methods, article tag methods. Um, you can see that on the right, and it's pretty cool. I've really started loving this agent. I've built a lot of my own dream projects using this agent pretty quickly. So it's creating an author section: David Chen, Maya Rodriguez, Dr. James Wilson, Lisa Zen. It's really impressive the fact that it's able to generate its own authors, own topics, and everything by itself. That is really cool, and the articles are actually really relevant. "The Evolution of Neural Networks, Multi-layer Networks, and Backpropagation in the 1990s." Yan LeCun, and so it's like really relevant. I mean, these people are super relevant in the world of AI. Even Perplexity's founder, Arvin Shrivastava, looks up to that person a lot as well. So, "Creating Ethical AI Requires Technical Solutions." This is all super relevant. So that's really impressive that it's able to include that in our app, and that goes to show that when you're making money using this, you don't even have to put in that much effort. The effort is just majorly on the finding the client side and finding the work. Everything else you're able to do with absolutely zero effort. So this is really great. If you want to get into the freelancing business, you can reduce your effort, um, significantly just by using Repet AI agent.
Beyond ChatGPT, the next generation of language models. This is super relevant stuff. This is just, uh, less than a year ago. So this is actually really impressive that it's able to generate all of these topics and these lines. And let's just see how the end product looks. We can actually iterate it, but I'm pretty sure that you guys have understood how to make that work. So I'm not going to go into too much depth. I'm just trying to give you guys a basic idea of all the cool things that you can do with the agent and point you guys in the right direction when it comes to this AI agent. Also, I want to give a big shout out to the entire Repet team. This product is really amazing, and the fact that it's available for free now is just really good. They've done really impressive work with the agent. So, uh, just a really big thank you to everybody at Repet.
All right, so you can see that it's taken 5 minutes. So it's much slower than it was initially. That's probably because we've created a lot of applications on Repet, but nonetheless, it's writing code perfectly, and we can see that it's making a mobile menu button, and it's doing pretty cool work. So this is really impressive. I, for one, throughout the course, have just been stressing about how amazed I am with this entire, um, software because the fact that it's able to code so nicely, I never thought that an artificial intelligence would be able to do that, at least this early. So now it's writing a default gradient. If the topic doesn't have a color, I think it's going to give each topic an individual color that's going to look really, really nice. So let's just wait for it to. So it's creating a features article set, featured article section, read all articles button, and it's really deep. I mean, it's not stopping anytime soon. It's, it's doing some really, really good in-depth work, and I'm actually kind of, uh, impressed with the way that it's not stopping or it's not compromising. It's creating a bunch of files to make sure that we get exactly what we asked for, and it's actually using a couple of application programming interfaces, which is also very cool.
All right, hopefully it'll end because it's already created around 15 files and 7 minutes, but it's probably going to be worth the wait. So let's just keep on waiting for it to build our app. It's really, really good quality code. The best part is, even if it makes featured authors, that's really cool. Even if it makes any errors, it identifies that itself and fixes it itself. "Abstract AI Circuit Pattern." All right, that looks nice. I can't wait to see what, what it's doing because seeing what this looks like is going to be great. Hopefully, it is done now. It's already 18 files, but nope, it's creating something else. All right, "Nexus AI: Exploring Artificial Intelligence," and calculates total pages. It's doing a lot of work here. It's quite interesting to see that it's been 8 minutes and it hasn't created another checkpoint either. So it's pretty cool. I don't think what everything it's doing is necessary. So this better be a really good app, and it's creating more article detail page, Twitter, Facebook, LinkedIn, copying. Wow, this is really deep. So imagine a developer seeing this code would be shocked. I mean, this is so much code. They would think you've put in a lot of effort, but in fact, you're just doing a really efficient and good job using AI. But if a developer sees this, a developer would pay, sorry, a client would pay really good money because they would think the developer has put in a lot of effort, when in fact the developer is just using artificial intelligence, and that's perfectly okay. You're getting the job done in a much more efficient and better manner. So hopefully it is done now. Nope, still going.
All right, so link ra icon, HTML files. So cool. As you can see, it's already been 10 minutes and it's created, um, over 20 files, which are over here. Um, we can go over all of them if we want to when you're giving the clients the code, if they ask for it, which they probably will, you can use all of this. Otherwise, you can just deploy the app directly for them as well using the agent, which is perfectly normal. Um, we're not going to be covering deployment in this course because that is a paid feature, but if you want to, it's pretty easy. There's, it's completely inbuilt into the app, and there's a deploy button. All you have to do on the top right corner, there's this deploy button. You click on it, and it has a pretty straightforward way to deploy apps on the cloud. You can do that for your clients as well, and you can do that for your own applications if you're interested in doing that. I'll leave a link in the description for deployment documentation as well if you want to get a better understanding of the deployment process, but we're not covering that since that's a paid feature in this agent.
So it's creating gradients. It's probably doing everything we've asked, and it's not coding slowly. It is coding super fast. So I guess it's coding a lot of different things. I don't think it should be doing that, though. I mean, this is going to be either something really good or it's wasting a lot of time. Let's just wait for it. It looks like it's handling everything that it needs to handle, even going back in the code to do things. All right, finally, it looks like we're ready since it's installing dependencies. So now it should show us our end product, which we can iterate if we want, but I'm not going to do that since it's already taken a lot of time. But if you're working with a client and your client is unsatisfied with the first model, obviously you can tell them that, "Sure, I'll iterate, I'll work, uh, on it," and then you can just iterate with the agent until you reach something the client is satisfied with.
So now it's running our application, and it's going to be pretty heavy, so it may crash. If it does crash, I'll have to reload it and present it again, but that's not going to be an issue. All right, so there's an issue in the API routes, which it's going to fix. So you can watch, uh, it fix all the route handlers, updating the routes as well. I'm not really interested in that, but sure, let's just wait for it to do that. It's pretty cool that we don't have to debug anything, though. So in case, let's say, uh, the agent lost connection, try refreshing the page. Sure. Okay. No, it's connected again. I think, yeah, it's connected. So what I was saying was, um, it's pretty about the debugging. So if your client comes to you with a file like this one and says, "Well, I'm having trouble, I want you to debug it," then you don't really have to debug it yourself. You just paste it into the agent, tell it to debug it, and the agent is going to do it in minutes, just like it's doing for its own code. And the agent is really, really good at debugging. I haven't seen the agent fail at debugging or troubleshooting yet. So this is really cool. I mean, you can use this to make a lot of money really quickly, as long as you find clients on Fiverr, Upwork, and Freelancer, which you will because you'll get great reviews because of the AI's work.
Also, if you're new to the channel, I'd really appreciate if you could subscribe, leave a like, and comment down below what course you want next. Uh, that would really help the channel grow, and it would mean a lot to me as well. So it's checking its progress. "I'm making good progress addressing the backend issues that are preventing the application from starting. I'll continue working to fix the remaining issues and get the application running." Oh, wow. This looks great. Um, it isn't blue, though, which we can see once we run the app, but that's fine. All right, but this looks great. I mean, this looks like a blog, a professional blog. I mean, if I go to the internet and I find a blog, this is exactly what it's going to look like, and I'm talking about a good blog here. So this looks great. Let's see what the website looks like. "Ready to share with the world." Deploy. That was the deployment feature I'm talking about. So let's just see. Wow, it is blue, and it does look great. "The Future is Now: Exploring the Frontiers of Artificial Intelligence. Discover Groundbreaking Insights." So this is something that we have made using AI really quickly, and the gradients are impressive. This is impressive. It's not loading the images, which is okay, but it has added authors. This is really good. This is quality. I mean, the fact that it's, it's added dates, it's added the timing for the reads, and the names of the articles, and the articles are relevant too. And I click on the article, and it takes us all the way over here. So this article by this person, this creative AI specialist, and it's a great article. I mean, it's an actual article over here. We can click on topics, uh, large language in NLP, computer vision, AI hardware, and a lot of cool stuff over here. AI ethics. And we can also click on about. And and all right, so while the page is crashing, so I'm not going to iterate it, but that just gives you an example of how you can create a blog, a really good-looking blog using the agent. So that's what you want to do to make money with the application. I'm not really sure if we should keep on creating different applications because I'm pretty sure that you guys have gotten a hang of how to build these apps in any way that you want. So I'm going to end the course here. Feel free to comment down below if you want me to build some more applications or any specific applications or anything that you want me to do. You can comment it down below. I'll be sure to look into it. All right, peace. Thank you all for watching.
Also, for those of you who have stuck around to the end, I'm going to give you a little homework before you're done with the agent. So to make sure that you're completely confident with building apps with the AI agent, what I want you guys to do is this blog looks great and it works great, right? We've seen that it has a bunch of articles, a bunch of authors, and it looks and works perfectly like a really high-level blog. But there are some errors. So what I want you guys to do is identify the errors yourself, mention that to the agent, and iterate with the agent until the blog is completely perfect. I'm leaving it imperfect here, but I want you guys to make sure to do that. That way, you'll practice the debugging part, the error handling part, and you'll be completely ready to build any application that you want with the Repet AI agent.