Now we'll enhance our search engine optimization or SEO analyzer prototype. We'll use Agent to add core functionality, then switch to Assistant for customization and feature expansion. Finally, we'll deploy our application so others can access it online. Now let's get back to it. So, in this lesson we're going to enhance the functionality of our application and start adding a lot of polish to exactly what we built. So, I'm going to go ahead to the top and create a new chat with Agent to clear out the context like we discussed. And start off by saying, that we want to make a more visually appealing and visually representative app. We have all this data about our website, about the tags that we built. But the only real visual summary that we're getting is an overall SEO score. So I'm wondering if we could get something that more, better captures the entirety of these tags. Maybe something that tells us if our images, a summary of our images, a summary of our titles and descriptions, as well as this kind of high-level information. So what we're going to do is we're going to consolidate that into a prompt and ask Agent, we're also going to ask again for a little bit more polish on the UI. So what I'm gonna say here is make the application more visual. So I'm starting high level. And then I'm going to drill down with just some quick bullet points for Agent that are all kind of feeding into the same functionality. Again, we're keeping these very targeted. We're not getting too crazy with what we're doing in one prompt. So, create summaries for each, category of meta tag that you will display visually to the user, similar to the overall, overall all score. If you remember from our wireframe, right, I had in mind this, concept of multiple scores that we could inspect each kind of category in our website. And it's okay that, you know, our MVP, what we're building here, it doesn't look exactly like my wireframe. The wireframe is really more just to guide what we're building and keep that in the front of my mind, but I am going to drill down here and try to tune those things in a little bit more. Make the app overall more visual, and allow me to get a summary of the SEO results at a glance. So we'll add one more point, which is exactly that. And, you know, a lot of times I see when people are building with AI, they'll come to me and say, hey, Matt, I'm trying to get AI to do this thing because XYZ and I want ABC outcome, right? And I'm like, just tell the model that. So exactly what I just told you, we're going to tell to Agent. Help, overall, let's make the app more, visual and user-friendly for folks that might be new to SEO. So we can get a high-level view of how well our page is implemented. Now it's kind of like, you know, giving wishes to a genie. You know, if you're not very explicit, the genie might just do some crazy stuff. Right. So what we have to do here, if we're asking for simplicity, is follow up that we want all the functionality that our app has right now. We don't want you to take anything away. So that's a very important thing that I've noticed does wonders. Do not remove any functionality just to make, it easier to see a high-level summary or drill down into the details. And, I think we kind of know the drill by now. So we're just gonna let this one run. We'll come back once Agent is done implementing these features, and we'll talk about what it did. Okay. So we're through that round of edits. Let's see what we've gotten here. We're just going to go back with our old example. We're going to analyze that. And now it looks like we get a bit more of a visual representation of our checks. There appears to be, let's see what's going on here. Much better overview. So we're generating kind of key findings and what's good meta keywords. It's good. These are present, what needs attention as well as some priority recommendations. So optimizing the title tag and improving the description. We also get some category breakdowns. So SEO and social media optimization. So it looks like there are some checks going on there. It's checking both for titles and the way that things are going to show up on social media. We're checking how robots index our sites, what's known as a robots.txt. Typically determines how websites can be scraped on social media. We also have open graph tags and Twitter card checks. Now, we can still drill down into technical details and actually get a Google search preview, which is nice. So you can see like this is maybe a little too simple for Google though, as our social media previews and this is a bit more clean. Nicer display both for Facebook and Twitter. And then if we want to drop down into our SEO recommendations, we get a much more descriptive view here. We can still see our raw tags. There's also some like nice hover effects. So, you know this is like 3 or 4 prompts. But what I want to point out is that, more than anything, we had attention to detail and we had attention to exactly what we wanted changed. And so we drilled into our app. There's still some things that aren't perfect, right? Like this is not, ideal. The spacing here, we could really kind of like nerd out with getting this to look the way we want it to. But overall, we have something that's fundamentally more polished. Now, there were still a couple points. So we're going to open up Assistant here. To make some like finer grain changes to what we just built. And when you open up Assistant you might notice that your app restarts. You might notice that, there's a refresh. And that's because we're kind of like living Agent mode, so to speak. And if you'll remember, I didn't really like that I couldn't type in that I had to type in Https. So I'm going to say to Assistant because it actually has a lot of the same context. Right? Into our application that Agent has, I'm going to say, can you make the website entry form such that https is automatically populated and the user doesn't have to enter any other info? And because this is a quicker, tool assistance, more lightweight tool, you're going to notice that the responses are much quicker. And so Assistant is going to read the relevant files. So this is our first kind of intro to Assistant. It's behaving a lot like Agent but in a similar manner. It's going to make the change and then it's going to make a check checkpoint. So we made a checkpoint Https is prefixed theoretically, we'll do DeepLearning.AI this time. Deep learning, we just type in DeepLearning.AI. We get our result. So what you might notice is that our, our sort of, globe element is on top of the Https. To provide context for Assistant. I'm going to actually open up, our screenshot tool here. This is just using Mac OS. So if you're on windows it might be different. I'm going to copy this to my clipboard. And then I'm going to paste that screenshot in and say, now the globe icon overlaps with Https. Can you fix it? When we talked about context right? We talked about providing additional details to AI. I giving it the information it needs to fix errors. And that's what we're doing here. Hey, now Assistant can see the overlapping problem. And it's going to present us with a solution. And ask if we want to apply those changes. Looks like we're getting a bit of an error here. Let's preview and see what's happening. It's actually just removing it looks like removing the globe here. But the commit didn't quite work. That's okay. We're actually you know, sometimes stuff like that happens, you might get similar errors. I'm just gonna literally paste this in. Let me copy this run on it again. Let's see what happens. There. So it looks like it just took another command really quick to run through. And actually looks like the original changes were applied. We just might have gotten a, a bit of a rerun getting a little error there, it's all good. And when Assistant makes a new checkpoint it's going to restart our app. So now we have our app. We have the Https. I can just type in DeepLearning.AI. I can click analyze. But just like that we flipped over to Assistant. We made some more lightweight details. This is kind of like what we wanted to build for our application. So we're going to walk through the deploy pattern. This is something we'll do for both of our applications. Note that deployments are limited to Replit core users. So you might not see this experience. But at any time, if you want to subscribe or upgrade, you can deploy that way. Clicking deploy, we're actually just going to configure the build for you. You don't really need to worry about these details or really even what Autoscale means. We're going to approve and configure the settings, and then we're going to come up with a name for our app. So we call an SEO tag inspector. Note that we're configuring the build command and the run command. I don't really need to worry about any of this. Agent is going to take care of it for me. All right. Click deployment. And you know it's important to mention what's going on. This typically takes 2 or 3 minutes. We're taking this application. We're bundling it up. We're taking this entire environment that we've built with Agent. And then we're just putting that on the cloud basically, You don't really have to worry about the technical complexity of what's going on. You don't have to worry about any of the nuance or details. What you do have to know is that everything that you just built will look the same on the web page that we're deploying now. If you went back and made more changes this application, they will not automatically flow through. You'd have to go through and click redeploy. So we're going a little bit slower, in this lesson. But that's because we want to cover all the basics and understand how things work. So when we build our application, when we click deploy, we're taking a snapshot of everything that we just built with Agent, with Assistant, all these features that we added and then promoting them to their own web page, which we just defined. If at any time you want to learn more about the different types of deployments that we have or how deployments work or any of the technical details, you can learn more in our documentation, or check out some videos on YouTube that I built that have some really in-depth content. But at a high level, we're going to select the right deployment type for you. And we can be very confident that that's the right type to deploy. So in the meantime, you can watch this cool loading screen. All deployments also come with logs. So you can see exactly what's happening in your deployment. They come with analytics. So you'll be able to see who's visiting your deployment, how many users you have, as well as some other settings that you can drill into. Those will be visible once our deployment is done. In the meantime, we're going to sit back. I'll join you once this, this is done deploying. So, we're back. You can see the deployment took about two minutes, which is great. And we're going to give you the domain you just deploy to. So if I go to this URL we're going to get the same app. This is now deployed on the internet. Note it's at its own URL. You can visit this site if you want. I actually just entered a site and it had Https and the form automatically removed that for me. So that's really nice. I can click analyze. It's going to work exactly the same as what we had before. So, these are the basics. We just built end to end an application with Agent with Assistant that scrapes web pages, performs an analysis on that web page to tell us if there's anything that we can improve or maybe optimize for SEO Google Results, or social posts and then deployed it. We built a tool completely that other people can use that you can use, and that's how simple it is. And so, this lesson was really more about polishing, flipping over to Assistant. In the next lesson, we'll be able to speed through a bit more of the basics, since we've already covered those and get into more of a complex topic, so I'm really excited for that one. I'll catch you in the next lesson.