6 UI With Gradio With HAILogo
This tutorial builds a Gradio front end for an n8n agent workflow, connecting it through a webhook and deploying the finished dashboard to Hugging Face Spaces.
An n8n agent that only runs inside the n8n editor isn't something you can hand to anyone else to use. Getting it in front of real users means building a front end, and this walkthrough covers doing that with Gradio, an interface library built specifically for AI and machine learning applications, from a bare local install through to a public URL anyone on the internet can open.
Why Gradio instead of Streamlit
Streamlit is a solid option for building a UI on top of an agent, but Gradio has its own advantages worth weighing. It offers a simpler API for common AI interfaces and is designed specifically around AI and ML models, with particularly easy integration into Hugging Face Spaces for deployment and hosting. Neither tool is a wrong choice; the guidance here is to pick whichever fits your specific project, and Gradio tends to be a especially good fit when the tool focuses on text analysis, image processing, or classification.
Getting Gradio installed and running
Setup starts simply: open a terminal and run pip install gradio, which installs within minutes. From there, the next step is creating a Python file in your project, alongside the JSON file exported from your n8n workflow. A basic starter script creates a demo interface and launches it, and running that file with python and the filename produces a local URL you can open in a browser to see a very basic interface running.
Building a real interface around the agent
A minimal demo interface isn't the end goal. To build something usable, you need to identify your project's main functionality and design appropriate inputs and outputs around it, then connect that interface to your agent's logic running in n8n. The concrete example here connects the Gradio app to a webhook URL from an n8n webhook node, which is the key step linking the front end to the actual workflow. From there, the interface displays metrics from the underlying project, in this case a brand analysis pulling data from Reddit, with a dashboard laid out in rows and columns to show the output clearly. Running the updated script and the corresponding n8n workflow together, then refreshing the Gradio page, produces a noticeably more complete interface: entering a brand name like OpenAI and running the analysis processes the data and returns a ranked list, in this example the top 50 trending Reddit posts about that brand.
Deploying to Hugging Face Spaces
A project running only on your own machine still isn't something you can share. The next step is getting a public URL through Hugging Face Spaces. That starts with creating a GitHub repository containing your project code: the JSON workflow file, the Python file, and a requirements.txt file listing all the dependencies the project needs. From there, creating a Hugging Face account (or logging into an existing one) and clicking "New" to create a new Space is the next move. The Space needs a name, a short description, and should be set to the Gradio SDK and made public. Once the Space exists, you can either connect it to your GitHub repository or upload the files directly, in this case the Python file, the requirements.txt, and the JSON workflow file. Hugging Face then builds the Space automatically, with logs visible while it works, a process that takes a few minutes.
Two details that trip people up
Two specific configuration details matter for a successful deployment. First, the entry-point file needs to be named exactly app.py, because Hugging Face Spaces treats that filename as the entry point; anything else needs to be renamed before it will run. Second, the corresponding n8n workflow needs to be set to active, or the deployed interface won't have a live backend to call. Getting both right resolves most of the deployment errors that come up along the way.
Key takeaways
- Gradio and Streamlit are both solid choices for an agent's UI; Gradio's simpler API and tighter Hugging Face integration make it especially strong for text, image, and classification tasks.
- A minimal working interface takes just a
pip install gradioand a short starter script that launches a local demo URL. - Connecting the interface to a real n8n agent means wiring in the webhook URL from an n8n webhook node.
- Deployment to Hugging Face Spaces requires a GitHub repo with your code, a requirements.txt file, and either a GitHub connection or a direct file upload.
- The entry file must be named
app.pyand the n8n workflow must be set to active, or the deployed Space won't work correctly.
Who this is for
This is for builders who have an n8n agent working locally and want to put a real, shareable interface in front of it without a heavy frontend build, closing out this tutorial series with a deployable, public dashboard.
Full transcript(auto-generated, with timestamps)
[0:00]Hello everyone, welcome to our final Madison framework tutorial. I'm Kiti and today we are exploring an alternative way to create a user interface for your Madison agent using Gradio. This is another excellent option for your project, especially well suited for AI applications. While Streamlit is an excellent option, Gradio has some unique advantages for AI applications. It has very simpler API for common AI interfaces and it is specifically designed for AI and ML models. It also has very easy integration with hugging face spaces for easy deployment and hosting. So for your project, you can either work with streamlit or grado. Both will work well. Choose the one that best fits your
[0:44]Specific Madison tool. If your tool focuses on text analysis, image processing or classification, Gradio might be particularly suitable. Let's get Graio installed and set up. These are the steps to do it. Let's do it one by one. First open your terminal or command prompt and type this command pip install gradio. This should install gradio within minutes. And next step is creating a Python file. So go to our code editor and uh yeah this is where I have my project. Basically I have the JSON file from NA10. The same project I'm building on top of my previous project. And this is the Python file that I have created Madison Gradio
[1:25]App. I have added a basic starter code. So it's trying to create a interface, a demo interface and launching this demo interface and I can run this Python file with a command Python and my file name Madison radio app. Running it and this should provide me a URL. Yes, that I have it and let me open it in my browser. Yes, now you can see a very basic interface in your browser. Now, let's build a more complete interface for your Madison agent. The steps here are very similar to what I demonstrated in the streamly tutorial. First, you need to identify your project's main functionality and create
[2:04]Some appropriate inputs and outputs. Later, you also need to connect your Madison logic from the main NAN. So, here is an example of my project back to my code editor and I have updated my Python file now. So first I have added the web hook URL from my nense or web hook node. This is very important step and next I have a basic UI where I'm displaying some of the metrics from my project. So I'm doing brand analysis for OpenAI for the brand OpenAI from Reddit. Right? So I'm trying to display this outputs and I'm also trying to create a simple dashboard. So I have all the appropriate rows and
[2:44]Columns created for this. So this is the code for that UI. Okay, I'm running this code now with the same command python and file name. It's up and back to n and let's execute this workflow. Now back to gradio and let me refresh. Yes, now you can see bit more complex interface with all the inputs and visualizing the output. Let me also run this uh yeah import. I'm giving my brand name which is open AI and run analysis. It's processing all the data and yes, there is a top 50 trending posts from Reddit about the brand OpenAI. Okay, so now you have your project up
[3:30]And running in your local. Next, you need a public URL. Let's use hugging face spaces to deploy your project. Create a GitHub repository with the code. So, I have pushed all my code, all my project code with a JSON file and Python file along with the requirements.txt file. So this file basically contains all the dependencies required for my project. Next go to huggingface.co. So I'm already logged in. If you're new, create a new account and then log in. So and this is how it looks once you're logged in. Click on new. Create a new space. And let's fill out some uh details here. the space name I'm giving my project
[4:15]Name which is a brand analysis a short description and yes it's a gradual space so I'm keeping it the same and yes public click on create space okay so a new space has been created and now you can either connect your GitHub or upload files so click on files I am going to be uploading my file files. Uh yes, this is from my repository and Python file, txt file and also the JSON. Yes, go ahead and add this files. Okay, now now you can see that it is building and um yeah, you can also see the logs while it is building. It's going to take like couple of minutes.
[5:10]Let's wait till then. Okay, so the deployment is now complete and this is how the UI looks and this is the URL. Anybody on the internet can see your project with the help of this URL. And let me also run this by clicking on run analysis. It's processing and yes, you can see the top 50 results along with the dashboard and a chart. The key considerations here are you need to change the file name to app.python Python because hugging face considers this as the entry point. So if you have your file named as anything else, please change it to app.python. And also uh set your nit workflow to
[5:53]Active. So it's up and running. And that should fix some of the errors. So these are the errors that I encountered while deploying. And um yeah, I hope this was helpful. You have now learned how to create a simple user interface with gradio as an alternative to streamllet. Both options are excellent for your project. Choose the one that best fits your specific Madison agents functionality. Remember, the goal is to make your Madison tool accessible to non-technical users. Focus on clarity and usability over complex features. Good luck with your project. Thank you so much for watching this video. I hope this was helpful.
More videos
2:08Bridging the Pixel Gap in Browser Automation.
2:23How One Narrow Safety Rule Can Make an AI Less Safe Everywhere Else.
2:04Why splitting a chunk from its document makes it retrieve for the wrong question
4:20Three You Can Take Back. One You Can't.
2:21Why a 50-turn agent pays for the same screenshot 35 times unless it caches the pixels
1:53