Build a Streamlit UI for CrewAI Agents: Python Tutorial

[00:00:00]so you built your AI agents using crew AI but you kind of feel limited by just interacting with those agents using the terminal and you're wondering can I build a UI to actually interact with these agents well yes in this video we'll be going over how you can actually build one of those UI using streamlet and be able to actually use it locally so let's get started and like always we usually start with going over the architectural design of the project so you understand how everything kind of fits together before we actually jump into the code so in this architecture diagram what we're doing with this agent first of all it's a very simple agent that does basic research on what's actually happening and just outputs the output on the streamit UI so you can actually see what's happening there's a cool component to the streamit UI which I'll show you which essentially we're getting all the actions that usually happen on the terminal so when you see those agent tasks being completed on the ter on the terminal we're getting all that output and putting it on the streamid UI so that way you can track and see what's happening at what stage with the agent it's doing research it's doing this and that so that's the key part here so if we go through this architecture dag you're the user you're interacting with a stret app so ass soon there's a stram app here as well and you're asking an agent to do some sort form of research and the agent here does research is using llm as the brain of it to think about the actions it's supposed to take and then also using it to generate some of the output that's generated the agent also uses EXA which if you don't know about xa. a they are a company that Powers they have a AI engine that you can use to for searching it's an engine for search that AI agents can use check them out at xa. they're not sponsoring this video but just want to mention that they're really cool and you can actually use their endpoints there and what the agent is going to use XA for is for answering your question so they have an answer endpoint they have a search endpoint they have several endpoints there that they have and some of them they're releasing pretty soon as well is the agent Tex in your query decomposes it to make it a better question and asks EXA EXA goes and does some research on that question that you just asked it's going to do research on the topic and it's going to gather also the citations and gather all of them together put it to push it to the llm the llm is going to generate the final response edit it properly the way you want it and it's going to Output that on the streamate UI and you also have another option to download the markdown version of that final report that you generat so that's just pretty quick and simple the big part being I'm just showing you how to actually implement this portion of the streaming UI with your AI agent so let's get to the next section of going over the so this is our code base I'm actually using cursor and if you have vs code any of those different type flavors you know feel free to use it but in this case first of all this image is what I've added here on the image I took a screenshot of the app the final app that how it looks like so this is the app itself and you can see we have it laid out which is pretty cool we have the title here we have the box here where you actually be able to enter your input as a user then you hit start research and this research kind of Carousel here expander if you expand it you'll see the thoughts that went through the agent while he was kind of doing research is you know doing this and that and you'll see it when we start running it and then there's options here for you to pick an llm provider that you want to use you have Gro and open AI for AMA of course there's caveats that most of the local models that you will use are really terrible at function calling so they won't be able to call the function to actually use xer to do the search so it's just a bummer it's most of them are not really good but I'm sure if you look through there you might find some that will work really good and then there's Gro it just provides really fast inference and also the way I've laid out the code is easy for you to add other llms if you if you want as well and there's also open AI there pretty self-explanatory and you add your API Keys here and you're able to kick off this app what I'll do I'll try deploying this app after and you can actually go ahead and just input your keys and you can run the same things here that I can so let's go ahead and look at the code structure first of all of how we've laid out everything on our code base so we have the streamlet here do streamlet which is where we'll save all of our secrets our API key so in this case it will be we have EXA API which is what you will need to get from EXA and if you look at here EXA API you have open a API key and Gro if you're using and others if you're using maybe something like cerebras sambanova you know the list is really endless at this point so this is an example of how it looks like or my secret of course I don't want to open my secrets because you'll see my API keys so that's that and you can also just set it as n and have them in there but in this case I've added that if you want to deploy that streamate app somewhere so other people can use it that's the right way to do it and of course virtual environment like pretty self-explanatory there and then I have source and under Source you have components and I've just separated all these things to make it more modular and kind of best practices and I have researcher. py which which actually holds all our AI agent code he has the tool for the tool that we'll use which is EXO so here we have we created the tool itself we have the answer schema there and then you have the answer tool and we're passing the API key of course this is just the the entire post message and we have the application and we have the endpoint here which is that xx. a answer that we will use to to send our our post message here and we'll send your query and we want it to return us text and we want that to return us true and here we're just catching all the errors in case there's an error with HTTP errors during the process and we're getting the response back here from the API with the answers of what you asked and we're extracting the answer just the answer to your question it will be in text and then there's also citations like I mentioned it does research it also brings in citations that you got from for the answer that you gave you so we're getting all those because we need those as well and then the final out put that we'll actually output from this tool itself which is a tool that agent will use we wanted to finally output citations and the answer the answer and then the citations that he generated and we want that output so when the agent is asking the tool hey I want you to actually run this query from the user and answer it for me it go ahead do the research find the answers for you first and also make sure that it CES where you got it from and then it sends it back to the agent to decide what it what it wants to do with it right so if there's other processor down the stream it would pass it to another agent but since this is for our case it's just an agent that does research on outputs the output doesn't need to pass it to anybody anybody else it actually returns it to the agent and then the agent generates the final report of course with connection to the llm then we have the llm research agent now this is the agent that does our our work so we have to instantiate the llm that we want to use and then also build the agent so in this case this is self-explanatory there what we're doing here is just setting the provider and the model and if the provider is Gro of course passing the gro API key and also the model that the user will choose from the drop down same thing here with AMA which just using Local Host because it's going to be local and then Allama model that we the user will pick which gets added in there and otherwise if it's you know if the model is GPD whatever all these open a models it will go ahead and set whatever API whatever open AI model that you picked and also passing the API key and you can also have custom where you actually just writing the agent the the llm itself not you're not restricted to picking from this option so you can actually just type it in exactly how it looks like and so we build our agent so here the agent we have here is it's called researcher just the word researcher so this is the entire agent right here so if you look through this this is the entire agent and what we have the role for the agent is a research analyst because you have to tell it the role right it's a person maybe assume it's a person working at the company they have a they have a name they have a role you know they job title and then they have the goal which is what do they do what's the job description and then they have backstory which is essentially their experience what are they good at and then the tool that they will be able to use here is EXA answer tool which is just built up there you're able to use that exra tool to go find answers for us and so you as a if you're a human being for example tool would be equivalent to maybe a laptop internet access for you to actually get your job done at your workplace for example and then we have the llm which instantiated up here whatever llm you pick is going to be passed to the agent here and the llm is more of like the brain of the agent because that's what he's able to think through and generate answers and also make you know decide what actions to take and then the BOS equals to True essentially what we're doing with this is whatever what it's doing we want it to show us what is what's it's doing so essentially just kind of you know speak up and so we can see what you're doing kind of thing and then we just return the agent there because it's a function and then we build the tasks for the agent because each agent needs to have a task the same way each employee needs to have a role and explanation what they need to do and here's what we're doing that so description we put this as a task description and we taking that somewhere up here we'll instantiate that there so task description is essentially what the agent wants you want the agent to do and then we have the expected output of what the agent itself is expected to produce after the the entire process what it does so in this case we wanted to generate a full report and this is all the explanations we gave it to make sure that it generates a report we want so you want to generate a comprehensive research report for the year 2025 to make sure that it's current year and doesn't just hallucinate any other time period and also we want the report to be concise and focusing on significant impact and impact on findings and this is how we wanted to structure the the report so it should be an executive summary section key finding section analysis section future implication section recommendations and citations section and then we just gave it extra information there to make sure that you know it's relevant to 2025 and specific dates and numbers if anything is added in there and then we passing the agent that needs to do these tasks so this is assuming if you had so many other agents you would pick which agent will you want to do these specific tasks so for this one we just put putting it as research which is our research agent up there and then once it's done doing its research and and then generating the findings we want it to Output the final output to a folder Cod put and under that it should name that report as research report. md.

