So hi everyone. Welcome to another monthly webinar. Today we're going to talk to Marcelo, who's going to show us about dev agents, especially for non developers. And he's been posting quite a bit about being able to code vibe code, if that's what you want to call it. So Marcelo, take it away.

Thank you, Akshay for inviting me. I really appreciate it. Hopefully you can hear me okay. Everything is okay on the audio and the video. I will be jumping back and forth, but we can jump into the presentation. So obviously, welcome everybody. Thank you for being here. It's an overview of DEV agents for non developers. So I believe there's a new breed of builders out there. They're called vive coders. And I believe by coding is actually something that will be of a new role, but we do need to bring in a little bit of a structure to that, and Dev agents help with that, with that. So, real quick, a little bit about me. I'm Marcelo Lewin. Many of you know me. I've done other kinds of things with headless CMS is and other kinds of things. This year I got into by coding quite a bit. And I really do believe it's sort of the it's the future for future kinds of builders. I'm the founder of multiple companies. One of them that I'm doing right now is called, I code with.ai and I love building apps with AI. I'm also a big vibe code, vibe coder advocate. Also for those of you, if you can that are watching live, either go to the URL or scan this QR code and check in this app. Once you check in, it is just for checking in, so we know that you're here, and I'll keep you updated as to upcoming presentations and things like that. But this whole app was actually vive coded 100% I vive coded the entire app. It runs on sveltekit, which I wasn't familiar until I started doing some vive coding to create it, and I used agents to build it as well, and now I'm turning it into an actual business. So that's why I love what's happening with vive coding, and the possibilities of vive coding, it just opening up the doors to so many things. So anyway, if you have a minute, go check in. It's just very simple check in process, and then we'll know that that you attended, and I'll keep you updated. No spamming whatsoever. It's all about good free education. Also, I do run a community called coding with AI. It's on Discord. If you want to, please go to the URL or scan this QR code, and it'll take you there directly. And it's, it's a small community right now, but I'm trying to grow it, and it's focused on, again, the new breed of creators, code builders. They're not replacing developers. Developers still exist and will exist for a long time, but they're just a new breed of builders. All right, real quick, we'll jump into the agenda. We're going to do two parts. The first part is an introduction to coding agents. We're going to talk a little bit about why non agentic AI tools, for short, for coding. We're then going to talk about features of AI coding agents. We're going to go ahead and break down AI agents with a human analogy, just to give it a little more personal touch, we'll talk about the lifecycle of an AI coding agent. And then we'll jump into actually, we'll do a quick demo in cloud code so you can see agents running, and you'll see my buy docs, which is really a full framework, but it's really a very sophisticated agent. Basically. Then we'll jump into sub agents. And what are coding sub agents? What are the difference between coding sub agents and regular agents? What is the life cycle of a sub agent, some of the benefits. How do you invoke them? How do you interact with them, and which tools support sub agents? Not a lot of tools support sub agents today. And also, we'll jump into a hands on code, or hands on interaction with it, and then actually, please keep me honest here and on track to make sure that things are I'm not running too, too, too much into the time limit that you have set along the way. Feel free to ask questions. If you have any questions, please feel free to ask. And I prefer the questions as I go along than having the questions later when we lose context, and in AI, context is everything as you'll learn. So all right, so let's start with the first part in. And by in intro to coding agents. So let's talk about generic AI tools like ChatGPT or any, any tool like that. What? What kind of problems do they have from a coding perspective? Why don't they work perfectly for true coding now for creating a little snippet that you can just see it running? Oh, that's great. I'm talking about real coding where you want to create an app that is shippable, maintainable and scalable. First of all, they have limited autonomy, right? They respond only when prompted. They cannot continue on its own. So it's really you put in the prompt, and then it gives you something back, and then you have to continue iterating with it. But it doesn't do things on its own, and again, it observes only the prompt. In other words, whatever you put in there is what it knows. It doesn't know about your code base. It doesn't know about logs. It doesn't know about errors or the state of the project. Everything has to be inputted in there. Also, it provides suggestions. At the end of the day, it's basically suggestions, not final decisions, right? So it offers possible solutions, but the developer must choose what to do next, as opposed to an agent. Well, it can provide the entire solution. And it can generate code snippets. So it'll, it'll produce examples, but it's not providing true full solutions. Now, many of you are going to go, Wait a minute. Now, I created this little game, and look, it runs inside of chat. GPT, yes, that's true, but I'm talking about full blown apps here that you know you can have people sign up, that you can type people interact with, with a database back end, with a front end that works with mobile devices and your desktop devices, all of that. These tools are great for little snippets, not for full blown apps. The goal is very user driven, so each interaction depends on explicit user prompts, not on objectives that you give the agent that it must accomplish. So and then the context, the memory is very short term, so it's limited to the active conversation window, right? It cannot recall past sessions, where an agent can recall past sessions, and it can recall past sessions in a variety of ways. There are many ways of storing memory on file so it can recall those. My framework, by docs, allows it to refresh its memory every time you get into a working session, and there are other frameworks that do that. There's no true planning iteration. Basically, yes, it will, like ChatGPT, will go, Oh, I'm going to do this, and that's about it. And then it'll go ahead and do it. But with an agent, there's true planning and iteration that generates refinements as it iterates, and there's no coordination. ChatGPT, you tell it, do it, and you'll do it. In other words, it cannot coordinate with other agents, right? Or integrate with your developer environment. Now, some of you will say, well, there are some integration here and there. There is. But again, we're talking about doing a full blown app, not just a little, tiny snippet. So there's no true coordination. There are no sub agents. So AI coding agent features, they have full autonomy, so they can take a coding task and progress independently until it's completed. So it operates without constant, constant human prompting. I do believe in human in the loop, and I do believe that you want to see what it's doing, even though you may not understand everything, and let it do its thing, you still want to know what's going on from a high level perspective, it can observe its environment. So in other words, it can inspect the code base, your Git repos, logs, test dependency graphs. It can gather information from a variety of places in it's an environment, and it does that through tool usage, through resources that it can have access to. It has decision making capability. So it'll choose whether to read code, maybe it'll refactor code, it'll actually run the code and test it, and then if it breaks, it'll actually continue iterating until it fixes it. So it has a lot of decision making capabilities. And of course, it can execute actions, and these actions are done through, for example, tools. I can run builds, it can execute tests, it can update your documentation. In all of this, it's done through tool usage in APIs. So actually, I want to make sure. Doing okay on time, and we have no questions yet, so I'll continue until you come back in and tell me if we have any questions.

