LongCut logo

03-Setup & Codebase Understanding

By Ted Tyler

Summary

## Key takeaways - **Claude Code: Codebase Explainer First**: Before asking Claude Code to write code, use it as an explainer to understand new codebases and data. This ensures you have a better grasp of what's happening before generating code. [01:55] - **Agentic Search for Codebase Overview**: Claude Code agentically searches your codebase to identify important files and provide a high-level description of the application's architecture and features, saving you manual file navigation. [01:04] - **Visualize Codeflow with Diagrams**: Claude Code can generate diagrams to illustrate complex processes, such as the flow of a user query from front-end to back-end, aiding comprehension through visualization. [04:31] - **Initialize Claude MD for Project Memory**: Use the '/init' command to create a Claude MD file that initializes project-specific memory, including documentation, tests, and linting rules, for Claude Code to reference. [06:27] - **Git Integration for Commits**: Claude Code can automate Git commands, including writing descriptive commit messages, streamlining the process of adding and committing changes to your codebase. [13:22] - **Manage Conversation Context with Commands**: Commands like '/clear' and '/compact' allow you to manage Claude Code's conversation history, either starting fresh or retaining a summary to maintain context while shifting focus. [12:06]

Topics Covered

  • How AI accelerates understanding unfamiliar codebases.
  • Visualize complex system flows with AI-generated diagrams.
  • Tailor AI's understanding with persistent project memory.
  • Master AI interaction with essential workflow commands.
  • Automate Git commits with AI-generated messages.

Full Transcript

The first example we'll work on is an

endtoend rag chatbot. Let's use cloud

code to explore the codebase. Before we

start using cloud code to write lots of

code for us, let's talk about how we can

use this tool to get up to speed on

larger code bases. Right here, I have an

application where I can chat with Claude

about course materials from deep

learning AI. So, let's try asking an

outline of a course. For example, what

is the outline of the MCP build rich

context AI apps with Anthropic? We'll

see here that I'll get a response with

quite a bit of detail around the lessons

and descriptions for each of those

lessons. With that in mind, let's see

how we can get up to speed on the

underlying code that powers this

application. Back in VS Code, I have the

terminal open here, and I'm going to hop

into Claude Code just by typing in

Claude and pressing enter. In this

application, I can start chatting with

my codebase. So, I'm going to start with

a highle question just to give me an

overview of the codebase. What we're

going to see cloud code do is

agentically search over the codebase,

figure out some of the most important

files and give me a description of

what's happening in this application.

Instead of searching through each

individual file, we're going to

agentically search and find the most

relevant ones. So here we're going to

get some information about the

architecture, the key components, some

of the features and now if there are

particular things I want to dig into, I

can easily do that. I can also ask other

higher level questions like how are

these documents processed? In this

application, we're using retrieval

augmented generation to fetch

information about these courses. If I

want to get more information about that

process, I can ask a question like this

one. We like to say that claude code is

a fantastic engineer alongside you, but

it's an even better explainer. So, as

you're getting up to speed with new code

bases, with new data sets, first start

using cloud code as a way to explain

things to you so that when you ask it to

write code, you can have a better

understanding of what's going on. Here

we can see the sources in the codebase

that are actually splitting text into

chunks, that are adding lesson context,

and that are storing course metadata.

This ability to quickly get up to speed

with a codebase, especially when you

might not be familiar with the

underlying technology or language, is

exceptionally valuable. Instead of

navigating to each of these folders and

figuring out what's going on, we can ask

more specific questions and even get

diagrams and visualizations made for us.

So the first thing I'll ask Claude is to

trace the process of handling a user's

query from front end to back end. You

can imagine you might have some limited

knowledge in one of the parts of the

stack or you're not familiar with how

this is all happening. So cloud code is

going to give us quite some useful

information here. What's useful when

you're seeing cloud code work is its

ability to give you a bit of a to-do

list so you can start to understand

what's happening. At any point in time,

you can press escape and guide cloud

code to follow a different set of

to-dos. But in this case, I feel pretty

good about what it's doing. It's going

to start tracing from the front end,

