Complete one lesson every day to keep the streak going.
Su
Mo
Tu
We
Th
Fr
Sa
You earned a Free Pass!
Free Passes help protect your daily streak. Complete more lessons to earn up to 3 Free Passes.
In this lesson, you'll learn how to use Claude Code outside of the terminal with a GitHub integration. You'll see how to set up Claude Code to review pull requests and fix issues in GitHub. You'll then learn how to execute code before and after using tools through Claude Code hooks. Let's dive in. We left off in the last section merging our wortrees together, but we forgot to ask Claude to remove those worktrees. So we're going to hop back into Claude. So I'm going to go and pass in the resume flag to go back to a previous conversation that I had with my worktrees. In this particular conversation, we can now go back to where we were before and finish up with removing our worktrees. So let's ask Claude, remove the .trees folder and the underlying worktrees, and once you're done, push this code to GitHub. So let's go ahead and give Claude Code a second to run the necessary git commands to remove that folder and then pushed our merge code to GitHub. We'll go ahead and give Claude Code access to see the underlying worktrees so that we not only remove the worktrees, but also delete the corresponding branches. We'll go ahead and remove these particular trees. now remove the directory and then remove the underlying branches. Now that we've done that, let's go ahead make sure that worked as expected, which is good. we don't have that folder. And now, let's push this code to GitHub. We'll confirm that we want to run the git push origin main command and it looks like our code is pushed to GitHub. Now that we've committed and pushed our code to GitHub, let's start installing the GitHub integration that comes with Claude Code. I'll do that using the /install-GitHub-app command. Here you might see that you need to include additional authentication using the command line interface. So if you see those setup instructions, make sure to follow them. We'll now be able to install the GitHub app for the current repository that we're working in. So let's go ahead and do that. This will open up the browser. And if I have not yet configured this, I'll have the option to install. What this integration allows us to do is use Claude Code in pull requests and issues to respond to feedback, fix errors, modify code, and much more. In order for this functionality to exist, it's built on top of the software development kit that comes with Claude Code. This SDK allows you to use Claude Code outside of the terminal interface. So let's head back to the terminal. specify the workflows we want to install. These workflows allow for tagging Claude in issues and using Claude to automatically review code in our pull requests. Let's install both. We'll create a long-lived token. and here we'll have to authorize and authenticate with Claude. Once that's done, we can head back and we'll see that it's creating the repository information, setting up any additional information I need, and sending me right back to GitHub to open a pull request. with the changes that had been made. We can see here automatically, this pull request allows for GitHub Actions to enable bug fixes, writing tests and code reviews. We can change this if we like, or we can go ahead and create a pull request with the default information. In this pull request, we can see that not only have we created a YAML file for Claude to operate, we also have one for code reviews. Here we can see out of the box, we have some pretty sane defaults. We can filter by authors, we can specify what this is running on. But out of the box, we get quite a bit of really nice functionality. If you'd like to modify the prompt that you have in your code review, you can do that here. And since this is a file that is tracked by git, you can constantly edit this if you need. I'm going to go ahead now and merge this in, so we can start using Claude Code in GitHub. We can go ahead and see right out of the box that a Claude GitHub action has actually started. This is what we're going to see out of the box in our future pull requests. It's going to read and analyze files, check code quality, identify security considerations, and out of the box, we now have a new teammate, Claude, to check the work that we and our other team members are doing. This sometimes takes a little bit of time to start, but once this has finished, we'll get some detailed assessments from Claude, and we'll be able to merge in the pull request when we're ready. So it looks like the review is done, and depending on the prompt that we give it, we can specify how much depth and information we want here. We see some things that are working well, maybe some considerations that we you may need. And if this looks good to us, we can merge in that pull request. Now we're going to see out of the box, in future pull requests, Claude will help review our code. This is really helpful when humans might miss certain things and you need an extra step to check that what you have is working as expected. Let's imagine there's a situation where an issue comes up. Someone on our team decides to add a new issue. We could do this in GitHub, we could even do this in Claude Code. As you might have noticed, as we kept building on top of this application, we started to see a new new header that was added. This new header might look kind of nice, but maybe we want to revert to what we had previously. So let's add an issue and see if Claude can help us out. You can imagine we have an issue here. The application has a new header that was added, Let's go back to the old one. Make sure to keep the toggle theme but just make the header look like what it was before. We'll also specify, make sure to remove the Course Materials Assistant header. Remove the subheader. around ask questions, and then remove the horizontal row below the subheader. Now that we created this issue, we could assign someone to tackle it. But why don't we just ask Claude to help us out? Claude, can you fix this for me? Once we tag in Claude, we're going to start to give Claude a little bit of time to fix the issue at hand. When Claude has fixed that issue, it should be able to generate a pull request to fix that particular one. So let's give Claude a little bit of time to find that action. Here we're going to see Claude Code is working, and if we want to see the underlying job that's run, we can go ahead and do that. So let's give Claude a little bit of time and see what it can come up with. What you're seeing is going to look very familiar to what we saw in the command line. Analyze the structure, remove the header. And here, I can even choose what to prioritize if I'd like. But what you're seeing here is the same thing we saw just outside of the terminal. Not only can we use Claude to tackle issues and pull requests, we can also use Claude to review code as we saw before. As we start to see its plan, we'll notice what the changes are that are being made, where in the codebase it's proposing things, and as we see the pull request, we can start to see some of the thinking and logic behind what's being done. Seems like this one isn't too tough, so it's going to follow these steps, test the changes, commit and push those. It's now made the commit necessary. We can see the underlying description here. If we'd like, we can create this pull request, or we can just have Claude do all that work for us. When we create the pull request. We see exactly what was generated in the commit. And now, let's go take a look and see what Claude did. We can take a look at the underlying files that we changed. There wasn't too much here. We can merge this in. As we saw before, Claude's also going to take some time and review the code that Claude wrote. And this can actually be quite helpful because as much as we want to trust Claude, it's nice to have another Claude double checking its work. So it looks like Claude Code has approved the task I have here. Let's merge this in. And then we'll head back to the terminal and make sure to pull down the changes. is that we have. So I'll head over to VS Code, pull down the changes. And let's see if our front end looks any better. And there we have it. The header is taken out, the horizontal rows taken out. We might want to bring back that horizontal row or move this to another place. But now we know how to do it, not only in the terminal, but also in GitHub. One more piece of functionality that I want to show is something that was recently released, which is the ability to add what's called a hook to Claude Code. If you're familiar here with this idea of hooks. This is going to feel very similar. The idea is that as we have different operations in Claude Code, like executing a tool or something happening after a tool, we can inject specific code to run at any point in the life cycle of Claude Code's operation. Let me show you what I mean by that. Back in VS code, I'm going to hop in back to Claude again. And while we can make these changes manually, I want to show you the editor that we have. So I'm going to type in slash hooks. manage configurations for tool events. What you're seeing might look a little bit scary, but it's our obligation to let you know. If you are running arbitrary shell commands, you have to be very careful about what you're doing. There are quite a few different events that we can run hooks. Before a tool is executed, we can even stop that tool from being executed. We can do something after, when a notification is sent, when the user submits a prompt, when something stops, or even before a subagent concludes its response. So we have the ability to programmatically to tap in to any of these events. I want to show a simple example with a PostToolUse hook. Start by adding a matcher. In this matcher, I can specify the tools that I want to be matched for this hook to run. I'm going to add a very, very simple example here. Anytime there is a Read or anytime there is a Grep, I'm going to run a simple terminal command. The new hook or command I'm going to run is the say command. The say command, runs the computer's audio and a path for what text you'd like it to say. So if I've done this correctly, after we have read something or use the grep tool to find something in a file, our machine should say, all done. Let's add this again in our project settings. We mentioned earlier the settings.local.json file where we can specify permissions. This is also where your hooks live. Inside of our .claude, we can see in our settings.local.json, not only do we have our permissions, but we now have a hook that we've defined. PostToolUse is the name of the hook, the matcher, which if you take out will apply to anything. But here, reading or grep, go run the command say 'All done!' when we're done. Let's try this out. I'm going to quit out of Claude Code. I'm going to open it up again. read the contents of the run.sh file. This should use the read tool as expected. All done. And once it's done, it notifies us and tells us all done. Well, this is kind of a fun little example, you can imagine executing code like running tests or running linters or potentially stopping tools from being used if that's not what we want or even having Claude review itself when certain things happen. There's a lot you can do with hooks and there's so much more that's coming. So make sure to look at the documentation to see everything you can do. And you can always use Claude Code to write hooks for you and modify them accordingly. In the next section, we'll explore using Claude Code with Jupyter notebooks to create visualizations, refactor code, and operate in a slightly different environment.