Also, the coding agents will operate towards a goal, a particular goal, so it works on specific development objectives, like fixing bugs, refactoring code or adding a new feature. And the nice thing about agents is you can have a big goal and then break it up into chunks. So we're going to talk about that, and then we're and have little goals for each of those chunks, which is the recommended way of moving forward. It maintains memory and state. It can keep track of prior changes, past errors in the current state of the project to avoid mistakes, so it can recall your past steps, the context in the history, whereas a regular tool, most of the time, will not be able to do that. This is very important, and we're going to talk about the lifecycle of the agent. But in this case, it's very important where you can see that an agent, a development agent, can perform a plan and iterate on that plan and refine that plan, because it'll break down the features into tasks, into smaller chunks so it knows what a feature is, how to fix a bug and provide small coding tasks to accomplish the big goal. That's the big thing here. So breaking down those tasks we're trying and adapting the strategy is where agents really perform really well, and it can coordinate and collaborate with other agents and sub agents, whereas chat GBT will just do its thing and implement it. And that's it with a development agent, it can coordinate with other agents, right? And sub agents, as we're going to see. So if we compare a regular AI tool that is not focused on development versus a full agent that is focused on development in human form, the jackpot would be just the brain right with some basic input and output, like a mouth, ears, you know, could do it could have eyes so it could see a diagram or whatever. But then you have conversations with it. That's pretty much a generic AI tool, right? Where an agent is a full person. It has a body, it has senses, it can observe. It has arms and legs to act, enough autonomy to pursue goals independently, and that's the big difference between a generic AI tool and a full AI development agent. So the life cycle of an AI coding agent, let's, let's go through a high level here, and then I'm going to jump into the Figma file so you can see a little bit more detail. But first it discovers, it refines the it discovers the requirements based on the human needs. It iterates through those and refines it with a human. Then it goes into a planning phase, and this is where it iterates on the plan. It creates a step by step plan. And then once that's done, and you have all the documentation that you need or that it needs, it goes into execution and then creates the code and iterates and tests and debugs and fixes. And then this left cycle is repeated over and over until your project is completed. So I'm going to stop this present, this sharing of the screen for a second, because I'm going to share now my Figma. Actually, I want to make sure you can see okay there, if we're doing okay so far, I'm going to go ahead and share my other one now. All right, there we go. You should be able to see that without a problem. Now, let me bring in my Okay, so here, there we go. You can see the life cycle. So we start with whenever an AI agent is spawned off with by a human with a prompt, I want to add a button to my form, the agent will begin doing its work. Will come to life and begin doing its work and start asking questions and asking clarification questions. And this is a loop. Now, how does it ask the questions? What is it researching to ask those questions? It'll it has a memory which is the context, and it has tools, and these, by using these seem simple things, it'll iterate and keep talking to the. Document until it captures all the requirements that it needs to accomplish this request and says, Okay, I have everything. I requirements are defined. And let me move on now to the planning phase. And in the planning phase, this is where it starts planning. And it starts figuring out, looking at the current code base or looking at documentation to figure out what text tab do we need to use, what are the steps that we're going to need? And it loops until it has the plan created. Now I put here human in the loop overseas, I'm always there looking at what it's doing, and then when the plan is created, when the tasks are created, I review it, because at the end of the day, this is your app, right? Just like a developer that a human developer that you'd be working with, you don't just tell them or her, go do this, and it does it, and then it comes back, right? You as the product owner, need to understand what's going on. So once the plan is created, then we move on to and you approve it, and we move on to the execution phase. This is where the agent now will carry out that execution by coding, by testing, by improving, by debugging and looping until it does what it's supposed to do, which, in this case, is creating, adding a button to that form, right? And again, it puts everything in its memory, its context. It'll use tools to research, to create the code, to test the code, to create environments like Bash, environments and run let's say you're running NPM, or you're running Python, or whatever the technology stack is. Again, as it's doing this, the human in the loop. My recommendation doesn't have to happen, but my recommendation is, there's always a human in the loop, the product owner, that understands the big picture and understands what's being delivered. Because at the end of the day, you're going to live with this app, you're going to live with the ultimate code that it delivers. You're going to have to deploy this code. So that is the life's lifespan, or lifecycle of a of an actual agent. So let me go ahead and go back to the presentation. Now we'll go back share screen, and I want to make sure I get the right one. Yep. There we go. And I think I got the right one there. Yep, we do. Okay. So we covered that, and actually, what I'm going to do is, okay, actually, let's jump in. We'll jump into cursor, which I use Cloud code in. Let me share screen window. There we go. All right, I'm putting this here, and here we go. You should see cursor here. I have a blank project on purpose, because we're gonna, we're gonna spawn off cloud code, which is an agent, right? And we're gonna run this simple, this simple prompt. But what I'm going to do is I'm actually going to, let's do this. I'm going to spawn off right now. I'm starting Claude, and I'm going to run my vibe docs, which is actually a full blown agent. And this is I'm not pushing you can get it. It's free, it's open source. I'll show you how to get it later. But it's a full blown agent that I wrote that basically, you can see the instructions of the agent here that basically guides a user. This agent is focused on creating products and guiding the user from a simple prompt to the full, full blown product. And I'm just going to show you how simple agents can work, right? So I'm going to tell Claude, the agent to read and execute. And I'm going to give it activate this, this file, which is my agent, this is what activates five doc, so it's going to go through it right now. Remember, it's everything in here is the context, the memory. And then it's going to use tools so you can see, read and execute it called tools. To do that, you could see it's following instructions. The human is not involved here, the agent is doing all of this, right? This wouldn't happen in ChatGPT, because it doesn't have access to all of my environment. Here, it doesn't have access to a BASH environment and so on so forth. But here it says, Hey, welcome to vive Doc's blah blah blah blah blah. Let's start working on your project. So what I'm going to do is I'm going to do five docs plan. This is a command. Again, you can see commands here now. This is a an agent I wrote that does. Is all of this, right? But I'm trying to show you the power of agents and what agents can do. But I'm going to say VD plan, which is basically telling viaducts, hey, I want to start the I want to start planning my project. In the project, you'll see, let's see, oh, actually, we can close this. We don't need double Okay, so I'm going to say, Yes, all right, so what this? What? What it actually did right now, it created this plan folder, and it's asking me. As you can see, it's asking me now I can give it full autonomy, and we'll talk about permissions and for sub agents as we continue, but I'm going to say, go ahead and proceed. So it doesn't keep asking me. It created the discovery document, right? And it's saying, Hey, I created this folder structure in this document. Go ahead and put your prompt there. So what I'm going to do is I'm going to go in here, user describe what you're trying to do here. So I'm going to go ahead and put in my prompt, there's my prompt, and now I'm going to say, done. So I put in my prompt so it's going to read this document. And this is an agent doing all of this, right? It's guiding me, the user, and it read my prompt, and it actually says, look, I've got some questions for you. So here you go. So my prompt is what I wanted to do, if we open the discovery you can see here, my prompt is, I want to create a simple hangman game. I wanted to use simple HTML. I want to store words in a JSON file. I want the words to be grouped by difficulty. So now it's asking me some questions here, and the key here is that it's guiding me from the idea all the way to the refinement. Because what's after the discovery is the plan. It's going to be the plan document, then the PRD, then we jump into the actual building, which is the other phase. Now, I'm not going to go through all of this here, but I wanted to show you how a an agent can do things autonomously, right? Can go through things and can figure out how to and guide the user, as opposed to in the regular AI tool, you have the you have the user guide the AI here, an agent is helping us create a product based on our idea. So I'm going to stop sharing this right now, because this could go on for another hour, and I'm going to continue with the presentation. So let's continue with the presentation here. There we go. All right, so we did the hands on. So what I want to talk about now is sub agents. And what is the difference between an agent and a sub agent? So sub agents are just agents. Basically, they're AI agents, but they have limits. So what are their limits? So from an autonomy perspective, as we spoke before, a main agent, right has full autonomy, where a sub agent has partial autonomy, and it's whatever the autonomy the main agent gives it to accomplish that task. That's why it's partial. I'm going to get a little bit of drink of water here, if you don't mind, from the environment perspective, the main agent has, as we saw, can see the entire environment, everything but a sub agent is very focused only on the task. That means that it can only see what it needs to accomplish that task, nothing else. So instead of seeing the entire code base, it may only see a subset of that code base. From a decision making perspective, obviously, the main agent can decide on pretty much everything, but the sub agent can only decide on the scope of its task right. Can only make decisions there nothing outside of there. Tool execution. Usually main agents will have access to all the tools. You can also actually limit what tools they have access to. But sub agents, you're going to limit their permissions, right? So for example, let's say you have a sub agent that is a documentation Manager. This documentation manager may have access to only the documentation in your code and read and write to documentation, but may have access to the entire code base only for reading, because that way you can document it from a goal orientation. Obviously, the main agent has this high level goal right, which is accomplishing the entire app, whereas the subject a sub agent will be focused on the goal of accomplishing that task only, right? So we're talking about limited here. Same with memory, right? And you'll see in the life cycle, you'll see how sub agents have their own context window. So they're going to be very limited as to what they know. And they're going to be limited based on what the what they call the coordinating agent, or the orchestrating agent, which is the main agent, what it passes to the sub agent. And then the planning in iteration, obviously, the planning for the main agent has planned, plans for the entire project, where the sub agent is going to do planning, but it's going to do planning only on their tasks that it needs to accomplish. That's it, nothing beyond that. And then the coordination. Obviously, the main agent can coordinate with other sub agents, whereas the sub agent does not coordinate with anybody else. It only works by itself, and it returns the information back to its orchestrating or main agent, basically. So the life cycle of a sub agent, main agents live until you end the project session now the they may continue by being refreshed when you start it, and you can store files with memory and all that and restore it. But basically, main agents live until the end of the project session, where sub agents are actually created. They do their work, and then they're destroyed immediately. They don't persist after they accomplish what they what they've done. So some of the benefits of sub agents? Well, they operate in their own context, so they have full context isolation. So that means that they what they work on. For example, let's say you have a team of different teams, right? Everybody has to do something. You're the project manager. You give Team A task to do something. Well, you don't need to know everything that they that they're doing to get that done, right? They don't need to pollute your context. But they will return back and say, Hey, I've done it. And these are the main things. That's what context isolation is. When a sub agent goes and starts working, it has its own memory, it does what it needs to do, and then it returns the information back to the main agent, providing some context of what it did on the main context of the main agent. So that's full context isolation, which is a really nice thing. And the sub agent can have a role, a very specific role, like I mentioned before, a document sub agent, right? Or, let's say you have developer sub agents. You can have one that's focused on the front end, another one that's focused on the back end. Or even within the front end, you can have somebody that's focused on Module A versus Module B, so that way they really understand that process. And you're narrowing the scope, which provides a better success for accomplishing this. All right? And then agents can be used across different projects. So you can create agents, check them into Git, your Git repo, and use them across projects, use them across teams. And then, like I mentioned, you can have different permissions for each agent. You can have a documentation agent that can read and write documentation, but only read code where a developer agent. Can read documentation, but only, but can only read documentation, but read and write code. All right, so how do you interact with a sub agent? There are three known ways right now, and one that is not available, at least in the tools that I've been using. The first one is you start with a human prompt, and then the main agent kicks in, and then it talks to a sub agent, right? So you have human to main agent, you get stuff done. Then number two is you have human to main agent, the main agent then calls the sub agent. Then you can have the human like clock code allows you to call a sub agent directly. So instead of telling the main agent, hey, I want you to document stuff. And you know you have a document sub agent, you can just say, hey, add sub agent or add Document Manager. Please go ahead and document XYZ feature, and then you have a sub agent calling a sub agent. But as far as I know, and if any of you out there know, please tell me there are none of the tools like quadcode or open code only can't do sub agent to sub agent. In other words, you can't have a sub agent call another sub agent to do something, return its information, then return it to the main agent. That's not there. We're not there yet. So let me share something. Actually, before we share, I'm gonna talk about, how do you invoke what are the invocation styles? And there's two. There's the serialize. This is where the main agent delegates one task after another. And it does. It calls the sub agent says, go to. Is it waits for the results and then calls another sub agent says, go do this and waits for the results. So it's very serialized, and then there's a parallel where an agent says, Hey, four agents, go do task A, B, C and D, go run them all at the same time. So it's paralyzed, right, parallelized, and it does it all at once, and then they all individually return their information back to the coordinating agent. So let me show you real quick. I'm going to go ahead and stop sharing here. I'm going to share my screen again. Let's go here, and let's go to there we go.

