Now that you have an understanding of the chatbot codebase, let's add features to the UI and implement a new tool for the chatbot. Now that we've gotten up to speed on this codebase, let's talk a little bit about some features we might want to add. We saw before, in this application, when we ask for an outline of a course, we get some really detailed information and we even see some of the sources that are referenced. At the same time, when we see these sources that are referenced, it would be really nice to be able to click on these as links and go to the source of truth. So we want to build an interface where the front end and back end are correctly rendering links to show where this data is coming from and not just some text. So let's hop over to Claude and talk a little bit about how to get started. What we're going to do here instead of just asking Claude to implement the feature necessary, we're going to make use of two important pieces. The first one is referencing the correct file, and the second is using plan mode. When we talk about referencing the correct file, Claude Code is only as good as the context that you give it. So when you ask Claude Code to make changes, it's important to make sure that we're figuring out the right files we need to modify. We can have Claude Code try to figure this out, but if we know out of the box what files need to be modified, giving in Claude Code this context right away makes the tool much more efficient. So let's see how that's done. I'm going to open up Claude Code and to reference a file, I simply use this at and tag that file. For a folder, I can reference files inside. For a file directly, I can go ahead and even use tab to complete for the full file name. With that in mind, let's talk next about the second important piece when building features or making larger changes. Instead of having Claude trying to figure out what needs to be done and write the code right away. We're going to follow a slightly different pattern. We're going to plan first. We're going to have Claude create a detailed plan for what changes need to be done. And if we approve that plan, we're then going to have Claude Code make changes to quite a few files. When you have slightly larger changes to make, we always recommend starting with plan mode so you can give Claude the opportunity to figure out what needs to be done before it needs to make those changes. To activate plan mode, I'm going to press shift tab twice. And we'll see here that plan mode is on. Let's showcase what needs to be done. I'm going to bring in a prompt that I have here, and I'm going to ask it to build an interface with source citations. You can notice here that I'm referencing the correct files as well as referencing other files where changes need to be made. So let's give Claude the opportunity to come up up with a plan for how to solve this particular problem. As always, it's going to read through the files that it thinks are most necessary. It's going to trace its way from the front end to the back end and understand what needs to be implemented. Once we finish getting a plan, we're going to have the opportunity to either approve it or to give Claude some feedback for what might need to be changed. But here, Claude is not directly writing any code. As we see here, we can accept and then continue to auto-accept edits so we can don't have to keep asking for permission. We can manually approve them or we can tell Claude to change the plan. Taking a quick look at this, I feel pretty good about what we need to do. So let's use that plan with our auto-accept edits. If you ever want to turn this on on its own, you can press shift tab just one time. We'll see the to-do list necessary. We'll see what changes need to be made. And now we're going to let Claude Code write to the files that it seems necessary, and then we can test that the implementation works correctly. correctly. We'll see here, files are being modified, changes are being made to the codebase. And since we added the auto accept, we don't have to keep giving permission over and over. Very common workflow that we see is users start by asking for permission each time. And as more trust is given by the human to Claude Code, the auto-accept edits come on a bit more. We can see here finally, that we can start the application to test the implementation. But in fact, the server is running already. So I'm just going to tell Claude, no, thank you. I'll say right off the that, the server is running. No need to start it yourself. If I want Claude Code to always do that, this is a great opportunity to just put something into the CLAUDE.md file as well. Now that I've let Claude Code know that, it's going to tell me the changes that have been made. So let's test this. Now let's try asking the same question. Let's ask for an outline of a course. And if this has been built correctly, you should be able to see links below for each one of these particular features. If I take a look, right here I have links that will take me to the right place, but the interface is a little bit difficult to see because of this blue link color. If I'd like, I can go ahead and ask Claude Code to make the change necessary to do so. So let's go and follow up with Claude and ask it to make this interface a little bit more pleasant. One option that I have here is just to tell Claude. here is what I want. Another option is to use Claude's visual ability to take a look at a screenshot and analyze what needs to be changed. So let's take a screenshot of what this interface looks like. and we're going to go ahead and paste that into Claude Code. Back in Claude Code, when I paste that screenshot, I'm going to say, these links are hard to read. Can you make this more visually appealing? We're going to go ahead and give Claude the ability to analyze that image and figure out where things need to be changed on the front end. And we can see here I can see the issue. The links are using a default blue color. Let me go ahead and make a change. When you need Claude Code to make visual changes, taking screenshots and showing Claude Code the screenshot is a very powerful way of quickly iterating against what we need. Let's go back to the browser and see what things look like now. We'll ask again for an outline of a course. And if this is done what we've expected, we should see that these links are a bit nicer to take a look at. Let's take a look at our sources and look at that. Much better. The ability for Claude Code to see screenshots and make changes is one of the most commonly used features we see and incredibly valuable to build things quickly. If I want to see those changes to files, I can open those up in VS code and Claude Code here will notice I'm in that particular script and I can ask questions and get information necessary for those files. files. This is looking good. Let's add a new feature. Instead of building off in the context window what I have now, I'm going to start completely from scratch and clear the conversation history. This is going to allow me to have a longer context window to work with and not have Claude get potentially confused with things that it's seen before that are not relevant to what I'm building now. As we saw before, when we want to build newer features, we're going to use plan mode. In this particular application, I want to add the ability to start a new chat in my interface. So instead of having to refresh the page each time, I'd love for a button here to allow me to reset the conversation and start a new chat again. So let's build that. I'm going to activate plan mode. and I'm going to go ahead and bring in the prompt that I have here. I'll ask Claude Code to add a new chat button and when clicked, it should clear the conversation in the chat window. start a new session and handle the necessary clean up. If you ever need to make a new line and add more context, you can use backslash and press enter. So if there is more I want to add here, I can easily do so that's a bit more visually appealing. So let's have Claude Code figure out what needs to be built here. As we saw before, if there are changes to the front end that we need, it will find the necessary folders, changes to the back end, the same kind of thing. And here, it's going to come up with a comprehensive plan. This idea of being able to plan and think before taking actions is incredibly valuable to build the interfaces that you want. I can take a quick look through this plan. I can see what it's trying to do and I feel good, so let's build it. If at any point in time, I don't like what's being done, I can always press escape and navigate Claude Code in a different direction. As always, we'll see our to-do list that needs to be built. We'll see these files being updated since I have auto accept edits on and once that's done, we'll move on to the next step. We'll start seeing some JavaScript being added for when clicks occur, starting new conversations. We'll see clearing inputs and focusing, and now building a little bit of styling to match existing sections. We can see here, it's going to test the new functionality. And if I need to tell Claude to not run the server, I can gladly do so if I want. So here, instead of running the server, I'll just tell Claude, don't do it. And since I'm going to find myself doing that a lot, now is a good at the time to say, don't run the server using ./run.sh I will start it myself. I'm going to put this actually in the project memory. If I want all other developers to do the same. But maybe other developers might want to run the server themselves. So I'll put that in the project memory that's local and git ignored. So this might be a situation where I like to run the server myself, but maybe other developers don't. Great use case for that Claude local MD file. Now let's go back to the browser and see what we built. I'll refresh the page. And we've got this new chat button here. Let's see if it works. We'll ask again for an outline of the course. We can make sure that our source links look great. And if this does what's expected, we can click on this button and start a new conversation. That's looking good. Let's start a new chat. So, even though this is working, it still doesn't look exactly the way that I want. And I can take screenshots and go back and forth with Claude. or I can enhance the tools that Claude Code has out of the box using MCP servers. MCP or the Model Context Protocol, allows for tools like Claude Code to gain additional functionality to external data sources and systems. What I'm going to do here is add an MCP server for Playwright, a popular tool for opening up a browser, taking screenshots, and analyzing those screenshots. So instead of me manually having to take the screenshot and have a conversation with Claude, we're going to let Claude do it all by itself. The first thing I'm going to do is quit out of Claude Code and add the necessary MCP server. And the command to do so is claude mcp add, the name of our MCP server, which is playwright, and then the underlying command to start that MCP server. That is done using npx @playwright/mcp@latest. For any MCP server that you want to include, you can reference the documentation. All MCP servers will specify the necessary command to connect to that particular server. Let's open up Claude again and we'll see what our MCP server looks like. We can use the /mcp command and here we can see that we have connected successfully to the Playwright MCP server and we can see the tools available that the Playwright server is giving us. Things like evaluating JavaScript, uploading files, pressing a key, navigating, going back. All of these things that we might manually test, Playwright can do that programmatically for us. I'll press escape to go back a few times, and let's ask Claude Code to navigate to figure out how to build the necessary content. So let's go and ask Claude Code using the Playwright MCP server visit the page that we're at and view the new chat button. I want that button to look the same as the other links below for Courses and Try Asking. Make sure this is left aligned and that the border is removed. Before it starts taking this action, it's going to ask me for approval for these particular tools. We'll see that it will visit that page, take a screenshot and do do what's necessary. Let's follow that and not ask for permission each time to use this particular tool. We can see here that the browser has opened a new tab programmatically to our page to take a screenshot. We'll ask Claude Code to take that screenshot and analyze what it sees. Here it can see the exact issue that's happening and instead of us manually having to take the screenshots necessary, it can programmatically fix itself. We could have a more specific prompt as well, that keeps asking Claude Code to make those changes necessary. Since I don't have auto accept on, I can see the change that's being made in VS Code. And right out of the box, I don't see a border and background with this new change. That looks good to me. Let's make those changes and continue making other changes. I can see left align looking good. and any other changes that need to be made here. It's going to take another screenshot to verify that the changes it's made look correct. that it has the right icon prefixes used. match other sections. With that in mind, let's go see how he did. I'm going to refresh the page. and it's looking good. It's got an extra plus here. So why don't we go ahead and ask it to take that out. But it's left aligned and it's using the icon that we like before. So let's go ahead and fix this up and say, there are now two plus icons, remove the one closer to the text "+ New Chat" We can see here there's already a plus in the HTML content, so we'll remove that and let's see what's done here. So instead of adding that extra plus, we can see here what's being done. If we need another snapshot, we can visit and take a snapshot necessary. As we can see here, Claude Code saw there was not an open tab, so it fixed itself, opened it up again and took the necessary screenshot. Let's see what that looks like now. Much better. As you can imagine, building complex interfaces using tools like MCP playwright makes building, designing and testing a breeze. We've made some really nice front end changes. Let's now go and visit the back end. Like we did before, we're going to start fresh and instead of building off of this conversation, we're going to start with a new one. So let's clear the conversation history and start again. This time, we want to build some features on the back end. So let's put in a prompt, talk about what's going to be done here. I need to add another tool that allows me to visit a particular course and for each of those courses, see the lesson number and the lesson title and description about that as well. Right now, the data that I get when I take a look at a course is relatively high level. Let's see what I mean. What we're going to ask Claude Code to do here is to make a change to our search_tools.py file. Let's take a look at that. And in this file, we can see right now that we just have one tool for searching content and getting details about that particular course. This second tool is going to allow us to get more descriptive information for each of the lessons in these courses. So let's see what Claude can do. As we've done previously, let's make a plan and make sure we're first okay with that plan before we start making changes to individual files. Claude Code can see the current architecture, had to implement the outline tool, and since we have that CLAUDE.md previously, it's going to more quickly be able to understand what needs to be done. We can take a look at what needs to be implemented, we can make sure that we're doing the right things in the right files. We can see that once we create this tool, we update the system prompt to make sure that we get that additional data, and then we register that tool in our RAG system. As always, if there's anything we want to change or suggest, we can do that now. But let's see what Claude Code can do for us. If this works as expected, we should be able to ask questions about a course and get much more detail for those particular lessons in the course. We can see here that not only are we modifying the underlying Python code, but also the system prompt and here we're registering that new tool that we've made. Once we finished our to-do list, we can head back to the browser and see what things look like and if this has been implemented correctly. We'll see a nice summary of what's been made and we can always change things at any point in time. Back in the browser, let's go ahead and try asking for some information about a course. If this works as expected. We should be able to get more detailed information including a link for that particular course. Here, we can see the names of the lessons and if we would like, we can even build additional functionality to get sources for each one of those. In the next lesson, we'll talk about what happens when things go wrong and how we can use Claude Code to debug, to write tests, and make sure that we feel confident in the software that we're writing alongside Claude Code.