How To Use Devin AI For Beginners
Other Videos📅 2025-07-10
Transcript
[00:00] Today's video, we're checking out Devon AI, which will be one of the most comprehensive AI helpers you'll have in your codebase. With Devon AI, I'm going to show you how we fundamentally use it step by step. First, we're going to integrate to GitHub on a real code repository for a software I'm creating. Then, we're going to plan out an entire new feature for this software, merge it with a PR, and see the live thing. Does that sound good? Let's jump in. Today's video is sponsored by Devon AI. The team hit me up and they said, Corbin, we got a pretty big thing here. I'm all right. Is it that big? I checked it out and I will say what you're about to witness right now is probably some of the best
[00:31] coding I've seen with AI in a very long time. Pretty impressive stuff here. And to begin, we can go ahead and log in. So the first thing we're going to want to do together is connect our GitHub account. So I'm going to come down here to settings. I'm going to select integrations. And with integrations selected here, we have a bunch of different options. Today we are going to be checking out GitHub. We can integrate this with Slack, Linear, GitLab, Azour DevOps, and Jira. And we love Jira. I love Jira personally. I use this in my software development when turning tickets into PRs. That's pretty cool feature here. We're going to do GitHub first. Click and hit connect. Make sure
[01:01] to choose your relevant GitHub profile. For now, I'll go ahead and select all repositories. But if you only want Devon to get access to specific ones, we'll choose only select repositories and then choose the ones you like. I'm going to say install. There we go. Once it's installed, you can confirm that it's the correct GitHub connection here with your username. Mine is Cathy Field Bump because I love me some caffy. And let's check out the different capabilities of Devon here. So the first feature here we're going to check out is their deep wiki. Think of it like creating a Wikipedia page for your code repository to give you all the information you would want to know. So I have one right here which we'll check out together. But
[01:32] let me go and add one as well. So we'll say add repo. From here we're going to go ahead and choose which repo we want to add. So for now I'll add the AI YouTube timestamps index repo. So this will take some time but once it's done we can click into it. So checking this out. I mean look how in-depth this is y'all. Now for context this is the software that was created with that repository. So, what this wiki does is it takes all this information and makes it very legible and easy for us to understand. The software itself, all you do is simply add a YouTube link and we're able to generate timestamps. Let's see if it got it correct. This document
[02:02] provides a comprehensive overview of stamp, an AI powered web application that generates intelligent timestamps for YouTube videos. Spot on. Now, what's really cool here is that Devon will reference the exact area that it got this information from. So, in this context, it got it from the readme. Scrolling down here a little bit more. Look how in-depth this is getting with AI core system architecture. It quite literally drew out my application in a visual format. So let's check out this architecture and see if this is accurate. So I am using Firebase hosting for the platform. App.js is where it's all rendered in the React front end.
[02:33] That's correct. The landing page is where each component is found. And then from here the timestamp component which does most of the functionality here which is this right here where you put the URL in and get information out is identified right here and is correct in the sense of how it connects to these thirdparty APIs whether that is YouTube data API bumpups API or right above me recapture for security. We are using Firebase functions and my way to make sure that the calls are secure is with Firebase off anonymous and with Firebase app check. Now how does this help you?
[03:04] This helps you with when you're creating your application or alternatively downloading open- source code and I'll make sure I leave this in the description down below so you can download this as open source code. You are able to visualize how the application actually works. So this is all correct and this is functionally how we provide value to our end consumer. In addition, which is really important with any type of app you create is the actual text stack itself. So the front end is React, we know that. Backend is the cloud functions. We got Firebase hosting. We got the O. This is all within the GCP ecosystem and it
[03:36] identifies how and why it's used. So let's say we get to a wiki, but you only care about one part of the repository, such as how the heck does timestamp generation even occur. I can come over here to the top left and hit timestamp generation. This is what I'm talking about y'all. This is next level stuff when it comes to explaining actual code architecture where I identifies the UR validation system, which is user inputs URL. We first put it through a reax. Make sure it actually looks like a YouTube URL. And then if it is the valid format, we will extract the video ID, fetch the video metadata, and validate accessibility, public, private,
[04:06] unlisted. So this is the wiki. Dive deep into your code, understand your code. Another major feature Devon offers is the ability to conversate with your code. But here's what's really cool. We can do multiple sessions at once. They all run in parallel. So for example, let's choose our relevant repository here. So we'll choose AI YouTube timestamps. We can add vision context if we want to do that, eg an image. And we can just ask questions. So for example, what part of the code handles the YouTube API. So maybe you want to learn more about this thirdparty integration. Can hit enter here. And while it's searching the actual code repository, I
[04:37] can come back. It's a live task. And we can ask something else such as how is local storage used in this application. Hit enter again. Now if you don't know what local storage is, here's a nice little tip for the front end. Maybe you want to store data but you don't want to store it in the back end in the cloud. You want to store on the user's browser. You can leverage local storage. So looking at our first question here, what part of the code handles the YouTube API? It does a couple things here. First off, it will identify exactly where this is being said in the file. So we know it's in timestamp.js here as identified with these lines here. We are grabbing
[05:07] it from our EMV file. We have the relevant URL that's being called and so on. It also takes it one step further here though and connects it with the backend logic as well. So it's not just front end. it identifies that hey we are using this API logic here in the backend specifically on how it's passing that data from the front end from that YouTube API call. Now what's really interesting here is that it takes it one step further. The codebase uses YouTube data API v3 specifically for video validation and metadata retrieval. The thumbnail, the duration, public,
[05:37] unlisted, private, but the actual processing of the timestamps themselves it's able to identify is handled by the bump ups AI service. So this gives you context that imagine you downloaded this code repo and you thought YouTube's API handled the entire process end to end when it came to the time stamp generation when in reality there is an extra third party service here of bumpups that actually does the processing of the timestamps. So asking Devon and deep wiki go hand inand. This is let's dive deep into the code here and understand it at a fundamental level
[06:09] before adding new features or proceeding with creating your application any further. Because as you or red team know the more you know about the actual code itself and how it interacts with each other, the better off you are going to be when proctoring Devon in further implementation of new features. Let's begin the fun, though. Let's plan a new feature and have Devon code it all out for us. So, here's what I want to do. At same.com, it has some cool functionality. We're able to put a YouTube URL, get our timestamps, we have a nice little history catalog. That's all fine and dandy. But what I want to
[06:40] add is a top level component here that will actually store every single request in the backend database and then reflect it to the end user so they can see globally all videos processed on this platform. So, coming over to Devon here, let's make sure we choose the correct repository and let's begin. So I'm going to go and say this. I want to plan a new component. I want this component to integrate with Firebase Fire Store and for every YouTube video process on this platform. We save this data output in a global doc and we will reflect this in the front end. Hit enter. Now if any of that terminology doesn't make sense, what's great with AI is that of course
[07:11] you can just ask it to help you out and understand it more. But long story short, we're going to save all this data globally using Devon AI and then reflected in the front end. Here's the best part. Devon doesn't get itself overwhelmed by looking at all the repositories you gave access to. It will only go with the one that you selected. So for me, it's Tuesday proud. Now, here's what makes Devon very impressive is you will realize you'll have to do very limited amount of conversation to get the end result you want. That was one shot, one input, one go. And look what we got here. Add fire store to
[07:42] firebase.js and modify timestamp.js to save process videos data to global fire store collection alongside existing local storage. Correct. Create a new global stats component. Display aggregated video processing statistics, total videos, recent activity, popular languages following the existing components patterns and then set up the fire store security rules and then test to run this to verify it even works. And then what is really cool here is that the AI from Devon will give us a confidence level. And right now we have high. So let's confirm. So while we let
[08:13] Devon do the heavy lifting here, we're going to go and make sure we enable in our Firebase project the database. So I'm going to do fire store database here. Create database. Everything I can just leave to default. For location, I usually like doing US central 1. Once we hit create, we're going to hit next. And then we can start in production mode and hit create. This is going to allow it so that when we actually need to test this functionality, it exists in the back end. So we'll notice that we have defaults and we should be able to start testing this new database we've created. If you don't know where this is located, hit build and it's right there. And there we go. Once Devon is done, you'll
[08:44] notice it will open up a nice little PR here that we can check out in GitHub. So, one thing I've realized when using Devon AI is how in-depth these pull requests really are. So first off, we're going to get the major key changes here, such as adding the fire store to the Firebase configuration, creating the new global stats component, modified the timestamps component. So now that we can save the data of all the videos that are processed on tube stamp, added the fire store security rules, and help me out here as well with fixing some of the dependencies that was missing for local development for Axios. Now, for example,
[09:16] if we wanted to be like, okay, what do you mean you modified the timestamp component? I go up here to files changed. If I go to the timestamp.js, JS. What you'll notice is this is what it's referencing. And what's really cool here is this is where the data is being stored in our new global doc of global video stats. Now Devon could have just stopped there, but they're like, "No, no, no. We need more." Look at this. It gave us a diagram of everything that's changed here. So, first off, we get a legend, major edit, minor edit, and then essentially no change. And as we know, what we're doing here is we're saving every process video to give global
[09:47] stats. So, the first thing that's telling me is that there was a change in time stamp.js, JS which we saw and also the creation of the new component here of global stats. In addition, it shows all the relevant files that are actually updated in this PR and then finally the major data storage incurring here of fire store and global video stats. Now before we dive any deeper here, let's see if this even works. So coming back over toampep here, I went ahead and pushed this code to production. So it is live. If I scroll down here, you'll notice that it actually works and we'll do one video together. So, I'm going to
[10:17] go and load a video there and hit generate timestamps. And I will say I am very impressed by Devon here. This is one of the first AI code helpers that truly can finish a task end to end without you having to reproate when errors come about. I noticed no errors. I went ahead and just straight deployed this PR straight to production. And as you'll see, it's going to say three videos are processed now. There we go. Three videos processed and in the last 24 hours, three videos. And on top of that, it went the extra length here of adding the language type. So it sees
[10:47] that the most recent three videos were all in English. Of course, if an individual were do espanol, then it would show espanol. Let's dive deeper to this PR and see how it did this. So three major things that Devon does that I haven't seen other AI models for coding do. First thing, it went the extra mile here of creating a whole separate branch specifically to this PR. And as we know in software development, you never want to code directly within Maine. So this was a first A+. Second thing, it had enough context to realize where to put the files correctly. It
[11:18] created the global stat.js, global stat.css, put it in the right folder of unoff timestamp comp. And what's even crazier is based off the context of the repository I gave it. Look at the user interface, y'all. It is matching not only the coloring, but the actual styling of how this entire component should look like relative to the other components. same dark UI, same type of font being used here and the font awesome icon library being leveraged. So second A+ here in the sense of when you create new components or new features,
[11:48] it stays within the realm of what your application already looks like and how it should function. And the third major thing that I realized that this did very well was creating the fire store rules. the extra nuances that typically incur with development in this context. It knew to create these fire store rules and on top of that how to point it to the direct global doc. So then coming over to Firebase here y'all it was able to get this in the first shot and you can see behind me this is real data that was put into my Firebase database. On top of that it set the rules. Come up
[12:19] here to rules. It went ahead and set up the correct security for how to read this data from the front end. eg when the user comes to this website they actually have the correct access to see these data points but what I think is more impressive is the fact that it was able to do this as a oneshot one go what you'll notice is that we can add more data relative here so in theory I could add maybe the thumbnail data the duration data of the actual video but it was able to not only name this correctly of language process at title URL user UID so it's actually tracking per user
[12:51] who's processing but in addition to that it created this global doc that can be read throughout the application by any user. Furthermore, if you want to actually talk to Devon in the PR, it will address the comments, address comments on this PR, add aside to your comment if you want me to ignore it, which means that you can go back and forth with changes here. Or alternatively, we can do this within the Devon user interface as well. Even though we got this PR in one shot, I'm going to go ahead and ask it for a change here so you can kind of see the workflow and how that works. What I'm going to request here is simply increasing the title size and the font
[13:22] size overall. I'm gonna simply say let's have it so the text size and font icons are a little bit bigger. Hit enter. While we let this generate, the workflow you want to approach Devon with is very much focus on the prompt. The more meaty your prompt is, the more information, the more context you give Devon, the better the results will be. I gave a three sentence prompt. I wanted a global stats. AI is getting way too good now. Somehow it hit it dead on. And this was complex, too. This was a new integration of a database that was able to connect. And overall end to end process, this
[13:53] probably took me around 5 to seven minutes to complete for this new feature. So with that request one, we can see exactly what Devon's doing with these nice little logs here. But on top of that, what's really cool here is that it's smart enough to know to work in the exact same branch and make another commit to the branch as you can see with this line here. So coming back over to GitHub, you notice that we have two commits. First one obviously which is creating the entire fire store logic and then the second one I've increased text size and font icons in the global stats component. I can click that and then scrolling down here I can see the exact
[14:24] changes and it's doing what I want. It's increasing the font size here the loading spinner here just overall increasing the font size within the CSS. Therefore when I push it and I reload the page there we go the title is much larger and so is all the relevant text associated and our nice little icons. Therefore, now you understand the workflow between GitHub and Devon AAI and how to connect the two. Let me show you some other features of Devon here. One useful thing to know is that to go directly to the PR, you can come up here and click it and this will take you directly to the specific pull request this chat is dealing with. Another thing
[14:55] to note is that any type of PR Devon will leave notes and these are important to read. So, one note is that it's missing the EMV file. I know this just because of the fact that that's a local file with high-risisk variables, but this would also point out different errors or different situations that you should be aware of before testing. So, always read your notes. Devon AI notes. Another thing to note is that while Devon does more complex task that take, you know, 2 minutes, 5 minutes, 6 minutes, we always have the ability to keep conversating with it. And this won't interrupt its current work. So, this is nice. So maybe while it's
[15:27] increasing the font size and icon size, I want to ask it another question for the current PR I'm working with. I can do that. Let's say you get to the point though, you're good to go. You're like, you know what, Corbin, I love my PR. I'm ready to merge. In order to do so, all you need to do simply is come up here and hit merge pull request. So that concludes today's video on Devon. But let me give you more context of how long this would have actually taken if I didn't use Devon. So that component was kind of complex due to the fact that we were connecting fire store and creating a bunch of new logic and a bunch of new files. Realistically, that probably
[15:57] would have taken me around 30 minutes to complete just off my coding experience. Now, what's really cool is even with that new change of a font size increase, icon size increase, and then the actual component itself, all in all took Devon around 5 to 7 minutes. This could really show that whether you're a complete beginner or a really experienced coder, you can still very much leverage this in your tech stack due to the fact that you can achieve the exact same task you're already going for, but at a lot faster rate. So, if you felt like you learned
[16:28] something today's video, make sure to leave a like. It's completely free. and I'll see you in the next Devon AAI.