Streamlit UI for CrewAI AI Agents

All right, so hopefully y'all can hear me. Yeah.

Um, just joined and I'm gonna be starting this in a sec.

Uh, so today's also another working session, so it's gonna be pretty interesting to see what I'll be working on today. I got some—

like I mentioned in the, in the title, it's building a Streamy UI.

It's a project that I started a few days ago, but I want to kind of finish it off and then I can maybe share it with everyone and also add a post about it and shoot a video about it. But essentially it's a UI for AI agents using Streamlit. So, and this, I'll be building this locally. It's already built anyways, so I just want to kind of polish it.

So that's the gist of what I'm doing today. Um, I hope all of you doing awesome wherever you are. Make sure that everything is ready to go as it should.

All right, I gotta move my camera a little bit.

I gotta position myself in the center.

Where am I going? Cool.

Okay, we're game. So, so it seems like I'm skipping some frames here, which is, um, Okay, in this case.

All right, so let me go ahead and share my screen, right?

So yeah, live scene here. Cool, cool, cool. Now I gotta take out that piece because that's not what I'm doing today.

So yeah, so this is what I have going on.

Um, I have on the terminal here— I'm gonna spin up this because I already have the app, but let me just walk you through a little bit what I'm doing. So this is a Streamlit app that is more like a UI to our CrewAI agents that I have doing something very simple. But in this case, let me just make sure I tag this correctly so you can see it. Um, but essentially what I'm doing, this is just a UI for the agents that I built. And if we look at up here, I just don't want to— I did kind of like add everything in a modular way so that way we have specific things in specific places.

So for example, the researcher agent here, um, well, the entire agent, because this agent what it does is you give it a specific title And what it does is it goes and does research on that specific topic and gives you back output.

Also, let me know if you can't hear me for some reason, which I don't know why that would be the case.

Yeah, let me know if you can't hear me. What's up, Anurag?

I see you saying hello there. Hey, hey, doing pretty good, man. Hopefully you're good too. Uh, let's see what I'm going on my side.

Cool.

I just wanna make sure that Twitch is good.

All right.

Okay, so it seems like everything is good.

Cool.

Awesome.

So let's go over what the what the code is about. So we. I have this researcher agent, and what it does is essentially it uses Exa API.

And if you're not familiar with Exa, let me go ahead and pull this up because I don't want to just be mentioning stuff and you're just wondering like, what in the world are you talking about?

So Exa is a company that, um, let me just look up their website.

So exa.ai. If you go to exa.ai And let me just make sure that this is also centered on the screen, which is good. But my Wi-Fi is so slow today. Okay, yeah, so essentially they provide like a search engine for AI.

And that's what it says here, which you can see.

I need to zoom it out.

Um, I have a bunch of lag today, like my mouse is even lagging.

But let me close out some of the tabs that I'm not using here. I want to free up some bandwidth.

We can hear you. Thank you, thank you for confirming that. It's just some lag on my end, but otherwise it's pretty good.

So let me zoom out of this so you can see Exa a little bit more.

So they are a search engine for AI, and essentially what they allow you to do is with their application, with their offering really, is they give you an opportunity to cook their search engine into your agent, and your agent does like deep research on it. And they have several endpoints, and the one I'm going to be using at least today, they have one for search, they have one for answers, I'm going to be using one for answers. And essentially what it does is, let me just close these other ones.

I'm going to go to the dashboard.

And they also use API.

So if you have, you'd like to use it, you have to use an API.

They have like a quick start, get started here. So they have like a simple search. They have RAG with OpenAI.

You can do RAG with OpenAI with them.

And then there's also answer endpoint.

Actually, let me just Make myself a little smaller because that could help to see the bigger page.

Yeah, sorry about that. Um, it's pretty choppy. I think it's just because of my bandwidth is really terrible today. I might just Convert this to I don't know a full video and just do it instead of like streaming if it's that bad because there's something going on.

