Fullstack NextJS & CrewAI Crash Course For Beginners [Source Code Included]

hey guys in today's tutorial you're going to learn how to build a full stack nextjs application that connects to crew aai to automate some market research for us actually let me go ahead and show you what we're going to be building today I am super excited to show you the application that you're going to be building today so let me show you what it does real fast and how it works so what we can do is we can type in a company that we want to research about and then we can look up the positions that we want to learn more about inside of that company so let's look up the CTO and the CEO of Ford and then what we can do is click Start now what this is going to do is our front end just told our backend to start a new crew AI job to go off and start researching the internet and looking up on YouTube to find blog articles and YouTube videos for these different positions inside of the company now what is super cool about this is our front end is actually continually pinging our backend to say hey crew AI do you have any updates for us and what this is going to do is it's going to actually populate down here in detail section with research that the job is done as it's basically researching the internet so you'll see here in just a second it's going to start popping up with research and then what's also awesome is then as the crew finishes it research and puts together its final output it'll actually populate this section up here and it'll actually have links to all the different blogs so you can go off and read them and it'll also have links to all the YouTube videos so you can go off and watch those too so all right super cool and as you can see it just went ahead and populated some information about the CTO that it found and it'll just keep doing this and researching in the background and it takes about 2 minutes to run in total and it cost about 40 Cent so I'm going to come back right when it's finished to show you guys the final results all right so it just finished so let me walk you you through the results real fast so as you can see in the final output we now have blog articles and YouTube videos that we can click for each one of these different positions for the CEO and CTO and then what's super cool is the event details just continually populated as it was researching so you can see all in all it took about maybe about 2 minutes like I said to go off and research the whole thing and it told us hey the crew is done so I'm super excited to actually walk you guys through this code and don't worry if you kind of like if this was a lot don't feel overwhelmed I'm actually going to be walking you guys through this project step by step and I'm going to be giving away all the source code for this project completely for free so you can actually just copy it and take it for your own project so I'm super excited to walk you guys through this project and have you build it all on your own also real quick I just want to mention that I have a ton of other full stack and crew AI tutorials right here on my channel that I'm sure you're going to love to watch right after this video and I also have new content coming to you guys every single week so if you already haven't hit that like And subscribe button go ahead and do that before watching the rest of the video it mean a lot to me but enough of that let's go ahead and dive into how we're going to go about building this awesome new app with nextjs and crew AI all right so welcome to the highle overview of how this application works and what I want to do is just walk you through a quick happy path of how everything works at a high level some of the you know different components we're going to be building and then second I want to cover the order that we're going to be building our application so let's just walk through this at a super high level and then as we're building it you know we're going to dive into each part a lot more detail so at a super high level when it comes to building out our application we can put in our inputs of the companies and positions we want to research on the front end then we can click run and what this will do is it'll make a request to our flask backend so that's our python backend that's going to be running all of our crew AI stuff and we're just going to make a request to the API crew endpoint now what this is going to do is it's going to go off and kick off a crew and instead of you know taking 5 minutes for the crew to go off and run do all the research and then finally return that to the front end you know just coming all the way back what we're going to do is we're going to do a little bit of Separation here now uh this might sound crazy at first but I promise you we're going to walk through this step by step so don't get overwhelmed we're going to cover this in a lot more detail later and I think you're going to be shocked with how simple this actually is so what we're going to do whenever we kick off a crew uh we're going to first give it an ID so let's just say ID one and then what we're going to do is just go kick off that crew and just say hey go run in the background and then what this crew is going to do is like I said it's going to run in the background and then we're instantly going to return a job ID to our front end and here's why we're going to do that what we've set up is a basically an in-memory database that is going to connect you know job one is connected to the background crew number one and what this background crew is going to do is as it makes progress and has updates for different research it's going to do it's going to pass along the research to our little inmemory database and then now what we can do is start pinging the back end with our hey API get crew ID and we can start getting the status of that job and what we'll do is say like okay it's been 1 second so we'll just ping the back in do you have any updates for me oh it actually looks like you found the CEO of the company I'll quickly update our events table down here and we're just going to continually pull it over and over and over again until we get the final result and the status of the job is complete so let me just recap real fast we have a crew that get kicked off and a background thread we also have a little in-memory database right here that's just going to store the status of the job events and the final results and from our front end we're just going to continually ping the back end to get the status of the job now that's how it's going to work at a very high level and we're going to dive into much more detail in just a second but the other thing I want to mention is the order of how we're going to build this application I think it's going to make the most sense for you and I to go off and start building the backend portion of the application first that way we can test it all out and make sure it's working a okay and then after that we're going to build the front end application that's really just going to hit these two different endpoints that we set up inside of our flask application so I know that's a lot but hey we're going to walk through it step by step so let's go ahead and actually start coding out our python backend and actually setting up everything so that we're set up for Success so let's go ahead and dive into the fun stuff and start coding all right guys so now it's time for us to start setting up our project so the first thing we're going to do is go ahead and create a folder that's going to house our backend and front-end application so I'm just going to type in mkdir and I'm just going to call this our nextjs crew AI application we're going to CD into this new directory and then what I'm going to do is go ahead and create a folder for our backend application so I'm going to call this makeer crew aior be for backend finally I'm going to CD into this backend directory and then what I'm going to do next is Type in code Dot and this will open up an instance of Visual Studio code for me all right great so now that we have this set up what I'm going to do is I'm going to go ahead and create all of the files that we're going to use in this folder and then what we're going to do is just go back in and start filling them out one by one and the reason I want to do this is cuz I want to paint a picture of all the work that we need to do first before actually diving in and doing it all right so let's go ahead and start off so the first thing that we're going to do is create a new file and we're just going to call this our api. py file now this is going to be where we house our flask application so whenever we make a request to our backend application we're actually going to be using this file fantastic so the next thing that we're going to set up is all of our crew AI related files so that means we're going to need to set up a crew. piy and this is where we're going to make all of our different Crews the next thing that we need to do is work on making our task. py now this is where we're going to Define all of our task for going off and searching the internet so forth and so forth and then we also need to have our agents. py file and this is where we're going to Define our different agents for our crew you know we need to find our research agent and our research manager and we're going to be setting that all up in our agents. P file and then we need to do a few other things so we need to work on creating a models.py file and we'll dive into this later but basically just know whenever we need to start working with our frontend code we need our data to be formatted in a very specific Manner and by creating a models.py file and we're going to be using pedantic which just makes it very easy to like structure our data we're going to Define all those different classes in here so more on that later and then the other thing that we need to start working on is creating our jobs manager now if you remember from earlier I said we were going to be setting up our crew AI agents to go run in the background and we wanted those crew AI agents to be able to you know update the job status so all of that logic is going to get handled here in our jobs manager and we're going to come back to that later and then outside of that we need to work on creating some tools and these tools we really just need to on creating one and it's going to be a so let's go and create our tools folder going to go in here and go ahead and we're just going to call this our YouTube search tool and this is going to be where we go off and search YouTube videos to find recent interviews with different CEOs or CTO and so forth and just whenever you create a new folder just so you can access it in the rest of your code you need to go ahead and create an init.py file as well just so it shows up as a package all right fantastic so that's pretty much everything that we're going to be actually doing all of the coding in for our backend is mostly going to consist out of these files and the other thing that we need to do is non-code wise and more just project development setup wise is we need to create something called a p project. tommo file so let's go ahead and create that real fast so p project. tml and it put it in the wrong folder it just needs to go out here fantastic so let me walk you through what the p project. tommel is basically just at a high level and I'm just going to copy and paste this code cuz it's it's pretty boring but basically at a high level what this P project oomo file does for us is it goes ahead and defines all of the dependent gencies that we need to run our backend project and it also sets up some project application kind of like metadata so what I mean by that is by defining this poetry file we're defining that hey we want to make a python environment called nextjs crew aai tutorial and this environment is going to store all the dependencies that we need to run our project and you just add some like I said some other metadata myself and then Jiao the creator of Cai awesome guy definitely check him out on Twitter and I think he has a YouTube channel I'm not 100% sure but definitely recommend checking him out over on Twitter he post a lot of updates on CI as he builts them okay cool so now that we have this set up what I'm going to go ahead and do is actually start working on installing our dependencies and actually getting it up and running so what we're going to do I'm just going to hit control back tick so that's how it's going to open up my terminal for me and then what I'm going to do is just run a few commands so the first one is just going to be called poetry install D- no route now what this will do is it'll go off and install all those dependencies for us and put it into a new python environment now if if you haven't used poetry before I definitely recommend watching my crew aai for beginners video where I walk you through the whole process of setting poetry up on your own computer but for this one I'm just going to go ahead and assume you have installed so I'm going to go ahead and run it and this will go off and install all of our different packages takes a few seconds to download everything but once it's done we'll actually be able to run this newly created python environment so we can start you know having access to all these new tools so let's give it a few seconds fantastic so it just finished installing everything so what we can do now is just type in poetry shell and this will will open up an interactive shell and basically set our python environment to the active environment so you'll see we had base and then now it actually comes up with the new environment we just made and just as a quick tip what you can do is if you click down here at the bottom right hand corner of your code you can go ahead and see that this is our current basically python environment but I'm actually going to change it and the way you can change it to the python environment you just created you'll just copy that spawning shell then you'll come up here and click enter interpreter path and then we're just going to paste our interpreter path fantastic and now it shows that we're using our nextjs crei tutorial environment all right cool so give yourself a pen on the back you just finish up setting up your python environments so what we're going to do next is actually start running through these files and actually setting them up one by one so that we have a fully working project so let's go ahead and start diving in into setting up our api. py file all right so now it's time for to start setting up our api. py file and this is where we're going to be running our flask backend API what I mean by that is whenever we start sending requests to our backend this is going to be the file that handles it all so let's go ahead and start creating our flask backend application and setting up our endpoints with some to-dos that we're going to start flushing out as we go so first thing we to do like I said is go ahead and create that flask backend application and it's super simple you can just type in app equals flask name this will go ahead and start creating that flask backend application let's go ahead and import that missing dependency and then what we're going to do next is go ahead and set up some endpoints and what I what we're going to do is set up our post request first then our get request so let me just show you what that looks like first thing you have to do whenever creating a backend endpoint is you have to do basically add a decorator and this is going to decorate a function and you'll see what this means in a second but we have to say what endpoint we want to set up so in our case we're going to say we want to set up the API crew endpoint and we want this to be a method of post and basically a post method means that we are submitting data to our back end all right cool so what we're going to do next is go ahead and create our function that triggers whenever we hit this endpoint and it just going to be called run crew and then what our run crew is going to do is obviously it's going to return some data so this is what a return statement from a backend application would look like you're just going to return jsonify and we're just going to return a status of success in 200 so let me explain what that means and let's go ahead and import this to so whenever you make a request to a backend endpoint you need to get back some data so that you basically get information that's the whole reason we're going to you know make requests to the back end we want something to Happ and we want to get an answer back so that's exactly what we do here we wrap up this uh object and we put it jsonify just so that when we turn it you know it's set to application content Json and we can actually access it on the front end and Al let me go ahead and show you what this actually looks like we just need to you know set up and start running the application first and running it on Port 3001 and the reason we're doing this on Port 3001 is cu our front end application is going to be running on Port 3000 but more on that later but I just want to show you that this is working so what we're going to do is go ahead and run this real fast with python and we're just going to say api. py and this will go ahead and create our back in endpoint and this should have been methods that's my bad we're going to go ahead and run it again and as you can see we've started our development server but what's cool is we can use the tool called Postman and you can actually add it by going into your extensions and type in Postman but what you'll see Postman but yeah there you go but I've already installed it so let me just show you an example of what it would look like so we're just going to make a request to our backend application that we're setting up so Local Host 3001 and we need to say what endpoint do we want to hit well we set it up right here api. crew so let's go ahead and hit that endpoint and then we said it's a post type so we're going to update the request from get to post and we're not passing in any data yet but what I would expect is whenever we go off and send this request we're going to get back a status of success and a status code of 200 so let's go ahead and send it and then you can see we actually we are getting back the data from our front end so hopefully that all makes sense cuz you know this is the Crux of setting up our backend application so there's the status code number and here's the object we sent back okay cool so let's go ahead and set up our git route and what I mean by that for a git route is we want to be able to check the status of a job so here's how we can do that well once again we need to set up the endpoint that we went to hit so in our case we are going to once again hit the API crew but what we're going to do is we want to look up the information for a specific job ID so what we can do is we can wrap it in these anchor brackets the job ID and this basically means hey this is a variable and then what we can do is set up the type of this function to be methods doget and then what we can do is say what function do we want to run and ours just going to be get status and we're going to pass in the job ID so this is where that job ID is basically getting passed in here like a variable so we're just going to say getting status let's do this let's do this right here just so you guys can see this is an action so getting status 4 and then we'll paste in our job ID so job ID all right cool so what will happen now is if I type in API crew 123 and I go off and run this what I would expect to get back is getting status 4 23 with a success of 200 so let's go ahead and try that out real fast oh 405 not allowed let me update this to get that was my bad send it and then fantastic we're getting status 4 and then here's the variable so this is the job ID that we just set up Okay cool so now that we have this set up what we're going to do next is start running through setting up how we want to go about kicking off our crew CU that's the whole point of setting up our back end is we want to start sitting kicking off our you know crew AI task to go off and search the internet for different companies and positions so let's go ahead and start stubbing that out next and real quick before we go off and set up the crew I think it's important to show you guys how we can pull out and validate the data that gets sent to this endpoint because really the companies and positions that get sent to here is what's going to get sent over to the crew so I think it just makes sense to see how everything flows from end to end so first thing what we're going to do is go ahead and pull out the data that gets sent to us so we can just type in data equals request. Json and basically because you'll notice this is Squigly and we haven't declared a request well that's because we're using flask anytime you use flask what you can do is you can expect to receive a request if you've worked with any backend inp points you usually have a request and a response and your request contains all the information about the data and queries you pass pass up to your back end Okay cool so now that we have our request what we're going to do is check to see if the user passed up companies and positions to us so what we can say is if not data so hey did they not give us data or companies companies not in data you know did they not give us any companies or you know positions not in data so what this is going to basically do is just some simple validation to make sure that the user passed up some companies and positions to us and what we're going to do is just call abort let's do this abort and once again this is going to be coming from flask so we can just import it up here abort and this is basically going to say like hey don't continue doing the rest of this function and we can go off and actually pass back some statuses to the user so we're just going to pass in 400 which means hey this was an invalid request and then we can pass back a description so we're going to say invalid request with the data provided with I'll just say missing data that sounds good fantastic so that should be working good and then this should be if my bad if not in fantastic so let me actually show you what this looks like we're going to be using we're going to be using Postman a lot in this tutorial so just cuz like I think it's the easiest way to see a backend getting built in you can basically do some validation so once again we're going to make a request to our backend this is a post request so let's see what happens whenever we make a request let's make sure our server is running let's see what happens when we make a request without any data we should get back a status of something went wrong and in our case unsupported media and it's cuz I basically passed up the wrong wrong data but yeah that's basically should be working let's see body Yep this was my fault so if we do this we'll get back hey this was you can't make this type of request to this endpoint but then if I pass in let's go ahead and just do companies companies do that and then oh this should be a Json and I just do Tesla if I do this it should fail because I'm missing the other thing hey bad request missing data and then if I do positions let's do this position and then I do CEO we should get a success because we actually yep because we passed in all the information we need to our backend so that was our form of a poor man validation but hey we're doing some validation okay cool well now that we've set up this what I'm going to do next is show you guys how we're going to go about kicking off a crew in the meantime so the way we're going to go about creating our crew is pretty straightforward what we're going to do is first create a job ID and if you remember the reason why we want to do this is because we are going to kick off our crew to work in the back endend and then it's going to P our basically our post request is going to pass back the job ID to our front end so that we can continually pull later on to get the status of the job so the way we're going to go about creating that unique ID is by wrapping our uu ID around a string so we're going to convert it to a string and we need to import this real fast fantastic now with our job ID the other few pieces of information we need to pass over to our crew are going to be the companies so we can pull that out from data and then we also want to pull out the positions and then we have set this up yet but you'll see this is where we're going to start actually running our crew where we're just going to run everything in the background thread now don't worry if you haven't used threads before super straightforward the way we're going to be using in this application you're just going to say thread and then you have to define the target function that you want to run so in our case this is going to be our kickoff crew which we haven't created yet but we're about to in 2 seconds and then we have to pass in the arguments that we want to send to our backend application so in our case we want to pass the job ID to our crew the companies and the positions this is everything we need to kick off a successful crew all right now let's go ahead and import some of these missing dependencies so when it comes to importing our threads what we're going to do is just all the way up top is we're just going to say from threading import thread fantastic and then it's up to us to go off and create this new function here called kickoff crew so let's go ahead and create that real fast we're going to say def kickoff crew crew and then we want to pass in the job ID companies and positions now I'm going to be using a little bit more typing in this tutorial than I normally do that just because I want us to make sure that we're passing the right type of data around through our application so let's go ahead and start this off so our job ID is going to be a string then our companies is going to be a list of strings so companies is going to be equal to a list of strings and then our positions is going to be a list of strings fantastic all right then what we can do from here is this is where we're actually going to go off and kick off the job now we haven't set this up yet so let's just go AE and put in some to-dos we are basically going to set up the crew and then after that we're going to need to you know run the crew run the crew and then finally what we're going to do is whenever the crew finishes running at the background is we need to you know basically let the world know that we're done so let World let app know we are done fantastic so that's what we're going to be working on next just because there's a lot that has to go in and to you know actually setting up the crews setting up our agents and task but I just want to paint a picture of where we're going next Okay cool so I think it's time for us to actually go off and start setting up our crew so let's go ahead and work on moving over and setting up our crew. py file oh and one other thing we actually need to go off and kick off the thread that we just started I just realized that and super simple all we have to do is just type in thread. start and this will actually kick off our thread and what we can do is like I said earlier we actually want to pass back the job ID to our front end because we want our front end app to eventually pull this job ID to get status updates so that looks good the other thing real fast this actually should be uu id4 I don't know why that messed up so it should just be from uuid import U id4 fantastic so that looks good fantastic so that looks good and we actually can go ahead and run it just so you can see the job ID getting passed back so if we come over here pass this in send it off this yep now we get back a new job ID that is going to be correlated to the thread that we kick off which is going to have our crew all right cool now that we have that out of the way let's actually go ahead and actually start working on our crew like I said just a second ago so when it comes to setting up this crew it's actually going to be a lot different than the way we go about normally creating Crews and what I mean by that is whenever you and I normally go off and create Crews we normally do that in the main.py file to where we usually just run it with a command line but in this case what we're trying to do is we want to create a crew per request that the user sends us so this is going to allow us for you know if a user requests to look up Tesla and the CEO that's going to kick off its own crew and then if someone else wants to see Ford and the CTO we can go kick off another crew for them and this is what's going to allow us to run them in parallel so enough talk let's go ahead and actually start setting up this crew so what we're going to do is create a class and this is going to be called our company research crew and then what we're going to do inside this class is three separate things first we need to initialize this class and what we're going to do is really just pass in the job ID which is going to be the string for the specific crew that we're kicking off so let's go ahead and set that up next what we need to do is set up the crew itself so we're just going to create another function called setup crew and this one we're just going to pass in the companies and the positions that we want to research and this is also where we're going to go ahead and put in some to-dos for future us so this is where we're going to set up agents we're also going to set up tasks and then finally we're going to create the crew itself self we're not going to kick it off here we're just going to create crew now what we're going to do is actually kick off the crew later on in the application at a later date and you'll see why we do this later on back in the API file that we've set up but we're just going to kick off the crew right here and this is actually where we're going to like I said we'll just do another to-do and we'll just say kick off the crew all right cool well now that we have that stubbed out let's go ahead and actually set up just a little bit more of this of this class so what we need to do is also set up the crew that's attached to this company research crew and to start off we're going to initialize it to none and then what we're also going to do is down here is we're going to go ahead and stub out the crew logic that we're going to do so what we're going to do is say hey if we don't have a crew something must have gone wrong when we're trying to kick off this crew so let's just go ahead and say like hey something went wrong couldn't find the crew and just return null other than that what we want to do is actually try and actually go off and kick off the crew so what we're going to do is like I said we're going to try this so we're running the crew and we're just going to say self. crew. kickoff and this is how you kick off a crew and this is you know this will have all the agents and tasks set up and then it's going to actually return the results but this is going to be running in the background so we need to do this results so this is where we're going to get our results and then this is where we're going to return the results whenever the task is done running all right and then what we're going to do in the exception is just like hey if something goes wrong whenever we're trying to run the crew we just want to you know return that something went wrong so we're just going to cast the exception into a string and return it back okay cool so this is the major setup that we need to do and then what I would like to do actually before diving into setting up all of our agents our task and our crew we need to think about the fact that back in our initial logic we said we wanted to log the status of the crew so you know we want to log that we kicked off The Crew we want to log that the crew finished and a lot more stuff so what we need to do is go off and create a new file that or basically start working in our job manager and our job manager is where we're going to start actually doing all the logic for appending events and really logging what's going on inside of our crew so let's go ahead and knock this out real fast because we're going to be using this in every file that we're setting up so the first thing I want to do is go ahead and create the classes for the information that we want to store for our jobs so here's what we're going to do we're going to use the data class decorator to let the code know that we're creating a model and what we're going to do is just create a class called job now what information do we want to store about a job well we want to store the status as a string of hey is this job running did it fail is it complete the next thing that we want to store is the events so this is all of the information that our backend agent is saving as it's going out and researching the internet and this is actually going to be a list and a list of type event so we need to go off and create that data class as well real fast so we're just going to come up here say data class and then we're going to say class event and this event is going to have two pieces of information to it the first one is going to be a timestamp which is just going to be a date time of like oh hey at 12:00 we started to work on our back-end job and at 12:01 we know we got another event with saying hey we found some research and at 12:05 we actually finished the run so this is how we're going to store events and we're going to store basically the timestamp at which it happened okay cool and the final thing that we want to work on for our job is we want to be able to save the result so once the job finishes running all the independent task and it puts together that final report we want to be able to save it to this result property right here all right so let's go ahead now that we've set that up let's go ahead and import some of the missing dependencies so we're going to say from data class import data class and then from typing we're going to import list and we're also going to go ahead and import dict for dictionary fantastic outside of that we need to go ahead and import date time so from date time import date time fantastic we got rid of all those errors and now that we've done that let's talk about what we want to do next and I think it's super helpful to look at the final output uh diagram for this project so we can actually see what we want to have happen so what we're trying to do is we want to append events and details to this job status as things happen so for example when the crew gets kicked off what we want to do is be able to say hey Job database I want to let you know that I just started the job then as this crew find different information on the internet we want to add more events to this database so we basically just want to continually add new events over and over and over as we're making progress on a job so going back to our code what we're going to do is create a function called aend event now this is where we're going to get a little bit more interesting into and start dealing with locks but I'll explain this in just a second but the first thing we need to do is go ahead and import our job ID this is going to let us know you know where do we need to append information to which job and the next thing is we need to figure out which data we want to add to our messages for this specific job Okay cool so now that we have that set up let's walk through this well what we're going to do is we need to be able to make changes to this database but what you'll notice is I have it blocked in this little dotted black diagram and the reason why is because we want to only allow one of these Crews to make information changes to this dictionary or database at a time and the reason we want to do that is because we're starting to to work with multi-threaded basically processes so you know if we're working on this database updating the database on this thread and then this thread's also trying to make changes to it we're actually just going to run into some errors so all we need to do is basically say hey only one of you guys can make changes to this database at a time that's what we're going to work on we're going to lock our data and we're going to protect it to only allow this appended event to make one change at a time so here's how we're going to do that we are going to create a jobs lock and this is going to be equal to a lock so we need to import that real fast so we're going to say from threading cuz like I said this is because we're working with multiple threads we want to only allow we want to lock our dictionary so only one event can make changes to it at a time and then we're going to go ahead and make our jobs really I call it a database but it's really just an in-memory database so what we're going to do is we're going to make a dictionary of type string and job so this string is going to be the job ID and then this job is going to be the actual you know this job class right here to where we have statuses of events and results okay cool so here's how we're going to start adding events to this job dictionary we just created so we're going to say with jobs lock you know so Hey whenever I can actually get into this database and actually make changes to it because no one else is using it I want to do a few things well first if the job ID is not in jobs what I want to do is go ahead and create the job itself so what we're going to say is we're just going to do a quick you know log it real fast and just say you know started job we're going to put our right here we're going to put to let us know what job ID we're starting so we'll just say job ID job ID fantastic and then what we're going to do is actually go ahead and create a new job in our database so what we're going to do is say hey in our job dictionary I want to use the key of our job ID and I want to create this new job object so here's how we're going to do that we're going to open up our job create a new job cuz we've defined what this class should look like and now we're just going to add the status events and results right here so for our status we're just going to say hey we just started it then for our events well we haven't really done anything yet so what we're going to do is just say this is just going to be equal to an empty array and then finally for our results we also haven't you know found our results yet so that's just going to be equal to an empty string fantastic so now we have officially created a new job entry that's started and now we can actually start appending event to this job so what we're going to do next is we're going to go with the other way and just say else this is you know whenever we already have an existing job ID we're just going to print that we're adding data to it so we're just going to say appending event for job fantastic just to go ahead and add some log so we can see what's going on and then what we're going to do is actually add the event data that we're passing in and we're going to add it to our events list right here so here's how we're going to do that well first we're going to go into our job dictionary we're going to pull out the job associated with that job ID and then what we're going to do is access the events list inside of it and then we're going to call the append function so we can start appending new events to it so here's what that's going to look like we're going to open up our brackets or our parentheses and then we're going to create a new event now what this event is going to look like is we have a timestamp cuz if you remember up top we have a time stamp and we want this to be equal to date time now and then we're going to pass in our data and that's going to be equal to the event data that we're passing into this function Okay cool so you guys actually just finished working on creating these jobs manager to where we're going to be able to basically appin data in our crew we're going to be able to append it in our API so this was a crucial component that we're going to be using out throughout the rest of our application so now that we've done that let's actually hop back over to our crew so we can start saying that like hey I actually just kicked off the crew and start using this new new function that we just made so the first thing we want to do is we want to record the event whenever we go off and kick off a crew so what we can do is just type in append event and then we're going to go ahead and say we're kicking off the crew and we're going to pass in the job ID so let's say the job ID is this and we're going to say the crew started so it's going to be the first event and we need to go ahead and import this new function that we made from our jobs manager file great so that's working and then what we want to do is after we finish it working with a crew we want to go ahead and say that hey we're done with this so we can say self. once again append events sorry no self that was my bad we're just say append events and we're going to say crew completed and then finally if something does go wrong whenever we try and run the crew we're going to go ahead and log that error as well so we're just going to say a pinned event and then we're going to say job ID and then we're going to say hey the crew failed and here's the error that occurred Okay cool so that's everything we need for the crew when it comes to logging events so let's hop back over to our api. py file real fast well what we're going to do is eventually like I said we're going to set up the crew run the crew and let the crew know we're done so this is where we're eventually going to start actually updating the statuses of the jobs and the results but we're going to come back to this in just a little bit so now that we've kind of painted a picture of what we want to do I think this is the right time for us to start diving deeper into crew Ai and actually go ahead and start building out our agents and our task as well as our tools to go off and research all the different Market information that we want so let's go ahead and start knocking out our agents. py file real fast and everything else and then we'll finally come back here once we're done and finish wrapping up setting up our crew okay let's go ahead and dive in and before we dive into coding out our agents I actually want to take a step back and look at what we're trying to accomplish here so this is the final version of the application and as you can see what we're trying to do is we want to research positions inside of a specific company and find information about blog articles and YouTube interviews for that specific position so inside of our agent I'm thinking we really only need two agents the first agent is going to be a research manager who's going to kind of orchestrate the whole process and the second part and the second agent is going to be the research agent who's actually going to go off and look on YouTube and look on the internet to find these blog articles and these YouTube interviews so now that we've kind of said what we want to do let's actually dive into into getting those Agents set up so the first thing we're going to do is we're going to create a new class to store our agents so we're just going to say class company research agents and then inside here we want to do a few things well first we want to go ahead and uh we're going to initialize some of the tools that we're going to be working with so I'm just going to put it to-do in here for right now so we're going to say to-do add tools we're just going to print just so it doesn't throw an error for right now and then we'll come back to adding that later but the important part is we're going to add our two different agents so the first one is going to be our research manager and this is going to be the agent like I said who's going to be responsible for orchestrating the entire operation so what we're going to pass into this manager is going to be the list of companies that we want to research and then so like this is going to be a list of strings and then we also want to pass in the positions that we want to find out more information about and then what this function is going to return is it's going to give us back a agent a crew AI agent let's go ahead and import all of this so we're they get gooly marks so we're going to say from crew AI import from CI import agent fantastic so I should get rid of that and now what we need to do is go ahead and create our agent so what I'm going to do is I'm actually going to paste in the agent that we're going to create but I'm going to walk you through it line by line just cuz there's a ton of typing but I want to explain each part of this in detail so when you're off building your own agent you'll understand what to do okay so let's walk through this we first define the role say Hey you are the research manager your goal is to create a list of Json objects objects containing the URLs for three blog articles and three YouTube interviews so basically all this information that you see right over here now here are the companies and positions I want you to research and here are a few important things that you need to take note of as you're going off and doing work first thing the final list should include all the companies and positions and real fast the reason I add this important section is every time I run into an error with my crew I kind of just say huh I think that means the information and instructions I provided this agent aren't clear enough I need to be more concise with my intents and basically what I want the final output to be so anytime you run into an error what I like to do is just come back and update this important section just so the crew goes oh that's what you wanted me to do so that's why this is like a list of like six bullet points these are all errors that I occurred when I was spending time building out this crew so this is hours of work of me struggling with crew AI but I finally got it working so I want to share the results with you guys but the other thing is like hey if you can't find a specific position just put in the word missing this is because sometimes it would go off and research and just provide a ton of text that I didn't really care about the other thing was just like hey only give me back real information if you can't find it that's fine it just say it's missing don't stop searching until you find all the information sometimes the crew would try and search buch on the internet and then just stop so no keep going uh the other one is sometimes it like I said these were the same things sometimes it would say this company doesn't exist or this position doesn't exist which is false like I'm giving you Ford in Tesla these companies definitely exist so don't quit keep going and then finally I wanted to make sure it got the count right so hey give me back this many articles and this many YouTube interviews because sometimes it wouldn't fully do that or it would just leave the list blank okay cool now let's move on to backstory so this one isn't super important we just say hey as a company research manager just you're responsible for aggravating all information and putting into a final list all right so the next thing what we're going to do is we get to pass inm that we want to do all the operations so what we're going to do is we're going to come back up to our constructure and our AIT file or a nit function and we're going to go ahead and Define that llm that we want to use so we're going to say llm is equal to and this is going to be equal to chat open Ai and then we want to pass in the model name so in our case we're going to be using GPT for Turbo preview so uh I've had really good results with this one and just a recap every time I would run this crew it would cost me about 40 cents so um just take that into account if you know I don't want you to rack up a huge bill so let's go ahead and import that real fast fantastic all right and the next thing the NIT function had too much information in it that wasn't supposed to okay so what we're going to do next is now that we defined that hey I want you to use jet uh chat gbt for Turbo preview whenever you're researching that's great and then now we're going to pass in tools so this is going to be the search internet tool and the YouTube search tool we'll come back and actually build those in later so I'll add this to do here as well and then finally what we're going to do is hey we want you to log the results so that's what verbos means and then finally we want you to to be able to delegate work so for example if our other agent gets back to us only partial information I want you to have the ability to tell that agent hey dude here's some feedback on what you just gave me that's not correct go off and continue to research Okay cool so that was our first agent now let's go off and actually create our second agent and I'm just going to this one's going to be more straightforward so I'm just going to paste it and once again I'm going to walk you through it line by line okay so this is our research agent and if you remember our research agent is going to be the one who's actually going off and Performing the research duties itself so what we're going to say is like hey you're the company research agent now it is your job for the positions I give you for a specific company I want you to find the URLs of the blog articles and three recent youTube interviews with each person specified you know it is your job to return this collected information inside of a Json object now you'll notice in this function I keep saying like Json object and then up here I said list what's going to be interesting is whenever we hop over to our task. high file you'll see we actually go ahead and Define exactly what those Json objects look like so that's just to give you some more preview of what we're about to build next like we actually Define what these looks like to give our crew some really specific instructions on what we want it to do this is also super important because hey we're not just building this to be a CLI or command line interface where it just spits some text out down here in the terminal we actually want to be able to return this formatted data in a very specific way to our front end so it's very important that we're working with Json objects and that these objects are formatted properly so but more on that later once we build out our tools and once we start building out our task this will make a lot more sense all right cool once again I just passed in some more backstory like hey as a company research agent you're responsible for looking up specific positions and then I just passed in some more important information so you could put this up here in the goal or the backstory it doesn't really matter the important information is that you just log hey this is these are errors that I've noticed you've done in the past only return requested information don't go off and find me you know the kids back or the leaders back as they were growing up I don't I don't really care about that I just want I want the three blog articles and I want the three YouTube interviews I know those a lot let's keep chugging the rest of it is just like yep these are the tools that you can use once again we're going to set these up as a to-do as the tools you are also going to use CH gbt turbo 4 that is the lolm we've defined for you and you are also going to log errors and you're going to log information as you're running cuz we set verbos equals to true all right cool so now that we have this set up let's actually really quickly hop back over to our agents. py file and this is where we're going to go ahead and import these agents we just created so what we're going to do is we're just going to say agents is equal to and then this was our company let me actually go ahead and just copy and paste it this is our company research agents so we're going to come over here type this out and then we now need to import it so import Agents from company research agents great so we have our agents now and then we're going to go ahead and actually you know create the two specific agents and when I say create the two specific agents where just um if you look at it this is a function who returns an agent so we just have to call this function so that's what I meant by that so let's come back oh uh wrong one so what we're going to do is go ahead and grab our research manager first and we're going to say hey this is going to be equal to our agents. compan we're going to say research manager and if you remember we need to pass in the companies and the positions fantastic and these come from right up here so that's looking good and the other thing that we want to do is go off and grab our company research agent and this is going to come from Agents company research agents and what you'll notice is we're not actually passing anything into this agent and that's just because you'll notice whenever the crew is going off and running this research manager is going to say like hey dude you need to go off and find this so even though we're not passing in a specific company in specific positions the crews will talk to each other to pass in information accordingly all right cool so we just set up our agents so now now that we're on a roll let's go ahead and actually start work on next setting up our different task that we want to actually have these different agents perform so let's go ahead and dive in so creating our task. py file is actually going to be super similar to our agents file and what I mean by that is we're obviously going to need to create a new class to store all of our different task so we're just going to call this our company research task let's do this task and then what we're going to do is we're going to have three major functions in here first we're going to have the Constructor where we're going to initialize everything but what we're going to do is actually pass in the job ID and the reason we're going to do this is because as we eventually append events later on we need to be able to attach it to a specific job ID but you'll see more of this later but we just need to go ahead and declare it just like this so job ID is equal to job ID fantastic now we can use it throughout the rest of our class and then what we need to do is we looking back at our agents we need to give each of our agents an actual task to execute so the first task we're going to create is just going to be called manage research and then the second task that we're going to work on let's just say pass for now and the second task that we're going to work on is just going to be called our company research so we're just going to say company def company research cool all right so now that we have these setup let's actually go in and start executing these task and populating them so when it comes to managing our research what we want to do in here is we're going to create a task and once again I'm just going to paste in the final result but walk you guys through it line by line and I have all the source code like I mentioned that you can just download for free so you also don't have to type this out by hand just you know go down in the description below download source code and you'll have access to everything that you guys see right now and let's real quick go ahead and import some of these just so we can get rid of some of these squiggly marks so from crew we want to import task so from crew AI import task fantastic and then we're also going to import Dent this just helps us with some text strapping stuff so from text strap import Dent all right cool well now what we're going to do is actually start importing everything for these companies and positions but let's walk through this line by line so what we're going to do is we want to say hey based on the list of companies and positions use the search results from the company research agent down here and basically what I want you to do is put together all the information you found into a Json object containing the URLs for the blog articles the arson titles for the video interviews uh for each position in each company so that's the task that I need you to go off and perform now I need you to use this agent so let's go ahead and start actually filling in some of these different variables so the first one is going to be an agent of type agent from crew AI fantastic so let's go ahead and add that up here agent all right so I want this task to be performed by the research manager agent so that's how we're going to pass it in and then what we're going to do is say hey what is the expected output of this function well it's going to be a Json object that contains the URLs for the blog articles the URLs for the you know the YouTube videos so forth and so forth all right and then what we're going to do next is what we can do is up here in the description we said hey I want you to use the research from the research results from the company research agent well how the heck do we pass the work from this agent over to this well normally crew AI will discuss between agents because like we allow delegation they'll be able to communicate between one another but if we explicitly want one task to be passed in to the next task what we can do is actually provide some context what we'll do is we'll actually pass in a list of task like this and these task will be passed into context so if we actually go in here we can see that oh the context this is basically nothing more than just these are the other tasks that will have their output used as context for this task so this is actually a super important thing and this will really start leveling up your crew AI game as you can start implementing this and using it so okay so that's important the final thing is well what do want the output of this task to be well if you look at this the output Json is a pedantic model to be used for creating a Json output and if you remember earlier I said we do want everything to be in a Json output because it's going to make it super easy whenever we pass back the results of our crew over to our front end well how the heck do we go about creating a pedantic model well what we're going to do is we're going to hop over to our models.py file real fast and we're actually going to go ahead real quick and just Define what we want to we want our outputs to look like so if you see what we're trying to do is we want to have a position info list so let's start working on creating these real fast right out the gate what we want to do first is let's go back over here let me just show you what the final results look like one more time we want the final result to look like this we want the final result to have a company name a position a name of the user then we want to have a list of strings where those strings are blog URLs and then when it comes to our YouTube videos we want to have a list and let's just call them named URLs and what I mean by that is we want to have a the title of the YouTube video and whenever I click on that title it should take me to the URL of the video so let's actually turn those words uh and final outputs into actual information that we can use so what we're going to do is say hey I want to have a class called position info and this class is going to inherit from the base model fantastic and then now we need to say well what do we want this class to look like well I want this class to have a company that's a string I want it to have a position that's also a string I want the to have the name of the person who's in this position then I want to be able to see the blog articles URLs and this is going to be nothing more than a list of strings just like that and then finally what I want to do is I want to have the YouTube Interview URLs so YouTube Interview URLs and this is going to be a list and we're going to have to make a new model or type for this called named URLs all right so let's go ahead and import some of these and make some of these new types that we just defined so when it comes to base model what we need to do is import that real fast from pedantic so from pedantic import base model great and then from typing import list great so we got rid of some of the existing squiggly marks so let's go ahead and start working on this named URL class real fast and these are nothing more than just types that's like the best way I would describe it in Python you normally don't have to pass around types but we want to be very explicitly clear with how everything should be structured so this is how we're going to go about doing it so for our named URLs once again this is going to import from the base models base models fantastic and we want this one to only have two different fields a name and a URL so this is how coming back over here the title or name is what you see on the screen and when you click it that's going to take you to the actual URL of the video great so we have this set up so this is what should happen when we you know U this is what one result will look like but if you look at it well we actually have this result down below we have another result so we really have for our final output that's going to be given um what we want this manage researcher to Output it's really going to be a position info list so what we're going to do is come back over here and say we want to make one final class it's just going to be called position info list once again import from the base models and we're going to just say like Hey we're going to have a list of positions all right cool so that's us making our types and this is going to make sure whenever our manage research task finishes up it's going to Output the result in this format that we just defined so I can go ahead and import it from our models class real fast great so everything is set up for our manage research so now let's go ahead and start working on our next task which was just going to be the company research task so I'm just going to go ahead down here and I'm just going to paste in the final result but I'm going to walk you through it line by line so you guys don't uh you know how I got to this answer so let's go through this real fast so the company research this is where we're actually going off and researching specific positions for a specific company and for each positioned what we want to do is go ahead and grab the URLs oh this messed up uh we want to say find this was my bad there we go find the URLs for three recent blog articles and the URLs and titles for three recent youTube interviews and what's kind of interesting you'll notice the URLs well if we go back to our models that's exactly this the blog article URLs and then the URLs and titles for the recent YouTube videos well that's exactly what we're doing right here those are going to be our named URLs so you can kind of see how this is all tying together cool so let's keep chugging along so here are some helpful tints so what I like to do just taking a step back whenever I'm defining a task I like to be able to kind of do the sixth grader test and what I mean by that is I should be able to give these instructions to a sixth grader without any additional context and they should be able to perform the work that I'm telling them to do and I also provide some helpful tips of like well hey here's how I would go about doing this work if I was you you know just to make sure that they're starting off on the right track so I say hey if you're going off and finding blog articles what I would recommend you do is you would just type into Google like the name of the company the position you want to research and blog articles and then whenever you want to find YouTube videos I would just type in the name the position that you're looking into and the you know interview just so you can see like oh the Tesla CEO o interview and that's how we're going to figure out the interviews that we want to put in back end over here on our front end so people can start watching them so that's why I did this section and once again when it comes down to the important section all I did was here is like I noticed whenever I was running this task things would go wrong so I would just I would add in like oh it's returning additional information that I don't care about yeah don't do that oh you're giving me back fake information okay don't do that so that's why I put this important section right here but let's keep chugging along so the next thing is I went ahead and Define the agent because this is going to be our company research agents going to be executing this work and we want the expected output of this task to be a Json object containing the research information for each position in the company so the CEO CTO whatever we pass in then what you're going to notice I didn't talk about this call back we're going to say that for very last so we skip that for a second finally once again we want to define the output of this task and actually what it needs to look like and it's going to be the position info model that we just created so if we come back over here this is what this task is going to Output every time so just company position so forth and so forth and then finally what we want to do is we want this function to execute asynchronously now what does this mean well right now we're going to have let's say we're going to look up for one company we're going to look up the CTO and we're also going to look up the CEO well instead of looking up the CEO doing all that research once it's done then start working the CTO we're actually going to by working on these task asynchronously we're going to be working on on both of them at the same time meaning we're going to look up all the information for the CTO and all the information for a CEO at the exact same time so it's really going to speed up your cruise so definitely recommend checking this out but it is important to note that this feature of asynchronous execution is only currently available for models using chat gbt so if you're using like llama 2 or mistol you actually can't use this feature yet you might in the future but just not right now so it's important to note all right cool so we have this set up but what we're missing is this self appended callback function so what is this well if you remember in our final app what we're going to have down below this final output section is we had that event log and that event log stored all the research from our task as it was Finding information on the internet so this is actually how we call it whenever a function is done executing and the task is completed we're going to trigger this call back function which is going to pass back all the information that this task just executed so here's how we're going to do that first we're just going to create a new function up here and we're just going to call this defa a pend event callback and we're going to pass in a few pieces of information into this the first one um we're going to actually do is the task output now the task output is actually if you look right here we're just going to dig into crew real fast and let's just look up at output so you'll notice where is it at basically whenever a task runs what it's going to return is an basically the task output uh can't find it real fast yeah so whenever you execute a task it's going to Output the result of the task and this task output right here so this is what we're actually going to be calling so task output this is what's going to get spit back and then we can actually dig into that task output and see what was see what was actually happening so that's what we're going to be using right here so hopping back over here what we're going to do is we're going to do two things first we're just going to log the event so we can actually see what's happening so we're just going to say like Hey we're pinning this event to our events log so we can see what was going on and then finally what we're going to do is actually trigger and call the append event so what we need to do is import this from our jobs manager that we created a while ago and we're going to say hey for job ID number 12 this task just finished so this is what the task you know spit back out to us so you know it might say like the CTO of Apple is so and so and here's an interview with them so go ahead and just add that to our logs so that's how all of that's working so like I said if you have any questions on this feel free to ask it down in the comments below or hop over to our school where you know you and I can talk about this more but this is everything that we need to set up for our task file so let's hop back over to our crew now that we have our task set up and we're actually going to start actually kind of connecting some of the dots so now that we have our test set up let's go ahead and remove this Tod do and we're going to go ahead and import them real fast so task is equal to come back over here our company research task so paste that in real fast we're going to import it fantastic and now what we're going to do is two separate things so instead of just saying you know our company research task is equal to uh basically you know creating a new one of these what we're going to do is we are actually going to iterate through each one of the companies and positions and create a task dynamically and the reason why we want to do this is because if you look in here what we're trying to do is for every company so imagine we said apple and Tesla for every company I want to look up at Apple I want to find the CTO and CEO and then for you know Tesla I want to look up their CEO and CTO and for Ford I want to look up their you know CEO and CTO so that's why we've kind of set up this task to take in one company in multiple positions so we need to as we're building our task actually design it so we're passing that information in properly and here's how we do that I know that was a mouthful but here's what it looks like in action so you can see it so we're going to create our company research task and this is going to be equal to an array or a list and here's how we're going to populate this what we're going to do is we're going to create a task so task. compan research and we are going to pass in the company research agent because you can see we're passing in the agent so company research agent then we're going to pass in a company and then we're going to pass in after that we're going to pass in the positions well you'll notice company is squiggly so we we don't have that variable defined yet so here's how we create it well we're going to do a for Loop so we're going to say for company in companies I want to go off and create this so this is how we go about making this happen um let's say I didn't mean to put the square brackets there yeah but basically what this is going to do is it's going to create for every company we have listed it's going to create a task for us that's basically what's happening in a short sentence every company we're creating a task that was a mouthful but don't worry what we're going to do now that we have all of our task set up for our research task what we're going to do is we're going to pass all of these task into our manage research task so let me show you what that looks like real fast so we're going to say task. manage research and if you remember let's look at what we need to pass into it we need to pass in our agent so that was our research manager next what we needed to pass in come back over here we need to pass in our companies and positions so companies positions and then finally what it's telling us to do is we need to pass in the list of task and just to make this go full circle if you hop back in here the reason we passed in task is because we were adding that to the context for this so you know as we go off and finish researching all those companies and positions we want to pass the result of this into our manage research task so that it can aggregate all the data and then finally put everything you know all nice and pretty into one final result for us so I hope that makes sense that was a lot of what's going on but like I said if you have questions drop it down below I'll make sure to help you guys out for it okay cool well now that we have set up all of our task and we've set up all of our agents let's go off and actually create our crew now and set it up so what we're going to do is just say let's see delete that so we're just going to say self. crew that we set up here earlier we're going to set it equal to a brand new crew so we're going to say crew we're going to import it from crew AI up here so from crew AI import crew and then what we're going to do coming back to here is we're going to pass in all the necessary information into it so if you hover over it you can kind of see everything that we need to pass in but in our case we only need to pass in our agents and our task so we're going to say agent is equal to and then we're going to pass in the two agents that we created up here so it's going to be our research manager and then it's going to be our company research agent and then next we're going to pass in our task and our task this one's going to be a little bit tricky but basically what we're going to do is we're creating a list here and what we want to put in this list is going to be all basically we want to put a list in a list so here's how we do that just copy and paste this right here and basically if you put this asterisk in front of it it almost spreads that list out into into this list so kind of just flattens it out it's like the best way I would describe it if this is your first time using that little asterisk operator so this was a list we're trying to put the list in a list but we want to flatten everything out and then finally what we're trying to do next is we want to put this new manage research task inside of here as well so we're going to do that real fast and fantastic so we've now created our crew with all of our agents all of the dynamic task we just created for research and our manage research task and then finally just so we can see what's going on we're going to set verbos is equal to two and what this will do is it'll make sure we basically get logs for literally everything all right cool so we just lock uh knocked out a ton of stuff so let's go ahead and actually hop back over to our API and inside of here we're actually now that we have everything set up for our cruise we're going to finish connecting the dots whenever we kick off a crew let's go ahead and start knocking that out real fast so when it comes to creating this function let's walk through the step by step well the first thing is we want to set up the crew well here's how we're going to do that we just created this create company research class over here so we're going to call company research crew right here so company research crew let's go ahead and import it real fast what you'll notice is we need to pass in the job ID so we have the job ID from right here so job ID fantastic and then what we're going to do is actually go ahead and save this so we're going to say company research crew because this was a class so we created an object from that class and then what we're going to do now that we have this object what we can do is actually call the setup crew function that we created and then we're going to pass in the companies and positions to this so that we can actually set up our crew and hopping back over here you'll see this is where we go off and set up our agents set up our task and we create the crew and save it right here to self. crew so coming back over here what we're going to do now is we can actually go ahead and kick off that crew so we can say results is equal to company research company research Dot and then now we can call the kickoff function so whenever we call the kickoff function let me show you what it's doing this is where we came back down here and we said all right we're now going to kick off the crew so this is where we're going to say hey we started it so we're going to log our log that we're starting it and then we're actually going to come in here and kick off the crew that we created up here so here's where we created the crew and here's where we kick it off okay cool so now that we have that set up what we can do is we want to actually go ahead and put this in a try statement just because sometimes can uh things can go wrong when we're running the crew so what we're going to do next is we need to have an accept to handle the case when something does go wrong so this is where we're just going to say you know hey we're going to print it something went wrong and then we're going to use our pinned event logger and we're just going to add the error that hey the crew failed let's import that real fast and then what we're going to do is with the jobs lock so with jobs lock so this was remember from our jobs manager earlier so let's go and import that so come back over here our jobs manager so we're going to say from jobs manager import jobs lock great and what we're gonna the reason we want to grab this job lock is because for this specific job what we want to do is update the status and the result of the task so what we're going to do is go ahead and grab that jobs dictionary which is storing the state of everything and then we're going to grab this specific job ID and then what we're going to do oh we actually need to go ahead and is it going to let me import it real fast ah it's not actually so let me do this so we also want to grab the jobs object great now look looks good and what we're trying to do is we want to update the status of this to equal error and then what we want to do is update the final result of this job to so I'm just going to do this we want to update the result and we want the result to be equal to just let's stringify that error that we just grabbed right here okay cool so that's the case when something goes wrong but let's talk about when something goes right well what we want to do come back down here is once again we're going to use our job block so with job block I want to update the status to be completed cuz you know this crew is going to take you know a few minutes to run but once it finally finishes what I want to do is actually update the status to be complete and I want to update the result and I want the results to be equal to this so but sometimes it's not going to like I said this was a try block so what I need to do is actually go ahead and move the results up here this way this result is going to update up here and now I can finally grab it back down here okay that looks great and then finally what we're going to do now that we've updated the job results is we're also just going to go ahead and append that final event to say yep the crew completed so this way we can have a time stamp so one more time we're going to pass in the job ID now we're going to grab the events list we're going to append a final event to it and we're just going to say that the we're going to make a new event to so event and this event is going to come from basically over here when we were making our jobs manager we need to do one final import so event and we're going to make it down here and inside of this event we want to say hey the crew completed as the data so data is equal to crew completed and then we want to say the time stamp is equal to now time stamp equal to date time. now okay that looks great so let's go Ahad and import that from datetime real fast that sh looks good yep I'm happy with that looks so this is the happy path is something looks great and then yeah this we basically just went ahead and implemented all these to do so let's go ahead and get rid of that real fast and get rid of that so yeah just to recap what we did we are going to try to kick off the crew we're going to set it up kick it off once the crew finishes after running for a few minutes we're going to save the results here once the crew like I said finishes happily we're just going to update the status to complete so we can tell our front end hey dude you don't have to keep searching and pinging the back end to figure out the state we're done here are the results I saved them for you and then what we're going to do is go ahead and just to our event log we're just going to save a final time stamp when this crew completed just so we can see oh yeah it did take three minutes to finish all right so that looks great so I'm pretty happy with the way we have this API set up for kicking off the crew but let's go ahead and actually update this final part down here where right now we're just actually returning the status of the job but what we really need to do is update this G endpoint so that whenever we do look for job ID number two we actually want it to get back all the information that we're saving as we're updating our job and everything so let's go ahead and actually just knock this part out real fast so so what we're going to do is just go ahead and create some space for ourselves and then walk through this step by step so the first thing we need to do let's just go and put some dues we need to lock the job once we lock the job we're going to be able to like see if it exist and then so we're going to just like check to see if it exists check to see if it exist then from there what we're going to do is right now all the data even though in our models we kind of have them saved as this well whenever we actually try and grab these models they're really going to be saved as strings and what I mean by that is if you look back at how we're handling basically saving our results whenever we were working on finishing up the cruise back here whenever we save the results this is really going to come back as a string even though it's going to be in the format of a Json object it's going to be a string so what we need to do is actually parse the Json data and you'll see this in just a second and then finally we just need to return everything so return everything okay so let's start knocking out these to-dos that I've just created so once again with the jobs lock what we're going to do is we're going to try and get that job now there is a chance cuz this is our backend there is a chance that that job ID doesn't exist and whenever that happens we actually want to send back a status code of 404 meaning hey we didn't find this and just let the person know that Yep this job does not exist Okay cool so that's knocked out those two now what we're going to do is parse to make sure that we're getting get the Json data from our results so here's what we're going to do we're just going to say we're going to do a try cuz this can fail and we're just going to say the result. Json so this is like hey after we've parsed it well what we can do to parse the data is call json. loads and then we can pass in the job results now we need to go ahead and import Json real fast so we're just going to import and this is actually make sure you import the right one we're not importing Json from flask we're just importing the regular Json so this is what's going to convert our string over to a Json object that's going to get passed back to our front end but this can fail so what we need to do is just throw a accept catch block up here and then we're just going to just say hey if this ever fails what we're going to do is just actually make sure the job result is just equal to this and this works fine cuz let's walk through the different scenarios if the job just started well the final output of the result is just going to be a string so this will get triggered well what happens when the job is completed well if the job's completed it's actually going to be in a ajon string so we can actually parse it so this is going to catch it and work for that different scenario and if we an erir the air will most likely be a string and not a not a Json object so this except catch block will once again uh handle that use case so I hope that makes sense but this is really what's doing the heavy lifting for us to make sure that we can return everything to our front end in a nice formatted fashion okay cool we got that set up so what we're going to do next is actually return everything so let's go ahead and get rid of this and let me show you how this is going to work we're going to return a Json object so return we're going to jsonify it again so jsonify now what we're going to do in here is is we want to return a few different things first we want to return the job ID we want to return return the status of the job we want to return the results. Json that we just created then we want to pass back all the different events to the front end and we also want to give back a status of 200 because everything works so let's go ahead and do that great but this actually fully isn't going to work and the reason why is because these events are basically not in the proper format so what you really need to do to make sure our events come back in the proper format is do this so basically what we're going to do is we're going to return an array where everything in that array is we want to format it to something properly so we're going to say hey for every event and the job's event I want to update the timestamp to be in an ISO format and I want the data to look like this so this is just something you you basically can't just pass back models you have to pass back strings inside of this so that's why we had to to iterate through all them and reformat them okay cool well we have just set up everything inside of our API so what I'm going to do is just go ahead and save it and now what we're going to do is run this backend script and we're going to go ahead and try actually testing it we're going to try hitting the post we're going to see if it kicks off a crew and then we're going to yeah we're going to test the post kick off a crew and then we're going to test fetching it so let's go ahead and open up Postman real fast and start trying this out oh real quick guys I actually made a mistake we aren't done setting up everything if you remember earlier I said we had some to-dos when it came to setting up our agents we actually have to go ahead and add our tools so I meant to do that real fast so what we can do is actually head over real fast to our tools folder and we're going to open up that YouTube search tool now this tool I'm not going to go super into depth on like coding it out just because there's so much that goes on but I'm going to walk you through it line by line so you guys can actually see what's going on inside of this and understand a little bit of the why behind what I did so when you're off creating your own tools you'll understand what we want to do too okay so here is the YouTube search tool and it is composed of a few different components so there's the YouTube video search tool itself this is what we're actually going to be using inside of our actual code so whenever we want to go off and search a video this is the tool that we're going to going to use but what we have to do is we have to Define what arguments we want to pass into this tool so you know as the crew is determining hey I need to look up the CTO of Tesla and I need to find some YouTube interviews about them well this is actually the tool that they're going to use and this is how we tell it that it can interact with this tool so we tell it you know once again we're using base model we're extending from our base model cuz we're pretty much typing up everything using pedantic for much better performance with our crew we're saying hey you can pass in a keyword so this is what you want to look up and then you can also pass in the maximum amount of results you want to get back so you can get back three videos 10 videos it's up to you to tell me what you want so that's what we're doing right here we're saying hey for our YouTube search tool here's the name of the tool and this is a brief description of what it does just to give the crew some context and whenever you want to use it this is the argument schema that you need to pass in you need to give me the keywords and Max result and then whenever you go off and create a tool this is basically you have to create a underscore run function this is just the default run function that gets called anytime you use this tool so let me walk you through this real fast we're saying whenever you run this program you need to pass in the keyword and the maximum results and we'll give you back a list list of video search results and a video search result is nothing more than a title of the video and the URL to the video that's all we really need for our use case but here's what's happening we're going to go off and make a request to the Google API and we'll set this up in just a minute but what we're going to do is make a request to the Google API and we're going to pass in some parameters saying hey here's the keyword I want you to look up here's the maximum results I want to only look up videos and here's my API key so you know that you're making this request on my behalf then we're going to make that request and we're going to get back a response and what we're going to do with that response is we're going to convert it over to Json just so we can actually start parsing through it and grabbing different properties and we're going to get the items that were found in this search result and if you actually go off and look up the Google API it'll give you a perfect tutorial of how to use their tool but this is just a quick speedrun but the important thing is what we're going to do is we're going to get back a list of items that we found in our YouTube search and we're going to iterate through each one of those items items grabbing the specific information we want which is the title and the video URL so here's how we do that we're going to have a results list and what we're going to do is grab the title from the item then we're going to grab the video ID and to get the video URL what you do is you put the video ID at the end of the video URL and that's basically how you get the video URL and then we're just going to compact or basically add all of that information to our results list and then we're just going to return it so that's how this custom tool is used and if you look back over here we need to actually go ahead and add it into our agents. py so what we're going to do right here just come back down here we're going to go ahead and initialize this tool so we're going to say self YouTube search tool and it's going to be equal to our YouTube video search tool and that's come back over here that's the name of it right here so we can go ahead and import this from tools. YouTube search go ahead and import that great that looks good so what we're going to do next is actually go ahead and I'm going to show you how you guys can set up that API key that it was asking for right here so what we're going to do we're going to head over to Google and once you're on Google what you're going to do is just type in Google Cloud API and you're going to want to click that Google Cloud platform link which will take you over to right here now if you haven't created a Google Cloud platform before you're going to want to go ahead and do that it's completely for free but you're going to need to set that up and once you've set that up what you're going to do is come in here and you want to create a new project I went ahead and I'm just going to be using an existing project just called crew aai automation but please go ahead and just create a new project and when it's done it'll take you to a screen that looks just like this now here's what you need to do first you need to click API and services and this will open up a new window and what it'll do is it'll show you your enabled apisi and services now in our case what we want to do is we want to enable YouTube data so you can come in here and you can type in YouTube and we want to click YouTube data API V3 once you click that it'll show this result right here and what you want to do is you want to enable it your screen will probably show disabled but you want to go ahead and enable it and this will allow you to actually start making request from your application over to using YouTube Okay cool so once you've set up that let's hop back over here and let's go back to uh Google cloud and then what we're going to do is we need to actually go ahead and get an API key so once again click API and services and then what we want to do is go over to credentials now once we're on credentials what you and I want to do is we want to go ahead and create a new API key cuz if you remember what we're trying to do is we want to get this API key right here so all you need to do is just right at the top click credentials click API key and it'll actually generate an API key for you and this is super secret don't share this with anyone else or they'll be able to make you know requests on your behalf so I'll show you how to keep it secret in just a second but click copy and then what you're going to do is you're going to head back over to your application and we're going to create aemv file and this EnV file is where we're going to start storing all of our YouTube credentials and our open AI credentials so what we're going to do is just click YouTube API key come over here paste it in fantastic so so we now have access to whenever this runs it's going to grab our environment variables that's linked to YouTube API key and it's actually going to get this string right here great this looks good now what we also need to do especially if you're going to be using GitHub you need to add a GI ignore file now what this get ignore file can do is we can add in aemv file and what this will do is say Hey whenever you're going off and uploading everything to GitHub I want you to ignore this.v file and this way it's just going to keep our environment variables on our local computer and not up on the internet to where someone else can grab them okay cool so that's what we're going to do to get YouTube set up and we also actually need to go ahead and make another change and we need to go over to open Ai and we need to go ahead and actually set up our API Keys over here so let me go ahead and open up another browser real fast and now I'm just going to type in open.com and then I'm just going to go over to log in once you log in you're going to go over to API and I'm sure you've probably done this a ton of times I just want to show you guys exactly what you need to do you're going to click API keys we're going to create a new API key so I'm just going to call this nextjs crew AI YouTube this is going to create a secret key for me now once again you're just going to need to copy this one and keep it secret and you're going to come back over to your code and you're going to just paste it in right here now what you need to do is we need to name this the proper thing so in our case we're going to call this our open AI key and this is just going to save right here and this way whenever we were using our llms earlier like this one in our agents file what this chat open AI is going to do is by default it's going to look for our open AI key so open AI API key yeah so whenever it looks for default to figure out what your API key is it's just going to look up for this key right here and that's exactly what we have it saved at Okay cool so now that we have YouTube search set up we actually need to set up one additional tool so let's come back over here to our agents. py file and what we want to do next is we need to give our agents the ability to go off and search the internet so you see I have this search internet tool well here's how we're going to create that we're going to come up here to our initializer and Constructor and we're going to say self and then we're going to call this our search internet tool and this one we're actually going to use the serer dev tool and the reason why I'm using serper is because they do a great job of searching the internet and then just providing us a snippet of the article anytime I've used any of the other API tools to go off and search the internet they give me back way too much information and this blows up in our face because as we're having to parse through all this information our agents kind of get a little wonky and are like hey I'm doing so much I'm trying to read too much this is way too much context and a lot of the times they'll provide the wrong results but serper does a great job of only giving me back the information that I need so what we can do is we can actually import this tool over from crew aai tools so here's how we're going to do that we're going to say from crew aore tools we're going to import our serer Dev tool fantastic so now we have access to this tool but we're not done yet we actually need to go off and get an API key for this tool as well so what we're going to do head back over here and we're going to go to serper dodev we're going to log in and it's completely for free you get up to you know 2500 free queries so let's sign in real fast so I'm just going to sign in for you guys if you haven't signed up before you'll need to do this real fast let's go ahead and do this great so I'm going to sign in and what we're going to do is you're just going to click API key up in the top right hand corner and this will go ahead and create an API key for you let's copy it and then what we're going to do come back over to our application ourv files this is the last time we have to do it but you know there's just some setup process to this so we're going to say serer API key and then this one's going to be equal to that code we just grabbed from serer Okay cool so we now have all of our tools set up so let's head back over here to our agent file this is looking good we have that set up in our initializer and our Constructor so that to-do is good and that to-do is good as well Okay cool so what we're going to do next is I'm just going to come down here we're just going to do some live debugging together so let's go ahead and start trying to run our application and actually see what happens so we're just going to do Python api. piy and this will tell us what errors we have or it'll start running our server let's just do some live debugging together okay things look great so now that things look great what we're going to start doing is we are going to start making some requests to our backend to actually try out those two endpoints we talked about earlier so what I've done is I actually went ahead and created a basically saved some Postman setups for us so I saved the post request where we're going to go off and kick off a new crew and I went ahead and created another one which is going to make a get request on our behalf so let's go ahead and actually try starting off the this one which is our post request and in order to get it working what you'll have to do is down here you'll have to click body and once you click body you'll have to click raw in Json so this will send a raw Json object to our back end and we want to pass in the companies we want to look up and the positions we want to search on so let's go ahead try this and see if we get any errors real fast click Send and yep we did actually get a quick error let's look to see what's going on so what it's saying is one of our task doesn't have the proper information so let's work on knocking this out real fast so basically it looks like whenever we were creating our crew. piy file and we were making our task we weren't passing in our job ID which was a required parameter that we needed to pass in so let's actually close out of that real fast head over to where we were setting up our crew down here and then what you'll notice when we were creating our task right here if you look it's asking for our job ID so let's go ahead and pass that in so we're just going to say job uh self. job ID fantastic now let's try running it again so it restarts automatically so let's ping it again and just keep debugging we're going to send another request all right we have one other issue real fast so it looks like we need to do a few things and the first one is we need to fix the way we're going about appending jobs so let's go over to our jobs manager file R fast and it looks like the first error is because we are checking to see if the job ID is in the jobs and if it is we create a new job and that's not right we actually want to do if the job ID is not not in the jobs dictionary then we want to go off and create it there's another error that I realized I made too if we go over to our task. py file what you'll notice is we are just getting the task output and we're passing it along to this appendant that's not actually right if you come back down here to the task definition and then look for exported output this is exactly what we want to get so just like let this make sense whenever you get a task output it's an object and we're just trying to get the exported output of that task object so let's head back up here to our event and we are just going to put that right there fantastic and then finally when it comes to working with our crew our jobs manager there's one other final issue we need to fix real fast so if you look at this jobs Class what you'll notice is it's status event and result but we're doing status event and results plural so now that we've fixed all those errors our server should be up and running again so now let's try running our crew again one more time and then fingers crossed this got rid of all the issues and it looks like it did so now we're off researching and actually getting all of the different titles and everything so now what we should be able to do is come back over here to our git results and what you'll do is you'll want to copy this job ID come back over here and we're going to paste it at the very end of this get request just like this paste it and then we're going to start sending different requests to the back end and what's cool is you can see in our terminal that oh we just had a a get request to this endpoint and if we start looking in here you can see all the different data so you can see that we have an event that the crew started you can see the job ID right here and if we keep pinging it you'll see that we keep getting more and more data cuz it's actually searching for Ford and Lucid Motors to find all the information so congrats guys the back end is officially set up and this crew is just going to continue to run until it finishes wrapping up but we're just going to let that finish and what we're going to do now is we are going to head back over and actually start working on our front in task now so that we can actually go ahead and connect everything up so let's go ahead and dive into setting up our next s application all right guys so it's now time for us to start building out our nextjs front-end application and just as a precursor if you haven't already installed nodejs on your computer you need to go ahead and do that before you can start running these commands so I'll have links down in the resources below to show you how to install node and npm which is your node package manager okay so go ahead and do that pause the video but if you already have finished that step it's now time for us to start actually going ahead and creating our next JS application so what you're going to want to do is change directory into wherever you have set up your master nextjs folder so you can see if I type in LS you can see that uh we're in the root folder of our project where we can see the crew AI backend now what we're going to do is actually go ahead and create our next JS application so what we're going to do is type in npx which is going to stand for npm executable then we're going to do create next app so this is going to say hey go me a create next app then we're going to use the latest version of nextjs then we're going to say the name of our project so in our case we're just going to call this our nextjs app and then finally we want to make sure that we use typescript when creating our nextjs then we want to use Tailwind Tailwind is going to be a package that allows us to style our nextjs project super easily and then lastly we want to do es lint to make sure that we properly lint our project and make sure we don't have any bugs so we're going to go ahead and hit enter and what this is going to do is take a few seconds to go off and actually install everything but we're going to walk through the install wizard real fast so the first question is would you like to use the source directory we're just basically going to hit the default for everything so we're going to say no would you like to use app router yes would you like to customize the default no all right so now it's going to go off and install all those dependent series I was just talking about they should take a few few seconds to go ahead and install just to set up our entire nextjs application but once it finishes running what we can do is go ahead and do code Dot and this will actually open up the entire folder for our backend and front end applications so let's go ahead and do that so let's open up visual studio code here and just a second so now we can go ahead and see it yep fantastic so now you can see from our root folder we can actually access our backend application and run it or we can come in here to our nextjs application and actually start running it so what I'm going to do is just quickly walk through how this nextjs application works and then we're actually going to dive into building out this whole process and there's really only about like four or five files that we need to do to get our frontend application up and running so I'm super excited for us to knock this out and I actually think the best way to go ahead and show you how this project worked is to actually go ahead and run it and point out all the different files so what we're going to do is come down here into the terminal we're going to change directory over into our nextjs front end application and then once we're in here we're going to go ahead and run it by typing in npm runev now this should start our development server and you can see it's going to pop up on Port 3000 so it's running what I'm going to do is just put everything side by side so you guys can go ahead and see this application in action so here it is should start up and let me walk you through the files Okay cool so it's up so here is how nextjs works when you're using App router in nextjs 14 cuz that's what we're using right now so what happens is we have our root folder which is going to be our app folder this is where you're going to store and code up all the different pages that you want to show up in your application and the way next J works is it does dynamic route based pathing so what I mean by that is the app folder is your root directory so if you go to like just for/ root this is going to be your root directory but if you were to like set up another folder called like test uh here we go another folder real fast we're going to call this one like test route well what this would do is if you set up like a page in here page. TSX what would happen is if you actually code this out you could then go to the test test route folder Okay cool so that's like the basics of the dynamic based path routing thankfully this is just going to be a single page app so we're not going to have to do any of that but I just wanted to explain that yep everything is going to live right here in this root folder Okay cool so let's let's actually dive into another component real fast that's super important is the layout so the layout is actually what wraps around the entire basically uh this entire page so what you can see is let me screw it over a little bit but this layout is actually just going to wrap around this basically the page so all the everything that you're seeing on this page right now gets wrapped around this root layout right here so you can come in here and do some styling or really what anything else we wanted to do we could just wrap it around right here okay but in our application we really need to go ahead and just set up a few different components and pages to really stub out our application and I think the best way to do this is to actually go ahead and look at the final application and just call out all the different components we're going to make just so you can see it all in action before we go off and actually build it so let me go ahead and show you guys the final application real fast so just as a recap here's what the final application looks like so what I'm going to do is start calling out the different parts of the application and then we're going to go just stub out those files that we need to make so the first thing is we need to create this header up top so this is just basically going to be where we're going to just have like the root of our application and what we're going to do for this is we're going to come over here into our root of our project where it says nextjs we're going to click new folder and we're just going to call this our components folder and then inside of here we're going to go ahead and make a header component one of the key parts of working with react and nextjs is the fact that you're going to put everything into selfcontained components that just makes your logic a lot easier and prevent you from making like one huge file that just has hundreds of lines of code in it so what we're going to do first is go ahead and make our header. TSX file and like I said this is what's going to be this Top Line okay cool we'll work on building that in just a second the next thing that we need to work on is creating a few different components that are going to happen in this basically we'll just call this like the root body of the application so the first one that we're going to work on is creating what I'm going to call the input section so that's right here and right here I apologize for my my ugly drawings but I'm trying to show it to you guys but basically what this input section is going to comprise of is an input field an add button and it's also going to house all the different companies and positions as we add them into our field by clicking add so this is all going to get wrapped up and the part that's cool is we'll write one input section uh component and we'll get to reuse it basically right here and we'll get to use it right here so that's one of the nice Parts about making components is that reusable so we're going to head back over to our components folder and we're going to go ahead and create the input input section. TSX great and then we have to do a little bit more work so the next component that we're going to work on is going to be our events detail component now this component basically just has the place where we're going to just store all of the strings and basically all the data that our crew AI is sending back to us from the back end so so all the raw text is going to go right there so what we're going to do come back over to the components folder and we're going to create our event I event logs uh vent log. TSX fantastic and that's going to go right there and the very final component that we're going to work on is going to be this final output section and that's where we're going to have that really nice looking Json file where we're going to store you know the re all the research data that we do so we can have the links for the Articles and the links to the YouTube videos so we're going to come back over here into our components folder and make our final one which is just going to be called our final output final output. TSX okay great so that's where we're going to make all of our components and we're going to start knocking these out one by one starting with a header and the very last thing that we have to do is we need to have we're going to use something called a hook now don't worry we'll basically explain this a lot more in detail when we get to it but what needs to happen is we need to have one area where we're going to store all the information for the companies we add the positions and it's going to store the final output and the event details so it's basically going to do all the heavy lifting for us of pinging our backend and saving the state for everything on our front end so what I'm going to do is just call this one our use crew job. TSX now this is going to be a super important file but we're going to get to that in just a minute okay cool so now that we've stubbed out all the different files that you can see are green these are where we're going to be doing all of the major Lifting for this application so what I'm going to do is close this out and what we're going to do is just a little bit more clean up here in our main page so we're going to clear all this up so that we can work towards making that final website that I just showed you just a second ago so the first thing we're going to do is actually delete everything inside of our home file right here so everything from this main going all the way down to the bottom main you're just going to go ahead and delete it and then inside of it we're just going to create a div and we're just going to call this the homepage so if we save that and then actually kind of rerun the application open up our terminal again npm run Dev actually want to do a side by side so you actually can see what we're building as we do it so let me go ahead bring over another terminal window for you guys another website real fast here we go get this going up and then everything's running on Local Host 3000 so as you can see now whenever it loads it should just be a blank black page that says home so now what we're going to do come back over here is we're just going to add some styling and this is where we're going to start using Tailwind CSS so we're just going to say class name and then we're going to say I want the back background to be white I want the minimum height of our main page to take up the entire screen and I want the text on this application page to be black fantastic so now whenever we come back over to our application you can say oh it looks normal and you can see that our Tailwind Styles just took effect okay great well now that we have that set up let's go ahead and actually move over to our header file that we created cuz this one's going to be a super simple component that I want you guys to knock out so what you can do is actually type in the commands r fce and what this will do is it will automatically create a react functional export component for us and you just hit Tab and it'll go ahead and go ahead and create this basically this template folder for you or template file that you can show up in your application now how the heck did I do that well if you go over to your extensions and then type in basically react what you'll do is you'll see that there is this file right here this es7 file what this does is it has Snippets so what you can do is just type in those shortcuts that I just did and you can actually you know basic basically import template react code into your application and make it super easy so definitely install this if you haven't already so what I'm going to do head back over here great and now what we're going to do is just let's go ahead and knock out the rest of this Logic for the header file so what we want to do in here is first off we want to say we want the background of our final website to be black so BG black and then what we're going to do is have another div and this extra div is basically where we're going to house our header and this header is just you know we want to make sure that we have a little padding on the left and right so what we're going to do is we're going to say we want this to take up MX Auto so basically we want to position it in the middle and add some margin on the left and right we want to add padding vertically of four so this is about 16 pixels and then we want to add some padding xais and we want to make set this to five which is going to be about 20 pixels wide okay great and then inside of this what we're going to do is go ahead and put our header so our H1 and inside of our H1 we're just going to say nextjs crew tutorial fantastic so what this is going to do is make sure we have a header and what we can do next is actually make sure that this shows up properly so we want the text on this to be white we want the text on this to be super large so 3XL it's going to be about 30 pixels and we want this to be bold so font bold okay this looks great now what we're going to do is try and get this header to pop up in our application so this is actually going to be super straightforward if you remember from just a minute ago I said that layout folder is the one that wraps our main page so what we can do is come here and add our header above our body so it'll show up on all of our pages so what we can do is just come in here and we'll just type in header great and then let's do this and it's supposed to be header capitalize header yep and you can see it's trying to import it from our components header that looks great so now if we come back over to application you can see fantastic our header is now popped up on the top okay so what we're going to do next is we're going to head back over to our page cuz this is where all of our root logic is going to be stored for you know showing out where we want basically all the components in our application to show up so we're going to do a little bit of styling and then as we do a little bit of styling we're going to start working on each component one at a time so let's go ahead and start creating basically the container that's going to house everything inside of our application so what we're going to do is just say div and then inside of this div we want it to be a flex div this is basically going to allow us to do Flex styling so we can make sure things can show up in rows or columns so we're just going to say flex and then what we're we're going to do inside of this is we're going to work on our left column first and then we're going to work on which is going to be our input section and then we're going to work on the right column last which is going to be our output so what we're going to do for our left column I'll just add some comments so you guys can see it left column and then this is going to be our right column great so for our left column what we want to do is we want to say class name is going to be equal to width and we want this to take up 1/ half of the page and we want to add a little bit of padding around it in the X and Y AIS so we're going to say P4 and now what we're going to do is go off and actually add in the input sections that we're going to create in just a second so what we're going to do is say input section and inside an input section we're actually going to work with a few different fields so I just want to show you what information we're going to pass into it before we build it so the first one is going to be our title so what do we want to call this input section well we want to call it companies and then what type of information do we want to have as the placeholder for our input field well we want that to be you know add a company so we're going to say add a company great and then what we're going to do next is we need to pass in some data so we don't have this set up yet so what I'm going to do is we're going to do a little bit of refactoring as we build just so you can see how everything would work if you're building out a normal react application in real time so what we're going to do is say data is equal to and we'll just have some dummy data right now we'll just uh we'll basically just we'll just put null right now and then next we'll do is set data set data and what set data will do is what will allow you to actually set the data that you're going to pass into here so um right now we'll just say we'll just do an empty basically an empty placeholder function this doesn't mean anything right now I just want to show you guys what it's going to look like and then we're actually going to start building it out so this is going to be our placeholder code for our companies and then here's going to be our placeholder code for our positions so positions and then we're going to say add a position fantastic so this is basically like where we're going to show up in the top left hand corner where we can say hey add your companies and add your positions all right well before we move any more forward let's go ahead and fill in these dummy placeholder codes that I just did for the data and the set data so what we're going to do is we're going to come up top and we're going to start using something called state so what we're going to do is we're going to say const companies and companies are basically going to be an array of strings so we're going to say use State we're going to add that from react and it's important because we're going to start using state anytime you start using state in a nextjs 13 or 14 app router application you need to Define that you're using client and what that means is we need to allow we're basically going to be rendering this component on the client and the reason we're doing that is because we want to like store State on the client fantastic and if that doesn't make sense right now don't worry we're going to work with this more so it'll hopefully make more sense later on great so now we have our companies set up so we actually go ahead and put those in here so we're going to work with our companies and then right here we're going to pass in our set companies and then for our positions we're going to add positions here and then down here we're going to have set positions okay so I've shown you how this works at a high level we're going to pass stuff in but now actually let's go ahead and start building in those input sections just so a lot of this makes more sense so let's head down here to our input section component and then once again we're going to type in RFC and now what we're going to do is we're actually going to start stubbing out the code to make this generic reusable component so that we can actually add it to our homepage let's go ahead and start knocking this out so the first thing I want us to do is go ahead and Define the props that we're going to pass into this component so let's actually minimize this head back over to this page and you can see what we want to do is we want to pass in a title placeholder data and set data well here's how we do that over here in react land we're going to Define an interface and this interface is going to Define what is going to be passed into this component so we're just going to call it our input section props and then inside of here we're going to Define everything that we want to do so we want to have a title placeholder we want to have data so in our case that's going to be the positions or companies and then we want to provide the ability to set the data so every time you add or delete a company we want to be able to to basically call a function and react whenever you're using state it ends up looking like this you're basically dispatching a set State action so I know that might be a little confusing but as you get used to react more this will make more sense so I'm going to go ahead and save that and what we can do now is we can actually pass in our props down here just like this and now we can access them so we can access our title we could access the placeholder we can access everything okay cool so what I want to do next is go ahead and actually stub out the different components and functions that we're going to use inside this component so the first one is we want to be able to store the input value that the user's typing so if we head over to the final application this is right here you know as the person's typing at a company or position we want to be able to save that information and what we're going to do is once again we're going to use state to store this information so we're just going to call this the input value set input value and it's going to be a string let's go and import that from react that looks fantastic we can actually go ahead and import these from React 2 that way you don't have to type react everywhere and you'll just say update from react update import Port from react fantastic so that's looking great so we have that set up and now that we have our input value let's go ahead and actually handle the two events that are going to happen inside of this component the first one's going to be when the user clicks add so what we're going to do for that function is do this we're going to say const handle add click so whenever someone clicks the add button we want to handle that event and what do we want to do well in our case what we want to do is first just do a little bit of cleaning up so we're going to say if input value. trim is equal you know doesn't equal empty quotes meaning that it's a not empty value what we're going to do is we're actually going to update the data that's being passed in so think of this is just like adding another company to the list so we're going to say set data right here and we actually have to grab it out of here set data so we're going to set the data and what we're going to do this is just react basically allows you to grab the previous data and what we're going to do is appin to it so this is the spread operator so think of this was like a list that looked like this you know one 2 two 3 what we're doing is putting another array in here but that spread operator is actually just going to like add the items in directly like instead of it being like four five six whenever you do the spread operator it actually spreads out the item so it makes it look like it's not an array and array and it makes it just do that where they're all flat numbers Okay cool so that's what's happening here when we're spreading the previous data and at the end of that data we're adding in our new input value so that looks great and then what we're going to do is we're going to update the input field to be blank that way the user can add in another company right after this okay great so that's how we're going to handle adding The Click button and the next thing is we need to create an event handler for whenever the user removes an item so what we're going to do for this one is we're going to say handle remove item and then what we're going to do for this is we actually want to store the index that the user basically gives us so this is going to be you know if this was an array and they delete item number three we want to be able to delete that so here's how we're going to do that we're once again going to call set data and what we're going to do is we're going to look through through the data and we're going to filter it and what we're going to do is we want to basically um you know this underscore is the data itself the I is going to be the index and what we want to do is we want to filter out all the data where the index of this doesn't equal the past in index so let me just write it out all the way so you can see what it looks like so we'll do this so and we actually can do prev data prev data just so we can follow react best practices PR data fantastic so yeah so we're going to look through the previous data that's already in already being passed into us and we're going to filter that array and what we're going to do is pass back all the data in that array where the index of the current item we're looking at doesn't equal the index of the item we want to delete so this is just a quick shortcut for deleting data Okay cool so what we're going to do next is we're going to work on setting up this HTML code so that we can actually have nice looking inputs that look just like this and I think the most thing we can do is actually come back over here and look at the final output one more time and just really Define what we're going to be doing well what I see whenever I look at this input component is I see that we have basically a title up top and below that title we have an input area where on the left- hand side we have an input on the right we have a button and then below that what we're going to do is actually add the ability to basically add companies over and over and over again so we're basically going to be need to make almost like a bulleted list or an unordered list to store all of the different companies that we want to look up cuz this this list just keeps on growing okay so let's actually come back over here and start knocking that out so the first thing we want to do is let's just go ahead and add some margin on the bottom of this so that we have space in between each one of our inputs the next thing that I want us to do is come in here and we want to go ahead and add that title so what we're going to do is this will actually just be a H2 and what we want in this H2 we can just go ahead and pass in the title so we need to come back up here and we need to grab the title looks great so now we have our title let's go ahead and style it a little bit so in our case we want the text to be extra large and we want the font to be bold looks great and then what we're going to do back down here well this is going to be the area where let's go and put some to-dos this is where we're going to have the input and then below this this is where we're going to do our you know our list of data okay so for our input section what we want to do is we want to use flex items once again so we're going to say we're going to use the flex proper and then what we want to do is we want to say we want our items centered vertically so you know they look nice and then what we're going to try and do after that is we're going to set some margin top to two so this isn't bumping up against our title and then what we're going to do inside of this div is first we want to go ahead and put the input so this way it'll show up on the left so we'll say input and then what we're going to do fantastic let's fix that input so we're going to have an input and then below that we're going to have a button and we'll fill these out with some Styles here in a second button add great okay so let's go ahead and this should start slowly oh I actually got to fix that real fast U what what I'm going to do real fast for you guys is we're going to come back over here to our page and inside of our page I'm going to go ahead and import this input section that way as we're building it we can actually see what's going on and we're getting a quick error it's saying this is not a compatible type so if we come back over here to our input section what you'll see oh we didn't Define the type for these what we need to do up here guys is we need to say that this is a string array and then down here we need to say that this is a string array as well okay fantastic that was a quick type issue but now when we come back over to our application you can see like we have a rough outline of our input section so let's keep chugging along and making them look nicer so when it comes to our input tag what we want to do is we want to say the type of this is going to be text then what we want to do is the value of this input section is going to be equal to our input value and then whenever the user changes this input what we want to do is actually set the input value to the value we just tyed in so this is event is e and you can see that this is a HTML input element so when you grab the Target and the value this is basically just if you're not used to react this is how you go about adding whatever value you type in here and press add that's how you grab that value e Target value okay cool then what we're going to keep doing is we want to set the placeholder for this to be equal to the placeholder that we're passing in into our props fantastic so we're going to say this is going to be equal to placeholder and then finally what we're going to do is we're going to update the class name and this is where we're going to add in some Styles so we want to add some padding around it we want to set a nice looking border and we want the border to be gray 300 so you can hover over it and see that you know it's a very nice faint gray and then what we're going to do is we want to round it out so this is just going to curve the sides of our input field like this you can see they're not hard angles they're nice and curved so now that we have ours rounded what we're also going to do is we're going to add some margin to the right so that the input doesn't hit the button to the right right and then we're also going to say Flex grow and if you look at what Flex grow all it does basically is it just takes up as much space as possible okay cool so look at that guys it looks awesome so that's half of the input section done now let's go over here and start working on our button to make it look nice well the first thing that we're going to do is we're going to handle whenever the person clicks on it so we're going to say on click what we want to do is trigger the handle ad click function that we set earlier so that's what we're going to do there and the next thing we're going to do is we're going to come in here and we're going to set the class name and the reason we're going to do this is because we want to go ahead and style our button so it looks nice and green so we want the background of our button to be green 500 whenever you hover over the button we want the background to be a little bit darker green so background green 700 we want the text inside the button to be white and then we want the font to be bold and then we also want to add a little bit of padding around it just so I'll show you what it looks like real fast so you can see it doesn't look nice so what we're going to do is add some padding real quick so padding Y 2 PX4 and we're going to round it out this makes our button look awesome so that's fantastic guys so now let's come down here and actually start working on our list button so line 43 okay cool oh and real quick I actually made a quick mistake this isn't supposed to be a div we actually need to change it to UL which stands for unorder list cuz you know we're going to be listing through all of the elements that we pass in you know the companies and positions and everything else but what we're going to do in here is we need to iterate through all of the data that we pass into this component so let's scroll back up to the top and add in our dat data which is going to be nothing more than an array of strings so now let's start mapping through that so what we're going to do is we're going to type in data do map and this is how we're going to map through the array and what we're going to do inside of here is you're going to open up some parentheses and then what we're going to do is Define the Callback function for the map and I know that might be confusing but basically like hey for each of the items in this array what do you want me to do with it well in our case what we want to do is grab the item and we want to grab the index so you can see right here that's what we're doing so index and then what we're going to do with this data is we're going to turn it into a HTML component so what we're going to do is we're going to say hey we want to map through each one of these items and turn it into a list item so inside of here we can just go ahead and show the item and I'll show you what this looks like that should be working one second oh as you can see we're missing a key prop so that's why it's throwing an error at us so we can just say key is equal to index okay now it should be working so if we actually head back over to our application you can see whenever we add a company so let's just do test it'll show up down here so we're halfway there now we just need to make it look nice just like this and add the handle delete button so here's what we're going to do next we're going to add in some styling so this item looks proper so we're going to say class name and then we're going to once again use flex and what we're going to do is we're going to Center the items we're going to justify between which means I want you to put as much space between everything inside of this l Li tag so I'll show you what's actually going to be in here we're going to put a span and this span is what's going to store the item and then below that or next to that we're going to put the button and that button is going to be where we're going to have the big X so what this justify between does is it puts as much space to the left and to the right as possible and what I'll do just to help you guys out let's go ahead and actually put this side by side so you can see the code as we create it great so that's looking good so now that we have our justify between what I'm going to do is put a little bit of padding on this a padding of two all around it we're going to set the border on the bottom and then we're going to set the Border color to be gray 300 and what that'll do is put a little line under it so it's starting to look nice Okay cool so now that we have that set up let's go ahead and update this button that we've created and this button if you remember this is the x button where we're going to delete this company or position so what we're going to do is we're going to once again create an onclick Handler and we're going to go ahead and call the function that we want to remove so in this case we're going to say I want to handle removing the item and I I'm going to pass in the index and this will actually go ahead and remove that for me so if I just click it I'll just show you that it works cool so our delete is now working just to test it out again so let's do Tesla let's do apple and now whenever I delete Tesla it should show it fantastic so we now know the logic is working but now let's go ahead and update the style so it looks nice so I'm going to do class name is equal to text red 500 so that should make it nice bright and red and then when you hover over this item I want to change the text to a little bit darker red so darker red 700 uh 700 so now when I hover it'll change to darker red okay cool that's looking great so I'm pretty happy with the way this works and the way this looks so now that we have set up our input section let's go ahead now and let me just make this a little bit bigger so everything's not overlapping let's go ahead and start working on the right side of this output section where we're going to go ahead and start setting up the final output components and the event details so let's go ahead close this out and start working on that next and here we go fantastic let's open up the page Okay cool so let's go ahead and start working on this right column all right so let's go ahead and stub this out so what we're going to do is inside of our rightand column what we want to do is go ahead and Define some Styles so that everything will look nice and once again what we're going to do is say the width of this is going to be 1/2 this way it's going to take up the right half of the page and we're basically just going to copy everything that we did for the left hand column so once again we're going to set some padding to be equal to before but this time what we're going to do is we're going to use flex and flex column that way all the items inside of this container show up and down vertically just to remind you whenever you go to the end result over here you'll see everything is stacked on top of each other vertically and that's just because we're doing Flex column Okay cool so what we're going to do inside of here is we're going to do a wrapper around the header of this output section so this is going to be where we're going to show an H2 and the button to start running the class or running the crew so what we're going to do is we're going to create a div in here and this div is going to have an H2 and that's where we're going to go ahead and say that this is the output section and below that we're going to have a button and that button is where we're going to go ahead and say start but right now if you notice if we head back over here that looks ugly so let's go ahead and get that working so what we're going to do is we're going to say the class name of this once again we're going to start using flex and this time we're going to use justify between again which will make sure that items have as much spacing in between them as possible and we're going to do item Center and then we're going to do margin bottom of four so this will put everything in a row and put as much space between them as possible great that's exactly what we wanted so now let's go ahead and add some styling to each one of these for our H2 we want this the text to be super large so we're going to say text to XL and then we want the font to be bold great looking nice and then now let's go ahead and make that start button look nice so what we're going to do for this one is we want the styles to say I want the background to be green I want the hover background to be green 700 just like the we've done beforehand and then what we're going to do next is I want the text to be white and then I want the font to be bold so people know to click it going to add some more styling so that we had add some padding so that basically right now if you head back over here let's actually save this so you can see what it looks like so right now if I head back over here and let's make the oh green that was my bad green 500 so if I come back over now you'll see that there's no padding around it on the x axis so if I come back in here uh make that button finally look nice we'll do PX4 we're going to get some rounded in there so we don't have hard edges and let's see if that looks good um yeah that looks fantastic all right so I'm pretty happy with the way that looks like and in a little bit whenever we add some more logic we're going to add an onclick event listener to start the crew and then we're going to also disable the button whenever it's running but we're going to work on that in a little bit all right let's keep adding some additional things so what we want to do is just go ahead and add a to-do for we want the final output component to show up top so final output and below that what we want to have is our event log so before we dive into each one of these what we're going to do is actually start cleaning up and prepare for handling all of the logic that needs to occur inside of this application cuz right now we're going to store the state for the companies and positions but we need to start doing some additional things such as like starting the run then we need to pass some final outputs over here and some more event logs out here so this is going to get a little complicated and instead of making this onepage component super super long what we're going to start doing is we're going to start using a hook so what we're going to do is if you remember earlier we made this use crew job hook this is actually going to store all the logic for basically our entire application so let me show you how we're going to go ahead and set up this crew job hook and actually you know basically do some refactoring real fast so let's go ahead and start real quick and just in case this is your first time hearing the word hook let me quickly explain what it does and I'm going to compare this to a regular component so when you look at a normal react component like our input section component from beforehand what you'll notice is it takes in some data it performs you know some State Management performs some functions and then it returns some HTML okay well what a hook is going to do is it's going to once again take in some parameters it's going to then store some State Management it's going to go off and you know create some functions but instead of returning HTML it's actually going to return the state management and it's going to return the functions that we create so it's basically just a really nice way to tidy up all of our core logic and make it to where we can just pass it in to our other component super easily and this will make more sense as we code this out I just want to like if this is your first time hearing the word hook I didn't want you to get super lost so okay let's go ahead and start coding it up so what we're going to do first is we're going to create our hook so we're going to say export cons and it's you know formal and best practices to start a hook off with the word use so we're going to call this our use crew job and then what we're going to do is I want to break this into three different sections first is going to be our state section that's where we're going to create all of our use States then we're going to start using something called our use effects so I'm going to put that down here this is basically going to be to where like hey if anything in our state changes perform some additional logic and then what we're going to do at the bottom is we're then going to pass in and create our functions and then finally we're going to return everything so this is the outline for what we're about to work on next so let's go ahead and start doing a little bit of refactoring so when we head over to our page what you'll notice is we had these companies and positions well what we're going to do delete those we're going to put those over here in our used crew job we're going to update our Imports real fast so things are looking great over here clean them up over here to keep our code nice and clean and then obviously now we're going to get some errors because hey I don't have companies anymore and I don't have any you know set companies so here's how you can actually import a hook so we're just going to say Hooks and then we're going to go ahead and import it so we're going to say const crew job is equal to use crew job now this is going to pass back the crew we create but in order to give this crew over here access to this state we need to update our return statement so this is super simple all you're going to do is you're just going to say return and then you're going to create a object so just open up some curly brackets and then just basically go ahead and pass in all of these so your companies set companies positions and set positions so what's cool is what we can do now and hopefully the light bulbs going off is you can actually come back down here and you can type in companies sorry you can type in crew job. companies and fantastic you now have given this component right here access to the companies that we Define over here so it's just like I said it's going to be a really nice way to create one object that we can pass around that has all the information that we need in it so let's go ahead and update all these so crew job and then finally we're going to say crew job Okay cool so that's looking great so let's go ahead and actually stub out a few more things in our hook while we have it open uh let's go ahead and make it full screen just so we can update a few of the bigger things that we need to do and just pass in some general information so what you and I are going to try working on next is we are going to set up the events section so as our crew send back hey I just found this on information on the internet we need somewhere to store it so that's what we're going to do here so we're going to create an area for us to store that events information so we're going to do event set event and what you're going to notice is I have this as typ string that's incorrect you and I need to actually create a new type to store the information we get back from our backend and this is going to be just called we'll just call event type and what we're going to do for this event type is it's going to mimic the data that we have coming from our back end so we're going to create a new type up here we're going to call event type and the only information we're going to put in it is the data that's going to be a string and then we're going to have a Time stamp and this is also going to be a string so let's go ahead and update that great so that's looking great and the other thing is we want to also pass in and store the final position information list so what am I talking about here when I say this well if you go back to our backend code and look at the API and then come all the way down here and look at what we're returning well um this is like I said for the event data type the timestamp and data that's exactly what we had right here data timestamp so that looks clean but when it comes to the final result if you remember we're returning a Json object and what's this Json object going to look like well if you head back over to our models it's going to look like this it's going to be a position info but the final output is going to be a list of those position outputs so that's exactly what you and I need to Define over here on our funing code so let's just go ahead and type it up so we're going to say export type and we want to create position info and then what we're going to do is just copy all the information that you just saw right in here company position name blog articles all this is going to get copied over so let's go ahead and type it up so company is going to be a string position is also going to be a string the name of the person in that position is going to be a string and then the blog article URLs is also going to be a string so URLs this is going to be an array of strings that was my bad and then if you remember when it comes to the models for the YouTube it was actually a little bit more tricky it was a named URL which consists of a name and a URL so we also need to to set that up too real fast so export type and we're going to call this named URL and this is just going to have the name as a string and then it's going to have the URL as a string that looks great so now we can actually go ahead and pass in and create our YouTube interviews URLs of type named URL and it's going to be a list of them all right that looks fantastic so now back down here now that we set up all those different types what we can do is actually start making use of them so we can do is just say position info and then we can do set position info set position I don't know why I put a capital in there so set position info list and this is going to be equal to uh use State and we're basically going to make use this type but it's going to be an array of them okay that looks great so I'm pretty happy with the way this is looking right now the other thing that I said we want to do is whenever the user goes off and clicks that start button over here we want to change the state of that to be running that way we can update the text to you know show nicely and show some responsiveness so we're going to go ahead and create that state right here so we're going to say set running and that's going to be a Boolean and we're just going to set it to false by true cuz it's obviously not going to start running right out the gate and then the other thing that I want to pass in here is going to be the current job ID and we'll discuss this more in a minute but whenever you start a job whenever we start running the crew in the backend if you remember what's it going to return to us well it's going to give us back a job ID so we need to to be able to store it somewhere on the front end so we're just going to set set it up and store it right here so and then we're going to say Set current job ID and by default we're just going to set this equal to an empty string okay cool well go ahead and give yourself a pat on the back cuz setting all this up is a little bit tedious but now that we have all of our data types set up it's going to make our life super easy as we go off and create our new functions and all of our use effects okay so what I would like for us to do now is go ahead and handle the process of starting a job so what are we going to do whenever the user clicks this start job button well let's talk about it real fast and let's create it so we can start stubbing out what we want to do as we create it so the first thing that we want to do whenever we start a job is we want to clean up the old job the next thing that we want to do is we want to make a request to our backend python environment so that's where we're going to go off and say like hey I'd like to start a new job based on these companies in these positions and then the last thing we want to do is update our state you know basically we want to say like oh hey I just started this job ID so we want to be able to save that so save our state and I'll just say job ID okay so this is the direction we're taking it so let's go ahead real fast and start stubbing these out one by one so the first thing we're going to do is go ahead and clear up our old events so we're just going to set the events array to EMP so that's just going to be us cleaning it up the next thing we're going to do is same thing clean up the old position list so that's we're going to clean up any old results and the final thing is we're going to say like hey I am running a new job now so we're going to say set running to True okay cool now when it comes to making our request to our backend well this is going to be a little bit different if you haven't used it before what we need to do is we need to install a new package called axios so what you can do is come down to your terminal and type in npmi axios and this will go off and install the axios library now what axios does is it makes it super easy to set up sending requests and to a backend so you can send a get request post request and then it'll help you basically structure the response you get back so let me show you I mean so what we can do is say const response is equal to and let me close that out and we'll just say we're going to await it and anytime we make an a oh a anytime we await a call we need to set our function to be asynchronous and basically that just means this call is going to run asynchronously just in the background but what we need to do is await our request to a our back end so what we're going to do that might not made a ton of sense let me just redescribe that real fast whenever you are working with JavaScript and typescript you have the ability to make function calls asynchronous and basically what that means is they're not going to block anything so other code can continue to run after this gets called but whenever you're working with asynchronous functions you sometimes want to wait for things to happen so in our case we want to wait for our backend response to get back to us okay so that's what we're doing here but what we're going to do is we actually want to be making a request to a specific endpoint so we have set up our code on our back end to run on Port 3001 so here's how we're going to access it we're going to Say Hey I want to make a request to H HTTP The Local Host Local Host Port 31 and if you remember if you go back over to our backend code where we set up our crew you can see down here at the bottom we're making request to Port 31 so that's why we did that all right and we actually want to specifically make a request to the API crew endpoint all right and what do we want to pass to this backend function well we want to pass our companies and we want to pass in our positions so that's how we're going to get our front end to pass in information over to our backend now what's cool about using axios is you can actually go ahead and Define the type that you expect the response to be so if you look over here at our API crew function you can see whenever we make a post request you can see that we expect to get back a job ID so here's how we handle that over here we're going to say I expect when making a post request I expect the return data to have a job ID and I expect this to be a string great so that's how that's going to work and what's important though is when you make request to a backend it's not always guaranteed to work so it's best practice to go ahead and wrap this in a try statement to say like hey let's try to make this request and if something goes wrong what we need to do is we need to handle it in a catch statement so we're just going to do something like this and say Hey I want to catch the eror let's log it and then let's also set the current job ID to you know empty cuz Hey something must have gone wrong okay but let's go back and handle the happy case when everything works well what we expect to happen is we want to go ahead and just let's log the response so we can just see what was happening and then what we want to do is we want to set the current job ID and I'll just show you the auto complete so we went to grab the response we went to grab the data from the response and then you can see because we Define the type up here we can go ahead and grab that job ID so that looks great now what I want to do before we dive off and actually go ahead and start running this what I want to do real fast is we need to make two changes the first one is whenever we start a new job I want to give some feedback to the user to say like hey we successfully kicked off this job and there's a really nice package to do this and it's called react hot toast so we're going to install that real fast so NPI react hot toast so that's going to take a few more seconds to install but once it's done what we can do is we can say toast. success start job and what this will do is it'll add a nice little green popup on the top of the user screen to let them know like hey it worked but if it fails what we also want to do is basically paste in an error so we'll toast an error saying job failed to start this way we're going to give back some feedback to our users and in order to actually have this pop up successfully you need to open up your layout file and inside of your layout file what we're going to do is below the children is we're going to add a toaster so you can see it comes from react hot toast what this will do is it'll make sure there's a nice little popup so this is going to import all the Styles and all the logic for using react hot toast okay but that might have been a lot so let's go ahead and try and set this up in action so what I'm going to do I'm going to come down here to our code and then I'm going to go ahead and actually start our local backend server on the right hand side so you can see right now I'm in the nextjs application so I want to get out of that and I want to change directory over to our other server so we're going to change it over to our crew AI backend so let's go ahead and go over there and then what I'm going to do now is I'm going to run our server and this is nothing new I'm just going to type in Python api. py and this should go ahead and try starting it and one second oh it didn't start it and the reason why is cuz I'm not in the right python environment so what I'm going to do is type in the word poetry shell and this should go ahead and actually start it fantastic so now you can see it's off and running and you can see I'm now in this environment so now whenever I type in Python api. py it'll go ahead and actually start triggering and running that server and the backend okay fantastic so it's set up and we're going to get an error when we run this because we don't have our cores configuration set up but I just want to go ahead and show you our app in action so let's head back over here to our Local Host oh and it's actually definitely not going to run because I was running our nextjs server right here so let's kill that let me come back over here restart this again this is live debugging guys so sorry about that okay cool so now this is running on the right Port so now if I add Tesla add it now if I add CEO add it and then what I'm going to do is just we need to wire up our start function real fast just so you can guys see this in action so what we need to do is come down here we need to say start job and what we're going to do is if we head back over to our page what we're going to do is whenever the user clicks that start button we need to just say like hey you actually need to call the start job button that we just passed in so all you have to do super straightforward you're just going to do an onclick event so onclick and then we're going to call the crew. job and we can call start job so like you hopefully you can see now like man this hook makes our life so much easier in this code super super clean okay so now that we have that set up let's go ahead and refresh the page once again add Tesla and then add CEO add and then now what we're going to do is click Start so what this should do it'll say job failed and that's what we expect and the reason why is you'll notice it says hey making a request to this endpoint has been blocked due to a cores policy so what we're going to do is we're going to head back over to our python code we're going to open up our api. piy file and what we're going to do is we're actually going to update our cores policy now if you haven't heard of chors policy before basically it stands for like cross origin resource scripting and basically it's a way that we want our back in to say like hey guys it is okay for other websites to use the data that I generate and it's super simple to add all we're going to do is below our application we're going to create a new cores policy so I'm going to type in the word cores and we actually need to go ahead and import cores as well so we're going to come up here and we're just going to say from flask cores import cores that's us setting it up properly and what we're going to do is we now need to Define which application we want to use cores so we want our app right here to use cores and then we can define basically which resources are allowed to use this so we want to say hey anything on the API endpoint I'm going to apply this course policy to and all this is saying is like hey literally anyone can use this back end that I'm creating so that's that's what it's defining so now if we come back down here we can see our flask application has reloaded so if I come back over here refresh the page once again add Tesla add the position CEO and then I now add a start request it now says the job started so guys this is actually working you are now connecting the front end to the back end they're talking to each other the back end just gave us a job ID if we come back over here and look at our flask application you can see that our crew is of and running it's like oh I'm finding blog articles I'm looking on YouTube so like seriously guys this is awesome I know we just did a lot but you have actually connected the front end to the back end and now we're in the home stretch where we're going to start finally connecting and capturing the data that the back end is generating for generating for us okay cool so I'm going to stop this back end application real fast just cuz you know hey we got to save those pennies all right so what we're going to do next now that we have got our API application up and running we're going to head back to our used crew job and now we finally have this set up so that is a lot of work but let's go ahead and start knocking out the next part of this application which is where we're going to start handling some of the use effects and what we're going to try and do in these use effects is we really just want to have one job let me explain it what we want to happen whenever our application is running and we get back a job ID we want to from that point forward continually ping our backend to say like hey dude I see the job is running what's the status of it and then we're just going to continually every second we're just going to Ping the backend server over and over and over again until we get back a state of complete where we know the job is finished or we get back a status of error and we're going to just continually ping it and we're specifically going to be hitting that let me show you the API Pi we're going to be hitting that get request right here and this is where we're going to get back the status of the job so that's what we're going to do inside of our use effect so let's go ahead and start knocking out that use effect real fast so here's how we're going to create this use effect first we're just going to say hey here's a use effect then what we're going to do is go ahead and open it up and then whenever you create a use effect you have to tell it hey what different properties do you want me to run this use effect on so basically anytime something changes it will know to retrigger this use effect so in our case I want this use effect to trigger every time the current job changes okay well going back to our logic from beforehand what do we want to have happen well what we want to do is if the current job does not equal so current job does not equal null meaning we have an active job ID what we want to do is go ahead and actually set an interval to start pinging the backend what we're going to do I know that might have been a little bit weird but what we're going to do is say interval ID is equal to set interval and set interval is just a way to go ahead and say Hey I want you to perform this function on a set interval so in our case what we're going to do is say hey I want you to run the function that we're about to create called Fetch job status and I want this to run every 1 second or 1,000 milliseconds and you're going to get a little bit error like a typewise so just put this and it'll work for you okay so what we're going to do next is we're going to go ahead and create that function so we're going to say const fetch job status and this is going to be another asynchronous function and then we also need to create that interval ID cuz we're getting a we haven't declared it yet so we're going to say let interval ID equal to number Okay cool so this is us stubbing out this use effect and just a recount we are going to every time we know the current job ID isn't equal to uh null meaning we have a job ID we're going to start trying to fetch that job status and we're just going to keep paying in the back end over and over and over again well here is how we're going to do that inside of this fetch job status what we're going to do do is we're going to once again use axios to make a request to the back end so we're going to say const response is equal to await axios and this is going to be a git request and we're going to make a git request to you know our python backend but we're going to do it a little bit fancy and what I mean by that is we're going to use back ticks because back ticks are going to allow us to pass in basically do some string interpolation so here's what I mean by that we're going to do HTP Local Host Local Host 31 cuz that's where it's running we're going to make a request to the API crew endpoint but more specifically we are going to pass in the job ID and that's what's going to get triggering this right here so that's why we're doing that and then whenever we get back a request it's up to us to go ahead and Define what do we expect to get well we expect to get a status which is going to be you know started completed or error we expect to get back some results and those results are going to be formatted in a positions information list so it's really just going to be positions and it's going to be an array of positions info and then finally what we expect to get back is a list of events also for events type so let's move that down Oh wrong wrong array let me get that and then down here what we're going to do is say events and events are going to be of type event type Okay cool so this is how we're going to make a request to our backend make a get request and this is how we're going to Define what type of data we expect to get back all right this is looking good so what we're going to do next is we let's just for SA measures let's go ahead and log what we're getting back from the back end and then what we're going to do is we're going to start updating our fetched basically our fetched events so this is going to be you know all the information that the crew went off and researched we're going to start saving it so we're going to say set events and this is going to be equal to our fetched events which are going to come from right inside of here and here's how we can actually you know update that what we're going to do is we're going to do a little bit of something called destructuring and what we can do is we can say I want to grab all the data inside of our response. data and I want to actually just grab these events one by one so in our case we can grab the events we can grab the results and we can grab the status just like that and then we're going to get a little bit fancy you guys are going to be typescript experts by the end of this but you can actually rename the data that you get back in uh when you're doing destructuring so we're just actually going to rename our events to fetch events so fetched events and the reason we wanted do that is cuz like if you look up here where we're finding all of our state we say events here so we just don't want to run into like a name conflict so that's why we rename it here okay so what we're going to do is now that we've got back all the data from our backend we're going to start saving it in different places so for our set events this is where we're going to pass in our fetched events we just grabbed so that's those and then what we're going to do is we're going to say hey I know sometimes you'll whenever you finish you will have a result so if you do have a result what I want to do is uh that's my bad I meant to say results singular not plural that was my bad result so if you do have a result what I want to do is first off I want to log it I want to see what information you got back from the back end so that's what we're going to do first and then what we're going to do is I want to set our position information list and I want to go ahead and pass in the array that we get back so if you remember if you look at what result it gets back to us it gives us back a property called positions and it's nothing more than an array of position info so that's what we're doing here so I hope that makes sense if it doesn't and I've gone a little fast feel free please drop some questions down below I will be super happy to answer and if you want a more detailed response once again just head over to the school link it's completely for free and I'll actually have a post for this specific video so you if you have a question there's probably another chance someone else had the same question so it's a great resource to learn a lot more and you also meet some cool AI developers over there too so all right so we're going to keep chugging along so what we're going to do is put this in here and what we're going to do just in case something goes wrong cuz if you remember in our api. what we're going to do is we're going to try and grab the results sometimes it might not work so if the data we get back doesn't work hey let's just keep it as an empty array just to make sure we don't run into any weird errors okay now let's keep chugging along if you remember earlier I said we want to continually fetch the backend jobs until we run into one of two states either complete or error and at that point we know the job is done and and we can stop pinging the back endend so here's what we're going to do we're going to say if the status is equal to complete all caps or the status is equal to error what I want to do is I want to first off clear the interval ID and just to prevent some weird edge cases let's just go ahead and wrap it like that that looks great and then the next thing I want to do I want to set the running to false cuz if you remember we're going to go update our button over here in just a minute so that is how we can let the front end user know that we're done running the job and then finally what we're going to do is let's just add another toast notification to say hey guys the job successfully Ran So toast. success and we're going to say job completed okay cool now if you remember earlier I said whenever we make a request to a backend it might not always work and what we need to do is sometimes put it in a try catch statement so that's exactly what we're going to do now we're going to grab all that code we just created cut it out and put it inside this catch statement or this statement so this is hey this is the happy path if everything goes great but if it doesn't what we want to do is you know log that the error happen we want to set the current job ID to empty cuz Hey it failed we want to let the user know also that it broke and the final thing we want to do is we want to clear the interval ID just because we don't want to keep pinging and letting this job run over and over and over again all right so this is looking fantastic so I'm pretty happy with the way this use effect is set up and what we're going to do next is we're we going to update all of the return items down here at the very bottom to include all the new information we just created and that way we can pass it back to our front end so we can start using it so we're going to say running we're going to pass in events we're going to pass in position info and then the other thing that we're going to pass in is we're going to pass in oh we already passed in start job so I'm pretty happy with this way the the way this looks so let's hop back over to our page and now we're going to start finally going back to building out some front end code we're going to work on these two items but before we do that I just want to show you one other thing we can make our front end button a little bit responsive so here's what we can do we can say hey I want this button to be disabled so disabled if the crew job is running so now we have access to that running property and then what we can also do being a little bit more fancy we can say hey if the crew job is running I want the button text to say running otherwise it can say start let's add some dots so it looks nice yeah all right this is looking cool so you've added some more responsiveness to your front end application pad on the back but what we're going to do next is we're going to start working on this event log component and then we're going to start working on that final output component so let's go ahead and open it up event log all right let's go ahead and start knocking this out real fast and just as a quick reminder here's exactly what we're building looks like it's just going to have a title up top that says event detail and then below that it's just going to be a box where all of our events are just going to pop up one on top of each other and have a time stamp up to the top left so let's go ahead and start building it well per usual we're going to going to type in RFC to go ahead and create our new function and then inside of this what we're going to do is if you remember whenever we want to pass in any data to this we need to go ahead and set up some props so in our case what we're going to do is we're going to make an interface called event log props and the only thing that we're going to be passing into this is going to be events and this event type is going to get pulled from our basically our component that we made in our hooks if you remember over here in our hooks we went ahead at the very top and we defined this event type right here so let's go ahead and Export it so we can gain access to it over here in our other code now if I hit command period you can see the Quick Fix says import it all right great so this is looking awesome now we can set it up right here to say pass in our event log props and now I can access our events okay so we're properly passing in events to our react functional component now let's go ahead and start updating this code so it works properly so what we're going to do is we're going to start adjusting some of our Styles so we're going to say the class name this is going to be flex and we're going to do Flex column because we want all of the event logs in here to be stacked on top of each other vertically and we want the height of this component to be full so you can see H full means height 100% okay now what we're going to do is we want to define a header to show that this is our basically our event details section so event details and one of the things I'm going to do is I'm going to go ahead and put this event log over here just so you can see it as we build it so I'm just going going to say event log there we go and then it's going to fail or give us red squigglies because we're not passing in the proper information yep property event is missing on the type so all we have to do is say event is equal to crew job. Event all right everything's looking happy and if we come back over here and we'll start to see all right our header is popping up things are looking great so let's go ahead and start adding the box below this to where we're going to be passing in all of our different events so what we're going to do is we're going to create a wrapper for it and this is going to be the gray box around it so it's going to be a div and inside of this div we want like I said it's going to be the gray border box so what we want to do is we're going to say flex and then we're going to say uh sorry we're going to say Flex grow and that's going to say hey take up as as much space as you need then we're going to set some overflow which is basically going to be like hey as we start passing in a bunch of events this is going to grow and if it gets too big start trimming some of it off or make it scrollable and then what we're going to do is we're going to say border of two so that's going to be you know to say hey we're going to have a border and I want the border to be gray and I want to be gray 300 and let's add some padding to it so that our events don't hit the sides and if we come back over here you can see we have a nice gray border box that we just created now what we're going to do is we are going to start working with our events and what we're going to do is we are going to set up a turn area now if you haven't heard of that word before basically what it means inside of typescript is you can have a condition so in our case hey do we have any events EV so are the events equal to zero uh sorry are the uh is the array length equal to zero if so I want you to load a some teex saying hey I haven't found anything otherwise I want you to basically list out all the events so I'm going to say list events otherwise this is just going to go ahead and say no events all right so here's what we're going to do we are going to return a P tag that says no events and then let delete that comment and then in the case when we do have a bunch of events we are going to map through them like we have done in the past so we're going to say events. map and we're just going to let autocomplete work for us for a second inside of here what we're going to do is go ahead and add in our HTML code that we want to render whenever we do have an event so we're going to set up a div that div is going to have a key and we also want to go ahead and add some styles to it so let's start working on this one at a time so we're going to say the key for this is the index for the Styles we actually want to add some padding around this event and the other events we want to add a border on the bottom and we want this border to be gray this is just going to add some separation for us between our events we can clearly tell which event is which that's looking fantastic and then what we're going to do next is we're going to set up a P tag now this P tag is going to actually show our Tim stamp and it's going to show our event data now here's how we're going to do that first we're going to go ahead and open up our event type and we're going to pass in our timestamp and then we're going to do a colon and to the side of that we're going to pass in the event my bad event Dot and then data so this is going to just make it look nice and clean show a Tim stamp on the left and then our data on the right so this is exactly what we need to do to get our event log up and running but now what I want to do is actually show you guys that this is actually working in action so what I'm going to do come back down here we're going to spin back up our python back in flask application so I'm going to start that our front ends working all right everything looks good so let's go ahead and start trying to run it and maybe do a little bit of debugging at the same time so if I type in tes and then I type in that I want to get information about the CEO what I would like to happen whenever I click Start is I would like to start seeing event details pop up so let's go ahead and try this out and it might take a little bit of time but you can see it'll work all right so first things first you can see that we're actually we can see all the data like we kicked off The Crew so it's popping up so we know event details are working and what we'll do next is we'll wait for some additional logs to pop up now this is where we'll start to see the logs pop up down here and it'll take a few seconds but we'll come back right whenever it pops up its first details so let's give it a few seconds okay so it took a few seconds but as you can see we are successfully capturing event logs from our backend database and this is looking fantastic but we actually are running into a small error that we need to fix if you hop back over here to our logs you'll see that when it comes to setting out our timestamps we were running into a quick issue and that's because we were importing the wrong date time so what we should have done is we should have said from date time import date time so that'll fix that issue right here when we were calling datetime.now and the other issue that I want to fix is back in our event logs what you'll notice is out here we are basically making the font semi bold and that's not what was supposed to happen so what we should do is in this P tag area we should just delete it and this will make the text look much more clean and not bold for for no apparent reason the other thing is when it comes to our H2 what we should have done is this text should have been semi bolt so what you should have do here is do class name and then we'll do text large just with LG font font semi Boldt and then we'll do MB bottom two and this will actually add some padding so now this is larger and we have a gap between our vent details and our border Okay cool so everything is working now so what we're going to do next now that we have our event details working is we are going to start working on our final output component and this is going to be the last major component we work on inside of this application so what we're going to do is open up our final output component and start coding this up real quick and just as a quick recap here is what the final output should look like we should once again have some text up top and then a border and then inside of this we should list out each one of the position infos where we have the company name position name blog articles and for the blog articles and the YouTube interviews we actually want these to be a bulleted list so that the person can go in here and click on them and either read the articles or watch the Youtube videos okay so now we got that out of the way let's go back and start coding this up and getting it working inside of our own application so what we're going to do per usual is go ahead and do RFC to create that react function component and then we need to Define what we're going to pass into this component by this point hopefully you guys are starting to see the pattern and getting used to this and what we're going to do in here is we are going to pass in the position info list and this is going to be a list of position info items so from our and we can go ahead and import it from our use crew job and this is going to be an array of them that looks great and then what we can do down here is we can Define our props and now I have access to that position info list that we pass in awesome so as we build it let's go ahead and come back over here into our page and we're going to go ahead and add that final output and we're going to pass in the position info and let's get it working so it's position info list so to update that to say position info list and as you can see no red squiggly marks everything is looking great and if we actually head over to our application and refresh it well we didn't need to refresh it you can see right here we have our final output so let's keep coding along and and uh and get it actually set up so let's open up final output and let's go ahead and describe what we want to happen well it's going to look very similar to the event details where it's going to be in a colum where we're going to have final output up top then we're going to have our border and we're going to have all the information in it so it's going to look very similar to the event details except we're going to do a little bit more fancy stuff when it comes to making it where we can click on the blog articles and YouTube videos so let's get this working first when it comes to our outer div what we want to do for setting up our styling is we want to set up a flex column and we want this to take up the entire height so H full to take up 100% of the height of this element and then we're going to set up our H2 and this is where we're going to say this is our final output that looks great and then what we're going to do inside of here is I can go ahead and type in the class name for this and we want the class name to be text large and what we want to do is we basically want to copy the same as the other one we want the font to be semi bold and we want to add some spacing around it vertically so we're just going to say my2 so it's going to add some spacing above it and below it and now we're going to start creating that border box that's going to go below it so here's what we're going to do in this one we're going to say the we want this deflect grow to take up as much space as possible we want overflow to go Auto so we can scroll through our elements we're going to set border to two so we have a solid border and per usual we want the border to be gray 300 and lastly we want to set up a little bit of padding so our outputs aren't hitting the SES of our border so if we go back you can see we now have a nice little box that we're about to start filling in okay so what we can do next is we're going to do once again another Turner and in this turn are we're going to check to see if the positioned info list length is equal to zero if it is we want to let the person know hey I don't have anything yet otherwise I want to go ahead and render all of those positions so in the case they don't have a job uh job results yet we're just going to do a P tag and we're going to say no job results yet results yet and then now we're going to dive into the fun stuff where we're going to map back through all of our positions so position info list we're going to map through it so map and then we're going to do position and we're going to do index exactly like we normally do and then we're going to go ahead inside of here in this return arrow function we're going to go ahead and Define all of the HTML that we want to show to the user okay so inside of this what we want to do is first off we want to style it a little bit and we want to give it a key so the key is going to be equal to the index and then we're going to give it some Styles and we're going to give it really just a little bit of margin on the bottom so that there's room between each one of the results and then what we're going to do next is we're going to go ahead and put inside of here the company name and everything else that we basically have collected about the US basically the positions inside the company so what we're going to do is we're going to put a P tag and this first P tag is really just going to have the company name so we're going to say strong so that's how you make something bold and then we're going to say company and then call to the right of that we're going to then put in the capitalize first letter so this is a function that I've come up with let's go ahead and create that real fast but basically we just want to capitalize the first letter of the company cuz sometimes crew AI will return stuff in lowercase for some reason so let's just quickly make this function real fast so we're going to say const capitalize capitalize first letter we're going to pass in a string and it's going to give us back a string so we're going to say return string grab the first character and add it to Upper and basically yeah grab the string and for the first character basically make it an uppercase letter and then add the rest of the string so it's just a quick swap to capitalize the first letter then what we're going to do is then pass in so capitalize first letter and then we're going to pass in the company name okay great so this is how we're going to do it for company and we're basically going to copy this for position so we're going to come down here oh it didn't like that I just meant to copy this P tag right here there we go then we're going to add the position so position and this is where we're going to do position. position just like that that looks great and then we're going to do the person's name but I found this one always comes back Capital so we don't really need to to worry about it so we're going to do p once again strong name and then below that we're going to put in position. name now one thing that you do have to do when working with a react to put a space between name and position name to make sure that they're not like on top of each other is you have to basic do a curly brackets and a space this will add a space in your output so this is just a nice way to style it real fast so let's add this everywhere great and great all right well now that we've gotten the positions and everything else out of the way let's go ahead and go ahead and move on to setting up our blog articles so what we're going to do inside of here is we're going to make a new div and this is where we're going to list all of the person's blog articles for that specific position and what we're going to do is do a strong tag and we're going to say blog articles URLs and then what we're going to do is add in an unordered list so UL that stands for unordered list and then we're going to map through the results so we basically are going to have a map in a map and this is totally acceptable and I just want to show you guys how we're going to set it up so we're going to say positions. blog articles map and we're going to map through each one of the Articles and before we do that though we want to do a normal check like we've done with everything else so a tary statement so we're going to do position. blog article URLs and we're going to say hey if the length of this article is over zero what I want to do is I want to say and go ahead and map through it otherwise I want to return a P tag that says no blog articles so that's all we want to set up for here um why is it not happy I think I have one second I think we just need to set this up too yeah that's all was just upset we didn't have a div but so this is where we're going to map through all of them so we're going to say position. blog articles and we're just going to map through each one of them and inside of here this is where we're going to do a list item so the list item is going to have a key and then we're going to make an anchor tag let me just walk through it we're going to go through each one of these and it looks like it's upset because I put that extra parentheses right there I shouldn't have done that so this is all the code should have been so let me save it and yeah now things are looking better so what we're going to do is we're going to map through each one of the blog article items create a list item where the key is going to be equal to the URL index or just the index right here and then we're going to make an anchor tag and an anchor tag is how you can make something clickable on our website so anytime someone clicks this the you're going to be redirected to the URL of the blog article we're going to set the target equal to blank and that means whenever they click it it's going to take them over to a new tab so it's going to open a new tab and then now what we're going to do is update the style to say green 500 and whenever we're just going to go ahead and underline it so it looks nice and clean and what we want to do is for inside this list item we just want to go ahead and show the URL as the text that the person sees whenever they're looking at this okay so let's go ahead it looks like I was missing another brace but yeah so this is how we're going to list through all the blog articles and then what we're going to do next is we're going to recreate this for basically our YouTube interviews so I'm just actually going to copy and paste this all right here copy paste and we're just going to re-update it some of the text in it so for this section for our strong section we are just going to say YouTube interviews and then inside of here instead of mapping through the blog article interviews we're going to map through the YouTube Interview URLs and then what we're going to do is as we're mapping through them is we're first going to do a normal check to say hey is the interview length greater than zero if it is what we're going to do is basically perform the map so we're going to say YouTube Interview urls map and this time if you remember it's not just a URL if you remember it's going to include the name of the YouTube video and it's going to include the URL to it so if we type in video. url that's what we'll pass here and right here we'll type in video. name so it'll actually show the title to the user right here so that looks great and then we're also going to say if the person doesn't have any YouTube videos we'll just say no YouTube videos yet okay so this is looking great so what we're going to do now that we have set up our final output fun function is we're going to go ahead and rerun this job and I'm just going to show you guys the results as it shows up so we're going to do Tesla as the company and then we're going to add the position as CEO we're going to go trigger our job this should start it job started we're going to see now we have our event details and we have our nice little border on the bottom to help separate between all the event details now this is going to take a few seconds to run and if you hop back over here you can see that it's off running per usual we're looking up articles about Elon Musk and everything else that he's doing right now so this is going to take a few seconds to run but what we're going to do is we're going to let it run and we'll come back and look at the final output together and the other thing that I think is pretty cool is you can see that it's running so this is how we were managing our state earlier to detect if our job was running we're actually doing it right here so we're going to come back and just a second once it's finally done spitting out the final output hey guys so it actually finished running but then it threw an error and I want to walk you through why we were getting that error so if you look on line 57 it was saying that this was undefined our YouTube interviews URLs were undefine which is odd because we're getting back something so if you look in our job output cuz we were we're logging stuff you can see we can get back blog articles that looks great and then we're getting back YouTube Interview URLs but if you look interview is singular in our app we made it plural so that was why we were getting an error so if we head back over here to our position info update this to be just singular that is going to work now then if we come back over here going to cause an error because you know we've typed in the wrong thing so we're going to fix that real fast now we're going to try running it again now that everything things looking smooth we're going to start running again and do a little bit more live debugging if anything else comes up so we're going to do Tesla once more we're going to do the CEO to get some more information add it go off and click Start once again it's going to start running and we'll come right back once it's finished getting the final output all right guys this is super exciting it actually went off and found all the information that we needed it looked up the CEO of Tesla found out that it was Elon Musk and then it went off and actually found some articles for us so we'll go ahead and click open the up and we'll go ahead and click and open up some of these YouTube videos too let me mute it but you can see it actually is literally leading us to actual blog articles that we can read so these URLs are working and we could actually you know back in our application add a lot more data if we wanted to look at more companies and more positions but I'll let you do that on your own time but the other part that I think is pretty cool you can see we started this job around like 856 and the job finished around 85 58 so well it really took a little over a minute a minute and 10 seconds to fin this job uh to finish this job which is awesome that's super cool that our crews are working this fast so give yourself a huge pat on the back you just launched making a flask backend application that kicks off Crews those Crews go off and search the internet to look up YouTube videos and blog articles and then you also have a frontend application that's passing along companies and positions to your backend application and then it's constantly pulling your backend flask application to see the status of the crew so all around in my opinion you are an expert full stack AI developer and I'm super excited for you guys but that's right for this video guys I hope youall enjoyed this crew Ai and nextjs full stack tutorial and I hope yall are excited to go off and build your own full stack projects after this but I just want to recap a few important things you can go grab the free source code for this down in the link below I have a school Community I just made for you guys completely for free so if you have any questions or want to meet other developers who are interested in AI definitely want to check out that we're at like two to 300 members going strong so it's super awesome super awesome engaged Community but outside of that I have a ton of other Ai and crew AI tutorials right here on this channel so be sure to check out whichever videos pops up on the screen right after this and I am super excited to see you guys in the next video have a great day see youall soon [Music] bye

Channel: codewithbrandon

Views: 30,894

Keywords: ai agents, crew ai, chatgpt 4, best autonomous ai agents, artificial intelligence, crew ai tutorial, crewai langchain, crew agents, crew assistant, autonomous agents, stock agent, autonomous ai agents, autogen tutorial, autogen create ai agents, ai agent, autogen step by step guide, chatgpt prompts, llama 2, ollama tutorial, mistral ai, chatgpt automation, youtube automation tutorial, youtube automation step by step, youtube automation with ai, Nextjs, typescript

Id: d8juNbo3onk

Length: 169min 27sec (10167 seconds)

Published: Tue Mar 19 2024