5 - Building a Web UI for Your Madison Agent with Streamlit

[0:00]Welcome to our Madison framework UI tutorial series. I'm Kriti and today we are learning how to create a simple user interface for your Madison agent using Streamlit. Here you will transform your technical NLU and workflow into something non-technical users can interact with. And before we dive in, let's talk about why we are using Streamlit. With Streamlit you can create user interface with just Python. No prior knowledge of JavaScript or HTML CSS required. So this is perfect for data-focused applications like your Madison agent. Streamlit is also free free to host with Streamlit Cloud. All these points make Streamlit perfect for your Madison agent. The goal here is

[0:44]To make your Madison tool accessible to non-technical users like marketeers or brand managers. And Streamlit lets you do this quickly without getting bogged down in web development. Let's get Streamlit installed and set up. Open your terminal and type this command pip install Streamlit. And let me also give a demonstration on how to do it. So I have my terminal open and pip install Streamlit. Yes. So you can see all the dependencies are installed and the Streamlit is now installed. Next I'm opening my Visual Studio and creating a Python file called madison_app. Here I'm using the same repository that I used in my previous video. This is the

[1:24]Continuation of it as I'm creating a user interface to my project. And in my Python file I'm adding a basic starter code. This is my code and let me run it. Now I'm going to run this Python file with this command streamlit run and my file name madison_app. And run. So now my application is running locally and yeah, I can see a basic web application in my browser. Now let's connect this simple UI to your medicine agents functionality. And these are the steps that you need to do or keep in mind. So first, for your project, identify your core input and output. And for input UI, you can use

[2:08]Either a text input or drop-downs. And for output, you can actually be creative. You can be innovative and use a chart or tables to visualize your data. You have your complete creative freedom here. And let me just implement a simple brand analysis and give a demo. So my project that I was I'm continuing from the previous video is a brand analysis for OpenAI using Reddit data. So this is my N8N. So it is very similar from my previous video, but I had a manual trigger. I have replaced that with webhook web this webhook node. It's a post HTTP method request, and this is my URL.

[2:45]And I'm using this webhook or this webhook URL in my Python file. So I just updated this Madison app Python file, and this is my URL, which I have pasted here. So in this code, I'm using this request library to create a bridge between my UI and N8N. And when a user enters a brand name, which is OpenAI in my case, so Python sends that data to um our local N8N server using this webhook URL. Okay? And once N8N finds the all the Reddit data, the response from that HTTP node in N8N, this code further unpacks that result into a structured format. And for that, we are using Pandas Pandas

[3:24]Library to instantly transform all that raw data into interactive table and metrics metric cards that you can see in the UI. Let me just run run this, and I'm running it with the same command, streamlit run. Let's go to my N8N and execute this workflow. Now going to my UI, here I'm just going to Now on this run analysis. And yes, this is my output. I have a table format. All my response which is that I'm collecting some of the Reddit post. So I have the structure has my post title, the number of upvotes, posted by which user, and there's also a deep dive section that I've added. You

[4:11]Can be creative with your UI. You can, you know, arrange it. You can have a chart or you can use the visualizations however you want. Next, you need to deploy your UI so others can access it. For that, let's use Streamlit Cloud. These are the steps to achieve it and let's do it one by one. Create a GitHub repository with your app code. And if you already have a repository, update your repo with your updated Python code or the all the back end or the Streamlit code. And if you have any dependencies, don't forget to add a requirements.txt file where you are listing all your

[4:52]Dependencies. Next step is let's go to this URL share.streamlit.io and create your free account. You can log in, you can sign up. Create your free account. You can sign up for a free account and this is how it's going to look once you're logged in. And to host or deploy your Madison project, click on the create app button on the top right corner. Yes, click on this deploy a public app from GitHub. I'm going to be choosing a paste GitHub URL. Go to your updated GitHub. Click on this Python file, Madison Python file, and copy the URL. Come back to this Streamlit UI and paste

[5:36]The same Python file link. And yes, this is the important part. You need to choose a domain for your project. Mine is going to be my project name, uh the brand analysis that I'm doing for Open AI. So, the URL is going to be this, domain name.streamlit.app. Yes, this will be my project's public URL. And this domain is available, and yes, click on deploy. Yes, my UI is ready. It barely took few seconds, and now I have a public URL anybody on the internet can use. That's it. This is how you deploy your app. You have now created a simple user interface for your medicine agent using Streamlit.

[6:19]This transforms your technical anything workflow into a tool that non-technical users can actually use. Remember the 80/20 rule. Focus on making your interface functional and clear rather than beautiful. What matters most is that brand managers and marketers can understand and use your tool without technical knowledge. In our next video, we will explore an alternative approach using Gradio. That's it for this video. Thank you so much for watching. I hope this was helpful.