start following API endpoints, analyze

our retrieval augmented generational

system, and then figure out how to

actually generate the response. It's

reading the appropriate files that are

handling these particular tasks and

finishing up its list to give us a

powerful summary. As we're in this

environment, we can stay within VS Code

or open up Cloud Code in its own

dedicated terminal instance. That's

completely up to you as you're working

in this application. Once it's done, we

can see a very detailed path for what's

happening here. Not only can I read each

of these step by step, I can even ask

Claude to write this to a file, but I'm

seeing in quite a bit of detail what's

happening on the front end with some

JavaScript. what happens once that

reaches my backend. What the retrieval

augmented generation system is doing.

How I'm generating a response. Finally,

how I'm searching through my vector

database, how I'm filtering what's

necessary, getting a response back, and

then finally sending that to the user.

There's a lot that's going on in this

application, and I can use Claude to

dive deeper into any of those pieces.

But let's just say I learn best from

visualizations. So let's ask Claude to

draw a diagram that illustrates this

flow. We can ask Claude to draw diagrams

for web visualizations. We can ask for

ASI art. But let's see what Claude comes

up with with its own intelligence and

knowledge of how the application works.

So let's see what Claude code has come

up with. We've got a really nice diagram

here showing us the step-by-step

process. So it can't create these visual

diagrams. We could always ask it to use

something like D3JS or Recharts if we

want something like a web application.

But we can see right here we've got a

really nice diagram from the front end

making a request to the back end calling

the necessary functions generating the

response necessary if there's any

history involved talking directly to the

large language model with our system

prompts and our tools and a query

figuring out where to go next. searching

through our vector database using

Chromma DB, getting back results,

formatting that, sending it to the model

to produce a final response. There's

quite a bit of detail that goes into

this. And if we want, we can even

augment Claude with additional tools for

generating the visualizations that we

want, but out of the box, just getting

this information quickly and efficiently

is going to help us get up to speed with

this codebase in a fraction of time that

we used to spend. So with that in mind,

let's ask a very simple question. How do

I run this application?

You might be in a situation where

there's a new technology here, a new

idea. Very simply, it's nice to just

know how to get up and running. I can

see here my API documentation, my web

interface, and if there are any

environment variables I need, I'm good

to go. Now that you've got an idea of

how to just start talking to Claude

Code, let's talk a little bit about some

of the more powerful features with Cloud

Code. When you start working with an

application in cloud code, one of the

first things we recommend you do is run

a command called slashinit. You can see

here in cloud code when I add this

slash, we have a list of many built-in

commands that I can use. /nit allows me

to initialize a claude MD file with the

codebase documentation. The claude MD

file is missionritical for introducing

memory for claude code so that it knows

how best to work in your codebase. The

Claude MD file is very useful for

specifying how you want things to be

run. This could be your tests. This

could be your linting and any long-term

memory that you want Claude to have each

time you're working with cloud code for

this particular project. Instead of

making this from scratch, slashinit is

going to analyze the codebase to figure

out at a high level what it should know

about each time you're working with this

application. There are three different

cla MD files that you can make like the

one generated with /nit all the way here

on the left. This cla MD file lives in

your application. You can have many of

them in nested subfolders but this is

shared with other engineers and

committed to your version control.

Another option is if you have personal

instructions and customizations, things

specific for your editing environment

and terminal environment, you can put

that in a claude.local.md

file. This is git ignored and not shared

with other engineers. Finally, in your

home directory in thecloud folder, you

can add a cla and you can think of this

like a global claude MD for all projects

on your machine. This is helpful if you

want Claude to follow instructions

across a wide range of projects that you

build with Claude Code.

We can go ahead and allow Claude Code to

find different files so that it knows

how best to create this Claude MD file.

This Claude MD file is meant to be added

to your current git project and shared

with other team members. As more

individuals work on the codebase, they

can add to this Claude MD file. And you

can even nest Claude MD files in

subdirectories if you need more specific

instructions for things like the backend

or front end or our docs that we have

here. What's really nice about using a

tool like Claude Code with Visual Studio

Code is that as I see changes to files,

