Rapid codebase onboarding with AI agents

- [Instructor] In the previous videos, we have demonstrated how to utilize Claude code and the pair coding patterns, including driver-navigator and ping-pong to build our web application. And we all know software engineering is not just about writing code, there's a whole lot about understanding other people's code and about writing documentations as well. In this video, we will explore how to use coding agent to onboard quickly to a large codebase. This is a very common use case in modern software engineering, whether you are joining a new team or maintaining a legacy system. We will focus on using Claude code to help us understanding the architecture of a monorepo by automatically generate useful diagrams and doing some Q&As. The example repository we have chosen is called Apache Superset. It is a data visualization and data exploration platform. Here is the website, if we quickly scan through the website, there are resources, Docker, there is a Helm chart, there is an SDK, A front end, some web socket, and this is likely a Python library and a bunch of tests. So this is a decent sized library, so that's try to clone this repository first to our local. Yes, this is definitely a decent sized library. I mean, this codebase is around 340 megabytes. Now we have cloned this that's tried to open this repository on via code. So let's go File, open Folder, Superset. Let's open this up and that's again, create a terminal. My preference is put it on the right so we can have better interactions. And before we start, we will be utilizing a markdown language called Mermaid. Mermaid is a very popular diagramming language that use a markdown-like syntax to create flow charts, sequence diagrams and more. It is a great way to visualize and summarize a system architecture. So that's first ensure that we have the Mermaid extension installed. We will use markdown preview for Mermaid and trust publisher and install. Okay, now we are here. We can launch Claude here in this repository. And yes, proceed, we trust file in this folder. So now let's discuss another concept call subagent. From time to time, some of the task that agent can do is and can be spread out and run in parallel. And in those cases we can utilize something called a subagent to handle individual task simultaneously or parallel at the same time to speed up all workflow. So in this demonstration, we will try to use subagents to generate Mermaid diagrams. So now let's do this command. Let's see, please look into this repository and help me understand its architecture and its core control flow. Write a swimlane diagram using Mermaid markdown syntax. Please utilize subagents as much as possible. So right now we see Claude code has set up a to-do list and it is executing the explore repository structure and identifying main directories. And first off, we can see that it created several tasks. One is explore repository structure. Another one is called analyzing tech stack, analyzing backend and analyzing front end architecture. And each one of them, we can see that it is executing at the same time using subagents. In this way, we can parallelize all of the exploratory and codebase understanding work and spread that work out across multiple different agents and they can execute simultaneously to greatly speed up our process and we can go Control + R to see some of the things that they are executing. So the first two subagents are done. The first one has done the explore repository structure task and the second subagent has completed the analyzing text task. And we are waiting for the last two subagents that's analyzing the backend and the front end architecture. It's almost done. Okay, so I think we need to ask it to export or write down the findings into a markdown file. So let's do that. Report the findings and diagrams in a markdown file. Okay, so it generated the information in architecture analysis .md So let's open this up and do a command Shift + V to render the markdown file. As can read here, it documented the repository structure quite in detail and it documented the technology stack back end, front end and infra. And that CD command pattern. If we circle all the way down here, it does show the system control diagram. It is a little bit small, so let's try to make it bigger. So we have a client browser that goes into the real time layer and control and talk to the web server layer and input the data and talk to the application and some backend processing. So this is quite sophisticated. It store data in S3 buckets in a target database and in some meta database. And it also uses a Redis cache and salary workers in queue to do the backend processing. So we can also read through the rest of the report to get a better understanding of the codebase and potentially ask very specific questions as to how we can optimize the codebase. So using coding agent this way, accelerate onboarding speed dramatically. Instead of spending days digging through the code manually, we can really quickly generate visual maps and understanding the architectures in minutes. This approach is especially powerful when working with legacy systems or with larger teams or very unfamiliar codebases.