So we did that. So here's how we interact. You know, we spoke about interacting with agents. We have human to main agent, human to main agent to sub agent. We covered that already. This one, as far as I know, is not available yet, right, where you have sub agent to sub agent, but I'm sure we'll get there. But I just wanted to show you what happens with a sub agent interaction. Right? You have the human that prompts. Comes with a prompt. Let's add a button. The main agent has its context window. It has its environment and has tools. It'll start performing tasks, and it'll get to a point where it says, hey, you know what? I know, I have a sub agent that is very focused on XYZ. Let's go ahead and create and delegate the task to this sub agent. This sub agent is created literally on the fly. This sub agent has its own environment. It's completely isolated from here. It has its own context window, and what's in that context window is whatever this main agent passed to it when it created it. And remember, it has access to certain tools with certain permissions. It'll go and perform its task, go back and forth, back and forth. It's done with this task. It'll return the results back to the sub, to the main agent, the orchestrating agent, and then this one is destroyed, gone. It no longer exists. It's a one time deal. So that's the life cycle of the sub agent, right? And here's the potential way of invoking it. Here's where you have the human with the prompt that invokes the main agent. The main agent delegates a task. Creates a sub agent delegates. It waits for the results. It gets it, and then it creates another sub agent. It goes, does its thing, and it waits. It's very, very serialized. Now, the benefits of this is that there is no pollution of possible contamination between files, and I'll explain that in a minute when we do the parallel but, but you're gonna It's sequential reasoning, right? So it's a much safer pattern, because a sub agent does something it's done. It gets it to the main agent, then it gives that output to the next one. In the parallel, things can help or happen much quicker, right? Because, let's say this is a front end and this is a back end, and they can work independently. Well, why not start them in parallel? Right? So here you can have a front end, or, let's say they're all front end, but this sub agent works on Module A, this one works on Module B, this one works on Module C. Each of them will return results to the orchestrating agent, which then can spawn off a couple of more agents, right? Let's say we have documentation agents, it can spawn off and say, Hey, based on these updates, go ahead and update all the documentation for Module A, Module B, Module C, and each of those document sub agents could be very focused on just each of those modules. Now, what's the potential issue here? Right? Let's say we're working on adding a some fields to a form, and you have three agents working right. One of them can be adding the new field to the back end. No problem there. The other one adds a field to the front end. And let's say we're working with two, two of them, just to keep it simple, well, part of the problem would be, is the back end sub agent doesn't know what is the field name of the front end, unless a subject agent somehow communicates right now with sub agents. Remember, they're isolated, so there is no communication between sub agents. So there is no way of that of the sub agent in the back end knowing what the field name to expect from the front end, so it could capture that and store the information in the database. There is no way of doing that. Now, there are frameworks that are being worked on for agents to be able to communicate between each other. So that way, there is that clear communication. Location. But right now, with a native implementation in cloud code, there's none of that. It's spawned off. It does its thing, it returns and it's done, right? So that's where, for example, in something like this, maybe parallel or, sorry, serialized invocation will be better than parallel invocation. So all right, let me go ahead and stop there. I'm going to go ahead and share back screen. Let's go back to the presentation. Any questions, actually so far, or should I just continue on? I'm assuming no questions yet. Since, yeah, continue. Okay, perfect. Just want to make sure. Alrighty, so which tool supports sub agents right now, true, sub agents are supported by quad code. And I just found out about open code yesterday. Open code is sort of is like a cloud code, but open source, and it allows you to use a variety of models, including local models. Very interesting thing to check out. Go check it out. It's, it's, it actually allows you to use anthropic subscription as well. So if you have, for example, if you have the Pro subscription or the Mac subscription. You can use it with open code right now. You can also use it for free with Grog. Anyway, I have, uh, I make nothing with this because it's open source, but I always like uh, tools that are available like that. So, um, yeah, so that's a big difference between sub agents and agents. Now, you know what an agent is. You know the differences between an agent and a generic AI tool. You know the difference between a sub agent and when to call it. This is pretty much the end of the presentation. I will jump into quadcode to show you sub agents in action, and we're going to run them in parallel, but I won't be coming back to the presentation here, so I just wanted to say thank you for the time to let me talk to you about agents and sub agents. We were living in an amazing time here. Personally, for me, it's an amazing time to be alive in tech. It's my fourth tech revolution I'm going through, obviously, the desktop computers was the first one for me, then internet, then mobile apps, and now AI, it's, it's an amazing time. Real quick. I just did want to say again, it's free, open source, so I'm not making any money with this stuff. Go check out, buy docs, which is that that light framework slash agent that allows you to bring structure to your vive coding. So you can QR code that, and it'll take you directly to the GitHub. You can install it there. If you have any questions, here's a you can get a hold of me, right? You can just reach out through any of these channels. I'm available. And finally, if you haven't go check in, I'd love to know that you were here. Just go into that URL or that QR code. And what I'm going to do now is, actually, I'm going to end this by going back into Cloud code, and we're going to run a little bit of parallel sub agent, so you can see. So let me stop the presentation here. Let me rearrange a couple of things, because we are done with this. We'll get close this up. We'll get cloud code here. There we go. And let me share cloud code.

