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

In this comprehensive tutorial, we will guide you through the process of creating a graphical user interface (GUI) for your CrewAI automation. We will be using Streamlit, a Python framework that allows you to build GUIs with just a few lines of code. This video is a clip from a longer video that will be released in the coming days or weeks, and will cover the entire process of building the automation and the GUI.

LINKS
===

We will be using Streamlit to create our user interface. Streamlit is a Python library that allows us to create neat graphical user interfaces with a few lines of code. In this video, we assume that you already have your CrewAI automation working and just want to plug a front end to it.

By the end of this project, the results of your automation will be displayed in the GUI. This will include a download button that will allow the user to download the newsletter as an HTML file.

Timestamps:
00:00 - Introduction
03:12 - What this automation does
04:54 - Installing Streamlit
06:01 - Create App and Sidebar
10:57 - Initialize App Session State
15:05 - Create Generation Component
30:57 - Add Agents Step Callback Function
46:58 - Results

[alejandro_ao]

Errata:
At 32:12, I do an overview of the front-end code. There, you see some code that we fixed two minutes before, when I said "hello from the future" (the initialization of our Crew object). Don't pay too much attention to that. Anyways, you can ask me your questions here!

I hope you find this useful!

[andydataguy]

Brother you are a legend 🙌🏾 I've been needing a UI for crews. You still top of the game! Thank you for taking the time to make and share this

[BrandonFoltz]

Oh yea! It's like Bob Ross for coding AI. Great to have another video that can be expanded and reused for other applications. The emphasis to always have a front end UI is what sets these videos apart even if it takes a little more time. Bravo as usual.

[IdPreferNot]

Great to see another quality video from you.

[mygicarskrsk]

been waiting for new vidoes this is lit! 🔥🔥 Thanks for vid.

[robboerman]

Great complete example! Thanks for sharing. Wouldn’t it be even better to have the UI code provide the callback to the call so the crew itself is oblivious of rendering?

[leonchao]

This is such a great tutorial journey.

[OzgurOzsen]

First of all, I really congrats you bro, your ideas are very useful thanks again. However, I am very curious about your opinion on the following as a custom agent tool structure: “For example, how can you plan a code evaluation agent structure?” For example, .java code will be entered as input, the execution of the code will be evaluated with a certain weight, the proper writing of the code will be added as an evaluation parameter, and the use of commands will also be added as an evaluation parameter, and ultimately a custom agent that returns a score. How do you think we can do it? You usually make web search tool examples, for example, wouldn't this be different? Wouldn't it be great if you prepared such a content video? I'm curious about your ideas on this subject!
For example, the first stage can be considered as a simple two-stage evaluation:
1- The presence or absence of a syntax error in the code (Output: True or False, accordingly 1 point if true and 0 if false)
2- Is there a Comment in the code or not? (like condition 1, if the output is true, 1 point if not 0)

How about an agent and a custom tool that will evaluate only according to these two structures?

[deepankdixit]

Another quality video from you! 🔥 Could you also make a video on RAPTOR as it outperforms RAG on longer documents?

[Praticia]

I am waiting for your video that could automate statistical data analysis.

[rthidden]

At 26:42, the st.components.v1.html section was commented out. I may have missed where you went back to fix it. Do you have a time stamp I can look at?

[YaxiHan]

cool video! Will you plan for a video on deploying LLM applications

[lavamonkeymc]

This is great! How would u turn this into a backend api? Since this is just a streamlit application, ideally I want my crew AI in a fast api framework that I can use different front ends for. How would I do that?

[rodrigonascimento]

Hey Alejandro. Sorry if this a simple question. I'm a initiating at all of this.
Did you shared the crew.py file? Didn't find at you GH.

[johnpaul]

it is possible without api key or another approach??

[akj]

This camera angle works better for you.