I can see those visually in my editor.

And anytime that I am using a tool in

Claude Code, it's going to ask me for

permissions. This missionritical human

in the loop is really important when you

get up and running. And if you don't

need Claude to ask you every single

time, you can always use this second

option. We'll go ahead and auto accept

those edits. and we'll see that a cloud

MD file has been created for us. To give

you a quick walkthrough, we can see it's

given us a project overview, key

technologies, an architectural overview,

a nice little diagram here, some core

components, and much more. If we want

things to change to this particular

cloud MD, we can easily do so. As it

continues searching the codebase, it

makes additional edits here to my Claude

MD and gives me a summary of what's been

done. When I'm using a tool like Claude

Code in VS Code, I have the ability to

specify which file I'm in and even get

information about particular lines. To

set this up, I'm going to use the / IDE

command. And I can see right here that

I'm connected with Visual Studio Code.

Now that I'm in Visual Studio Code, we

can see right here that the second that

I visit a file, it's tagged right here

for what's going on. This gives Clog

Code the right context for which file

I'm in. And if there are questions I

have about that file, it makes it easier

for Claude code to identify that. If I

ever want to make any changes to my

Claude MD file, I can manually write

that if I'd like or I can use a handy

command to go ahead and use this pound

key and directly add to memory. So I'm

just going to say here always use UV to

run the server. Do not use pip directly.

This is a package manager in the Python

ecosystem and I want to make sure that

Claude doesn't get confused. When I use

this shortcut, we can see there are

different places where this memory can

be saved. We mentioned there is the

project memory that is included in git

for everyone on your team to use. We

have local memory that is git ignored

but just useful for you as the developer

and then user memory that is applicable

to all projects you use with cloud code.

For this one, I'll just go ahead and

update the project memory. I can see

here I've made that change. And if I

look in my claw MD, I'll see right here

I have some mentions to using UV to make

sure that I'm doing that correctly. If I

want to be more specific, I can also say

make sure to use UV to manage all

dependencies. I'll add this to my cloud

MD and we'll see right here that it's

been added. If I take a quick look at

this particular file, we can see any

mention of dependencies now includes UV.

We spoke a little bit about some of the

commands that are built into cloud code

like slashit. There are a couple other

useful ones that I want to showcase

here. And in fact, we're going to see

later on in this course. We can even

make our own. One of the first ones I

want to walk you through is /help. This

shows me right off the bat a quick

description of all the commands and a

quick summary. This is useful as you're

getting up to speed with cloud code. The

next one I want to showcase is a command

called slashclear. What this allows you

to do is clear the conversation history

and start from scratch. This is very

helpful as you shift gears and build new

features. This allows you to clear the

context window and start fresh. If you

want to continue the conversation, have

a smaller context window, but still have

a summary of what's been done. We also

have this command compact that allows

you to clear the history but keep a

summary so that you can build off with

Claude having an idea of what was done

before. One more useful command is the

escape key that allows you to get out of

whatever command you're in. So if I'm

going and trying to do something like

compact and I want to stop that process,

I can always press escape. If I start a

process with clawed code to explain what

is in the codebase. If I want to stop

that process, escape will allow me to

interrupt and continue onwards. So don't

feel like you have to wait for cloud

code if you're not getting what you

need. In the next lesson, we'll start

using cloud code to build features, add

to files, modify changes, and make sure

we're doing the right thing along the

way. Before we hop off, one last useful

piece with cloud code is its ability to

work with Git. So, I've made some small

changes to this application and I want

to add and commit these changes. Instead

of me manually have to write the git

commands, write a descriptive commit

message, we're going to actually have

Cloud Code do that work for us. And

what's really nice is Cloud Code's

ability to add and commit the necessary

commands. I'll go ahead and add this

particular file. not only commit, but

you can see here I've got this really

nice descriptive commit message that's

incredibly useful as we start asking

Cloud Code about historical changes with

Git and when we push this to GitHub and

other people are reading the changes we

make. So we'll add in commit and the

next lesson we'll use cloud code to

start writing lots of things for

Loading...

Loading video analysis...