All right, let's go back to clock here. We're, we're, we're back at Cloud code. Actually cursor running cloud code. What I'm going to do is I'm going to open up my actual website. So my website, I code with.ai was 100% by coded. It uses the Hugo, Hugo framework. So let me go. There I go with AI. It's an, actually a very extensive website that is in production. It's git controlled, and let's see if we can make it just a little bigger. Okay, here we go. So what I wanted to show you is some agents, or sub agents, that I created. You can see that I actually created a bunch of sub agents, which you can do in cloud code. Let me open this up here. We'll do this. You can go slash agents like that. And then it shows you all the agents that you created. And you create a new agent, it can guide you through the creation. You can create a manually, or you can create them guided by clot. So I'm not going to create any of the agents. Now, what I wanted to show you. You it's what's in an agent file. So you can see, I have three teams. I have the feature development team, which helps me implement features in there. I have a content creator, I have a content strategist, a document manager. I have the Hugo specialist. Remember, my site is, is runs on Hugo, so I created an agent that understands Hugo in and out of the tech stack, I have a product manager, then for site analysis, I have a build dependencies managers to make sure that when we're building the site, all dependencies are taken care of. Every time I add a new feature, I run a quality analyzer. We have that agent take care of that. We obviously, I want my site to be to perform fast, so I have a performance optimizer. We want it to be secure. That's something that's missing in a lot of byte code today. By coding today is security. And then what's important, because I want my site to be found, is an SEO accessibility auditor, right? And then my finally team. My final team is the implementation team. So I have a back end developer, DevOps engineer, front end developer, QA and UI UX developer, so depending on what I need, I can call any of these agents. So let me close this up for a second, because what I want to show you is, what does it look like? What does this file look like?

