Transcription
We're about to create a professional UI for a fast API backend by using something called context engineering. Now, context engineering is 10 times better than prompt engineering and probably 50 times smarter than vibe coding. This is how today's best software developers are able to ship clean and scalable solutions at incredible speed. I know when I use the right tools with the right patterns, I can produce code that fits my architecture goals super fast. And we're about to do that all right here in this video using VS Code.
If you're new to the channel, I'm Eric Roby, a software engineer with over 10 years of experience. And I've helped over 100,000 developers learn and grow within their craft. And just before we dive in, this video is sponsored by Augment Code. They reached out to me to show me their most advanced contacts engine. And wow, it's amazing. So with that, let's go ahead and dive into the video.
All right, so the backend project that we have is a clean architecture for fast API. It has a bunch of to-dos. It has end-to-end testing and testing. So, if we come over here and we say like `pytest` to start it off, we're going to run all the tests just to make sure everything's good to go. But one thing we're going to notice is that this project doesn't have a UI. Now, this project does have authentication, a database, entities, to-dos, a uh user to be able to track the user capabilities. So, it really does have pretty much everything we want for a backend. It's just missing a UI. And we're going to create this UI really fast.
So, what we're going to be using in this project is Augment Code. Now, Augment Code is one of the most powerful AI software development platforms there is, and that's because they have such a big contacts engine. So, right here it says "Better contacts, better agent, better code." Go ahead and sign in. We can click sign in and just sign in as Google or whatever you want to use. And then once you create your account, let's go back into VS Code and we're going to want to come over to our extensions and type in "augment." Now, this right here is the extension that we need to install. So, let's go ahead and just say install.
When you install it, it's going to come down here a little bit. And then right here, it's going to tell us, "What do you want to index?" We're going to say yes, index this codebase. And now it's indexing. So we can see here, Augment just finished syncing your codebase. So right here, we have a couple different options. We can say chat, agent, or remote agent. If we click chat, we can get some general advice. We can say like, "What is this project about?" and it's generating a response, but it's able to capture your entire codebase. So, it's going to say, "This project is a clean architecture, fast API template, has a domain layer, an application layer, infrastructure layer with JWT authentication, API endpoints, testing, Docker support," pretty much saying it has it all.
Now, when you go to agent mode, this is a way for us to be able to have an agent and it's going to be able to make code changes on our behalf. So, for example, I'm just going to come in here and just paste in this prompt, which is: "I currently have a fast API backend that includes authentication, a to-do system, and tests. Now, I want to build a frontend for this application. This includes authentication, authorization, so we need sign in, sign out, a to-do interface for the logged-in user. The frontend should be built using Jinja templates, but I don't want to modify the fast API backend code. Instead, I want to use JavaScript and call these API endpoints. The UI should be styled using Tailwind CSS but have a Bootstrap feel. And I'd like Tailwind to be fully configured automatically as part of the setup. The goal is to be modern, clean, and responsive. In particular, I want to revamp the forms and we need to be following best practices here."
If we say auto, it's going to automatically be able to run commands in our terminal on our behalf. I'm not going to have it run automatically quite yet. And then we can just say send to the agent. And now what it's going to do, it's going to be processing. It's going to be generating everything that it needs to do to be able to create a beautiful UI on our behalf. So, right here, it's reading the directory and it's going to start generating a response.
Now, here it's asking us if we can make a new directory for our static CSS and for our templates. You can click this little run button and it's just going to do it automatically. So, right here in our directory, we can see that in our source, it now has a templates and static. All right. Now that it has a CSS implemented, it's going to start working on the base templates for authentication templates. And first, it needs to create the base template and then from there it needs to create everything else that we need to create a modern UI. And what's crazy about this is that it keeps generating responses based on the large contacts engine that it has. It can consume so many tokens, be able to see our entire backend architecture and applications, be able to consume our prompt, be able to create the UIs, but still have the context of our backend code. Therefore, when it creates the UIs, it knows exactly the endpoints that are needed to connect to our backend application to build us something really awesome.
All right, so it's got like version one complete. Let me start up the application by doing `uvicorn src.main:app --reload`. This brings us to our docs. Let's go to our actual page and let's go ahead and say sign up here. I'm going to say "Eric Roby." Account created successfully. Please sign in. All right. So now we can just say `hi@codingwithroi.com`. Password was `this`. Sign in. Sign in successful. Holy cow. All right. My to-dos organize the tasks efficient. Okay. So, what do we got to do? We got to uh walk the dog. Priority is say high. Do to tomorrow at 10:50 a.m. Add to-do. Great. You created your first to-do. This is cool. We just click that edit. Add like a couple more. Total to-dos pending complete. Overdue. Um, okay. Quick stats. Total pending my to-dos. Okay, so that brings you to the same page. Um, let's add another one. What do you need to do? Let's say um wash car. Now we have a really bad car. So let's say that is due before, let's say we got like a date at noon, you know, needs to be done. 11:59. Add. Oh, there's different colors for each one, too. Wow. 50% complete because we have two in here. This is really cool. Make dinner. Now, this is going to be high, but not quite like before. Now, this needs to be today at 6 p.m. Add to-do. This is insane. Edit. Let's make this low. What's the color for low? Gray. Now, this is insane. Now, this should be 33% of the way. Okay. So, if we come over here, hi, this is your email. Sign out. It signed you out. What happens if you try and sign in with the demo? Okay, so the demo user doesn't quite work, but this is insane for the first try. First try. This was literally try number one. And it was able to give all of this.
And what's really awesome about Augment Code as well is the fact that right here we can change from chat to agent to something called remote agent. So, Augment Code has something called like the remote agent, and this is a powerful tool that will help you complete software development because it runs all of your tasks in the cloud in their own cloud environment. So, this was one local agent, right? But you can run multiple agents in parallel, all running independent tasks, and you just need to monitor and manage their progress within like VS Code. And what's really cool about it is you can assign multiple agents to all run in parallel and be able to knock out tasks by themselves. Guys, this was one try. This was literally one shot of this. Now, the prompt was very clear, but Augment Code is able to take in so much context to be able to really create something amazing for us.
So, if you like this video and you want to see remote agents in the future, let me know. And I love going over some of these new AI tools because some of them are getting pretty insane. So until next time.