Devin in 14 Minutes: The Autonomous Software Engineer

--- type: transcript date: 2025-07-08 youtube_id: -0bBQ4BXZ14 --- # Transcript: Devin in 14 Minutes: The Autonomous Software Engineer You might have heard of Devon when they went extremely viral just over a year ago, touting themselves as the first AI engineer. I've been using Devon for real projects. And today, I'm going to show you what it actually does and how it stacks up against AI coding tools that we all use. First, what I'm going to do is I'm going to create a fresh Nex.js template. While that's spinning up, I'm going to go and I'm going to create a new repository on GitHub here. And then once we have that, we're just going to add everything and I'll push this up. And then as soon as it's up, we're going to log into Devon. You can access Devon in a handful of ways. From their web app, from Linear, or from Slack. Within here, this is what the interface looks like. You have all of your previous chat sessions on the lefth hand side here. You can also collapse this. You can ask Devon or you can dive into the deep wiki functionality, which I'll show you a little bit later in the video. But the core functionality is within here. Once you've logged in for the first time, you'll have to set up your GitHub account, your GitLab account. Once you've initialized those, you're going to be able to access all of your repositories. If I search for Devon that I just added, I can go ahead and select this repo. And as soon as I have that selected, I can go ahead and ask questions about it. And I can iterate on this repository. So just a handful of features within here. You can at mention a handful of things. So different files that are within this project. But what's really neat is you can also reference other repos. So say if you have other repos that have functionality or features that you want to import into another repo, you can leverage that context. You can also add in macros or playbooks within this as well. So, additionally, you can add in attachments. If you have things like PRDs that you want to attach, potentially architectural diagrams or even things like front-end UI elements, you can go and incorporate all of that within here. It's fully multimodal in terms of what the agent can do. And additionally, what you can do within this is you can send this conversation to a Slack channel. And where that's helpful is especially if you have this on a team, you'll be able to iterate within the web app while sending all of those updates to the Slack channel so you can keep your team ab breast of whatever you're actually doing. What I'm going to do within here is on the homepage, I want a beautiful neo brutalist theme. I want a hero that reads developers digest and I want a navigation. I want to be able to actually have a few different pages as well. Let's have a blog, a contact page, but let's also have a link to GitHub as well as a link to YouTube within the navigation. Now, what I want to show you is if I click to improve the prompt here, what it will do is it will give us a number of different opportunities that it detects within the prompt. It's missing a repository name. Your prompt should let Devon know the commands to run to verify the results, so on and so forth. And in addition to that, what it actually did is it gave us the scaffolding that we can edit within here. it encourage us to actually leverage the repository that we want to use because the one thing to note with this is you can also select multiple repositories to be within the default context that the agent can leverage. One quick aside for Devon, as soon as you send it in a project for the first time, it will work for a few moments just to spin everything up. What you can also do within the settings is you can go and you can configure different repositories to actually be set up on machine. And where this is helpful is it can just really alleviate a lot of that setup time of not having to set up the whole environment every single time. The other thing that I do want to note at any point you can go and hop to another session and have these things run autonomously in parallel. You don't need to be bound to just one conversation stream. And these conversations can take 10, 20, 30 minutes depending on what you're asking for. If you do want to work on multiple projects and multiple streams of work, you can absolutely do that. You can go and create a new session or you can just go back to previous requests and iterate on those as well. The other nice thing with this is if you do have parallel requests from other agents and you are within the web app, you will see in the top right hand corner different alerts where you will be able to see when different agents have finished their particular tasks, need feedback on things or what have you. First, what I want to show you is within Devon, what's really neat with this is if you click progress and you have it selected to the live mode here, you'll be able to see all of the actions of what the agent is doing. And additionally, what you can do within this is if you select hover mode on the top right hand corner, you can go and you can hover over all of the previous tasks to see what Devon has done. Additionally, what you can do within here is you can use your arrow keys on your keyboard to go back and forth over all of the different things that Devon has done. And what you'll notice within here is it has access to everything from a browser to a code editor to the shell. And where the browser is helpful is not just for researching different things, but it will also test the front-end implementation of your code. Let's say you added a login functionality. For instance, it will attempt to do all of the different QA both not just on the back end of the application, but also on the front end as well. Personally, the way that I like to leverage Tevon is within the web app while having this live mode on. One thing that I definitely encourage is the first handful of times that you leverage Devon before you actually trust it to autonomously go off and do what you're asking for is just watch it within this view here. First, it's very fascinating to actually see the agent and how it performs different tasks. And what you'll definitely notice is it will definitely perform research and implement code similar to how you would. It might look up documentation, hop back to the editor, try and implement something, maybe it runs into an error, try and debug it. If it can't, go and research and go through that loop similar to what programmers do day in and day out. Now, it's went ahead and it's actually implemented its first pull request within our project. This is what a Devon pull request looks like. We have a summary of everything that it did. It implemented a hero section, a navigation bar, a neo brutalist style, interactive elements, so on and so forth. just to make sure that everything works. Link functionality, visual design, responsive design, so on and so forth. And what I really like with this is they actually support mermaid diagrams. And where this is helpful is you're going to be able to see all of the different areas on where Devon edited portions of your code. Within here, you have the green for major edits where we see within the CSS as well as the page.tsx, those were major edits. Whereas within the layout, we have minor edits. And then we also have some other files that had no edits at all. and then white indicates things that didn't have any edits at all. One subtle thing that I didn't explicitly ask for is it actually went and found and verified my correct GitHub account as well as my YouTube channel within this. Now, what I'm going to do is I'm going to go and I'm going to check out that PR that Devon just added and I'm going to go ahead and I'm just going to spin up our local development server and take a look at what it made within here. We have this relatively simple but starting point of this neo brutalist style of a website here. Now, what I can do here is I can go and I can ask Devon for some further. I'm going to say, I'm not quite a fan of the overall design. I don't like the yellows and I don't quite like the colors. But what I want to do is I want to make this site inspired by something like Gumroad. Let's have different tiles, different colors. I don't want necessarily weird shapes or anything, but I just want a tasteful overall modern neo brutalist type of site. And for any accent colors, let's try and add in blues and purples. And let's also add in some motion to actually animate things like the header and what have you. And then finally, what I'm going to say is once we have that, let's go ahead and test out and look at the front end of the application. And while that's working through, what I wanted to do is hop over to the deep wiki. What's really neat with this functionality is you can go and index any repository that you have. And what it will do just based on the context of the repo is create this beautiful implementation of a documentation page. Fireplexity is a project that I put out just recently. And basically what it does, you send in a query, it searches sources, it synthesizes results, and then it ultimately gives you responses with follow-up questions. If I go over to the deep wiki of what it generated within here, we can see everything from the purpose, the scope, we can see that Fireplexity is a Next.jsbased AI search engine that delivers intelligent answers with real-time citations and live data integration. What's really cool with this is it's broken out in a way where if you wanted to hand off this project to someone else or if you wanted to use this as a tool internally for different repositories, if you were to onboard someone and you gave them a wiki like this, they can go through something like this and begin to learn how the actual system works. We can see the client side architecture within here. We can go and expand anything. We can also ask any questions within here. And all of this was generated without me having to do anything except adding in the actual GitHub repo. Now in the top right hand corner we see an example of one of the alerts. It's updated the homepage design with my feedback. It now incorporates Gumroad inspired tiles with blues and purples for colors as well as animation. The design is ready for live testing. Additionally, it has updated the poll request here. Now I'll just go and check out the latest update to the poll request here. And I'll also just spin up this development server and we can take a look at this on our own end. Here is what Devon generated for us. Arguably a better starting point than what it initially started with. method also followed the second instructions quite well. So we have some other sections within here we have build better ship faster we have these nice hover effects within here also I can see on the watch videos when I hover over that it's actually showing my correct YouTube channel and in the top right hand corner I can also see the GitHub icon both of these are linked out but now for the contact page as well as the blog page I see both of those are white so I could hop back to Devon and ask it to iterate on that. Additionally, what is also done within here is now we have a live preview ready. If I didn't want to pull that down, what I can do with this is I can go, for instance, if I just show you the URL bar here, we can see that our application is now hosted live on the subdomain for us to test. So, I can go and take a look at it just like I did within our local environment. From here, we can go and begin to iterate on it. I'm going to say, I now want to build out the blog functionality. I want it to work with markdown posts. I also want you to seed it with a number of different posts for technical blogs. Let's include things like how to set up the OpenAI API. Include different code blocks within the markdown renderer as well. I want to make sure that those markdown blogs render with beautiful little code snippets in between the actual blog post. Let's maybe seed it with three blogs. Additionally, let's set up our contact page. So, let's put in my email. Let's also put in my GitHub as well as YouTube. and maybe if you can go and find my ex account and add that link to the contact section as well. I'm going to go ahead and kick that off. And while that's working through, so now I want to show you Devon within Slack. The way that it works is you can bring in Devon into a particular channel that you select within Slack. And what I can do within Slack is I can say, can you summarize what the fire enrich repo does? I'll go ahead and send that through. What's really great with having Slack within Devon is one is seeing how others use it, but also seeing how Devon actually responds to and implements different tasks that different engineers ask for. Within here, I see this accurate summary. Fireenrich is an AI powered CSP data enrichment tool that transforms basic email list into comprehensive business intelligence data sets. It goes through all of the functionality here and it also has a confidence score which we'll see for all of the different things that you ask about it. For instance, if it doesn't have enough information or if it isn't particularly confident, we'll see the score between low, medium, as well as high. The other cool thing with this is it will also sometimes include different relevant pieces of screenshots within its response. So within here, I can see that it's referencing different portions of the readme. So now if I take a quick look at our previous request, so I can see that Devon is going through, it's wrote out a number of different blog posts. Within here, we can see that it's installing relevant packages related to actually parsing the markdown of the blog post. We can see it's creating the page as well as the functionality to retrieve all of those different blog posts as well. And then also we can see that it's going through and updating our contact page as well. I'll just hop through some of these changes here. And here's an example of how it can spin up the local host and actually test the front end of your application. So say if we had interactive elements as well, we could go ahead and instruct Devon to test things like signup forms or contact forms or anything that really has an interaction pattern. We can go ahead and specify it to click things or fill things out. It has full capabilities to do all of that. And within here, I can see we have the developers blog. And now, if I click forward, I can see within these blog posts, I have this rendering of how to set up the OpenAI API. We see getting started within here. And I can go through. So, I have the contact page here. We have email, social, and then we also have about developers digest that it decided to go and create. And so now we can see that it's actually pushing those updates again to that branch with all of those updates that we made. Now that it went through and it made sure that it implemented all of those different features that we asked for and it went and checked all of them within the front end. We can see it viewed the browser. It clicked the different elements and actually navigated the page similar to how a user would. That's pretty much it for this video. I've been meaning to touch on Devon for quite some time. It's been just over a year since they originally came out. In future videos, I hope to demonstrate Devon in some more complex environments as well as some more real world environments and how this can be leveraged in potentially larger projects. Where I work, we have a platform where there are hundreds of thousands of developers that use our service. The team that I work with actively uses Devon all the time to implement all sorts of different features. I absolutely encourage you to check out Devon. It is probably one of the most powerful autonomous AI engineers that are out there just given the breadth of its capabilities as well as tools that it has access to within its environment and not to mention the worldclass UX within the product. But if you found this video useful, please comment, share and subscribe. Otherwise, until the next