TRAE: Custom AI Agents That Actually Understand Your Codebase

--- type: transcript date: 2025-06-10 youtube_id: AFJzVVAcag0 --- # Transcript: TRAE: Custom AI Agents That Actually Understand Your Codebase In this video, I'm going to be showing you Trey, which is an AI IDE which just launched with a ton of new features. I'm going to go through a demonstration, showing you the editor, and I'm also going to focus on some of the unique features on how you can leverage this. Right off the bat, one thing that they just announced was the ability to customize your own AI agents within the editor. What you'll be able to do is similar to how you could select different models if you've used something within Cursor or Windsurf. What you'll be able to do within this is you'll be able to select from different agents. They have some pre-built agents such as their builder agent, but also you'll be able to create your own. If you want to break out your agents into something that looks similar to a dev team, say a front-end engineer, a back-end engineer, as well as a QA engineer, you could set up agents like that. I'm going to go through some different demonstrations and just show you overall how the platform looks. Now, one thing that's great with Trey is you are going to be able to try this out 100% for free. Once you've downloaded Trey, this is what the IDE looks like. So if you have used VS Code or something like Cursor or Windsurf, this is going to feel very familiar to you. Now within here, we can select the different models, whether it's Anthropic, Google, OpenAI, DeepSeek. You do also have the ability to add in providers if you'd like, including from services like Open Routers. If you want to explore other models that aren't listed, you're going to be able to do that as well, all through setting up your API key. Next up, one unique feature of Trey is the ability to create these AI agents that have the ability to access MCP tools that you define. For instance, let's say I want to have a database agent. I'll just call it database. You can add in a prompt that has additional guidelines within here. But the really neat thing with this is you're going to be able to browse all of the different MCPs within their marketplace or add in your own custom MCPS for whatever integration that you're looking for. Say for instance, if I have a Postgress database, I can go ahead and attach that MCP server. I'll grab my connection string. And then as you define the agent as well as the tools, you'll be able to reference these on the fly with just that app command. Say if you have a database agent, you can reference that. If say you have something like a front-end developer agent, you can reference that. And one thing that I want to point out with this is though there is a number of different MCPs within the marketplace here. If you want to add in your own custom configuration, for instance, if I wanted to use the fire crawl MCP integration, I can grab that snippet. I can paste that in here and then I can confirm. And let's say for my research assistant, I just wanted to use that particular tool. And I can limit the tool use to only what I want. Say if I want that research agent to leverage something like only firecrawl, I can allow for that. And then the other thing to know with this is with the hashtag, you can reference different aspects of the pieces of context that you want within your codebase. So whether it's code, you want to reference a file or folder, documentation, you can do all of that as well. Within this, I'm going to demonstrate building out an application. I'm going to go and initialize a new Nex.js JS project. Within here, I'll just go and I'll accept all of the default settings. And then once that's all installed, the first thing that I'm going to do is I'm going to go and leverage Sonnet 3.7. And what I'm going to do is I want to update the homepage to read developers digest. I also want to add in a nav as well as a footer component with some placeholder links. I'm going to go ahead and send that in. We see it's going to analyze that request. And what we have here is we see that it went in and it found that particular piece of context that it needs within here. If I go within our app directory, we have the page.tsx. And just like that, we have the reference. We see I'm going to update the page.tsx to replace the current contents with the new title and add a navigation and footer. Now, it's going to go within the page and it's going to update the title, add the nav, as well as the footer. At any point, if you do want to specifically reference a particular piece of context, you can do that with a hashtag and specify things like whether you want to use the web, add in docs, or reference particular folders or files. We see that it went in and it made some updates to our page. Here we have the ability to accept or reject within the file. I can go ahead and command enter to accept what was generated. And the neat thing with this is they did build in a web preview feature. I can go and I can click this preview button and within here we can go and take a look at our web apps. We have a simple interface here where we have the footer just like we asked for. We also have some example links and then we also have it read developers digest. We can also take screenshots. For instance, if I take a picture of the blog page here. So now what I can do is I can say I want to recreate a blog page and I want to have all of the blog posts represented in markdown within the project. As you see the builder is just accessing the context that I need for my application. The one thing to call out here is it is nice to see the particular context that it is referencing and passing into the language models. In this case we are again referencing that page.tsx and we're also referencing things like the package.json presumably to see what needs to be installed within here. It determined that we're going to be using React Markdown as well as Gray Matter. It went ahead and installed those packages. And additionally, what it's done here is it's actually creating some example blog posts. In the screenshot, we see we have rules plus tools to define your future agents. Within here, we can see the name of the blog post. We have that at agent. The great thing with screenshots, and just to show you how accurate they are, is if I look at the title of the blog post, the author and date. If I go over to the blog post, I see the same title, the same author, as well as the same date. that screenshot capability can be very powerful, especially when extracting things like the context of the text within the image. For instance, the other cool thing with this is if I go and I run the development server just like I typically would instead of pressing the preview button within here, we have the homepage of the application. If I go and I click through to one of these pages, for instance, I'll see I can go back to the post and within here I have all of that information from that markdown blog post that it generated for us. Now that we have that, I want to go and I want to create a new agent. So, I'm going to call this demo agent. And within the prompt, what I'm going to do is I'm going to go and I'm going to turn on the MCP capabilities and I'm going to select a number of different MCP servers. What I'm going to add is Puppeteer. So, what Puppeteer allows us to do is it's effectively a synthetic browser where we can go and we can navigate to different websites. We can traverse different DOM elements and what have you. Within here, depending on the MCP server that you have, it could take a little bit of time to install. Puppeteer for instance, it is a little bit on the larger side in terms of a package because it will be pulling down a Chromium instance that it is going to run. For the agent, I'm going to give it access to a Puppeteer MCP server. The great thing with Puppeteer is it allows us to navigate to a website and we can do things like take screenshots or interact with different elements in different ways. Let's say, for instance, I want to go to the Apple Store. Now that I've equipped it with the Puppeteer MCP server, I'm going to say you're an expert front-end developer. You have the ability to research different websites as well as take screenshots of different elements that you find inspiration from across the web. Within this, I'm going to go ahead and create this agent. Now, you do have the option to choose whether you want to use it right away. I'm going to go and I'm going to click to use that. Now, what I'm going to say is I want to add in a new page. Let's call it store. Let's also add it to the navigation, but specifically let's reference this link. Go to this link and take a screenshot and reference it for actually building out the page. Then within here, I'm just going to put in that screenshot to the Apple Store page. Now we see it's analyzing that request, but since we've equipped it with that MCP server, what we'll see is it will go through. It went and it took a screenshot of the page. Now I can see it went to this page. Now within the Puppeteer MCP, we see it navigated to the site. Once it was on the site, it determined to take a screenshot. It also has the ability to pass in the parameter of things like width as well as height. And then for the response there, we have the image here. Now that it has that, it's going to go through the project structure to understand it. And within here, we see that it's going to create a new store that's inspired by Apple's store design. It will create a new directory as well as a page.tsx for the store page. Now, we can see it's updating the layout, but it's also creating that page for us. So, we see that it's going to create a store page that's inspired by Apple store design. Started the server for us. And now, if I open it up, I see the store tab within the navigation. And then from there we have that inspiration of that store by leveraging just that URL that we pasted in. You can get quite creative with how you want to leverage Puppeteer or these different MCP servers. A couple other nice features within Trey is within here you can also specify the different commands that you don't want the agent to run. You can specify certain keywords that you don't want to pass into the terminal. The nice thing with that is you'll have the peace of mind knowing that the agent isn't going to all of a sudden just go and remove the entire directory or file of something that you're working on. deny list here for different keywords that you don't want the agent to actually pass in and run into the terminal. And additionally, you do have the option to turn on and off that auto mode. Additionally to the chat panel on the right hand side, what I can always do is if I click command I, I can specify similar to something like command K and other AI idees. Within here, what you can do is I can say something like I want to build a page that is a beautiful contact page with all of the relevant information as well as a form to submit to get more information. And within here now it's just going directly and targeting that page that we created there. It went ahead and it created this page for us. The one thing we'll have to do is we'll just have to install some packages here. So we see for this page it leveraged framer motion. I'll just go and I'll install frame motion. And so now I can see the starting point of a contact page. So if you just have targeted edits, you can just highlight the section that you want and I can say I want the contact information to be relevant to developers digest. I send in that request and now we can see the information there. As you can see, Trey has all of the features that you would typically expect within an AI IDE, but it also has those really neat features of being able to specify the different agents. Next up, in terms of pricing, you can get started completely for free. And if you are interested in trying out their Pro Tier, that's going to be $10 a month or $3 for your first month. Definitely very competitive considering the landscape of different AI IDs that are out there. Next up, in terms of privacy as well as security, all of your codebase files are going to be stored locally on your device. The only time that files do leave your system is when they create embeddings of the different files. Basically, what embeddings are a numerical representation of little bits of your code, which allows for things like retrieval for the AI agent as well as some of the systems within Trey to be able to effectively retrieve the proper information of what parts of the codebase that you might be referencing at any given time. That's pretty much it for this review. I encourage you to download and try out Trey. Let me know your thoughts in the comments below. But if you found this video useful, please comment, share, and subscribe.