[00:10:20]markdown so it should be markdown format and then we have the agent we have the task and we have the tool so now we put all of them together that way they form a crew that can actually get the job done so here we have the crew and under the crew we have the agents we have one agent if we had so many others we would just add them here in the list same thing with tasks when tasks if there was so many tasks we would just add them on the list as well and then both true same thing as above tell us exactly what you're doing as a crew and then the process this is how we want the job to be accomplished in this case it's only one agent so we want it sequential if it was maybe you wanted a manager that delegates to others it would be hierarchical and so forth so and then after that we just want to kick off the entire process so that's Returns the kickoff so that's our research. PI now we get to the streamlet side so on the streamlet side this is the sidebar so on a streum app like we mentioned earlier there's going to be a sidebar which where that's where you have all your configurations for llms and API keys so this is what handles that so we have the alarmer section there we have the sidebar here as well that kind of handles all those sections you know picking the llm and putting the API keys this is what all this does and that's really it so that that finishes the sidebar now component is done let's go to utilities yeah so on utils this is where the magic happens in terms of what I mentioned when you run it usually the output shows up in a terminal here usually you see okay it's done this step it's going to the next step well for this case we want to capture all that output that goes into the terminal and this is the standard out capture that and then pass it over to strum to be able to show it on the UI aspect of it so we're doing some reg reg gymnastics here a little bit and um we just for examp example here we have to create the class for streamlet process output and we have to clean the text and remove all the anti Escape codes from the output that comes in from from the process and that's what we're doing with all this code right here and then we have removing any bugs that we get from this from like light sometimes light LMS throw some error messages we don't want to show that on the output screen so we check that out and then we clean some of the formatting errors that usually comes in with it it usually shows some like timings how much it took for this and that it looks a little tacky when you leave it in so I took those out and then kind of writing the clean text there and then we are splitting each line especially for whatever output comes in we want to split that and then for each line we want to strip some extra stuff that we don't need and now we have the new lines for each output after each output we want to add a space line so it's readable for the user and then we just want to flush it and just continue doing that now we have the context manager here and it just captures the output from directly from the terminal like mentioned and then redirect it to the Stream container that we will have to show that output there so that's all that we do on that output Handler and now if you're wondering about this init files which are empty technically you put them where you have functions that you want python to think of them as packages so that you can use it within other files as well now we have get ignore this just ignores all the stuff we don't want to commit to our get up repository like API keys and all that and the image I mentioned earlier license of course read me for all the instructions that you would need to run this example and then the requirements file like I mentioned and then we have the final Stream app here that kind of puts everything together this is because I know we covered sidebar now we go to the main body of the stre app itself now we have here the page configuration so this sets the page title at the top and the icon and all that all the fancy stuff with stre and then adding this on the sidebar here we're adding the crew AI logo so when you see it here this is this right here and so that captures that and then the next step here is just split into three columns the entire page and then in the first section we just want to add in the middle portion we want to add this title as career researcher so this section here so this is in the middle we don't want it to be you know if we didn't put this in the middle it probably would be here so we just kind of styling the page really in in a sense and then here we just checking if the API keys are set and if not they should warn the user hey put in the API Keys first before you proceed before you do anything and just checking if it's Allama it passes in all Lama the way it's supposed to and then here we create another three columns as well and in this First Column we have just a text area this is where you input your message what you want the agent to do here and we set the height of it to 68 you can adjust this as you need to but that's what happens here and then we have another column of course we set up three other columns here and this is for the research button so this is this button this is this text area and this button here so those are that's what we doing there and then the next section here is once you hit the research button what's supposed to happen this is what cap captures that so first of all we set a status container and this is what we will open up as a container and when that container opens essentially what we're doing is we're capturing all the stuff that we redirected from the standed out we're redirecting that to this container so that way it shows you what's happening step by step and this is what we're doing in this section right here so it goes through that captures everything that we need to and keeps outputting once it's done outputting everything and we're done it should now close um everything should be research complete close CL the container we're done if it errors out as well it should close it still well we're not closing it's just showing the error message and you know showing you what happened and it doesn't close and then here we're just getting all the results from the agent making sure they are strings and then we are putting that in markdown and it should output on the body of the stre app and then after that we have here the just a divider just showing you if you want to download the output that you got from the research this is what you do we just added a button there for you to click download it should download. MD file for the entire research and here is just attributions just you know created by me you know using Korea XA and streth that's all it is so now the next step now is let's run the app and actually you know see it working in to run the app you only need to do streamit run and then the name of the app that you're trying to run which is this file here streamit app.py and you hit enter it should open up on 8 host 8501 now the app is up and running on 8501 there you go on Local Host so I already loaded the keys that I need need which is open AI key and my API key so you would go to x.