I don't know. I'm not sure exactly what's what's happening with my with my stuff today, but I'm gonna try to close as many as I can.

There's something definitely eating up my bandwidth. I could try improving it and then coming back. What's up, Deleted? Good stuff. But yeah, so major project to add on resume using ML and GenAI? Good question, Arish. What would be a good project to add to your resume? So I think projects that you enjoy, to be honest. So if you love building like AI agent apps, like the one I'm building, for example, like go ahead and build it and put it out there. That's the main— that's the goal, right? So I'd say build whatever you like, whatever you prefer, whatever you feel like you, you really enjoy, and kind of use that, um, and put it out there. Let people, let people, let people discover you. Let people find out all the different types of apps because not all the time you'll have those good ideas. So what I would say is just, um, and maybe this is not really answering your questions really good, but I'll give you examples, right? So some examples that I personally use in the past is Um, I have built, for example, things that I want to use. For example, when I, when I was starting off, it was a very simple app. I built like an ISS tracking app. There's this, um, live API where you can get like the real-time coordinates of where the International Space Station is, and what you can do is do stuff with it. So I would get the coordinates of where it's at, which I think it was It was like milliseconds differences. And what I would do is go ahead and overlay that over my coordinates and figure out when it's going to be closer to me. And then I would just, um, be available during that time when, when it's passing, maybe try to use a telescope or something to see where— if I can see it overhead. Um, and that's something that you're able to explain in an interview, for example, and people love that stuff.

So.

And it also just shows your passion.

You're just not doing it for the sake of, of doing it. Um, let's see. So there's a lot of frames being skipped.

Let me go ahead and check my bitrate.

Actually, I'm gonna lower it to about 4,500, and let's see if that helps any.

Okay, hopefully that helps a little bit. I lowered it to 4,500. All right, um, I still want to see EXA used in a crew either way. Okay, um, either I— okay, cool. Yeah, thank you, thank you for, for being here. Uh, appreciate that. So I'm gonna— I mean, I'm, I'm just gonna go straight ahead and show you what this does. So with EXA, like I mentioned, it does give you an option to use different endpoints they have. They have, of course, the RAG with OpenAI. They have the simple search as well. But what I'm really interested in and what we'll use for this specific demo that I have here is, is the answer endpoint that I have. And with the answer endpoint, there's a lot of cool things I can do with it.

So let me just click on it so I can show you what that looks like.

So with the answer endpoint, here's what I could do with it. So with answer endpoint, you have, you have to pass in your API key of course, but then you can ask what is the latest valuation of maybe SpaceX or something of the sort, right? And you write text true, that way it returns the text element that you're looking for here. And it's going to go ahead and do that. So if we come here, let's see Let's try it in a playground, right? So in the playground, this is the playground they have. And here's the question still, what's the valuation of SpaceX? And this is what it would look like in Python. So this could be a tool that we just give the agents to use as a tool to run a query. And when you run this, it should— and you can choose here, of course, it gives you the different questions I can ask. So let's do it on SpaceX and let's run it. We'll see an example here of what the output would look like.

And I'm noticing that you can't actually see.

So I'm just gonna keep scrolling around until you can see the output here. So you see the output. So this is the output. I know you can't see it so clearly, but this is the output you can see from the screen. So it just goes and searches the web and gives you an answer and aggregates the answers and the URL where you got it as well in the title. And then it gives you the final output of what the what the valuation— for example, there's $350 billion, and this is according to The Guardian. This was published on December 11th, 2024. So that's what we're going to be using in this case for EXA. And now that you have a bit of context what EXA is, they give you access to APIs to do, to do stuff. So essentially stuff that you can hook up to agents there, so which is pretty cool. And that's what we went with, that's what we need actually. So the next step would be to Let's look here in our code. You can see that we have— I already built here the ExaTool. And this is on the researcher side. So if you go to ExaTool, this is the answer endpoint that I'm using here. So same code that was on there. I'm just writing it as a function that I can give it to the agent to use it. And here I'm creating the run function for it. And adding all the error logs that need to be, to be caught, and also just returning the final citation, the answer, and then the citations underneath it. So when I give it an agent, the agent should run it, give me an answer, but also add the citations to what it found in the, in the answers.

