Whether you’re actively writing code and looking for solutions or just browsing around the Internet and researching interesting technical topics, you’ll often come across code that’s hard to read and understand.
This is a great case where AI tools can help. Even if you don’t have any previous coding experience, you can get a lot of detail on some of the code you’ll encounter on the Internet. If you have coding experience and are more familiar with the code you’re encountering, we’ll look at how you can get even more focused answers.
In this guide, we’ll take a look at how to use ChatGPT to analyze GitHub repositories and explain a particular project, how to dive deeper into a particular code snippet and how to use the AI-enabled Cursor code editor to learn more about a project you have running on your local computer.
Explain a GitHub project using ChatGPT
Every once in awhile, when I’m reading through Hacker News, I come across a project that looks interesting, but I would like a little more information on. Today, I found a project called Kubetail, which the headline said was a “Web-based real-time log viewer for Kubernetes”.
I’ve used Kubernetes a bit and always had an issue viewing the logs in a consistent way, so I thought this looked interesting. However, when I clicked through to the GitHub repo, I was met with a ton of text, features and install steps that I didn’t understand. This is where ChatGPT comes in handy.
If you pay for ChatGPT Plus, you have access to the browse mode, which means you can ask ChatGPT questions and tell it to answer using information it finds at a specific web address. That’s exactly what we’re going to do here. The prompt I used was:
I'd like to learn more about this GitHub project: https://github.com/kubetail-org/kubetail
Please provide a 3 sentence summary of what the project does, a list of technologies that I would have to already be working with for this project to be helpful, and anything else I should consider before using this project.By providing ChatGPT with a link to the repo, it knew to engage browse mode and provided me with a response:
Kubetail is a web-based, real-time log viewer designed specifically for Kubernetes clusters. It provides an easy-to-use interface to simultaneously view logs from multiple Kubernetes workloads, such as Deployments and StatefulSets, in real-time.
For this project to be helpful, you would need to be working with Kubernetes and potentially other related technologies like Docker for containerization.
Before using Kubetail, consider its deployment method (e.g., via a Docker container inside your cluster), access methods (e.g., kubectl proxy), and configuration options to ensure it fits within your Kubernetes environment and security requirements.This was pretty helpful! It followed our instructions with regards to the information we want it to include and makes the explanation on the repository a lot more simple.
Since it now has the information from the repository in it’s context window, if we had any further questions to ask it, the responses would be a lot quicker. For example, if I ask it if there are any prerequisites that I need installed before I get started, it tells me:
Before installing Kubetail, you need to have a working Kubernetes cluster and kubectl configured to communicate with your cluster. These prerequisites are essential as Kubetail relies on kubectl to fetch logs from the cluster. Ensure that your Kubernetes setup is operational and accessible through kubectl to make the most out of Kubetail's functionalities...It didn’t have to go browse again to provide this answer and was able to do so right away. You can ask any number of questions about the project itself through this interface and learn a lot about the pros/cons of adopting any particular tool, just by providing a link to the GitHub repo.
Explaining a code snippet using ChatGPT
For a long time now, I’ve had the idea to build a web app that would generate a 5 mile circular walking route from my apartment. I built a few prototype versions, but kept getting tripped up on various pieces of actually solving the core algorithm. Eventually, I found out that this particular tool had already been built and it was called routeshuffle.
It works really well! So naturally, I was curious to how the developer actually built it and got around the problems I was having. As I looked in Chrome Developer Tools, I figured out the site was loading a Javascript file called planner.js, which seemed to house the main logic of the application. However, at almost 1,200 lines long, it was a lot of code to go through manually.
This is where ChatGPT came in.
I copied all ~1,200 lines of code, and gave ChatGPT the following prompt:
Below you'll find code that powers a web app. This app allows users to get an automatically plotted, walkable route on a map for a given distance. Can you write a brief step by step explanation of the core algorithm and how the route is generated?
--BEGIN CODE--
{{I pasted the actual code here, all 1,200 lines}}
--END CODE--What was most amazing about this to me was that ChatGPT was able to take our entire prompt PLUS all the pasted in code and handle that easily. After a bit of “thinking”, it returned a walkthrough of the entire file. (If you want to see the text of the full chat, you can do that here.)
However, this overview contains a ton of explanation (because the Javascript file is huge and encompasses a lot of functionality) and I only really cared about how it generated the route. So I asked a follow up question to zoom in on just that piece of the code.
Can we focus on just the Route Generation piece of the code? Please breakdown how this portion of the codebase works and explain the algorithm that the author chose to implement.It was then able to focus on just that portion of the code, however its response were still a bit general and I wanted specific on how the algorithm generated the points that would go on to make up the eventual route.
How does Waypoint Generation work?It turns out, that was a bit too general of a question and ChatGPT went off into potential methods of how this could have worked instead of how it actually worked in our file.
Getting a bit more specific
Looking through the code and scanning it myself, I found that there was a findPts function that seemed to be doing the actual math of generating the waypoints. When I asked ChatGPT to explain this function in particular, I got much better results.
Can you explain the findPts function specifically?With this more specific prompt, ChatGPT was able to evaluate the code provided and give us a very thorough explanation of how these points were generated.
Even though ChatGPT has a large context window, if you put a lot of information into that context window and only ask general questions, it will still provide general answers. However, combining the base layer of giving it as much information as possible along with asking specific questions can give you great results.
Using Cursor to learn about a local codebase
If you’re willing and able to interact with a codebase directly, you can clone it down to your local machine and use the Cursor editor to interact with it. We can see what this looks like by using a simple React project I build called Type Into The Void. After cloning down the GitHub repo and setting up Cursor with your OpenAI API key, you should be ready to go.
If you open up the codebase in Cursor, you’ll see that it looks much like a normal VS Code setup, however if you highlight a block of code, you’ll see a context popup that gives you the option to “Chat” or “Edit”. This is where the power of Cursor’s built in AI functionality starts to become important.
So if we click on chat, we can use a ChatGPT-like interface to ask questions about the particular piece of highlighted code. Cursor has access to the rest of our codebase as well, which means its explanations can take into account other pieces of code that might be dependencies or might rely on the snippet you’re looking at.
In this case, when we ask it about the toggleTheme function, Cursor explains:
The toggleTheme function in src/App.js is designed to switch the application's theme between 'light' and 'dark' modes. It checks the current state of the theme variable; if the theme is currently set to 'light', it changes it to 'dark' by calling setTheme('dark'), and if it's anything else (implicitly 'dark' in this context), it sets it to 'light' by calling setTheme('light'). This function is likely tied to a button or a toggle switch in the UI, allowing the user to switch between themes dynamically.Since this is a pretty simple function, you probably could have figured out this explanation on your own, but it works great with more complex functions as well, letting you talk through all the parts of a given snippet of code, ask follow up questions and more.
A helpful pair programmer
ChatGPT and tools like Cursor can really accelerate your learning when you’re getting up to speed on a new codebase and developers who adopt these tools into their workflows can save a ton of time.
Do you have another way you’re using AI in your day-to-day development workflow? Shoot me an email at keanan@floorboardai.com and let me know!