In this lesson, you will build a full-stack app to display the results of the data analysis that you've done for your Wikipedia analysis app. Along the way, you will learn a number of tips and tricks and best practices to maximize your interactions with the AI agent. Let's get started. All right, now's the fun part. We're going to take all the work we've done to build out the frequency analysis and caching, and make it visual with a web page. So switch over to Windsurf. This is where we left off last time. What am I to do is I'm just going to start a new conversation for this because we're building out our front end and I'm going to use this prompt, create a web page that loads data from the results cache if available, of course. Otherwise, compute the frequency from scratch and display a word cloud where the size of the words are proportional to the frequency. And again, I'm specifying that I want to use HTML, JavaScript, and Flask for this task. So let's see what Cascade can do. All right. It seems like Cascade has added and edited a bunch of files. Again, I can use the open diff tool, the Cascade bar, in order to observe and investigate all the changes that have been made. Let's go and run the app. Okay. Seems like the app is live. Let's go check it out. So here we are at localhost 5000 where it said it was deployed. Let me type in my large language models category. Generate the word cloud and boom. Seems like it's fast enough. Seems like it's in the cache. Looks great to me. Let's go back to Windsurf and I'll show a few more things. The first thing I want to show is that, as you can see, currently Cascade is running a terminal process. You'll notice here in this bar that appears above the input prompt area. You can see all the changes that you need to review over, and all the files that you need to look into. And you can also see all the terminal processes that are currently running. You can also end and cancel any of the processes from here or directly from where the command was actually run. So let's go in. When making reviews. Again I can go file to file. I can accept changes at block level. I can accept changes at file level. I can accept all the changes directly from this bar. So a lot of different ways in order to accept or reject changes from cascade. So, so far so good. Let's do a little bit more looking around. I have the HTML file here which looks great. There's obviously a lot of JavaScript here as asked. Maybe I'm just not expert on JavaScript. And I kind of want to understand a little bit of what's going on. There's some nice other handy features hidden around the Windsurf editor to make these kinds of operations really easy. For example, if I go to the function, this is a function generate word cloud in JavaScript, not an expert on this. You'll notice that a number of helpful code lenses appear at the top above the text editor. So I could just click explain. And what this will do is Cascade will pull in all that relevant information into Cascade. Perform analysis and explain to me what's going on. This is really helpful, especially as I use Cascade and these agents in unfamiliar languages or frameworks. I can also use it to explain exactly what's going on, and our ability to be able to detect this and pull in just the relevant information is due to all that complex parsing logic that we built on top of code bases that we mentioned in earlier lesson. So this is always a helpful utility in order to understand code that exists. The next thing I want to add though to my app is different colors. I want to make it look very pretty. And to do this, I'm actually going to demonstrate a number of the functionalities that have nothing to do with Cascade or the agent. Again, this is an AI native IDE, so has much more than just the agentic experience. To do this, I'm going to go to my File Explorer. I'm going to create a new file called Colorpalette.py just to define the color palette. I'm going to close Cascade for now. The first functionality that I'm going to show is what's called command. This is the ability to give instructions to the AI directly in natural language. In the text editor, the shortcut for that is command I. As you can see, the command entry comes up. In this case, I'll just give command an instruction to create a color palette class that contains six hex colors. Punch of common color palettes, etc. Let's see how it works. As you can see, it's going to rapidly generate a lot of code for me, which is great even faster than I can probably do it while prompting Cascade, which is why you should always use agentic experience for everything. But it's nice because you can also use further functionalities. For example, you can already see the autocomplete is trying to suggest additional boilerplate code. So looking at this maybe I want like your class RGB color palette. I can just autocomplete and multiple lines of code can be generated rapidly. I can continue my work here. I can say define function to just get all color palettes, find a method just to return all of them. That's great, but you'll notice here let me actually word-wrap to make it visible. But it's not just the ability to command or autocomplete. There's a lot of the passive experience that exists with editing in the text area. For example, I might just go here and I might just rename this default color palette. What you'll notice is that our AI is already suggesting the next edits that appear far away from my cursor position. So, this is the benefit of having a really strong pasive experience inside the text editor itself. You can rapidly generate a lot of boilerplate code without really need to rely on the agent as a crutch for every edit that you want to make. So this is helpful, but now actually need to incorporate this color palette class that I created into my application. So for this, I'm going to switch back to Cascade. What I'm going to ask Cascade to do is I'm going to integrate this get all color palettes method into my existing app. To this I'm going to use a functionality called App Mentions, something we haven't mentioned so far, but just to show what it really does, is this a way for you as the developer to guide the AI in a very light lift manner in places that you already know what the AI needs to look at. Again, because it is agentic, Cascade does have the capability to go and figure this out by themselves. But just like if you're working with a peer programmer, if you can just nicely nudge them in the right direction, you're just going to save them some time. So think about it that mentions in the similar kind of manner. You're able to @ mention files, directories. You can mention @ individual methods and functions which we'll use in a moment. You could even @ mentioned the web were a bunch of third party public docs for third party APIs that are common. So let's integrate this color palette into our Word Cloud app. To do that, I'll just use the that mentioned, as we just discussed, to tag in the get all color palettes function. Second to the word cloud app. Again best practices. Let's be a little descriptive. What we want to see made the color palettes selectable in a dropdown and display the colors being used. Let's see what happens. As you can see, by using an app mentioned, the agents able to directly go to where it needs to look, and then it will use this agentic search and discovery capabilities to look at other relevant pieces. Start making some modifications. You can use the open diff as I go along. See some of the changes being made. Let's see how this looks. Looks pretty good to me. So let's try to generate category name. Of course that's on me. Oh, I accidentally misspelled it. That's fine. Cool. So seems like we got word cloud using this material color palette. Let's start changing the color palette. Change the dark color palette. Seems to generate the word cloud differently. Awesome. Seems to be working. Kind of like how I'd expect it to work. One thing I noticed that when selecting a different color palette, it would automatically change the word cloud without me clicking the Generate Word cloud button. Maybe I like it. Maybe I actually want to change this a little bit. Again, this is the iteration part of working with an AI agent or any AI tools. I must go back to Windsurf and just say, make sure that I need to click the generate button to create a new word cloud. Even if I change the selection of the color palette. Or just some kind of instructed action and we'll see what it does. Seems like it wasn't a huge change. That sorts all changes. Let's go back to the application. Refresh it. Put in. Category. Okay. Now if I select and you call it word cloud change. But the word cloud didn't change. So let's see. Give me the loading screen. Awesome. So again these are minor details but way to iterate on your applications using Cascade. We did quite a lot in this lesson. We not only built the entire full stack up using Cascade, but we also used command and autocomplete to rapidly build a bunch of boilerplate code and then incorporate it into our overall application. As you can see, using Windsurf is more than just iterating with an agent. It is a full experience with AI in order to maximally improve your velocity in developing the features that you want to. This is fun! We're going to wrap it up with one more lesson right after this. So let's continue.