So that's the, that's the goal here.

Now we go ahead and create the agents. So there's a create researcher agent here, and we're passing the LLM option, which LLM we want to use, because remember, this is still a Streamlit app that we're using. And you could pick like the DeepSeek R1 hosted by Groq or OpenAI, and you can put the model as 01, or I could just change it up as well, but there's no need. 01 will do fine. And then we have the, the, the agent now, which we're instantiating here as well, and we're giving it the tool of answer tool that we just built up here. And the goal for this agent is research analyst, and they're just supposed to conduct our research given a specific topic. Um, and the backstory is they're an expert analyst and summarizing— oh, it's summarizing information. And then we create the task. So the task here is what it should do, you know, generate a detailed executive summary, blah blah blah.

It should have an executive summary, key findings, recommendations, and then citations after that.

And that's it. But the cool part with this entire thing would be— and this is just a sidebar for the Streamlit app. So Streamlit has like sidebars where you can actually go look for information.

So that's always cool.

The cool part is because you're wondering, well, if I run a Streamlit app— actually, let me just run the Streamlit app so I can show you exactly what I did here. So if I do— first of all, I need to create a virtual environment. Uh, if you're using Python, I love creating virtual environments because you don't want to mix up all your code in, you know, all your packages together.

together because they'll have conflicts.

So put them in a box for that specific project.

So in this case, I'll just do python3, and I'm gonna use the module venv, which is virtual environment.

And I'm gonna name my virtual environment .venv. And then what I'm gonna do next is just instantiate that virtual environment, or activate. So source .venv/bin/activate. If you're using Windows, this could be different commands.

But it's easily, relatively easy for you to look it up and figure out what that, what that should look like.

And then now I have to install the requirements, which I already have here in the requirements files.

What is— what I will need—

we'll need CrewAI, we'll need CrewAI Tools, we'll need Streamlit, and we'll need ExaPy as well. So let's go ahead and do that.

All right, let me actually move this chat up here. All right, cool.

So you have the exe.py there, everything is installed. So what do we need to do next up here is just pip install. And I'm using uv here, uv pip install. And uv is pretty fast in like installing your packages because you can use any package manager or package installer, package manager really in this case. I love uv because by— and it's made by Astro, it's pretty fast. And so we're going to install our requirements.

So r and then requirements.txt.

So it should go find our requirements on the txt. So you can see it's already created a virtual environment up there, .env, and now it's activating it. And we should see the activated portion. And then once it does activating, it should start installing all these packages that we have on the screen right here.

Here.

So those are the steps, and you can just do these in one-shot, um, CLI command, and that's what I'm doing here. And then after that, what we would do is we'll be able to run the Streamlit app, and we can see it like run on the, on the terminal here on the localhost. So let's give it some time.

It's really slow today for some reason. Um, let me check again.

All right, okay, so it's already starting. You can see it's installing the packages there.

So you can see EmbedChain is installing.

Well, while that's running, let me show you what I meant by the cool part. So with Streamlit app, if you build like a Streamlit or if you, if you build CrewAI agent, usually when you run an agent, you usually see like the output shown on the terminal, right? Like right here, you would see like the output here, like agent and then a tool call and then the results. You can see it like searching the web or doing whatever it needs to do to give you the answer. You will see all the output in the terminal. But if you have a Streamlit app and a user is using your app, for example, or you're just like really just looking at your app when you're running it, maybe you just want to see the output shown also on the app itself, just not on the terminal. You just want it on the app. So when you're looking at the app, especially with like long-running processes, you don't want to sit there and you see like the spinning wheel, you know, continue running, running. You don't have any idea what's happening under the hood. So I built like a standard out function here which essentially just grabs everything from the terminal and kind of throws it into the, um, onto the Streamlit app so you can actually see on the Streamlit app itself. So let's look here. So this is the function that does that, and this is output handler. So it processes the Streamlit output, and that's what it should be doing.

