Claude Code Agents: Build Agent Teams That Work
Claude Code TutorialsFresh📅 2025-08-05
Build Process
┌─────────────────────────────────────────────────────────────────────┐
│ BUILD CHATBOT WORKFLOW │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ PLANNING │
│ ──────── │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Define │───►│ Choose │───►│ Setup │ │
│ │ Scope │ │ Stack │ │ Project │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ DEVELOPMENT │
│ ─────────── │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Build │───►│ Add AI │───►│ Test & │ │
│ │ Features │ │ Logic │ │ Debug │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ DEPLOYMENT │
│ ────────── │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Deploy │───►│ Chatbot │ ◄── LIVE! │
│ │ to Cloud │ │ Running │ │
│ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Key Components
- Project architecture
- Core features implementation
- Best practices
Transcript
[00:00] Imagine being able to create a specialized team of AI agents in Claude Code. Well, now you can. Claude Code just introduced sub agents and these are a gamecher. If you've been using Claude Code, then you know it's extremely powerful for coding tasks. But here's the thing. As your conversations get longer and more complex, the more the context becomes messy. You might be jumping between front-end changes, backend changes, database changes, and a
[00:30] whole bunch of other stuff all within the same conversation. And this is where sub agents come in. Imagine each sub agent as being a specialized team member that focuses on one specific task. And each of these agents have a very specific system prompt and their own context window. So this keeps your main conversation clean and you actually get better results because each sub agent is fine-tuned for its specific task. So to try and explain this visually, Claude
[01:00] code always gives us access to a general purpose agent. This is the one you've been communicating with in Cloud Code up to now. So we can actually call this our default agent and this has a very broad and general context and system prompt. So this basically means that we can ask this agent to do whatever we want whether it's backend changes, front end, it doesn't matter. It will use the LLM to try and make those changes for you. But what if you have very specific rules with regards to which libraries you're supposed to use on the front end versus
[01:32] the back end. Now you have to cram all of the system rules into a single system prompt for the single LLM. Now, of course, the more stuff you provide, the more muddy the context gets and the worse the results get as well. But with sub agents, we can have a specialized and narrow context or system prompt. So, for example, we can have a specialized code reviewer agent with a very specific system prompt. We could have a front-end expert that knows exactly which libraries and tools it's allowed to use.
[02:04] And then we can also have a back-end engineer, a database engineer, a payments expert, a debugging expert and whatever our project needs. And within claude code, we can use these agents in a couple of ways. First, we can get this general purpose agent to orchestrate the tasks between these different sub agents automatically or we can also reference these agents directly in the conversation by using the at symbol. So let's look at this in action in claude code. To manage your agents, run the
[02:37] command / aagents. Now by default, we only have access to one agent and that's this built-in agent called general purpose. So it's this guy over here. Now let's set up our very first agent. So I'll select create new agent and press enter. Now we can choose to create this agent at project level or personal level. A personal agent is effectively assigned to your user and is available to all of your projects. I'll simply create this agent at project level. In
[03:07] order to generate the agent, we can let Claude do that for us or we can configure it manually. I'll let Claude create this agent. All we have to do is describe this agent. So let's say something like an expert code reviewer with extensive experience in full stack development using frameworks like Nex.js and React in Typescript. Now, for these agents, you actually do want to be as detailed and specific as possible. This is your opportunity to really fine-tune the sub agent to behave exactly the way
[03:37] you wanted to. And this will separate the sub agent from the general purpose agent. So, I'll add a little bit more to this like I need you to ensure that the code is well optimized, refactored, and commented. All right, for the tutorial, I think that's good enough. So, let's press enter. All right, this section is extremely important. This is where we can tell this agent which tools it will have access to. By default, everything is enabled. In other words, it can read files, edit files, execute commands, and access MCP tools. We can also go to
[04:10] advanced options to see a more detailed list of all the tools that are available. Now, I don't want this code reviewer agent to make any changes. So I'm actually going to press enter to deselect all tools and a code reviewer should only able to view files. So I'll select read only tools. Then let's click on continue. Now we can select the model that's available to this agent. We can inherit the model from the parent agent which is the general purpose agent and
[04:41] by default this will be sonnet or we can use haiku which is a super cheap and fast model for easier tasks. I'll simply select sonnet. Then we can select the color of this agent and this is because cloud code will show us which agent is currently active in the conversation. So we can use these colors to easily identify it. Let's select pink. All right cool. So we can see cloth code is calling this agent code reviewer and we can see all the tools that it has access
[05:11] to and which model we selected. Then we get the general description of this agent along with a system prompt. Now we can press enter to accept this or we can press E to open all of this in the code editor. So I'll simply press enter and now we can see our agent in this list. And if we look at the project files, we can see in this claude folder, we now have a subfolder called agents. And within here, we can see our code tree viewer system prompt. So at the top, we
[05:42] get the name of the agent, this description, and by the way, the description is really important. This will tell the main agent, so our general purpose agent, when to use the sub agent. So if you want the main agent to always use the sub agent, what you can do is change this description to say something like always use this agent. So I'm just going to remove that. And now if we have a look at the system prompt, we can see exactly what Claude came up with. So I'll just assume everything is
[06:13] fine and close this file. Now let's go back to the main chat by pressing escape. And now let's give this a spin. And just to give you some context on what this project actually does, in my previous video, we use Claude code to build this budget tracking app from scratch. So if you would like to learn how to build projects from scratch using claude code, then definitely check out that video. So let's say we wanted our code reviewer to review all the code related to adding transactions. We can access that agent in a couple of ways.
[06:44] First, we can simply tell the main agent to use that sub agent to do the review. So let's say please use the code reviewer agent to review all the code related to adding transactions. Let's run this. And this is what I was referring to. We can now see in pink that the code reviewer agent was called. So at this point our main agent handed this task over to our code review agent. So it's kind of saying, hey, the user wants you to review the transaction
[07:15] process. So go and do your thing and I'll wait for you to complete. Afterwards, a code reviewer will formulate a response and then pass that back to the general purpose agent and the general purpose agent will then decide what to do next. The code review was completed and the analysis reveals that while your transaction management code has a solid foundation, there are several critical areas that need immediate attention. So we're missing things like input validation on the API routes. Well, that's massive. We've got
[07:47] a performance anti-attern. That's interesting. Duplicate component logic and much much more. And then we also get recommendations that we can action immediately. Now, let's take this a step further by adding two more agents. So, let's go to agents. Then, let's go to create new agent. And let's add this one under project generate with Claude. And let's say an expert nex.js JS engineer with extensive experience in building Nex.js applications using the app router
[08:20] server actions and route handlers. So I'm being very specific with my language here. I'm trying to define an agent that's really good at doing the backend development. I also want this agent to have access to an MCP tool called Context 7. If you're new to context 7, it's this repository that gives you up-to-date documentation on pretty much any technical framework. Like for instance, Nex.js, which is effectively our back end. So let's say always use context 7 to retrieve up-to-ate
[08:52] documentation when implementing new features. And I'll also add focus on the backend logic and libraries of the application only. Let's press enter. And I'm adding that last bit because we are going to create a front end expert in a minute. And then for the tool calls, we actually want this agent to be able to do all of this. So let's continue. We'll use Sonnet. And for the back end, I'll just use Red. And that should be it. Now we have this Nex.js backend engineer.
[09:22] And let's create one for the front end as well. So let's select project generate with Claude. And then let's say an expert front-end engineer with extensive experience in react tailwind and shad CN. And we'll also give this agent access to context 7. So let's say always use context 7 to retrieve up-to-ate information on the libraries and frameworks before implementing new features. Then focus on the front end libraries and logic only. Let's send
[09:55] this. And we also want to give it access to all tools. So we'll press continue. Let's select set. And for the color, let's go with purple. And let's press enter. And just like that, we have three specialized sub aents. I'll press escape to go back to the conversation. And now we're back to this conversation with the code reviewers output. So now we can get our backend and front-end engineers to address these issues. So to make these changes, we can actually call these agents by themselves by using the at
[10:27] symbol followed by the word agent. And this will give you access to all of your agents, including the general purpose agent and of course our sub agents. But what we can also do is ask the main agent to automatically delegate these tasks for us. So since most of these issues seem to be related to the back end, we could enter the at symbol and let's select our backend engineer and let's say please address the above concerns. Now in a minute I will show
[10:58] you how to get that main agent to orchestrate the tasks between different sub aents. But I wanted to show you how you can tag an agent yourself. So of course we can see that our backet agent was indeed invoked and it wants to use the MCP server. So, it is following that instruction. I'll just say yes and yes again. And now our backend engineer is working through its own to-do list and making all of these changes. So, while this is running, I'm actually curious, what do you think about claw code? Do you use cursor or windsurf or claw code?
[11:32] Or do you maybe use a combination of cursor with claw code? Let me know. And cool. So, our backend engineer apparently fixed all of these issues. And when I switch back to the app, everything still seems to be working. But since it simply refactored the code, I doubt there's anything exciting that we'll really see on the front end. But let's actually improve the front end a bit. I'm going to start a new conversation and let's get the main agent to orchestrate tasks between several agents. So let's say something like, please get the front-end engineer
[12:02] to suggest changes for improving the UI of our app. Then get the front-end engineer to implement those changes. Then get the code reviewer to review the changes made by the front- end engineer. Finally, get the front- end engineer to fix up any issues pointed out by the reviewer. Let's see what happens. Let's send this. And now we're really relying on this guy to probably delegate the tasks between our front end expert as well as our code reviewer. So, we can
[12:32] see that our main agent created its own to-do list based on the instructions that we gave it. And now it's currently busy with the front end engineer. And of course, we can see the front- end engineer is indeed busy. And by the way, if you ever wanted to see what exactly these sub agents are busy with, you can press Ctrl and R to expand this view. Okay, here we go. So, we can see the frontend specialist now completed its changes. And now the code review sub agent is having a look at those changes. And now that the code review is done,
[13:03] the main agent handed the task over to the front end engineer which is now busy implementing those fixes. And of course, we can see the front end sub agent is now busy. And there we go. The front end engineer just completed its work as well. And if we swap back to the app, the changes might seem subtle, but this is actually a very big improvement. When we load the page, we actually have some animations. We have proper icons now and we have these subtle animations when we hover over these cards. There's also a
[13:34] big improvement to some of these headings on these pages. And generally speaking, I think the code reviewer and our front- end engineer did a very good job. So, will you be using sub agents in your workflows going forward? Let me know down in the comments. If you enjoyed this video, please consider hitting the like button and subscribing to my channel for more Claude Code content. And to watch more of my content, click on the card on the screen right now. Otherwise, I'll see you in the next one.