We'll close podcode, and let's open up. Here we go. So it's a very simple markup file that has the name of the agent a description. What does this agent do? What are the tools? Remember the tools you were talking about. These are the tools that it has access to. The model you can use different models within clon code, cloud code, so if it's if it's a sub agent that can do simple stuff. Maybe sonnet is better than Opus, because it's cheaper, right? And then the color you want to give it, and you'll see how the color works. And then you actually give it a description. You tell it what it can do. I specialize in implementing and optimizing Netlify function. So you can see it does a bunch of stuff, and it says, When should I be involved? So all of this is information that Claude needs to understand to be able to invoke this sub agent in its own environment, doing its own thing, and knows when to invoke that sub agent. So for example, so if we go into here and we'll say, I want to create a new page for my site. Let me just make sure, because I don't want to, I don't want to push any I don't want to destroy my site. But because everything is committed in Git and I have no changes now, I can discard them later, so it doesn't matter what I do now, everything is and I highly recommend for all of you, make sure you commit stuff to your Git repo. Don't just have ai do stuff, because sometimes it won't do the right thing, and you can always discard what it did. But I want to create a new page for my site that allows users to sign. Sign up for my newsletter. Please invoke at content agent.

So it's showing me, when I say add agent, it's going to show me all the agents I have available, right? So I'm going to say front end. Here we go, front end developer and add agent. We'll say Hugo, Hugo specialist and add agent. We'll say UI x u UI UX developer, all in parallel. So that means I want them to all be working there same time. Let's create a plan and have each of them write a new plan.md in and we have a folder here in buy docs, called docs, we'll have in there, and then we'll, we'll call it not plan.md But we'll call it, we'll say plan, news letter, sub.md stored it in at docs, which is this one here. So I want to create a new page for my site that allows users to sign up for my newsletter. Please invoke agent, Agent the front end the Hugo specialist and the UX all in parallel. So. Should be able to see them all running at once and remember the color. Each of them will have their own color. Let's create a plan and have each of them write a new write a new plan newsletter, or write to the plan newsletter. MD file there. So we'll go ahead and hit enter, and if everything goes well, we should see you'll see here multiple all the agents spanning. And let's close this. We don't need this so you can see this better. And sometimes, there you go. Front end developer is being spawned. We should see Hugo special, all in parallel. They're all going right now. And if we look at and there you go, all three, and you can see right here the dots, they're all running at the same time. And remember, we have docs here. Now I know, actually we may be running a little bit too long, my apologies, but we'll see how long this takes. Sometimes it goes pretty quick. Sometimes it takes a little bit longer, but we'll see, we'll see how long it takes here. And while doing that, I noticed that there are some there's a question, see what subject keyword should I look at to figure out what teams of sub agents I would need. So Jonathan, there would be you could actually use AI to help you build the actual, the actual AI agents. So if you are, for example, you have a tech stack that is made up of sveltekit or next js. Talk to the AI and go, Hey, I want to build a team that helps me manage my site. This is the tech stack in my side. What should, what should my team breakdown look like? Start with AI. AI is the best way to help, and you don't have to use Cloud code for that. You can actually go into, for example, chat, GPT, clock, desktop, if you have one of the standard, one of the standard subscriptions, you can do it over there. So hopefully that answers

