00:00:00If you're using Claw code to building web applications, then you get to check out GSD,
00:00:04which is an open-source, spec-driven development framework that specializes in orchestrating
00:00:08different sub-agents here to complete the projects following the spec-driven development framework.
00:00:12Now unlike the traditional spec-driven development framework that we did on our channel,
00:00:15like Beemap Method, SpecKits, Taskmaster, and so many more, all the traditional spec-driven
00:00:20development frameworks have to follow a strict rule where everything has to be done in one
00:00:24single context window. For example, planning, research, developments, verifications,
00:00:29all needs to be done in one single context window. But that comes with a really important problem,
00:00:33it's the context spot, which means that the higher token consumption in one single context window,
00:00:38the lower the accuracy. And the solution to this is using sub-agents here to basically
00:00:42delegate the planning, research, developments, verifications, all in its own sub-agents,
00:00:47where each sub-agent here will have its own fresh context to complete the task one by one.
00:00:51And GSD here will basically become an orchestrator that orchestrates those sub-agents following the
00:00:55spec-driven developments here by guiding the AI here to take from a rough idea into a production
00:01:00ready applications step by step. Which means that yes, we're going to consume more tokens,
00:01:04but the amount of accuracy that we're going to get here is going to be a lot higher compared
00:01:07to using everything in just one single context. So that's why in this video, I'm going to show
00:01:11exactly how you can be able to set up your GSD framework on your clock code by showing you how
00:01:15you can be able to take an idea and building on top of your existing applications or new applications,
00:01:19how you can be able to shape the idea that you're trying to build by using the research agents,
00:01:23planner agents that it has. And once we shape our idea, we can be able to move on to the
00:01:27implementations where we have his own executor here to execute the task with parallel agents running
00:01:32at the same time. And each agent here has its own fresh context windows and also commits every task
00:01:37that it completes. And also every time when it completes a task, it also spin up another agent
00:01:41here to verify the task against the goals that it completes. And most importantly, once we complete
00:01:45one phase of the task, I'm going to show you exactly how we can be able to loop through each phase that
00:01:49we have like discuss, plan, excuse, and also verify step-by-step, loop-by-loop until we have the entire
00:01:55milestone complete all autonomously without using Ralph loop. So pretty much that's what we can cover
00:02:00in this video. And if you're interested, let's get into it. All right. So before we jump in a quick
00:02:04intro for those who are new here, my name is Eric. I have spent years as a senior software engineer
00:02:09at companies like Amazon, AWS, and Microsoft. And I have started this YouTube channel to share
00:02:15everything I have learned along the way from AI encoding to automations, web3, career developments,
00:02:22and more all broken down into practical tutorials that you can actually follow. So if you're ready
00:02:27to level up, make sure to check out my YouTube channel and hit that subscribe button. Now let's
00:02:32get back to the video. All right. So first thing first we're going to do here is to navigate to
00:02:36GSD repository. Here you can see it tells you exactly how you can install this onto your local
00:02:40machine. So I'm just going to copy this command right here, navigate back to the terminal for
00:02:44my current projects. And I'm just going to type in this command here to install this onto my local
00:02:49projects. So I'm just going to say, yes, install this. And here you can see, we're just going to
00:02:53choose either we're going to use cloud code open code or both. So I'm just going to choose just one
00:02:57for now for using cloud code for this demonstration. And here it says, where should you like to install
00:03:02this? I like to have this installed for globally for all projects available here. Okay. And then
00:03:07after we have this chosen here, you can see GSD includes a status line showing the model name,
00:03:12current task, and also the context window usage. So should we use the keep existing one or should
00:03:17we replace that with the GSD status line? Well, actually I have not seen the GSD status line yet.
00:03:22So I'm just going to choose number two right here. And basically let's take a look at what the GSD
00:03:26status line look like. And I'm just going to open my clock code session. And right here, you can see
00:03:31this is the status line currently for the GSD. And of course, if you don't like that version of the
00:03:37status line, you want to use my version of it. You can also check out my video right here, which I'll
00:03:41show you exactly how you can customize your status line to look exactly like this. But of course,
00:03:46if you want to stick with the GSD status line, you can go ahead with that option.
00:03:49So what we're going to do here is once we have our GSD installed, we simply just do GSD. You can see
00:03:54that we have all the custom commands right here inside of our clock code terminal. All right. So
00:03:58once we have GSD installed, the next thing we're going to do here is try to initialize our projects.
00:04:02Now, if you're starting a new project, you simply just going to do GSD new projects. But if you
00:04:06already have existing projects, what we're going to do here is to run this command right here first.
00:04:10And it spins up like multiple sub-agents here to analyze the stack, architectures, conventions,
00:04:15and concerns. And then we can do that command right here to know the entire code base and questions
00:04:20based on what you're trying to add and plan to design our application here. So in this case,
00:04:24I'm just going to do this command first, basically try to map the entire code base. And right here,
00:04:28you can see that it's going to spin up four parallel code base mapper agents, basically try to map the
00:04:32entire code base here, try to understand the entire tech stack, the architecture, conventions, concerns,
00:04:38everything, try to analyze everything for application here. So in this case, let's wait for
00:04:42a bit until it fully completes this for the mapper for the agents running in parallel. All right. So
00:04:46now you can see that the mapper here has completed to analyze the entire code base. And now what we're
00:04:50going to do here is I'm just going to reset my clock code session because the current context
00:04:54window is kind of like halfway, right? So I'm just going to terminate this and then be able to clear
00:04:59terminal, rerun the clock code session. So we're starting from zero now after we have mapped the
00:05:04entire thing, but don't worry because the map has already saved in a state. So you can actually be
00:05:09able to see dot planning folder. You can see that instead of dot planning, there's a code base.
00:05:13So we'll basically summarize everything that we have in our applications, like the architectures,
00:05:17the concerns, right? The conventions, the integrations, everything all in store inside
00:05:23of this folder right here, so that we're not losing track of our current state of our mapping. All
00:05:28right. So once we've done the mapping for the entire code base, now it's time to initialize our project.
00:05:32What's going to happen here is that it will basically ask me some serious questions on
00:05:36understanding what's my idea. What are some new features we're going to add? And then it's going
00:05:39to spit a multiple parallel sub-agent here to investigate the domain that we're trying to build.
00:05:43And also it will help you to extract some requirements as well as the roadmap on exactly
00:05:47what are the phases that we need to basically make this happen, right? So that's what we're going to
00:05:51do here is I'm just going to copy this command and paste it here. And then it's basically going to try
00:05:56to initialize our current project here. So right here, you can see this is a brown field project,
00:06:00which has existing code base and was a code base map already in place. Get repository exists and
00:06:05also no planning for the project MD yet. So it's going to ask me a question. So I see that you have
00:06:10existing projects with the code base already mapped. Looking at the cloud MD file, I can see that the
00:06:14business context, and then it's going to ask me, what do you want me to build next? Okay. So because
00:06:18I already have a feature in mind for what we're going to build, which is building a dashboard for
00:06:23the admin system, where this is basically a very short MD file that drafted using AI here to
00:06:29basically build a minimum admin panel, which is a new tab on the existing dashboard sidebar,
00:06:34which provides essential tools for managing users and handling support issues at lunch.
00:06:39And basically you can see that there are some features that I was asking for and the MVP
00:06:42features, the UX mockups of frameworks and all those kinds of things, right? Very detailed.
00:06:47You can see, I highly recommend you guys to basically use AI here, Claude, to basically
00:06:52look through the applications, try to end draft a plan on exactly what you're trying to build, right?
00:06:56At least the UX changes, or at least, you know, what are the features we want to include so that
00:07:00we can have a clear plan on exactly what we're going to have Claude here to implement. Now,
00:07:04obviously I can take this plan and basically have Claude come to implement this, but I want to
00:07:08actually have GSD here to take over and try to do some investigation or research, right? By spinning
00:07:13up multiple sub-agent here to research our behalf and breaking this big task right here into smaller
00:07:20tasks that's easier to implement. So in this case, I am just going to open my terminal and basically
00:07:25going to say that this is what we're exactly going to build. So I'm just going to reference this file
00:07:28right here. And here, I'm just going to say, I'm planning on building this nest. And then I'm just
00:07:33going to enter this nest and I'm just going to enter this and let GSD here to basically help us
00:07:40do the planning. So here you can see, it's going to read through this backlog item that we're looking
00:07:44to implement for this application. And here you can see that it's going to trigger the user question
00:07:48here to ask me some serious questions here to confirm on the exact spec. So it says that this
00:07:52specs includes all four features, right? Like user list, credits, tiers, impersonations, building them
00:07:58all together or prioritize a subset for first iterations. So you can see here that it started
00:08:02breaking this big giant four feature right into smaller features at first. So I'm just going to
00:08:07say, well, let's start with some simpler feature like the user list, the credits, right? So I'm just
00:08:11going to say, yes, let's do that. And how do you want to verify the admin panels working correctly?
00:08:16Well, for now, because this project is really new, I mostly do manual testing, but you can see that
00:08:21it's asking for test coverage. Like we can do integration testing, like, okay, well adding API
00:08:25route tests for the endpoints. We're also testing the full coverage, which includes like unit tests,
00:08:30integration tests, and end-to-end testing. Well, I'm just going to focus on the manual testing only
00:08:34first and later we can be able to increase the test coverage. So I'm just going to say yes for the
00:08:38manual testing for now and submit the answer right here. And let's just take a look at what GSD here
00:08:43is going to do. And right here, you can see that it's going to continue prompting with my question
00:08:46here. So when you need the admin panel live, because in our current application, I have a business
00:08:50analyst doc for the timeline planning mentioning about January 30th for the actual launch date.
00:08:56So you can see that it's asking me for the first question here needed before the v2 launch,
00:09:01which is January 30th. So I'm just going to say yes, I would definitely have wanted to have this
00:09:05before January 30th. And then it's asking if we wanted to proceed with the project, the MD file.
00:09:10Well, I want to still keep explore and ask more questions. All right. So one of the questions
00:09:14that I ask is basically try to find out what are some gaps that we're missing for our spec
00:09:19and what we're going to do, right? So you can see that I spent a multiple sub agent here to do the
00:09:22research for security UX and also the best practice, as well as technical implementation gaps that we
00:09:28might be missing for our current spec. So right here, you can see that this is the entire table,
00:09:32which basically covers the entire gaps. Like for example, no admin middleware protections,
00:09:37right? Cookie missings. And also rate limiting is in memory and also the admin actions for the user
00:09:43on deletes. And also is admin function is broken for other users. So we want to make sure that we
00:09:49address those gaps for the current projects that we're going to implement. And right here,
00:09:52you can see that these are the lists of fix that it's suggesting us to be able to fix it, right?
00:09:57So what we can do here is that we can be able to look over this and take a look to see if those
00:10:02gaps make sense, right? And once it does, then we can be able to go ahead and be able to create our
00:10:06project MD file and go ahead with the implementation. So you can see that it's going to prompt me with
00:10:11some questions. The research found the critical security gaps. How do you want me to handle this?
00:10:15Well, I'm just going to say fix the critical ones, which is my recommendation. And I'm just
00:10:20going to enter this and have clock co here to basically try to make sure our plan our spec
00:10:24doesn't miss any things before we move on to the project MD file. So once everything's good,
00:10:29we can now be able to create our project MD file. I'm just going to say yes, let's move to the
00:10:33project MD file. And right here you can see clock code is going to create the project MD file for
00:10:38this entire project. So in this case, let's wait for a bit until it fully completes this. Before
00:10:42we jump into the next section, I want to give a quick shout out to today's sponsor Testbrite.
00:10:46Testbrite is an AI agent built specifically for software testing. And with the release of the
00:10:51Testbrite MCP, you can now use it directly inside your coding IDE. So cursor, windsurf,
00:10:57cloud code and more setup is super simple. You just add the configuration in your MCP settings
00:11:02and you're good to go. What I really like about Testbrite is that it doesn't blindly run tests.
00:11:07It first reads through your entire code base understands the documentation and validates
00:11:11the results your AI agents produce. It automatically generates a test plan from your PRD,
00:11:16creates test cases, ensures proper test coverage, and all of that without any manual input. From
00:11:21there, it executes the tests and sends detailed reports back to you, clearly showing what's broken
00:11:26and what needs attention. Most coding agents today average around 42% accuracy. But with Testbrite
00:11:32MCP, teams have been able to boost feature delivery accuracy up to 93%. So if you're interested in
00:11:38checking it out, you can watch the video I made on it or click the link in the description below for
00:11:42more details. Back to the video. All right, so once we've done our project scoping and also creating
00:11:47our project MD file, then here you can see we're prompted with the mode. So we can either use the
00:11:52YOLO mode here, which will basically auto-approve and just execute, right? Or we can also make it
00:11:56more interactive. So every time when it finishes step, we can be able to confirm the changes that
00:12:01it made and be able to move on. So I'm just going to go with the YOLO mode here and try to go hands
00:12:04off and try to have it to complete everything. And here I'm just going to click on enter here for YOLO
00:12:09mode. And here's asking me for the depth. So how thorough for the planning to be. Either we can do
00:12:14a quick one for shipping fast, like three to five phases, or we have one to three plans each. Or we
00:12:18can go with the more standard way, which is more balanced scope, which we have five to eight phases.
00:12:22And each phase might have like three to five plans each. Well, in this case, I'm just going to go with
00:12:26standard one, which is more balanced for the scope. We're not looking to ship something really fast.
00:12:30We're looking for something that's more balanced for scope. In this case, I'm just going to click
00:12:34on number two. All right, so now I'm just going to submit the answer here. All right, so, and as results
00:12:38here, you can see that we're prompted with the execution. So either we want to run the plan in
00:12:42parallel, which basically means that independent plans run simultaneously, or we can be able to
00:12:46execute one after the other. Now, my recommendation is if the time is not an issue, then I will highly
00:12:51recommend you do it with the sequential, because we will try to tackle with one plan one after the
00:12:57other, rather than in parallel. Because let's say in parallel, you run out of credits, you might be
00:13:01stuck with both tasks and completed. Well, if you have sequential, you're going to have some tasks
00:13:06completed. And maybe after you run out of credits, well, at least you can be able to, you know, wait
00:13:10or be able to come back tomorrow. Once you have your credits and be able to continue, execute the
00:13:14task one after the other, right? Or at least your project is not half completed for all the plans,
00:13:18right? So I'm just going to go with sequential here because I wanted to take it one step at a time. And
00:13:22then in terms of get tracking, are we going to commit the planning doc to get? And yes, I would
00:13:27definitely want to keep track of our planning docs to the get. So I'm going to say yes to that as well
00:13:31and click on submit. All right. So then it has asked me some additional questions on, do we want
00:13:35to do research before planning? I also said yes to this and verify plans will achieve your goal before
00:13:40the execution. And I also said yes to that. And then in terms of verifier, so verify the work satisfies
00:13:46the requirements after each phase. And I will say yes to that as well. And also the model preference.
00:13:52So I'm just going to say most quality ones. So Opus for research and roadmap for higher costs and deeper
00:13:58analysis. All right. So what happened here is that you can see it has put all those configurations
00:14:03inside of the config.json. And this is the file for the configurations. And we can literally just
00:14:07modify the configuration.json file for anything that we want to change in the future. Now follow
00:14:12that without making this video too long. GSD here, move us to the research. Basically you can see GSD
00:14:16here, spin up the research synthesizer here, which will basically first spin up multiple sub-agents,
00:14:21try to do some research. And once the full researcher here has complete, then it will
00:14:26basically synthesize all the research that has done and try to see how we can be able to create
00:14:30our own research report based on the project that we're trying to develop. And once we agree with
00:14:34those things, then GSD here has moving on to creating the roadmap on exactly what we're going
00:14:39to do for this entire project step-by-step. All right. So now you can see it has generated the
00:14:43entire roadmap, which has five phases and 36 requirements are mapped for all the V1 requirements
00:14:49are covered. So for example, the database, the schema, the backend, and then trying to cover the
00:14:54user experience here. So it's asking, does this RO/MAX structure looks good to you? And you can
00:14:59be able to look into it and be able to see if there's anything missing. And if everything's good,
00:15:03I'm just going to say approve and start to make the change. All right. So once our project is
00:15:08initialized here, you can see this is the entire MVP for the artifacts that it creates. So it's all
00:15:13inside of the planning folder, right? So all five phases and all 36 requirements are ready to build.
00:15:18So next thing up, if we're okay with that, we're going to start with phase one,
00:15:21start with phase one, one by one. And then once you create a plan for phase one,
00:15:25here you can see also have spent a multiple sub-agent here to create this plan for phase two,
00:15:29phase three, all in one, right? So you can do a half all the sub-agent here to clear,
00:15:34create a new plan or create a plan for each phase that we have, right? Once you create a phase,
00:15:38what you can do now is basically move on to implementation. Now, like we mentioned, right,
00:15:41we want to run this sequentially with a fresh context, and I don't want it to have it to finish
00:15:46one plan and ask me to verify, right? I want it to have it to complete everything after that,
00:15:52and then we can be able to verify everything, right? I don't want it to verify at each phase.
00:15:55I want to verify after all phases are completed. Now what you can do here is you can communicate
00:15:59this to Claude and say that, okay, I want to execute the GST phases sequentially with a fresh
00:16:03context. And here is basically what it's going to do is execute each phase one by one with a fresh
00:16:08session context for each plan. And basically you can see that what's going to happen is it's going
00:16:13to execute a fresh sub-agents using the GST executor. And then each agent here gets 200K
00:16:18clean context. So that doesn't mix with the previous plan that the other sub-agent completes.
00:16:23And then what's going to happen here is that it's going to execute the entire 13 plans all
00:16:27autonomously using GST. So we have our database schema, our backend, our UI, our credit management,
00:16:34and also the audit log viewer, okay? So everything all in one execute one by one. And here I'm just
00:16:39going to clear the context and bypass permissions and execute this one by one. All right, so now you
00:16:44can see that it's going to execute the phase one here of the admin dashboard for implementation.
00:16:48And let's wait for a bit until everything is fully implemented. All right, so after we have all the
00:16:53phases are implemented using GST, here is what the result look like. So right here, you can see I'm in
00:16:57the admin tab and here we're at the users management tab. So here we can be able to view all the users
00:17:03that we have in our current platforms. I can be able to search a user. For example, if I were typing
00:17:07test, and here you can see we have the first result showing right here. And let's say if I were to
00:17:12remove this, and here you can see it's going to show the entire list again. I can also filter by
00:17:17the tiers. So what are the people that are using the free tiers? I can be able to see that, and I
00:17:21can be able to see the credit usage, when they last signed up, and also be able to adjust the credits,
00:17:25right? So I can be able to view the account details, which you can see here, or I can also be able to
00:17:29adjust the credits, which you can see here, okay? I can help people to adjust the events,
00:17:33be able to set the credit, be able to set the custom credit limits, and also the correct
00:17:38usage, as well as give it a reason. And here in the auto log, we can actually keep track of that.
00:17:42So for example, let's say if I were to select all tiers, and currently I'm logged in as this user
00:17:48right here, set as admin. And let's say if I were to click on this, and try to adjust the credits,
00:17:52let's say if I'm going to increase this credit amount, for example, into 50 credits, right? So
00:17:57from what we have now, which is 510 credits, all the way to 560 credits. And all we had to do here
00:18:03below is just going to add a reason. For example, I'm just going to add test, and basically that's
00:18:07the reason here, and I'm just going to apply the adjustment. And what's happened here, you can see
00:18:11we have a notification showing that we have increased it from 510 to 560, and also trigger
00:18:17the re-render for that component. And you can see on the table here, we also reflect that as well,
00:18:21from 510 to also 560, which is what we have now, okay? So we can verify that the feature here is
00:18:27fully working. We can also be able to look at the admin analytics part, where we can be able to see
00:18:31the analytics for all the things that we have in our applications. You can see when it was last
00:18:36updated, as well as all the stats that we have for applications like total users, pay users,
00:18:40as well as different tiers, different credit usage, as well as the most active users. So also we can
00:18:46be able to see the autologs, which basically means that all the events, all the actions that we took
00:18:51for making adjustments on the user credits, we can actually be able to see this right here inside of
00:18:55the autolog. For example, adjust credits, sync the credits, and also who are the target users, and
00:19:00what are the details that we did. We can be able to see that inside of the autolog trial. So pretty
00:19:05much that's how you can be able to use GSD here to follow the spectrum of development here to complete
00:19:09a feature. Now, if you do find that in this video, please make sure to like this video. And of course,
00:19:13if you're curious about how I'd be able to cause this component here to re-render after the credit
00:19:16is applied without refracting the page, well, the short answer is that I was using Zustn, which is a
00:19:21state management here to basically centralize the state of our entire application, so that whenever
00:19:26a one part of the component updates, then it will trigger the updates as well in this current state.
00:19:30So if you're curious about how you can be able to add that state management in your current
00:19:34applications, well, I highly recommend you check out this seven-hour course, which I made on how
00:19:38you can be able to build a complete production-ready NestJS applications that is scalable and step-by-step.
00:19:44So with that being said, if you found out in this video, please make sure to like this video.
00:19:47Consider to subscribe because in the future, I will share all the lessons and techniques that you can
00:19:51use to basically build a production-ready application by using AI here to code to build
00:19:55at production-ready applications just like this. So with that being said, I'll see you in the next video.