Let me just go ahead and put myself even lower. That should be good.

All right, cool. So now that we've installed all our packages that we needed, we can go ahead and run this Streamlit app so we can actually see it on the terminal— oh no, on the, on the web, on the browser. So streamlit run, and we put the name of the file that we want to run. In this case, it's this streamlit_app because this holds our app entry point.

So streamlit run streamlit_app, and then run that.

It should open up in localhost, and I'm going to bring that localhost here so you can see exactly what I mean by that. But this function here for the output handler, it goes ahead and Just kind of grabs all the stuff from, from the terminal and remove some of the editing to make sure that it looks pretty neat on the screen when it— when you— when the output's on the screen. Because also I just want to like dump all the stuff on the screen that just looks really terrible. So, um, here it is, and this is the captured output. So this captures the output from the standard out.

Uh, which is from our terminal and adds it into our handler there.

And then what we do with this on this, on the Streamlit app itself, or on the agent itself as well, we're able to kind of add that as like a callback handler so that it— we could use it on the Streamlit app to show it. So this is where we add it. So there's this container here, we're using, um, st.status For Streamlit. And sd status essentially is like a container that opens up and it shows you the status of what's running, and you can actually see the steps that are running, and it's in a container. When it's done, it just self-closes itself and you can see the final output clean after that.

So that's the goal for this, to make it really user-friendly in a sense. So this is the step for it, but this is taking a minute to run. I gotta figure out what's going on with my system.

All right.

So there it is, it's just running.

It spun up now on localhost.

And it's loading, so let's give that a moment.

All right, uh, in the background I'm just troubleshooting The issue with the skipped frames here, and I'm gonna try to resolve this while, while streaming and not have to log out and redo this and then come back on.

I see I can't edit anything when, uh, especially the stream quality. I can't edit anything if I'm streaming already, so I have to like stop it and then come back on, which is terrible.

I don't want to do that.

All right, so we got an error. It's saying it doesn't recognize EXA, which is interesting. That means our package install didn't work very great. So let me go ahead and fix that real quick, and we can just rerun this again.

Should be good.

Let me just make sure that whatever was failing, we can actually see it. So this is what it's complaining about, but are we even using EXA in here? So let me see. EXA, I'm not really using it, so I'm not sure exactly why it's throwing an error. But yeah, let's rerun this again. All right, so while that's running, let me keep looking at the stream stuff and see what I can do with it.

Yeah, let me know also if it's still terrible. If it's just really, really bad, I mean, I probably will have to stop and then come back on once I've changed the settings. So please let me know if it's really, really bad.

Just be like, yo, it's terrible, and I'll, I'll close it.

Do fix the settings and then come back on.

You can try it around here. All right, so I'm still getting that exo.py error, so I have to investigate that as well.

Cool, cool, cool.

Now let me check it out. What exactly is going on here? Just make sure that I have the API keys set correctly as well.

So I'm gonna, I'm gonna turn off my, my code screen so you don't see my API key, and then I'll come back on.

Yeah, I mean, I'm not leaving, but I'm just turning the coding screen off. Okay, so those are set pretty good. I don't see any issue with that. All right, let me just verify on our— and let me see how we're passing the API key. So, okay, I think we're passing the API key pretty fine there. And if I look at the example here, just want to make sure that this is correct as well. This is supposed to be a post.

All right, let's go. All right.

All right, so there's that. I also have some other app here as well, and maybe I can do like a split terminal. Or let me just add another terminal here because I have another version of this Exo app that is just on one page. There's a one-pager, uh, app, and it doesn't do anything fancy.

