Transcription
Hey everyone. Welcome back to another episode on how to Get the Best Out of Claude Code. Now, if you've been following this series for a while, you'll know that one of the things that I've covered is Claude Code subagents. After investigating it and looking at how many other people are utilizing it, I've come up with a pattern that I think is extremely useful whenever you want to get from an idea and bring it into a first version, like an MVP or a prototype. Let me show you a demonstration of what I've built today.
The goal is to take in a YouTube video and generate a social proof widget that will give you a summary of the overall performance of the video, as well as the sentiment that people have when they look at their comments. So, what I'm gonna do here is open up one of my previous videos and grab the URL. Then, I'm gonna hop over here and paste it in this text box. What happens is that it uses the YouTube API to get hold of the information, and then it uses ChatGPT to then perform sentiment analysis on it. And here's the result. It's been able to pull the title from the video, and you can see some stats about the video themselves. But here's the interesting part. It's actually taken in the comments, sent it to ChatGPT, and then provided a sentiment analysis. As you can see here, there was quite a positive reaction to that video.
Now, the thing that I wanted to achieve here is I didn't want to just generate a report like this. One of the key features here is that I can actually copy and paste this as an iframe, and it actually serves it up so you can embed this in any website that you have. And this is the whole point why I built this app. I wanted to be able to use this almost like a service that allows me to put these widgets onto my website as social proof for specific videos. And I will be showing you how I built this entire application from a single PRD file that you see over here. But one of the most common requests that I've gotten is to showcase how I got around to building this PRD file in the first place. So that's what I'll be covering today as well.
If you're interested in getting hold of the material that I use in today's tutorial, you might wanna check out my AI-oriented Insiders Club. It's completely free to join, and within it, you'll be able to find material associated with all the videos that I publish. And this includes full lesson plans for every video that I publish, as well as access to private GitHub repositories where I post multiple things, including the source code, prompts, subagents, as well as the commands that I use.
And if you want to take things a step further, you might want to check out my Claude Code Builder Pack. Within it, you'll be able to find all of the material that's been related to my entire series related to Claude Code, including all of the subagents, all of the source code for all the apps that I've built. It also includes all the outputs from the design and implementation phases as well. This pack has been very useful in helping people get up and running and accelerating their Claude Code journey. So, if this is something that you would like to do, hit on over to the link in the description below.
All right, and without further ado, let's get going with today's tutorial. All right, so let me give you an overview of the subagent that we'll be using today along with the command. I'm sure you've seen many repositories or posts by people out there showing you how you can replace an entire team of developers with 40 to 50 different subagent types. If you actually dive a little bit deeper, you will very quickly realize that it's not very practical for day-to-day use. So I want to show you step-by-step, a practical way of how you can make use of subagents. This approach is different from one of my early episodes when Subagent first came out.
First of all, I'm gonna open up my Claude folder over here. You can see I have an agents folder. The main thing to focus on is that I will have one orchestrator agent, and this is the primary agent that's responsible for coordinating across all of the other subagents and making sure that their output is put into the correct places. So you will see that I actually have separated the implementation agents as well as the research agents. The way that we're gonna do it is just like how I've done it in the past. I'm gonna do a research space in which all of the subagents will be working together. Each of them will write their outputs out into a specific location as determined by the orchestrator. Only then do we move on to the implementation phase. And during the implementation phase, you will see we will only use one or two subagents at a time, and they will always be run in sequence. Because you're dictating where the specific locations of the outputs of these agents are going to be, you can safely run many of them in parallel without worrying about them conflicting with one another. This is the key pattern to recognize here and has been recommended by several experts about the best way of utilizing some agents when you're building your application.
Now let's talk about the commands. We will actually be just making use of two commands here. The first one is called Design App, and this will kick off the design from the single PRD that we have, and then we will do the implementation phase utilizing all of the outputs from the design phase. If you actually saw the previous video that I just did, this should be very familiar to you. But, but in today's episode, you will realize that we are building something more complex because this time we have two external services that we have to make use of. One of them is the YouTube Data API, and the second one is actually interfacing with ChatGPT.
If you actually just take a look at both of them here, I always make sure that they focus on grabbing the documentation first before performing any actions during the research or planning phase. I've also added in some common pitfalls and best practices based on several runs that I've had utilizing these subagents on building my projects. And I think this is actually the best way to go about building subagents. I don't think it's a case where you write one subagent and then you never update it ever again. I think it's an iterative process, and you should always be updating your subagent, just like how you always update your CLO MD file. You have to remember that sub-agents always start off with a blank context apart from the prompt that the master agent sends into it when it begins. So you cannot rely on the fact that you've looked up the docs during the main conversation window. There's a high chance that the subagent may not remember that conversation from earlier before. And the second thing is that because the context always gets clear, it's very important that they write their outputs into the file system. This allows you to actually have a persistent memory of everything that the subagents have been performing in relation to your application.
The last thing to mention here is that we have this single PRD file that we will be starting from, and one of the most popular questions that I've gotten is how do you go about building a PRD file? So I'm actually gonna showcase it to you right now. So actually, there's no hard and fast rule of how you go about building one. In fact, half the time, I feel that whenever you go to ChatGPT and say, "Build a PRD for something," it ends up being something that is not really practical for usage. And I'm gonna show you the process that I used for this app over here, which I found to be pretty effective.
What I've actually done is that I just opened up Claude. And you can do the same thing with ChatGPT. Rather than saying something like, "Create a PRD for an app that I want to build that creates social proofs, you know, yada, yada, yada," what you should be doing is ask it to create a prompt for you rather than the actual PRD. And then using that prompt that has been optimized, you then pass it into a PRD creator. And for example, if you look over here, I have a PRD subagent that is specialized in building product requirement documents. So I'm actually gonna be asking Claude to create a prompt for me to pass into this PRD writer. So let me just show you the exact thing that I asked Claude to do. I did this with Claude Opus 4.1, and I said, "I want you to optimize a prompt for me that will clearly be used for the purpose of generating a PRD for building a web app. That," and then this is where I actually pass in all the features: "Given a YouTube URL, we'll gather all the details of the video, create a nice-looking social proof element, perform a sentiment analysis using an AI endpoint, and then add a carousel of social proof of positive comments." And if you actually saw the demo earlier, you can see that it's actually got all of this.
The first key idea here is that rather than asking straight off the bat for it to create a PRD for you, ask it to optimize a prompt for you to pass into a PRD creator. And what happened after this is that I took this entire thing and pasted it into a text file that I had over here. All right, that was step one.
The second step that I did was to go into Claude and ask it to read the prompt, "Create PRD text." Now, this is the second stage of optimizing the prompt. This is where you do some back and forth with the AI to continue to iterate towards something that you want. Because it's in a prompt format rather than the PRD itself, you will be able to quickly spot things that are missing. For example, the first thing I spotted that was missing that I forgot to prompt it about was about having this embeddable widget functionality. So from there, I would just say, "Consider the prompt in 'Create PRD text' and how I can include the ability for my app to provide an embed widget on other websites." The idea here is that you go back and forth with the LLM to continue to optimize the prompt itself, not the PRD. And so you can see here, it's actually finished. So once you're happy with your prompt, have I have this PRD writer agent, and then I go into my front copy and paste the whole thing in here, and off it goes. That's the entire process I've done to create that initial PRD file. I find that this is a much better way to reason about the requirements rather than iterating on a PRD that gets generated straight off the bat by Claude or ChatGPT. And as you can see here, the PRD, the subagent has begun. And because it's really an expert on PRD writing, and I've already optimized the prompt that I pass into it, so the end result is going to be something that's a lot more robust for implementation.
All right, so now that we have our PRD documentation over here, we're ready to get started with the design phase. I'm going to use this custom command that I created called Design App. All I need to do is pass in the path to the PRD file. I'm just gonna kick this off right here so that I can talk about what it's doing while it's running in the background. All right, so you can see that this command has kicked off. So I'm going to dive deeper into the Design App custom command. Now, the main thing to take away from here is that this design phase is gonna run in five phases in total. First of all, note that the orchestrator will always start the entire thing and then end off the end. And the reason for this is that the orchestrator is in charge of making sure that everything that comes up from the phases in between, whether it's running sequentially or in parallel, are all stored in the right location. And this is really important because remember, the way that subagents handle memory is by writing it to file, okay? And in between this, you'll see that it'll run a UI design phase to build up some wireframes. And then you'll do a third phase where it'll run several subagents in parallel before synthesizing the results and ending the design phase.
So let's take a look at Claude over here. I've turned on the explanatory output style because it helps explain things that are going along. So you can see here the orchestrator is done initializing the project structure. And I'll show it to you right here. So what is done is that you can see over here, it's actually created a project and timestamped it, and then it's created a manifest file. The main goal here is to make sure that everything that is output from all of the other agents are all tied together and it knows where everything is. And this is the key thing to enable you to then move on to the implementation phase afterwards. Okay, so let's actually just take a look. The UI designer has kicked off. You can see it's doing this design specification over here. And so let's take a look at what has come up with. Because this is a specialized agent, it's been able to create a set of things that are very important to consider while building this. It's got a design philosophy, color palette, typography, and many other things as well. Let's scroll down. You can see that it's laid out what kind of color scheme that it should have, different styling options, the different components. And here's the thing that I really like. It actually creates a wireframe of how it wants everything to look. And this wireframe approach is actually surprisingly effective in building really good-looking applications.
All right, so let's jump back to Claude over here because the UI designer has now finished its phase. This third phase is where everything runs in parallel. This is the beauty of running a multi-agent architecture within Claude Code. You need to know when you want things to run sequentially, but also know when you can run things in parallel. Because all of these things will be writing their outputs, you do not have to worry about them writing conflicting information or overriding on top of the application. And this is why it's really important to separate out your design and planning phase from your implementation phase. So what we're gonna do is let these agents all run to completion, and we should start to see all of the agent outputs appearing within this output folder over here. Okay.
And as you can see right here, we are actually done with all of the parallel subagents. It's run all the agents successfully. And now the design phase has completed everything from the UI to the components to the testing architecture and API integrations. And if you look at the left over here, you can see all of the output of all of the different subagents have been placed over here. So if you look into how the ChatGPT integration is going to be like, you can actually run through here. It covers everything from the model selection to the analysis approach to the target metrics. And if you look at the ChatCN expert, it actually gives you a lot more details about the specific design elements that you're going to need and the different components. And this is the YouTube Data API one, which tells you how to deal with the YouTube API, along with the different things like the schema.
Now that everything has been output, you will see that it's going to synthesize and validate everything from all of the subagents and put it into the manifest file that we have over here. So what it's going to do, as you can see, it actually just, I think you just saw it happening live. It's actually updated this to ensure, according to the checklist, that everything expected from each of these different subagents, from the different, from the different phases have been output. And then it's going to ensure that the core functionality requirements based on the PRD are actually resolved by all of the outputs from the agents. And this is the reason why having an orchestrator is the design pattern that you want to have. Because if you tried to run each of these agents individually or in parallel, but without context of how everything fits together, you wouldn't end up with a cohesive app. You would end up with lots of different issues. And the reason for that is because Claude at its stands currently only has about 200K context window. So there's no way you're gonna be able to squeeze everything into a single run. So what you want to do is to write all of these outputs to file, and then use an agent to look through them and review things and then select things intelligently. Okay?
Our design phase is now completed. You can see that we've got all the outputs here and all of the agent specifications, and we have a central registry with the manifest file. And now that everything is completed over here, it is time for us to go ahead and implement it. And the way that we implement it is very similar. If you look over here, I'm just gonna collapse this. This is an Implement App custom command. You can see that it takes in the design outputs from the Design App phase, starting from the manifest. It will look through all the different subagent outputs and then it will utilize a different set of subagents to implement it. So let's go ahead and give it a try.
I'm gonna open this up here, and then I'm gonna do Implement App. It says that it wants the design folder output. And the way that you do it is that you can pass in the manifest file. And what we want is just the folder. The next thing you want to do is to pass in the folder in which you would like this app to be created in. And I've actually initialized a boilerplate Next.js app within this app folder. So I'm just gonna app and let it go. Okay?
You will see that what happens over here is that it's going to analyze what's in the app phase, and then it's gonna use the outputs of everything that we have. It's just gonna start the implementation from the design specifications, and then you will actually look at the manifest and implement everything using subagents. All right. You can see that it's really got the Next app over there. I'm just gonna fast forward this phase so that we can see the end result.
All right, so I'm running this on npm run dev, and here's the app that we've gotten. And you can see that it's more or less gotten to where we needed it to be based on what our requirements were. This is where the main action is going to be, where we put in our YouTube URL, and then there's a bunch of additional things that it's decided to add on. And the reason why it's come up with this is that based on the PRD, if you are not precise, it may start to be more creative around what it wants to do. Let's give this a whirl right now. I'm gonna go over to my channel and pick one of the videos that I had, maybe this video. I'm just gonna grab the URL and then jump back here.
All right, and so let's just give this a whirl. I'm gonna click generate widget, and it's kicked off. Now you can see it's fetching the video metadata. So this is using the YouTube Data API. It's analyzing the top comments. And now it's done, and it's generating the widget. And here we go. You can see the widget is ready, and so you see it is actually working. So, it's actually correctly gotten the title and the name of the channel. It's given you a summary of all the key stats, like the views, the likes, and the comments. It's done a sentiment analysis on the comments that were over there, and you can see that this video was particularly positive. The audience highly engaged and appreciative of the latest Claude Code features and tools, and also the practical applications demonstrated. So, if you do agree with that, and hopefully this video does the same thing for you, don't forget to give this video a like, subscribe, and turn on those notifications. All right.
And so you can see this is actually working really well. It's got the carousel of the different comments from the people that it's selected as well. And then it's got this embed code which allows you to embed this widget onto any website of your choosing. Because this is an iframe over here, I'm just gonna grab this. I'm just gonna paste this into the search bar and let's see what happens. Cool. All right. You can see this is the widget that you can then embed onto any website. This fulfills the requirements that I set up to do, and this is really cool. This means that you can actually now service, like a service whereby people are able to put in any YouTube URL that they want, and then they can embed it onto their website, and effectively you've just created a YouTube social proof SaaS, which is great.
And you can see that the steps that we took here were: create a PRD, perform the design phase, and then perform the implementation phase. And it's brought you to this stage where you have a really good working MVP. Now I need to caveat a few things. Because this is an MVP, it is not quite ready for production, but this sets a really good foundation for you to start to iterate on. For example, everything that is running is on my local server right now. It's storing everything in local storage. If you want to persist this, you will need to work with Claude and the app to integrate this with an external database like Superbase or your very own Postgres database.
Another thing to mention is I hit two issues using this approach. The first issue was that even though it had all the components to visually render everything, it forgot to wire up the API calls into the rendering logic. I had to prompt Claude to figure out why it was only serving up mock data, and he managed to fix that with a single prompt. The second thing that it didn't do is that it actually didn't wire up this widget route to enable me to serve this in this manner. And so this took another prompt for it to actually wire it up. So after encountering those issues, I went ahead and told Claude to improve the prompts for both the subagent as well as the Design App custom command. And I think this is the approach that you should be taking whenever you're building applications. I don't think you're going to be able to one-shot the perfect prompt for your subagents or for your commands. But what you need to do is that as you continue to build more and more apps, you will discover edge cases that are missing. Then you go ahead, improve the prompts, or add in another subagent or more.
So one of the things that I did is that I realized it's actually very useful to have a Next.js expert to help deal with Next.js 15 related functions because there were a lot of things that were deprecated. So the next time when I run this, I'll know it'll do a better job. I think this outlines the approach that you should be taking when you're working. I think this method of using a design phase to write things to output and then implementing it with a second set of subagents is actually very robust. You can see that this working prototype we have here is actually a really good foundation for us to continue to build upon. In fact, if I had made some of those changes to the subagent before, it would have brought me a lot closer to be able to one-shot the prototype that matched the requirements a lot closely.
All right, so that's it for today's tutorial. I hope that it's been useful for you. I think Claude Code and its sub-agent architecture, when used correctly, can be extremely powerful when paired with the right commands. And I hope that this tutorial has shown you the approach that I've been taking when I'm building my applications. If you enjoyed today's tutorial, don't forget to give it a like, hit that subscribe button, and turn on notifications so that you're always the first to know whenever new content like this drops.
And if you want to dive deeper into an approach that can help make your applications a lot more robust when you're building it using a test-driven development approach, check out this video over here that uses the same approach I used today, but using a custom output style, forcing Claude Code into making sure that it was writing tests for every new feature it was developing. And that is the formula to reducing 90% of your errors that you usually encounter when you're getting Claude Code to do your applications. So if you're interested to learn more, definitely check out this video. All right, that's it for today. I'll see you next time.