[00:16:32]a and go to the dashboard get an API key from there I think they have free credits that you could use absolutely so go ahead and do that we've already set here I can set let's just set this to all3 mini because it's a it's a bigger better model so we've already set those pieces we don't need that section anymore now here we put a topic that we need so the topic that I put here is research the latest a agan news in February 2025 and Summarize each each one okay now let's run that and see what happens so here is with the container that I was talking about the status container opens up and it's starting to show you exactly what's happening so previously you would have seen this on the terminal but now you're seeing this on the strum app so it's outputting everything as you see so the research agent is busy in you know doing research now so it's getting ready here setting everything up and you should start seeing some other stuff coming up here and there you go so now it's saying here you know using the tool XA ask EXA question and then the tool input what it's giving to the tool is provide a comprehensive summary of the latest oh and it's done that was pretty quick but it's asking the tool provide a comprehensive summary of the latest a agent news in February 2025 include major developments notable events statistics market trends blah blah blah so you it gave it a lot of details so this is not a question I initially asked and you can tell it did reframe my question better and asked xer and then exer here went ahead and did the research you can see it's already jumping in and then it got the answers here as the task output it's you can see it did you know it generated some numbers some citations for some of the from some of them where you got that information and it kept going and generated the final output there and then we have the final output it kept going did some research extra research until it got to the final document here and when it was done it closed it up and it also outputed here the final summary that we can read through so it says in February 2025 the landscape of a agents is undergoing transformative Revolution marked by rapid technological advancements so I don't want to read the whole thing but you get a gist it goes does research brings it to you and it gives you some really relevant stuff that's happening so major discoveries analysis of what it found and then future implications of what it found and then there's recommendation strategic suggestions for stakeholders invest in the development integration of proactive multimodal AI agents as R&D programs risk mitigation and then there's investment Focus areas like healthcare Finance customer service where agents can significantly enhance operational efficiency that's okay okay but you know could be better investment in regulatory technology oversight to ensure safe and responsible Innovation that I dig and then the citations of course of where it got all the information this is all arranged properly and then we have the final here you know download the report so if I want to download report I would hit download and you could see here it's already downloaded the report and if I open the report that will take a minute to open but once that opens like you already have the same version of report that you had um on your system so this is you know final you would have that already on your on your desktop so that's it very quick and dirty and I'll add the repo in the comment section so that way you can share it with so that's the whole demo and I know there's some maybe you have some more questions if you do have questions please put them in the chat and also some things that I noted that you know to keep in mind I know you might be wondering could we convert this into a chat application instead where you chat with the agents yes that's possible can you add more agents yes that's possible but you also have to keep in mind that the more agents you add and the more like in-depth res they have to do then the longer you have to wait on the chat for example um compared to this where you just put it in and you just sit around and wait until it's done you can add on top of that so many processes of course this is a basic Skeleton version to just get you started if you're looking for the code for this demo please look into the description below you'll be able to find the code play around with it if you run into any issues of course let me know I'll try to help you out as much as I can and also if you haven't subscribed you should already be subscribed this is the good content that I keep creating here and I'll be sharing more I'm also experimenting with live stream so if you've checked those out that would be cool as well but play around with it I want to see more stuff that you buil with this if you end up building something really cool tag me on socials I also tag crew Ai and some of the other providers that have mentioned here we be happy to repost your stuff so with that thank you and see you in the next video bye