Build a Web App (GUI) for your CrewAI Automation (Easy with Python)

Okay, so we have the first one we have the  first thought. The first thought comes from   the research agent we can see that he used the  search and contents tool and what he thought in   order to get here was to find the latest and  most relevant news about the USA stock market   I should start with a broad search query using  the search and queries tool and the query that   he searched for was search News latest news on  the USA stock market now it is the turn of our   chief editor and our chief editor also used the  search and contents tool and his thought was to   accomplish this task I will need to carefully  review good morning everyone how's it going   today welcome back to the channel and welcome  to this new video in today's video I am going   to be showing you how to create a graphical  user interface for your crew AI automation I   am assuming that you already have your crew AI  automation working and so we are just going to   be building the front end in this time okay as  you saw at the beginning of the video video the   front end works like this you have a sidebar with  just a short description then some inputs of your   Automation in this case it is going to generate a  newsletter from a given topic so one of my input   is a topic and then just a personal message  when you click on generate you will have you   will be able to see all your agents thinking in  real time on this part of your application okay   so you're going to be able to see who is  thinking what what tools they're using who   they're asking questions to Etc okay and then  of course by the end of the automation you will   have a download button that will allow you to  download whatever your agent produced we're   going to be using streamlit to create this  front end which is a python framework that   allows you to build front end applications with  a few lines of code now this video is actually a   clip from another video that is probably coming  up in a couple of days or next week and in that   video I show you how to build everything from  the automation to the actual front endend okay   if you're interested in watching the full video  you can click the link in the description and if   it is not up yet you can of course subscribe click  the Bell icon and you will get a notification once   I upload it now something else that I wanted to  mention is that in this particular video I am   using the folder structure that CI recommends  and they generate with their CLI but in case   you're using just the core components you'll be  able to you to do that just importing the crew   object of your automation okay in this case  just to be clear I am working with a source   directory and and then my automation directory  and then my crew. py file which is the one that   has a class with a method that actually returns  my crew your project structure may look a little   bit different but just be sure that you have your  crew accessible and that you can import it to your   graphical user interface okay great so without any  further Ado let's get right into building [Music] [Music] this okay before actually starting to  code this in Python I just wanted to make sure   that you understand what the current automation  that I'm working with in this example is this is   not essential for you to understand since in this  video we're only going to be working in the front   end of the application but I figured that um in  during the process of this of creating the front   end I probably make reference to some features of  the application and of the automation so I just   wanted to make sure that you understand what the  automation is supposed to be doing so in a very   in very broad terms the automation what it does is  that it takes the topic of uh for the topic of a   newsletter and then just a quick personal message  and it generates a newsletter okay so this is a   an automation that has a team of research agents  who are going to go to the internet and find the   most relevant news in the past week about this  given topic okay so in this example for example   we have the USA stock market and here we have  just a quick um personal message that is Ste   readers welcome to the newsletter so by the end  of the generation I am going to get a HTML file   uh with the latest news about the USA stock market  and a personal message on top okay so that is the   automation that we're working with and actually  if you're interested in building this automation   yourself I'm going to be uploading the video uh  about uh building the Automation in a couple of   days or probably on Monday okay so yeah now that  you understand what the automation is supposed to   be doing we're ready to start actually building  the uh graphical user interface all right so the   first thing that I want you to do is to install  stream l okay and if you're using crei just by   doing pip install crei and then just importing the  components you can do pip install streamlit like   this uh however if what you did is you run crei  create and then you named your crew then you're   probably going to be using poetry as your default  package manager okay and that is what I did so if   that is the case you're going to do poetry add  streamlet like that and in my case I actually   already have it installed so I won't be installing  it again but once you have done that you're going   to be able to go to your um folder and you can  create a new a new directory you can call it uh   guy or you can call it whatever you want UI front  end whatever and then inside of it you're going to   just create your init.py file and then an app.py  file where you're going to in import streamlit   as St okay and now let's continue with the video  perfect so in order to build this graphical user   interface I'm actually going to be creating a  class called newsletter gen UI and it is this   one that I'm going to be uh running to render my  application okay um and the first thing that I   want to do is to Define my main method which is  going to be my render method I'm going to call   self and just to be clear this is pretty much the  same thing as if I was not using a class but just   to make everything easier and more organized I'm  going to be using a class so here in the render   method which is the one that we are going to be  calling to actually render to front end I'm going   to set my set page config method from streamlet  to this I'm going to call it newsletter generation   this is used to create the title of your page and  then let's set a page icon that in this case is   just going to be uh an envelope and there we go  and then let's just let's add that St title new   letter generation and then down here let's say  that if name equals main we're going to run the   render method from this class right here okay  so let's save this and let's start running it   to see how it looks like and in order to run  it very simple all we have to do is to stream   lit remember that you have to have your virtual  environment activated on which you're working   and you in order to run this you do stream LD  run and then the location of your streamlit   application which is in my case is um seems to be  a problem going on here apparently didn't find Q   so maybe I have to call it from Source because  I am right now yeah this should work now let's   see seems to be starting a virtual server so  let's see what that created um and here we have it let me just open this on the side and  here we have our application that we're   starting to build so let's just close  this close this and I will continue   building here and you will see in real time how  this is all changing okay um okay so the first   thing that we want to do is create our sidebar  so in order to do that I am actually going to   be creating another component right here when I'm  using streamlet I like to think of it as a react   component with with all your helper functions up  here and then your render function on the bottom I   mean this is not precisely how react works but  it just helps me get things a little bit more   organized so right here let's create our sidebar  component and the sidebar component is going to   have a title got a love ination of course going  to have a title called newslet generator and then   just a short description of what this generator  is to generate a newsletter enter a topic and a   personal message your team of AI agents will  generate a newsletter for you so let's save   this and and let's click always rerun here to  be sure that everything is rerunning correctly   all right there we go and now we can run this  component right here and there we go but oh   yeah I forgot to say that this has to be inside a  sidebar so with st. sidebar and there we go there   we go so now this is inside the sidebar going to  delete this title right here not much use for it   and then there we go then let's just add a text  input and a text area for the users topic and the   personal message okay because we want to get their  inputs so here's going to be let me just zoom in a   little bit so here's going to be the topic and  the personal message from the user that we're   going to add to the top of the newsletter okay so  the idea here is that our agents are going to take   this this topic and they are going to generate the  newsletter of the most recent news related to that   topic and will'll display all of their thinking  and conversation right here and then in the end   they will put the final HTML template for our  I mean HTML file for our newsletter okay so now   that the sidebar is finished oh let's just add a  button right here St button generate newsletter   let's save this and there we go there we go so  next thing to keep in mind right here is the   environment variables sorry the state session  State variables that we're going to be dealing   with okay uh remember that in streamlet the  session State variables are the variables or the   information that you want to keep constant during  the running cycle of your streamlet application   in other words remember that anytime you do  anything like press a button or submit a text   input or something like that streamlet actually  reruns your entire code which means that some of   your variables are going to be redefined every  time that you use something like that in order   to avoid losing information that you want to  keep during your session you want to create   your session State variables for information that  is going to remain constant anytime something   happens during your application and in this case  the session State variables that we're going to   be working with are topic newsletter personal  message message and a generating State okay so   in order to initialize them in stream L you have  to do if topic not in session State we're going to   initialize st. session state. topic equals to an  empty string and what this is going to do is that   when we initialize our application it is going to  initialize our state with an empty string because   remember that the state lives inside this  property right here called st. session state   and if you remember correctly when we created  our text input elements right here as you can see   the S text input topic actually has the key topic  which means that anything we store in this let me   just zoom a little bit more anything we store in  this text input right here is going to be stored   in the session State variable for that particular  key okay and the same thing for this text area   right here it has the key personal message which  will maintain the personal message key inside of   our session State set to whatever we initialize  right here and and so we have to do the same thing   with that other one so if personal message not in  session State we're going to have to initialize   it with an empty string like that and there are  a couple more um session State variables that   you want to make sure that you have in this case  we're going to be working with newsletter which   is just the final generation that we want and  of course we want to keep it whatever happens   during the runtime and second thing that we want  to create is the status of generating because   we want during the generating status because  we want that if the generating status or set   or state is set to true we want to be able to be  running our automation with our agents right here   and once it is finished we want to show the final  newsletter and in order to do that you're going   to do if generating as well not in session State  you're going to set it to false so there we go   once that we have initialized all the session  State variables we can go right here to sidebar   again and remember that we had a button right here  however this button is not doing anything just yet   but remember that if we want to do something when  we press a button in streamlit there are several   ways of doing this but one of them is just saying  if St button and then add our logic inside an if   statement this will um this will run whatever you  have inside of this if statement when the button   is clicked so if the button is clicked we're going  to set the generating state to true and that will   trigger our logic that will start generating our  newsletter okay so let's close close the sidebar   and actually write the logic for the generation  of the newsletter great so we have finally we   have finished our sidebar our session State logic  we now have to create the com the component that   is going to live right here which is going to have  our agents talking to one another okay so in order   to do that I am just going to create another  component right here I'm going to call it new   letter generation like this and right here all  that I am going to do is say that if St State I   mean st. session state is generating which means  that if we have clicked on the generate button   we are going to set first of all we're going  to set St session state. newsletter equal to   another method that we have here which is  going to be self. generate newsletter and   this function is going to take the session  topic which in this case is going to be St   session State topic and it's also going to take  the personal message like this just going to close this and there we go so this is going to execute  this method right here which we have not defined   yet so let's go ahead and Define it up here so  we're going to say note like this Define generate   newsletter is going to take the topic and the  personal message and this method right here is   basically just going to call the crew that we have  defined in the previous part of this tutorial if   you're watching this video as just the front end  you can think of this as the method that is going   to call your API that will return the generation  of your crew and this API will of course have to   return a thread of the entire thought chain of all  of your agents okay um so yeah here if you were in   a more production ready environment you would be  calling an API right here that would contain your   automation from your crew in this case since we  have it all in the same folder in the same project   and it is a pretty small project overall all we're  going to want to be doing here is just import from   sorry from newslet gen. crew we're going to  be importing our newl gen crew class which is   basically this one right here from which you can  run the crew method will act which actually just   executes your entire automation okay and remember  that this this one right here let me just show   you real quick this one right here takes a few  input parameters which are the topic the personal   message and the HTML template okay so let's  get that right here the HTML template I'm the   HTML template I'm going to copy this one from here  just going to say that my HTML template is going   to come like here this one's going to be self  method like this and we have already imported our   class now what we can do is just initialize our  crew saying that our crew will equal our already   initialized automation with crew we're going to  let's just Define our inputs that I had right here   already just going to paste them so my inputs are  basically going to be this time not an input from   the terminal which was how we would usually do  things if we were working directly in the command   line but we will be running this directly from the  topic that is going to be passed as an argument to   this method and the personal message as well of  course it is going to be coming from the argument   right here and this one is going to come from  our method right here just let me verify that the   path to the newsletter file is actually correct so  newsletter template. HTML um in Source newsletter gen config and newslet template. HTML everything  seems to be working correctly so things seem to   be in order this one is going to import our  HTML template which if you don't remember or   have not watched that part of the video is  basically just a HTML file with the template   that our agents are going to fill here we have  the title of the day the personal message for   our newsletter letter and then for each one  of the stories we have a title the summary   why it is important and the sources okay all  right so now our newsletter seems to be okay   and right here what we're going to want to do is  let's just call that method okay and let's just return crew do remember that in order to run a  crew you have to run it with kickoff and here   we're going to pass in the parameter of inputs  which is going to be the inputs that we defined   right here so I'm going to click save and actually  if we run this it should already work however   it will not yet log all of its thinking from our  agents right here it will just say that it's going   to start thinking and then by the end it is going  to print the results um actually before doing the   thinking let's just print the the results okay so  let's say that once we have this generation this   thing right here the newsletter generation right  here it is going to be generating my newsletter   and after it is generated I want to show it so  so right here let's add another part right here   to our newsletter generation component after  it has been generated we're going to say that   if as s session State newsletter and let's just  test the second thing right here and St session   State um do newsletter is different than an  empty string because remember that when we   first initialize this session State variable  it is going to be an empty string the next   thing that we want to do is that with a  container with an st container which is um stream L component that allows you to just  contain a little bit of um other components and   right here we are going to just show a preview  of our newsletter okay um so in order to do this   I have actually already prepared some code right  here so to make it easier for you just going to   paste it and explain it to you real real quick  okay of course we love the indentations um okay   so let me explain this to you let's see um here  just to be clear that everything is under control   and we haven't lost the track of what's going  on let me explain this to you again so here is   our new letter generation component which is being  called from the render method right here um we're   actually going to call it right here let me see  self. new SL generation like that okay and this   component what it is going to do it is going to  load after the sidebar let me let me just show you   just real quick without all of this clutter where  this component is so I'm going to do St the title   I am the generating component going to save this  and you can see that this one is right here okay   so the generating component is on the main part  of the application outside of the sidebar okay   now let's uncomment all of this and what is going  on is that right here inside the main component of   the application um if the generating session State  variable is set to true we're going to generate   the newsletter given the topic and the personal  message that we got from the form in this in this   sidebar okay so that is for getting the generation  and then secondly once the generation is complete   so remember that once the generation is complete  it's going to be stored here in the newsletter and   this automation actually generates just a string  of HTML code so the idea right here is that if   the session state. newsletter variable exists and  if it is different to an empty string which means   that if it has been changed from its initial value  because remember that down here we initialized it   with an empty string what we're going to do is  we're going to create a container where we're   going to show it so in other words we're going to  display the HTML code inside of this variable in a   small rectangle right here okay but only once the  generation has been finished and in order to do   that we run a a streamlet container we write new  letter generated successfully and then we create a   download button which will actually allow the user  to download the h ml file that was generated but   remember that our SD session State newsletter is  only a string so what we're going to do is we're   going to create a download button which is just a  regular component from streamlet which allows you   to download a file from uh string and in this case  the download button is going to say label sorry   the label of our download button is going to be  download the HTML file the data is going to be of   course the new translated that was generated and  the file name is going to be just let's call it   newsletter. HTML and then just going to mention  that the format of our file is HTML um to show   you real quick how this is actually working I'm  just going to do this without the generation so   I'm going to comment out the generation and I am  going to set my new SL variable right here to a simple hello world so I'm going to do div tuck  tuck tuck I'm going to say hello world then we   close this okay so we saved this and now  we have that the session State newsletter   has been saved and it is this here we have  a problem components has no attribute B1 so   apparently we have a problem right here let's  see all right so apparently since I coded this   part right here maybe streamlet has updated  their code so I'm just going to remove this   preview for now and I'm just going to show you  how the download button works so in the download   button as you can see we have the download HTML  file label we have the data which comes from   this variable right here which for now is just  a dummy variable and the file name we have it   right here so I'm going to click on download  and as you can see we have it right here and   you can see that it is the downloaded uh file  that I had created right here which is just   just says hello world okay let's close this  and let's return this to how it was so that our newsletter variable actually contains the  generation of the newsletter so there we go   so the preview we're going  to deal with this a little   bit later I'm not sure what's going on  right here I'll I'll um clear that in a moment all right so hello back from the future  I actually just wanted to correct a quick little   mistake that we made while we were coding this  right here you might have noticed it if you were   paying attention um here in the function that we  are calling to generate our newsletter where are   initialized ing our crew we are creating our  input and then we are returning crew. kickoff   however this thing right here new SL genen  crew which is the instance of the class that   we initial that we're initializing right here  it actually does not have a method kickoff the   one that has a method kickoff is the instance  of crew and this one right here actually has a   method let me show you so this one right here is  the one that we coded before this one has has a   method called crew and it is actually the method  called crew the one which actually Returns the   crew that will have the kickoff method so what  we're going to have to do is we're going to have   to do crew dot crew and from here we're going  to call the kof method now this is this just   becomes a little bit too ugly so what I'm going  to do is instead of initializing all of this up   here I'm just going to initialize it down here  like that and it looks much more clean and neat   okay so now it should work and we can continue  developing our stepbystep call back for the   application okay so let's do that and then test  it in the front end all right and something that   I wanted to make sure that we do by the end of  the of the process is to make sure that we stop   the process that is generating the newsletter  okay so if you remember correctly here in our   render method we have the sidebar and inside the  sidebar we have have this button that generates   the newsletter okay and what this button does is  that it says the generating session State variable   to true because remember that by default that  session State variable is set to false and when   this session State variable is set to true the  component of the newslet generation is going to   start generating our newsletter right with this  with this part of the logic right here um how   however there is something to keep in mind that  once this is done that means that once session   state. newsletter has a value that is different  to an empty string we're going to show a success   message and then we're going to show a button  that allows us to download the HTML file with   the final generation of our newsletter and  actually after that we have to pause the   generation because otherwise it is going to  continue trying to generate newsletter over   newsletter over newsletter so the idea right here  is that after this uh session State variable has   a value we can set this session State generating  back to false and that is what we're going to do   right now so let's do st. session State generating  equals to false there we go so now we can save   this and now this is going to work correctly  and we can uh start testing our application all right so now not only is our automation  working correctly but also we have built   a graphical user interface for our clients  colleagues or uh Team to use okay now the thing is   that the graphical user interface currently only  has only has a quick sidebar it has some inputs   a button to generate the newsletter that we're  going to be generating with this application and   then by the End by on the right side or the main  part of the application we're supposed to get the   final version of the newsletter that is going to  be generated by this crew um the thing about that   is that it would be great to see the thought  process of our agents within the application   itself and that is uh actually not very hard to  do so what I'm going to do right now is to show   you how to create the step callback that will be  called every time our a agent has a thought every   time each one of our agent either uses a tool or  tries to talk to a colleague and loog that not   only in the terminal but also in the fronted of  our application okay uh before doing that I just   wanted to make sure that everything right here  in the front end is um pretty well understood   and that we are all on the same page so just to  be clear right here we have the frontend that is   built with streamlet we whenever we run this file  we're going to be executing the render method from   this new stat gen UI class and this render method  method basically just sets the title for our application with its icon initializes four session  State variables then renders a sidebar let me just   show you a sidebar real quick the sidebar just  includes a title and just a quick text right here   description of the application then we have two  different inputs the first one is the topic and   the second one is just a personal message that  we will be adding to the top of our newsletter   and for this one right here we have the key which  is going to be the topic of the application the   topic sorry and this key is going to be stored in  this session State okay so just to be clear every   time you have a text input or a text area with  a key whatever value you enter to this input is   going to be stored as a session State variable  with this key right here so we have the topic   key right here which is going to populate this  session State variable and this one right here   in the text area with the personal message has  the key personal message which will populate   this variable right here okay and then once we  have both of our inputs we're going to be able   to click the button and the button is going to  change the session State variable generating to   true because remember but that by default it is  set to false okay and that is the sidebar so once   you have completely added your inputs and clicked  on generate it is going to set the generate to   true and that is what's actually going to happen  uh want to trigger this method right here I mean   the newsletter generation component is already  rendered right here and what this component does   is that if the session set variable generating is  set to true it will run the generate newsletter   method which is defined up here and this method  takes the topic and the personal message and   all it does is basically runs the automation  from crew AI okay as you can see this method   just Imports the automation newsletter gen crew  that we had previously created in in right here   here there you go and it runs the crew method  which basically just renders the application   and it just passes a a few inputs it takes the  topic as we mentioned right here the personal   message which will passing right here and the HTML  template which is the HTML template that we had   previously created okay and that one of course  we're loading it right here on top with another   method which just opens the newsletter template.  HTML file that we had stored up here reads it and   returns it as a string okay so there we go that is  what is happening behind the scenes but remember   that we want a step call back to actually show  what is going on in the head of our agents okay so   what is their thought process so that we can also  see what might be some errors that might be making   that they might be making Okay so so let's go to  crew right here and actually adding a step GoBack   is very very simple all you have to do is that for  the agents that you want to log the step callback   you're going to go right here right where you're  we're adding the parameters for your for your   agent we're going to add an extra parameter which  is going to be step call back like this and what   this is going to do is that whichever function  that you pass right here is going to be executed   every time your agent thinks about something okay  and something that is great about this is that you   can pass in the agent output every single time uh  and use it within your callback so in order to do   that we're going to be using a Lambda function and  we're going to call it step and right here we're   going to we're going to call another function  that we haven't yet created it's going to be   called Step callback it's just a method that we're  going to add to this class in just a moment and   we're going to pass in the step and secondly we're  also going to pass in a second uh parameter which   is going to be the name of this this agent and in  order to do that this one is the research agent   like this there we go so now all we have to do is  create our call back function right here or call   back method just going to paste it because I have  had actually already created it before and I am   going to explain that to you how it works okay so  as you might see as you see right here we have a   few errors and the only problem with um I mean the  reason for these errors is that we're using some   typing and some libraries that we have not yet  added uh the first one that we're going to add is   streamlit because we're going to be um logging the  thought process into streamlet to actually show it   in the front end of our application so in order  to do that we're going to import stream L as St   secondly we're going to import from typing Union  list stle and dictionary and last last but not   least we're going to import from Lang chain from  Lang chain core which is the library that contains   all of the abstractions for our agents and all  of the Lang chain core components uh remember   that we are using crew Ai and crei is built on top  of L chain so this I mean by adding this this is   going to work correctly and right here we're going  to just tap into from Lin core agents we're going   to import this class Called Agent finish okay I'm  going to tell you a little bit more about how this   one works in a moment but um for now let me just  explain to you what's going on right here with   this step callback function now something that I  wanted to mention is that this callback function   is actually just a modified version of another  method that was published in another tutorial by   Sam wien who is also a YouTuber here and he has  wonderful tutorials about AI I'll leave a link   in the description to his channel he is I mean  his videos are amazing you're certainly going to   learn a lot about his videos um all right so let  me just explain to you the this modified version   of the function um the idea here is that whatever  we have in the Callback we're going to be logging   it inside an st. chat message okay and st. chat  message it's just a streamlet component that shows   a chat message on the front end and this is very  useful for chatbots if you have if you're familiar   with the channel we have used this component  before to create interactive chat BS or chat   GPT clones and it works pretty good and I figured  that for this thought process of the agents this   might be a good component to implement now the  first thing that we do is we test whether or not   the output that we're getting is a Json is in Json  format I'm actually I actually forgot to import   Json right here so let's do that and now yeah  so here we have that we're testing that if it's   in Json format and if if it is it just takes the  contents of that Json and puts it inside the agent   output variable okay and then next thing we do is  we test if it is a list and if it is a list we're   just going to take it and extract the information  from it so we're going to be extracting the action   and the description okay and once we have all  I mean those pieces of information we're just   going to write them within the chat message so so  here as you can see we have S WR we're writing the   agent name in this case this piece of information  is actually coming from our parameters right here   and next we're going to S write the tool that the  agent chose to use and for that we're getting the   attribute from the information that we got inside  the agent output and we after that are going to   add the I we're going to log the input that our  agent is going to be adding to that tool so just   to give you an example of what might be happening  here for uh for example let's say that our agent   chooses to use the search search and contents  tool which searches the internet um based in a   query and Returns the search results from EXA and  Returns the contents from that given website from   EXA as well so right here the what would happen  is that the tool used will log search and contents   and the tool input right here would log whatever  query our agent chose to look in the internet so   if the agent was looking for news about AI or news  about the USA stock market here you would see tool   input then you would see Json object saying search  query latest news about the US Stock Market for   example okay and then right here we have the last  I mean lastly we have whatever the actual um agent   thought which is within the action object right  here and this is what you would see when the agent   is formulating its thought okay so right here you  would see something like okay so I need to find   information about the latest news on the USA stock  market so I am going to use the tool named search   and contents to find information about this and  then right here inside of expander we're going to   add the observation to be clear what is happening  right here is I mean an SD expander is just a   HTML expander just like um a streamlet component  that allows you to click an arrow to expand the   content that is inside of it and you have like  a show observation tag and inside of it we have   the observation now the observation is whatever  the agent found after performing the action so   in this case if its action was to choose a tool  and if the action was then to search the internet   the observation would be the search results now  I chose to put this inside of expander because   usually the observations are very long especially  if you're uh have a research agent so for example   if your research agent is looking for the latest  news about AI then the observation is going to be   10 or 15 search results about Ai and all of them  with their contents so that's why I put it inside   of an expander I'm going to show you in a moment  how that looks in the actual front end but just   to be sure that you're understanding what is going  on right here and then last but not last but not   least here we have the if the agent output is  an instance of agent finish that is why I had   to import agent finish right here um we're going  to do this and agent finish is basically just the   class from Lang chain that the agent returns I  mean of which the agent returns an instance of   once it has finished its thought process okay  because remember that an agent goes into some   sort of a loop a thinking Loop where it calls  the language model gets a thought performs an   action then calls the language model again then  gets a thought performs an action Etc until it   finds the answer to the task that you gave it and  the idea right here is that if it has finished the   task it will return an agent fin an instance of  agent finish and this says that we are going to   be passing to the next task within our process  and I am testing here for agent finish precisely   because we want to know uh when the agent finishes  task and I am writing a um different message in   that case in which the agent is going to be like  coming up to us and saying hey I finished my task   here is the output and then it's just going to  tell you what it finished then of course just   handling some unexpected formats and that is the  step callback it works pretty good I have actually   tested it quite um quite a few times before and  how about we actually just test it right now so   let's do that oh and something that I forgot  to mention before is that right here we have   added the step C back to the first agent but we  haven't done that to all of our agents so I'm just   going to cop this right copy this right here go  back right here going to paste it right here and   this time of course the second uh parameter that  we're going to be passing in remember that it is   the agent name in this case it is not the research  agent but it is the chief editor and for the last   one it is going to be the designer so I'm just  going to paste this right here and this one is   going to be the designer or HTML uh um Rider let's  call it so we're going to save this and now we are   going to execute this automation not from here but  from our front end and we should see the messages   display on our front end with all of our thoughts  of our agents and at the same time by the end we   should see a download button with the results of  the entire automation okay so let's check that wonderful it's been a few hours of hard work  now let's get to see the rewards of all this   hard work and generate a newsletter using our  team of AI research agents who will communicate   with each other and give us a complete newsletter  with the latest news that they have researched   on the Internet by the end of a few minutes  okay so let's choose whatever topic we want   right here we're going to generate a newsletter  about the USA stock market and let's just add a   personal message here to add a personal touch of  this automated process let's say something like   hello everyone this is a newsletter generated  completely by AI research agents so enjoy and   this message is going to appear at the top of  our newsletter so now let's click on generate   newsletter sit back and see our agents collaborate  with each other and communicate with each other   okay let's do that okay so we have the first  one we have the first thought the first thought   comes from the research agent we can see that he  used the search and content store tool and what   he thought in order to get here was to find the  latest and most relevant news about the USA stock   market I should start with a broad search query  using the search and queries tool and the query   that he searched for was search News latest  news on the USA stock market and if we click   right here on show observation we're going to  see the results that our agent got so in this   case the first story that it got the da extends  its weeklong winning streak Etc and here we have   all of the new stories that our agent was able to  find and that will be useful to for him to create   this news letter okay let's see what he does  next and the second thing that we have right   here the second thought is an exception and this  is a very educational example because we can see   that the agent can make mistakes and correct  itself okay so here you can see that it made   a mistake while calling one of the tools and it is  able to correct its mistake and find a solution so   that by the end we have a result that we want  so here you can see that the observation is I   did it wrong I passed in the invalid format I can  now give a great answer blah blah okay so that I   mean it seems to have decided that it had all the  relevant information after this mistake and we can   see right here that the agent said I have finished  my task and here's the story one The Story 2 The   Story 4 5 6 7 and up to up to 10 stories now it  is the the turn of our chief editor and our chief   editor also used the search and contents tool and  his thought was to accomplish this task I will   need to carefully review each news article rewrite  the titles and make them more engaging Etc check   the URL so you can see how they are interacting  with each other as though it was a team okay and   the team the chief editor also found an exception  we can see the observation of the results that he   got in the previous task right here we have the  exception he's like okay there was a mistake I'm   going to give the final answer right now and here  you can see the chief editor finally finished his   task he gave us a title and a summary for each  one of our stories he chose the most relevant   stories in this case he chose four of them and  now we have that the the final agent who is the   HTML writer has successfully created our HTML  newsletter that we going to be able to send to   our subscribers and there is probably a better  way to show this than just a few printed text   and the screen like this so what we're going to do  is download the HTML file and let's take a look at it okay just going to make it a little bit  shorter like this there we go so now we can   see the results of uh I mean the results of  our automation uh we have a title that was   generated uh by AI of of course and it is a  specialized a special title for this week's   newsletter then we have the title for each  one of the stories which was also Rewritten   by our chief editor the summary probably comes  directly from the researcher or maybe the editor   um modified it a little bit and here is just a  quick um paragraph outlining why this article is   relevant for our readers then we have the source  let's see that the source actually works so   there seems to be working correctly this other one seems to be working correctly too this  one too so everything seems to be working   okay amazing uh there we go so congratulations  we have successfully finished our newsletter   Automation and now we can create our newsletter  for our subscribers in a few minutes so good job   if you enjoyed this video be sure to subscribe  and like the video and of course share it with   other people if you like it uh thank you very  much for watching and I will see you next time [Music] [Music] [Music] [Music]

Channel: Alejandro AO - Software & Ai

Views: 9,413

Keywords: CrewAI, Automation, ChatGPT, OpenAI, LangChain, Multi-Agent Systems, AI Agents, Autonomous Agents., langchain, ai tools, crewai examples, ollama, crewai local, crewai ollama, crewai gemini, create custom tool, autonomous agents, ai agent, how to make ai agents, create complex ai agents, claude 3, crewai tools, generative ai, crewai automate, crewai agents

Id: vhbfs38XmKk

Length: 52min 29sec (3149 seconds)

Published: Mon May 20 2024