Transcription
We've been exploring context engineering and a range of orchestration tools designed to create thorough plans for AI agents to follow. But the big problem is is that you still need to provide exact context for each specific task. Otherwise, the agent starts filling in the gaps on its own, often drifting away from the original plan and building something completely different from what you intended.
But I think I've just found a tool that actually solves this and it's called Tracer. The most advanced AI coding assistant built for large code bases. Tracer starts every task with a detailed actionable plan. This means you can iterate with AI on ideas, not cryptic code diffs. You can update the plan with precision and tracer ensures the plan artifact stays coherent and fully grounded to your actual codebase. Think of it as a planning layer. It makes sure the input going into the agent is crystal clear, leaving no gaps that can cause hallucination. Tracer even has its own intelligent thinking process to detect loopholes and works with you to resolve them before coding begins. And what's even better is that you can spin up multiple planners in the background that allows you to get more done faster. And when the AI agent encounters something new like an unfamiliar UI library or a framework, Tracer automatically gathers the context it needs to implement it properly.
So to get started, you can easily install it through Visual Studio Code and it works with all of the different agents that we showcase from Cloud Code, Cursor, Rue Code, and many others. But you can simply install it as an extension within your IDE. So in my case, I'm using Visual Studio Code and I can head over to the extension tab and I can search up Tracer and I can simply install it. And after installing, you're going to be requested to create an account with Tracer. So simply go ahead and do that and then we can get started.
After signing up or logging in, you're going to be then greeted with this extension page. But before I even get to that, I simply just had an AI model generate a resume AI application where it generated the base structure of the SAS landing page with the capabilities to use AI to enhance your resume. Now, this is a very basic app, but I have one requirement and that was to give the AI model to use MUI. It failed to incorporate all of these components that I had requested it to generate within my resume AI app. And the reason why is because most AI assistants handle popular libraries like Shad CN really well because they're actually trained on them.
Uh now what I'm going to do is actually showcase how you can use Tracer AI in this case a bit further and see how it can handle something like incorporating a pretty complex task of handling something like a new library like MUI which most models actually tend to fail at doing due to it being really new and its inability to actually process new context. So now heading back into the tracer agent, we can actually use it to help us implement this new context to our actual app. In this case, I can describe my prompt, the task as descriptively as possible in natural language. And this is where I'm telling it to integrate the MUI library and replace certain components a part of my resume app. You can then tag certain components that you want to work with. You can even upload different images as well.
But there's two different modes that you can use. One is the phases mode. This is where you can start a conversation with the AI and it's going to essentially clarify the intent of your task and then break it down into tasks that are manageable. Then you also have the plan mode. This is where you can get a detailed file level plan, refine it with AI, and then send it to the agent for execution. But what I want to do is work with the AI to actually build up a manageable task to implement the MUI library. So we can go ahead and send this in. This is where the AI agent is going to now converse with me to implement new steps to actually work on this task. It'll use reasoning to map out all the different files that you have and then it'll thoroughly understand the structure and then work on an implementation plan that you can actually help the AI develop.
So it looks like it has returned with the response and it said that it found that my project is a vanilla HTML CSS JavaScript app and it's not a React project. So it has given me a couple options where I can first go ahead and have it work on converting it to React plus MUI which is the recommended one. But you also have a couple of other options like using material design CSS framework or a hybrid approach. But I'm going to be using option one. So let's go ahead and send that in. And like we had talked about this phases mode is where it's going to be able to break it down into manageable steps. And you can see right here that it has created a thorough plan as to how it will tackle it. So you can see the first one is to set up the React project structure and the dependencies where you can go ahead and first generate the plan. This is where it's going to start mapping out an implementation plan for that specific phase breakdown. In the same manner, it will do the same for all of these other phases, which is where it's going to thoroughly help us implement this MUI library.
So, it looks like the first phase has been fully planned out as to how it would create the React app. And now what you can do is you can actually execute it with whatever agent that you want. You have it so that you can execute it with co-pilot, pod code or even tracer. And you can even configure more AI agents to tackle this particular task. But you can even chat with the plan. So if there's like certain areas that you think would need work or you would want to change a plan, you can definitely talk to the AI and change a plan that it has actually devised and it'll make that implementation. I personally like it. So I just simply had Tracer accept the changes. And now you can see that it is developing and creating the new source directory for the React app within my resume app.
So looks like tracer has finished executing phase one. So now you can actually go ahead and apply the changes. You can even show the diff so that you can see if everything was correctly done. Now after accepting all the code changes, you can simply just click apply all. And then what you can also do is have tracer verify and make sure that everything that it had generated is thoroughly correct. And what's cool is that after it has finished verifying, it's going to give you a couple of review comments that you can then implement and fix with the AI agent that you have configured. But once you have it configured, you can then reverify it to test if that particular error has been resolved. But you can see that with each particular step, there is a detailed plan that will make sure that this implementation process is 100% correct and without any sort of error. And you can obviously go ahead and update certain components that you don't like so that it saves you time and the review process at the end. And just take a look at the code changes. If you want to get a full reference, you can definitely see exactly which file is new, which it'll thoroughly state. And it will also state which file has been modified. So this way it'll give you a reasoning behind each change, each edit as well as each creation.
Now I have thoroughly finished all the different phase breakdowns that was generated using Tracer. And there we go. We have an implementation of the new Réé AI app using the MUI component. And it looks a lot cleaner and more modern. This best fits a RSé app. And you can see everything is still the same and even focus on adding new components to the overall app. You have an AI powered resume builder built within that is a bit more streamlined than what it looked like before. You have a pricing tier, frequently asked questions, and then you also have it categorized using different components that was provided using MUI. And this is what I really wanted. It was able to thoroughly generate while keeping the main structure that we had requested before. And it looks a lot cleaner and a lot more professional thanks to Tracer.
If you like this video and would love to support the channel, you can consider donating to my channel through the super thanks option below. Or you can consider joining our private Discord where you can access multiple subscriptions to different AI tools for free on a monthly basis plus daily AI news and exclusive content plus a lot more. This is the capability of Tracer and this is why it is something that stands out for planning far deeper than many of the different kits that we have showcased like spec kit. Yeah, BMAD, even context engineering. It offers a streamlined UX and one-click handoff to your favorite AI agent so that you can have it execute almost any complex task.
But that's basically it guys for today's video on Tracer. If you're interested in getting started, you can actually take a look at the coupon, which is listed in the description below, where if you want to access the Tracer Pro account, which is valued at $25 per user a month, it is something that you can get access to for only $1 for the first month using the coupon code. So, if you're interested, definitely take a look at it with the links in the description below.
But with that thought, guys, thank you guys so much for watching. I hope you enjoyed today's video on Tracer. I'll leave all these links in the description below. Make sure you go ahead and subscribe to the second channel, join the newsletter, join our private Discord, follow me on Twitter, as well as making sure that you subscribe to the YouTube channel, turn on notification bell, like this video, and please take a look at our previous videos because there's a lot of content that you will truly benefit from. But with that thought, guys, have an amazing day, spread positivity, and I'll see you guys fairly shortly. He suffers.