your question there, and I think there we go.

So look, all of them did it. I'm going to go ahead and click Yes. It's going to create the newsletter. Create the newsletter. Now, one thing I forgot to tell it is to actually tell me which one did which. And we're going to do that in a minute, but there we go, insane planning. Okay, so And let's see. Now it's wigging out here. There we go, area. Let's see what it's doing. Now, remember, this is probably part of that, part of that, if we open up this. Now, I'll be honest with you, I've never seen this blinking. So this is, this is interesting. What happened there? I'm not sure exactly why it was blinking like that, coordinating agent plans into comprehensive strategy. So it's still doing its writing, but you can see that it created the plan newsletter there. Okay, all three agents have successfully collaborated to create a unified strategy that leverages your existing Hugo site, blah, blah, blah. It tells me what it did, and here it here is my so if we look at we can look at the friendly way. There is the newsletter page, sign up, project, contact, analysis, the structure that we need right the JavaScript functionality that we're going to need, let's see the CSS integration, the Hugo templates, template structure, because it knows Hugo, The validation, so on, so forth, right? So accessibility considerations. Now, one thing you could have done also is you could tell it, make sure that you document who did what, which agents are you so you know. But the key here is, remember, I told you, and let's close this up so we can see better, these agents are gone. They're dead, they're destroyed. They no longer exist. We're back to the orchestrating agent. So that's working with sub agents, where the human started with the main agent, it spawned off the sub agents, and it went back to the main agent, right? But remember the human in the loop always coordinating, making sure everything was right. So now the beautiful thing is, because I am I have get right. I'm gonna say discard, and it's like my site never, never got affected, because I don't want to implement any of this. All right, actually, that's it. That's everything.

