You probably enjoy building AI agents just like I do. Whenever an idea comes to mind, I dive straight into building. And for most of the agents I've created, I need to run them in the terminal, which is where everything usually happens. Using these AI agents in the terminal isn't exactly enjoyable. So today, I want to share something that can make the experience much better and more userfriendly. This tool is not entirely new, but I recently started using it myself and thought it was worth sharing. It's called Agent UI and it's a modern open-source chat interface built specifically for AI agents. Everything in it is already designed to be reusable and production ready. And since it's open- source, it gives you complete flexibility to adapt it however you want. Even if you're planning to turn your agent into a product, agent UI still fits perfectly. You can apply your own branding, change the interface to match your style, and still benefit from a polished and professional user experience. In this video, I'm going to show you how to install Agent UI, explain what's required to get it running, and walk you through how to start using it in your own project. Before we get into the main part of the video, I want to take a moment to give you a quick tour of this beautifully designed interface so you can get a feel for how everything works. What you're looking at right now is the endpoint where the Agno playground is currently running. And this playground functions as a middle layer that connects your AI agents to the front-end interface, allowing them to interact smoothly. In order for things to work properly, you need to have this playground running in the background. And once it's up, you can define and manage multiple AI agents inside it without any additional configuration. At the moment, there are two AI agents running. And I've simply used the default script provided by the framework to give you a general idea of how the system looks and behaves during regular usage. You can also clearly see which model is being used by each agent. And one great feature of the playground is that it includes a memory layer, which means it can store session data and maintain context across different interactions. Let me quickly refresh the interface so you can see what happens when a new chat session begins from scratch. As soon as it reloads, you'll notice that a fresh conversation is created. And right now, I'm currently inside the web agent environment where the session memory is also working exactly as intended. Now I'm going to test the setup by asking a question related to the latest AI model released by Google just to see how well the system performs in a real scenario. As you can see, the tool calls are being made successfully and the response indicates that Gemini 2.5 Pro is currently the most recent model while also providing a list of related articles to offer additional context. This entire user interface can be used to run your own AI agents with full compatibility regardless of which framework or architecture you choose to build on. Now, let's walk through the installation process for agent UI. There are two methods listed for setting it up, but I recommend using the automatic option since it's faster and more convenient. This method uses npx to download and generate the agent UI template, which is essentially built on top of a Nex.js project. To begin, copy the command provided in the documentation. Open your terminal. Navigate to the directory where you want to install agent UI and paste the command there. The tool will automatically handle the installation process. Once it finishes, you'll see that agent UI has been set up correctly just like I have it running here. You'll also need to ensure that the Agno playground is running in the background. When you open the agent UI directory, you'll notice that it contains all the standard files from a typical Nex.js JS template. Before using agent UI, you must have the Agno playground installed and running. As I mentioned earlier, this playground acts as a bridge between your AI agents and the front-end interface. Head to the official guide and you'll find a background example that shows how to get it up and running. If you're building your agents using the Agno framework, which is a reliable and lightweight solution, you'll benefit from features like support for MCP. Agno gives you the ability to connect MCP servers directly to your agents which is incredibly useful for more advanced applications. The example script provided in the repository is ready to use. So you can simply copy it and paste it into cursor and it should work immediately without additional setup. However, if you prefer not to use Agno and instead want to integrate a different framework, you'll need to make a few changes. Start by opening the agent UI folder. Then go to the API directory and look for the playground TypeScript file. This is the file you'll need to modify in order to connect your own agent backend. You can use cursor to help with the editing process, but make sure the changes allow your custom agents to connect properly. Whether you've built your agents using Langchain, the OpenAI SDK, or any other tool, this is where the integration happens. In my case, I'll be using a fast API backend to handle the logic behind my custom agent. All you need is a fast API backend that exposes your agent endpoints and then you can connect those endpoints through the playground file. Once that's done, your custom agents will be ready to use inside the agent UI interface, giving you full control over the user experience. If you're enjoying the video, I'd really appreciate it if you could subscribe to the channel. We're aiming to reach 25,000 subscribers by the end of this month, and your support genuinely helps. We share videos like this three times a week, so there is always something new and useful for you to explore. Now, let's talk about how you can use your own custom agent instead of relying on the Agno framework. In my setup, I decided to implement my own backend entirely from scratch rather than using the Agno playground. I also built my agents using the OpenAI SDK, which gave me more flexibility and control over how they behave. These agents are connected through A2A, also known as the agentto aagent protocol, which allows agents built on different frameworks to communicate with each other seamlessly. If you're curious to learn more about A2A, we have a complete video covering it in detail. So, be sure to check that out. In this particular setup, I have a main agent that communicates with two other specialized agents. One is responsible for handling plant related queries and the other handles animal related ones. Each of these agents runs on its own separate endpoint. When I send a request to the main agent, it examines the message and forwards it to the correct agent based on the type of query it receives. To make all of this work, I completely removed the Agno playground and replaced it with my own fast API backend. Now everything is managed through fast API and the integration process was fairly straightforward. I only had to update about three or four files and adjust a few core functions to make the system run smoothly. If you look closely at the interface, you'll notice that the model information from Agno has been removed and the UI now reflects that fast API is being used instead. The main agent and its associated port are still listed and I'm able to start a new chat session without any issues. At this point, memory integration hasn't been added yet, so there are no saved sessions. However, when I sent a general message, the system responded with a greeting and labeled the message as other, which means it was handled directly by the main agent instead of being routed to one of the specialized agents. When I asked, "What do plants need to survive?" The system correctly recognized that the query was plant related. It routed the message to the plant agent, which responded with a clear and concise answer. Then I asked, "Where do lions live?" And once again, the system classified it correctly as an animal related query. The message was sent to the animal agent which provided a direct and informative response. All of this is currently running on the GPT40 mini model which I configured through the system prompt to give short focused replies. The interface looks polished and professional. The formatting is clean. The icons can be customized and the smooth animations throughout the UI really help enhance the overall user experience. In conclusion, I highly recommend installing it and starting to build your agents using this agent UI. I personally think it looks amazing and is highly configurable to suit your needs. It saves you a lot of time because you don't have to build a custom agent from scratch with all the components and animations integrated. If you want to add your own features, you can easily do that as well since it is open source. So, go ahead and give it a try. That brings us to the end of this video. If you'd like to support the channel and help us keep making tutorials like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next one.