It does exactly what the other one does, but it's not structured very well. It puts everything in one just, just a container. And you can see here what I mean.

So this is the kickoff section, but if we come up here, we have the agent there, and then we have the— we have the agent, and then this is the task for the agent. And then we have this callback function that we already created, and we're putting it under the, the status so that way it kind of captures the output of that into, into the container. But maybe what I'm doing here is once it generates that and kickoff, it should print that outside of the container, which is not. So, um, that's the callback function. And let me just try running this. So let's do stream.run Task output versions. So we should see another Streamlit app pop up. Just want to make sure this error is not universal and it's just an isolated problem. Then if it is, then—

and this is the thing with Python, right? Python virtual environments are Notoriously horrible, um, but there's always like caveats to it and ways to do it.

Um, I like UV, it manages it pretty well, but it's still, still not the best in my opinion. All right, cool.

So while that's running, and I think, um, I think eventually I have to log out and then come back on because this is just— it's just lagging even on my system.

Like, even running this app, this shouldn't be taking this long for it to run.

So I think I'm just gonna have to log off, figure it out, and then come back on.

It's unfortunate that I have to do this so much, but no other way around this because I want to make this a better experience.

So what I'm going to do is I'm going to close this and then I'm going to come back with, um, I guess a better improved streaming experience. But this is the app.

Maybe before I close out, so this is like the portion of the app that I was talking about, like the one that—

the extra one, not the main one that I was building.

But this is just the extra one.

So if we give it a topic, so you can see already like the problem. The other one was giving me problems with like extra, the same environment, same everything. But for this one, it's working great. Like it's, it didn't throw the extra error.

So anyway, let's just continue.

Let's give it a topic.

Um, we could say latest AI agents, yeah, agents news and, um, product announcements.

So let's see what it's gonna get.

So it should go to the web and start searching and find all the resources what we need and output.

And also for context With this specific one, what I did with this agent, what I used, I didn't use the kind of standard out and print on a screen. I just used the task output options that are there in CrewAI. So if you look here, you have like the output. You can do output agent, output description, output summary, output raw. And it's just going to output each of those segments. And that's what I'm doing with that one, with this one this time. This one is finished generating the report and it's under this container. And you can see for the agent, it did say what agent it is, is the research analyst.

And then the task research, um, the latest 2025, uh, it did bring that up.

Uh, and then the task summary, it's like it cut it off, it could be more.

And then there's this raw output that he got, which is of course all that.

But if we go continue here, we see the key findings of what we wanted it to find. Advancements in AI agents.

So it mentioned about Google unveiling upgrades with 2.0 Flash Gemini, which is really recent. And Workday—

oh, I didn't even know this—

Workday has launched a new agent system of record designed to transform business processes through role-based AI agents, marking a progressive step in integrating AI workforce management.

Pretty cool, pretty cool. I didn't know about that, so good to know. And there's integration into business process, the new technology adoption reveals.

Okay, AI agents into deeply into everyday business functions. Okay, pretty cool.

All right, security and ethical concerns, of course. And then there's a holistic impact.

Um, yeah, doesn't say much there.

And then there's sources where he got that information from, which for us, I think that's the important piece here, is they got it from Google January updates.

And then Workday Investor News, malware, uh, new AI agents could hold people for ransom in 2025.

Well, that's a pretty good title.

Let me give them that, the person that wrote that blog.

But let's look at like Workday, right?

Because it did mention something about Workday. So if you come here, and it did cite this paper, and this is on Workday's investor relations press release.

The next generation of workforce management is here.

Workday unveils new agent system of record.

I wonder when this was. This was February 11th. This is actually today. Hmm, it's pretty good actually because I didn't know about that. And go figure, it just got announced today. So maybe why. Um, so they're talking about Workday is leveraging 20 years of leadership in human capital management to empower organizations