I. Yeah, no, no, it was good. Thank you so much for your time. But Marcelo, if I were to get started, how would I get how would you suggest someone get started on this? Because it sounds cool, but I'm sure you spend a lot of time trying to figure this out. And how can you save the same amount of pain for someone else, exactly. So first of all, start with your idea. Come up. Do you have an idea and start by literally chatting with AI. It could be chat GBT refine that idea, because the key is, if you don't know what you want, AI is not going to know what it what you want, either. Keep in mind you AI does what you tell it, not what you meant, right? So that's really important to understand. So start with a very clear concept of what it is you're trying to do, and then, at the end of the day, I believe vibe cutting, and I know people, you see YouTubers create this app five minutes, boom, it's a lie. It that is not the truth. It's an exaggeration. If you want to create a real app. And what I mean by a real app is an app that is scalable, maintainable, it could be used in production, right? Something that you can make money with, or something that is truly useful. You're gonna have to and you can do that with Vibe coding, but you're gonna have to bring in some systems thinking, some product management thinking. You're going to have to bring some technical abilities. So I would start by learning a little bit more. You can use the framework like vitox that I put together that will guide you through that process. There are other frameworks out there that you can look through, and it'll guide you through the process, but you're gonna have at the end of the day. The reality is you will have to educate yourself. Go to my site. I code with.ai my site is fully focused on five coders and educating by coders, not to making them full fledged developers. Developers will tell still exist, but you're gonna have to learn a little bit more. There's tons of learning. You can do a YouTube. The only thing I would I would warn you again, to stay away from anything that tells you can create an app within five minutes with one zero shot or a one shot prompt. It doesn't happen. It really doesn't. And there are plenty of examples. For example, the T app, which had huge, very big issues, right? You can look it up. So I definitely recommend start with like I could with.ai my site, or start with anything where it gives you sort of the basics of, how do you build products? You know, understanding what, what does it take to build a product? So I don't know if that answers your question, but no, no, it does. And to follow up with that. So this is another one which everyone's kind of, well, I went through it, so I got into this rabbit hole of playing with cursor and no amount was enough. And I was telling this to my colleagues, I spent like, 13 hours doing something, and I felt like an idiot the next day, because, in hindsight, if I had just paused and took a break, I could have averted the 13 hours, but in doing so, I was consuming and consuming and consuming, right? The $20 plan wasn't enough. The $60 plan wasn't enough. The Pro Max, yeah, yeah. So, like, What's your suggestion? Because there's a lot of those are caught. Code has its own subscription. Cursor has its own subscription. So what do you know after trying all of this? What do you use, and what do you recommend for someone who's starting up? Sure.

