Trae AI a FREE AI Code Editor. Better than CURSOR ?

Key Takeaways

Now we are able to create a full-fledged application like this with just one prompt and this is really nice. This is built using tray IDE. You can download and use this tool right now completely for free and it provides a easy using interface. Also you can create your custom agent to build your application having access to advanced tool using MCP. It's a AI co-pilot or AI engineer to develop your application. It has access to more tools and more capabilities using MCP. You can add context to get more accurate answer. You have smart completions built in and you can get started for free. And this has access to some advanced models such as CL 3.7 Sonnet, Gemini 2.5 Pro and GPD 4.1. And we are going to create a custom agent and use that custom agent to build our application using our customized instruction. There are many other features which I want to show you such as MCP and integrating that here adding context to this IDE adding rules and finally configuring models. So stay till the end to learn all this. We are going to test this and try to build the application with this and let's see how it's going to perform. Let's get started. Thanks to Trey AAI for sponsoring this video. First go to trey.ai and download the application by just clicking this icon. So once after you download and install it, first I want to show you how you can create agents within this application. Go to settings and agents. There by default you got the builder agent and builder with MCP agent. But we are going to create a custom agent. Create agent. I'm going to name that as developer agent and giving this as a prompt. You are a senior front-end developer developing in Nex.js, JavaScript, TypeScript and the coding environment next.js, JavaScript, TypeScript, Tailwind, CSS, HTML and CSS. So that is the instruction. After that I'm just giving some inbuilt tools access file system terminal web search and preview then clicking create and then you can use this agent to build any application. Now the custom agent is ready in our IDE. So as a first step, we going to use the developer agent and I'm going to ask create an image resizer app with modern professional design. I'm choosing clo 3.7 set and clicking send. Now it's processing the request. So based on the requirement, it's using Nex.js with TypeScript. Also, it's using Tailwind CSS. It's automatically running its terminal commands. created all these files index html style CSS and also you can view that here and all other information available here the process and finally it started the server and I'm able to preview so by clicking this icon you can see you got the preview window directly within your ID and now I can test by dragging and dropping an image so I'm dragging an image here image loaded successfully now I can change the aspect ratio change the image quality Also if I don't want to maintain the aspect ratio I can remove that and based on that you can resize and you can see it got resized. Now if I want to download I can click download. So this is all working perfectly fine. So you can clearly see with just one instruction and I provided that instruction to this developer agent and all this done with the perfect application and this looks amazing. You can also view all the list of files created on the left hand side index script JS styles. The real power of an AI agent is when we add tools to this agent. So to add MCP tools to developer agent let's go to settings MCP. There I'm going to click add icon and here you got multiple options such as puppeteer postsql then github and other. But now I'm going to add a database to this application. So that is PostgresSQL and I'm going to get a PostgresSQL database from neon. There I can click the option to connect at the top and that will provide me the username and password for the neon database that is a PostgresQL database. So I just copied the snippet. Then here in Postgress SQL settings whatever you copied you can add that here at the top. So as soon as you paste that then click confirm to create. That's it. Now the MCP server got successfully added. So you can see the list of options here. So query is the main tool within Postgress SQL. So now we are ready to talk to the database and eventually integrating that with our application. So in our case we don't need to know any SQL code. You can just ask with our natural language. So I'm going to go back to our developer agent. In the edit agent, there's a option to add PostgresQL. So I can just tick the box and then click save. Now I got access to PostgresQL. Now I can ask the agent to use Postgress SQL MCP to provide me more information about my database. And then clicking send. Now you can see it's automatically interacting with the database. It's getting more information about the database schema. And you can clearly see I don't need to write any SQL code automatically. It's written and queried. Even you can integrate this SQL database with your own application with just your natural language. Now I want to use a feature called images which means I can modify the existing design with my custom design. I asked chat GPT to convert this design into Jubilee style and I got this output. So I'm going to download this image. I'm going to add the image. I've added that image and going to add context. So clicking context and I'm going to add all the files that is index then adding style CSS and then adding script.js. That means it understands the existing design and able to change it accordingly. Now I'm going to ask change the existing design according to the design provided in the image and clicking send. Now it's making those modification. I'm accepting those changes. Now you can see it automatically fixing if any issue occurs automatically starting the server and I'm able to preview. So clicking on preview and here is the interface. This looks amazing compared to how it was before. I really like the design and I could further prompt to make this much better. You can also see the terminal here. It's automatically having its own terminal running all the commands without me doing anything completely automated. So I'm going to drag an image and drop it here. So here I'm dragging an image dropping it here and it's working as expected. Really nice. You can also add your MCP server using the JSON config that is your custom MCP. Also other features which I want to cover is context. So you can add your own context by adding documents here. Add docs. It can be from URL or it can be from local files. Here I'm going to add a document that is local files. Giving a title own documentation. Then adding files. I've added the file and clicking confirm. Now you can see it automatically indexed that file. Next I'm going to add a URL pen a docs and clicking confirm. You can see it's automatically going to the URL and indexing those pages. Two pages indexed. So now this information can be used as context when we ask this agent to perform any task. Also you can add context directly from here in the chat by hash and you can mention if it's a web search or if it's referring to a file like this. Next I want to show you about rules. So after going to rules you got two different types of rule. One is user rule. Another one is project specific rule. User rule is basically a global rule specifically for you. And project is specific for individual project. So I can click add rule and you can see it's automatically getting added here. And here I can add my rule. Always perform what is necessary. Now you can see the rule got added here and also it's in this folder tray rules and this folder. Next I want to show you the available models. So here after going to models you can see these are the built-in models and you can also add your custom model. So add model and choose your provider. I like open router. This give access to multiple models and that is really nice. The final feature I want to show you is when you go to agents, there's a feature called auto run. This means it can automatically run commands on your behalf in the terminal. So I'm going to turn it on and confirm auto run. And also I can add deny list which means I don't want the agent to run all these commands such as rm kill chmod. And you can even add more such as rmd and much more. In this way, if I ask this agent to do any task, if it requires any terminal commands to be run, it'll automatically run the commands completely in auto mode, which speeds up your process of building the application. And I'm really excited about this. Do let me know in the comments below what you think about this. Also, let me know how this compares with other ID tools. I hope you like this video. Do like, share, and subscribe. And thanks for watching.