Use AI to explore existing codebases | AI Avenue Tutorials Ep 3

Sooner or later, you're bound to end up in a codebase that you didn't create. And whether that's because an application built it for you or someone else built it, you're going to need to learn how to explore it. The codebase probably has some tools that you don't yet know or maybe it's using a different coding style than you're familiar with. It could be daunting to say the least. If you take a new job, you often find yourself in this situation immediately. Remember though, especially if the codebase is open, you have lots of places that you can go to for help these days, AI is very good at understanding code in context. Hey there, I'm Craig and I'm a developer. This tutorial is part of a series that follows alongside with the show AI Avenue. There are links to other tutorials in the notes. If this is your first time here, first off, welcome. Secondly, I highly recommend that you check out the introductory video. Lots of good information in there and in the notes. Remember to check the notes often. For this tutorial, we are going to take a look at an existing codebase, a blog that my robot hand co-host on the show, Yoro, generated. Yoro has published the code on GitHub, so it's open. Now, if you're working in a private codebase, make sure that you check with the people responsible for the code to ensure that you're allowed to use AI tools on that codebase. But since York's code is open, let's go take a peek. If there's anything in there that isn't clear, I'll show you how I go about figuring stuff out using AI. All right, so let's check out this fistful of knowledge. Uh he's done a really good job with this. I'm really impressed. It's got really nice highlights over these. There's different categories here. If you go to the category page, you can see all the categories there. And when you click into it, it's really good. And it's very specific about uh linking to different places that he went. But like here's one about stardust and sequences. He's really impressed. He's filled with gratitude. It's very nice blog. Actually, um what I thought I'd do is I'd look down here at the footer. You can see that uh you can get links to all the documentation and what's being built here. But we can also take a look at the code. Let's do something really quick. Let's take a look at that code because remember this is public. So, I'm going to feel free to push this into any sort of AI that I want. So, I'm going to go uh to this code at the bottom here, and I could deploy this if I wanted to. But before we get there, I'm just going to check out the code a little bit. I'm going to explore. And in here, there's a server directory. And we have this uh index.ts in here. And if I were in here and something was new to me, like maybe let's say that I'm a JavaScript developer and I'm not a Typescript developer. I've never seen this before and I'm wondering what is this interface? One of the things that you could do is just highlight what you're looking at. We look let's let's look at this admin post here. I'm going to copy this uh rightclick copy. And then I am going to go I'm going to open up a new incognito window here for us to take a look at. And uh I'm just going to go to uh chat.com. So this is OpenAI's chat GPT. They let you do quite a bit for free. I don't know if you know this or not, but uh so here's a a state-of-the-art model, chat.com. It will take me to chatgpt.com. And I can actually just say anything that I want to in here. And I'm going to just say very specifically, I'll say, uh I'm learning about Typescript. Can you explain this code like I'm five? Let's do that. Uh like I'm five, right? Explain it to me like I'm five. Uh I'm going to go there. I'm going to paste that code. So I've got the code that I had done there. Let's see what comes back. Okay. So, it's going to break it down. So, an interface is like a blueprint for an object. Oh, that's nice. It's what that should look like. So, doesn't actually create the the object itself. It's just explaining the shape. Okay. Nice. And then it's talking about all the different properties in there. Isn't that cool? Now, there's lots of things where like in the editor, you could do this, but I want you to remember that you also have the ability to do this. You can jump out and like I like I showed you, this is free uh if you wanted to do that. So, let's let's keep taking a look. Uh let's let's get back into our code here. Um so we can see uh there's some API endpoints here. There's some looks like there's some some sort of SQL here. We'll take a look at that here in a bit. But he's he's getting the latest posts. He's getting the specific post, right? How is he generating those? I wonder. Let's let's look back at that at the site again. Let's look at the the site fist full of knowledge here. He's using Cloudflare workers. He's using these things called workflows. So, let's go here to this workflows. Now, documentation on development sites are usually pretty good. So, I I could come here. You can see on the left here, I could go through all this. I could kind of take a look. And it looks like what we've got here is the reliable multi-step automatic retries. Um, what I might do if I was like not sure exactly this, this is actually pretty good documentation. Kudos to our docs team. But if I wasn't sure, maybe I could just kind of grab this, right? I could just kind of go like this and I could take this over and uh one of the things that you you might do, right? I'm going to I'll refresh this page and we'll just say um what does this mean? Uh explain like I'm five. I don't know. Why don't you explain like I'm six? I think we've grown up a little bit since that last one we did. So, it's going to take it's a little out of context, right? So, uh, I do like the Lego castle building robot. I think that that's, you know, I do like Lego and I like the the concept of robots. They're super smart robot helper. Um, built an observable automatically retries and error handling. So, it did a pretty good job with the docs as it is, but this isn't specific to Cloudflare, right? So, one of the things that, uh, you might not know yet in your journey, or maybe you do, maybe you do because you've been doing some Vive coding stuff, there's a there's these things called MCP servers. So they're like model context protocol. So if I do MCP server and you can kind of do MCP server and then the name of the place where you're going to look. So I'm going to look for uh Cloudflare MCP server. Cloudflare. Now we actually have the ability to create these if you wanted them. So like don't get confused by that. But this Cloudflare's own MCP server. This is what I was looking for. And here oh this is great. I'm going to use this documentation server. Now this is uh most most places will take in an MCP server. Look, I could put that into my editor or I could actually put it into a chatbt. Chat GPT just added that. In fact, let's go take a look. Don't know if I can attach connect apps. It says login required. So, I believe you can sign up for free and login is required. I'm just going to show you an example of what this feels like. You don't actually need to do this, but let's let's walk this really quick. Uh you could put this in any sort of MCP uh editor. Our playground actually has one, right? The Cloudflare play playground. So, if you wanted to go to uh playgroundai.cloudflare.com, you can see there's an MCP server URL here. I'm going to do this on the chat GPT side of things though real quick uh just to show that off because this is a new thing that they they just launched. So, let's let's do that. So, we go to go to chat again. Chat uh chatgpt.com. Now, this is my logged account. So, if you logged in, I think you should be able to get in for free. And I'll put some notes in there if this has changed because this is this is brand new. So it's going to look a little different but what you can do is you can add these things that are called connectors right so you can add give access to your data to uh the thing now some people are just go for it right and they want to connect their mail and stuff I would make sure that you know how your data is being used before you do that right like so so so be be secure there think about that but that is very cool right I can act I can have it connect to my my sources there because these are typically also these model context proto protocol servers so I'm going to do this connect And down here in advanced settings, I'm going to choose developer mode. We are really going in there. And uh it's nice. We got a nice little orange bar here now that says developer mode. I'm going to come in here. I'm going to go in and I'm going to go under developer mode here. And I'm going to add sources. And I don't have any connected yet. So I'm going to connect one. And that MCP server. And this is what they mostly look like anyway. You're going to say uh search the Cloudflare docs. Uh, and we're going to just call this Cloudflare docs MCP. We had different MCP servers that you could use for other services that we have, but this is the one that uh I really want to show off. Oh, luckily we don't need to log in. So, I'm going to say no authentication. And this is beta, right? So, this is very clear. This is beta developers only. I trust this application. I'm going to click create. And it stays in developer mode. So, if you wanted to get out of that, I'll show you how to get out of that when I'm done here. So, we go to more developer mode. I'm going to be very specific that I want it to use the tool that I want. So, Cloudflare docs is enabled. I'm going to say use the Cloudflare Docs tool to tell me about workflows as if I were eight. I'm aging very rapidly here. There it says looking for available tools and it says chatgpt wants to talk to call tool. So, it's going to call tool and it's going to send query workflows to search Cloudflare documentation and I'm going to say confirm. That's what I want to do. Right? So, so it's kept me in the loop. It's very nice. It's making sure that it's going to call this tool. And actually, all those other ones would do it, too. It's like, hey, do you want to call check your contacts or whatever. Uh, so I'm going to click confirm. It's going to go, it called the tool. It's going to grab the information back from it. It's going to take that and now it's going to use this and it's going to be very specific for the documentation that was there. They're like a chore chart for computers, making sure the tasks get done in the right order, even if they take a while. That's awesome. That's awesome. And so, so, uh, what is a step? So, again, we're in context. It's going to use the tool again. It's going to use the Cloudflare. It's looking for that. It's going to query for workflow steps, and it's going to show me what a step is. It's like a mini job. The workflow does. It says like, "Save this file, send this email, wait 10 minutes, and let's look at how Yoro's using that actually in that chat. Let's see what he's doing. Put toothpaste on, brush, brush teeth for you got to make sure that you're done with those things, right?" So, all right. So, I'm going to go to that code really quick. Let's go into this workflows. So, under server workflows, we have this blog post creator. And so, in here, um, uh, you're a self- embodied a somewhat snarky all by human loving robot. So, he's got a he's got a prompt and he's going to take that prompt and he's going to here's these steps, right? So, he's going to do these step do. So, here's the first one actually. He's going to get a category. So, get gather the most unused categories. So, okay. So, he's going to do a this query here. We'll take a look at that SQL here in a bit. And then he's going to go uh all right. All right. So, he's doing this and I I do want to check out what this SQL is all about here. But he's saying your task is to choose a topic. So, he's taken the Oh, look at that. He's pulled he's pulled the category and he says in the suggested category, your task is to write a topic, a new entry about uh in the in the suggested category of suggested category name. Take your time and choose the topic that you're most impressed by that you feel to write an entire blog post about. That's great. And so then it shows the following topics that that's there. That's nice. is passing all that information in. He's doing it and then he's returning that out and then he's going into the next one. So that way if this task failed, it would retry. That's the nice thing about these workflows. Awesome. So he's going to create a detailed outline. He's going to pass that outline of the blog post into uh the next one. Okay, cool. So here he's going to make a draft. He's going to write a draft and then he's going to submit that. Uh he's going to go that he's going to save the draft, insert that into the post, and we should take a look at what that is here in a second. But that's pretty cool, right? So that's he's using that workflow. So So now we're a little bit deeper into understanding what that workflow is. I'm a little bit interested in what's happening with his database, though. Ah, okay. So built some workflows that chain LLM calls together. He takes the output of one and then puts it into the next one as input. He's building up the context so that he can write a thoughtful blog post. Context is super important in building AI applications. An AI is only as good as the context you give it. There's a practice emerging called context engineering where you spend time ensuring that AI always has the most up-to-date and correct context that it needs to achieve its goals. Check the notes for more on this. You saw how the additional context that we added with the MCP server made the responses so much better. We'll see more and more of these popping up as they really help you build and understand developer tools. Check for the developer tool documentation and also check if they have an MCP server. As you can imagine, if you were asking to generate code, having access to documentation is a critical context for generating thoughtful applications. Oh, you know what? I'd like to show off how to use AI to help you understand the shape of your data. This application is using an SQL or SQL database. SQL stands for structured query language. And if you haven't seen it before, it might be a little hard to understand what it's doing. Okay, so let's get back into that code because I want to take a look at that SQL. So I'm going to click this, get the code open here under server. If we go in here under index, I can see that there was the these selects and I'm not really sure what all this stuff is. So if you haven't seen SQL before, it's a way to kind of get access from the database. And it it does it in a really nice way. a structured query language is what the SQL stands for there. So, uh this is kind of what it looks like. It's kind of hard to to uh uh read. Sometimes they're in different different things like this. Like this is this is interesting. Wonder what this is here. So, um if you could go and you can find where the table gets created. If you come like someplace like this migrations here, let's take a look at this initial table set up. So, I've got all of the tables that are here. So, what I'm going to do is I'm going to give this context, right? I'm going to give the context to uh an LL. Let's let's do that. So, I'll pop over here to this. I'm going to say uh I have the following SQL and I'm just going to paste that in there and let's see what happens. See what it comes back with. Cool. So, it it's telling me gives me a little schema overview about what's happening. Uh which is nice, right? It's kind of guessing what what's happening here. and it sees that it it gets categories ID and that I need to have uh them there and the status defaults to draft and it uses the current time stamp. That's all very nice. It is SQLite. That's correct. It's it's talking about some stuff that you'd like to know if you had some more questions about it. What I want to do is I want to ask a further question and I can do this. Let's go let's go back to the code. Right? So, if I'm in in the code and I'm back here and I'm looking at one of these things here, let's see if we can figure out what does this do. So, I'm going to copy this and I'm going to switch over and I'm going to say what would this query do? And so, now it has access to the schema. It knows everything that's going on there. Let's see. Now, it's asking me to log in. Uh, I was going to say stay logged out for right now. Uh, and it actually formatted it nicer than in my code there. Right? So, it g it gave a nice thing there. And it's giving a step-by-step explanation. It tells me what's happening. So, it joins the categories to the post table. It excludes it. Um, and I can actually say, oh, that's cool. So, here's what it would return if those were categories and what it looks like. Isn't that cool that it can do all this stuff for you if what you're what you're wanting? The other thing that you can do is if you have some of this SQL, so like I'm going to grab this SQL here and uh I'm going to pop over to my Cloudflare dashboard, right? So I'm going to go to to dash.cloudflare.com and uh in my account here, if I go under storage and database and then I go under this D1SQL database, uh this database that I have here is called blog. Uh you might have one if you've deployed this here. So I've got this blog. I could see what's happening with all of my data. I can go to the console and I can actually run a query here if I wanted to. I could run that same query. Uh let's just see what happens. And there's all the counts that are happening. And uh I wanted to see all of the categories. And you'll see that it's showing the ones that have zero. So there's these are where the posts are. And uh I was when I was looking at this earlier, it looks like what York did was he made it so that there's one for each one of the of the categories. And then after it does, then he'll start doubling up. There's a really nice thing that we have in here now that this explore data and you can come in here and you can actually look at the tables. You can come and explore what these tables look like. So if I if I click on that uh I'll see the different the slugs and things as they come across uh here as well, which is is nice. So So there's the and it's the examples the of the data that's in there currently, right? So that the here's the categories uh and where they are when they were created. And I can add a row if I wanted to. So, I could just come in here and just do this add row and it will allow me to to put new information in here, which is really super cool. So, a couple other things in here that I noticed that he had done and I've got it down here locally. I got this Euroex blog here locally. Um, I noticed that in here under the package.json there's this new entry and if I do this npm run new entry, what will happen is it will make a new workflow. Okay, so it's made a new a nice new workflow here. Uh and if I go I can do npx wrangler and I can do workflows uh instances describe and I can say the name of the thing which uh is called I can see right here it's called blog post creator right uh that's how you trigger them and I can actually go and see here on the command line which is I love this blog post creator and I can just say latest and it will show me the state of what's happening uh inside of there so the the most latest oh it actually finished So it says save the draft of the creators conundrum and that was the workflow step uh that had finished. Uh let's kick another one off really quick so I can show you where that is at in the dash. So if I just do npm run entry uh that's going to kick off. We'll go uh to our dashboard here. I'm going to go over here compute and AI and then we go to workflows and we're going to look at this blog post creator. And this blog post creator, you'll see here this is running and it'll it'll go through each one of the steps. It's creating this new uh uh this celebrating the crisper gene editing under the science and research category, which is great. So, it's it's trying to add a new one there. Um, and I don't know if you know this or not. I'll protect this later, but there's a secret a secret side. There's an admin side here. Uh, and if you want to make sure that you choose the the the ones you want to go in and make sure that you can go and read them, there's these drafts. So, let's go in under this draft here. This is fun. The creator's conundrum. So, I'm gonna I like this. I'm going to do ahead go ahead and do a publish. I can edit that if I wanted to, but I'm going to publish it. And so, now he's got another another blog post. And if we go back uh to this admin here. So, slashadmin. I'll protect it on the the the proper one. And I'll actually drop in the notes how I did that. So, uh Stevie Wonder, what a great he's inspired by. That's really great. Nice. Nice. Yoro. Uh, so we'll go go there. What else do we have? Oh, the he's got two things, right? Because while it was in draft, it hadn't been approved yet. So, a heartfelt thank you. Let's do that. Let's get this one in there. We'll say okay. And then we'll get back to that admin page. I'm going to go ahead. I'm going to delete this one because there was there's doubles there. Awesome. And there's no drafts found. If we go back to this fistful knowledge, and you can see that he has all these different categories now. Each one of those is kind of filling up. And what's going to happen is at some point during the day, what he does is automatically posts these. If you're interested in learning more about SQL and Cloudflare's database D1, check the notes. The other thing I wanted to point out is that Yoro has this code running automatically using cron triggers. Cronab is a specific language that kind of looks like this, which if you're unfamiliar, I believe loosely resembles a swear word. And I could show you how to read that. Or I could encourage you to ask your AI to understand it. Why don't you give it a shot? I've included a link in the notes that goes right to where York set things up to run recurrently. What schedule did he set? Can you figure it out? How did it feel? A new codebase that you've never seen before, and you can just cruise around asking questions to a know-it-all. Do you feel more comfortable being able to break down problems with the help of your AI buddy? There are definitely more ways to integrate AI into your development workflow and use it more like a paraprogramming co-worker instead of just an educator. It can actually read and modify your codebase and we'll show that off in a future tutorial. Make sure that you check them notes. And follow along with your blog. It's actually pretty good. Thanks so much for hanging out and we'll see you real soon. [Music]