So before I created by docs, what I did was I would go into chat. So remember, we have multiple tools available, right? You have quad desktop, you have chat, GPT, so And those, if you have the $20 plan, you it's pretty much unlimited, right? I mean, there I haven't run really into a time where it told me I was timed out right? So start over there. Start Hey, chat, GPT, I have an idea to create XYZ. Help me refine this idea. Ask me questions. Literally, you tell it. Ask me questions. Some keywords that you want to tell your AI. Ask me questions. Challenge me. Don't agree with me, because what does AI always do? Hey, Marcelo, great idea. Oh, you were right. Well, no, I wasn't right. So literally, you want to use keywords like challenge me, tell me if I'm wrong, provide options, right. So start with your simple idea, and then iterate through that idea, and once you really have a solid foundation of the idea, ask chat GPT, do you understand what I'm trying to do? Is there anything missing here? And you can build a pretty solid plan with Cloud, uh, desktop, perplexity, with chat GBT, and you have a, you know, you have sort of the unlimited. Plan that you can work with. Once you have that, then you can move into Cloud code and go, Hey, Claude, I have this plan. I want you to follow this plan. But before you follow this plan, I want you to break it down into tasks, and even better, breaking into chunks called phases or called versions or whatever you want to call them, right? But I want to break it into tasks and tell me what's the best way to implement this app into phases so we build upon it, right? So again, it's kind of like any project management you do, right? You start with a big project, but what do you do? You break it into small chunks and start managing it like that way, right? You have to do the same thing

that makes sense. And then I like, I definitely recommend what you said, which is something that I learned by making mistakes, which is, have having your repo committed to kit so you can always roll back, because it's making so many code changes that sometimes you don't agree with them, or you're like, Oh, crap, I didn't save this. So you're like, ruining what was working as well as what they added. So that was a that was a really good one. The other one I'll mention, which probably relates more to like the.net developers, is what I found with clouds on it, when I was doing it with cursors, there would be points where it would go in circles trying to fix a small compiler, in which case what I ended up doing is switching back to Visual Studio and using copilot, copilot, yeah, and then it was able to, in context, fix the debugging issue much quicker, like, because it was very focused on, like, just the.net part of it, and then I could come back to cursor again and continue. So that was something that I had to figure out, rather than spending like, hours, no, this isn't right, and sometimes it's better to pause, look at it, fix it yourself, and then get back into the into the agent,

exactly right? I mean, there are times on my site where it's faster for me. I know how to do it. It's faster me to just to do it myself than to ask AI. You don't have to ask AI all the time if you know how to do it. On that circular thing, I've gone into that circular thing, and it's always okay to tell AI, stop, we're resetting this entire conversation. You have it wrong. Be nice, just in case for the future. That's just insurance policy, but, but all kidding aside, it's okay for you to say, Stop, reset. We're gonna reset. And you tell AI, we're resetting. And in cursor you can change models. So it could be an issue with a particular model you have, so you can change it to a different model and check it out, or you, like you said, you can go outside of that and have copilot, or have another model check it out and see what it says. The other thing is, remember, you don't always have to describe what the issue is. You can take pictures of it. You can use MCP servers like playwright that then can go in and do it on its own as well. But remember, AI is not always right. And one thing I do want to warn people and highly recommend, is, if you're doing anything that is highly critical or impactful or risk averse, put a human in the loop. It doesn't matter if you feel 99% or 100% confident with what AI gave you, put a human in the loop that understands the criticality of that risk, because, for example, it would be like working with a developer that doesn't understand full security, right? You take their code, but then you give it to a full cybersecurity person and go, Hey, are we secure here? Because, especially if you're going to go in production with the app and it stores, you know, documents that may be highly sensitive, you want to make sure you have a person that truly understands is a secure or not. So that is my, my, my recommendation on that. But yeah, yeah, nothing wrong with telling AI, Hey, you don't know what you're doing right now stop.

And then that's probably another presentation, Marcelo, but using MCP in Oh yeah, sir, that's a whole another game, but we'll get to it at some point. Thank you so much for your time, and thank you for giving us all the for inviting me. It was fun, awesome. Have a good rest of your day, guys.

Thank you. Bye, bye, everybody. Bye.