Tinz Twins

Tinz Twins

Technology is our passion.


How to Expose Your Agno Agent as an AG-UI Compatible App

5 minute read

The Agent User Interaction Protocol (AG-UI) standardizes the connection of frontend applications with AI agents through an open protocol. You can think of AG-UI as a universal translator for AI-driven systems.

AG-UI Interactive Dojo Demo Viewer + AI Llama
AG-UI Interactive Dojo Demo Viewer + AI Llama

It doesn’t matter which framework was used to create the AI agent. AG-UI ensures smooth communication and helps developers build AI workflows that require real-time interaction, live status updates, and human-in-the-loop collaboration.

AG-UI has already been integrated into several popular agent frameworks. Along with LangGraph, CrewAI, Mastra, and AG2, Agno is now also supported. Agno is our preferred AI agent framework.

We have also written some free guides about Agno. The code for this is in our finllm-apps GitHub repo.

There are Python and TypeScript SDKs available if you want to integrate AG-UI into your applications. In this guide, we show you how to expose an Agno Agent through an AG-UI compatible frontend.

How does the AG-UI protocol work?

AG-UI offers a straightforward approach to integrating AI agents into AG-UI compatible frontends. That makes the development of AI applications easier.

You don’t need individual APIs for each application. Just set up AG-UI once, and you can start working with any compatible application right away.

Architecture of the AG-UI Protocol

The Agent User Interaction Protocol (AG-UI) uses a flexible and event-driven architecture that enables efficient communication between frontend applications and AI agents.

AG-UI follows a client-server architecture that standardizes communication between AI agents and an application. The following figure shows the architecture.

Architecture of the Agent User Interaction Protocol (Image by authors)

  • Application: Chatbot or another AI application
  • AG-UI Client: Generic communication clients or specialized clients for connecting with existing protocols
  • Agents: AI agents that process requests and generate streaming responses
  • Secure Proxy: Backend services that provide additional capabilities

Events in the AG-UI Protocol

In the AG-UI protocol, events are the fundamental communication unit between AI agents and frontend apps, enabling structured interaction in real-time.

The events can be divided into different categories. Here is an overview:

Events in the Agent User Interaction Protocol (Image by authors)

Building an AG-UI Compatible App with Agno

First, we recommend creating a virtual environment. That keeps your main system clean. We use conda.

To do this, you need to run the following commands in the terminal:

  • Create a conda environment (env): conda create -n ag-ui-agno-app python=3.12.7 -> Answer the question Proceed ([y]/n)? with y.
  • Activate the conda env: conda activate ag-ui-agno-app

Then, you have to install all required dependencies. Create a requirements.txt file and add the following dependencies to it.

requirements.txt:

agno
ag-ui-protocol
fastapi
uvicorn
ollama

In addition to Agno and the AG-UI Protocol, we also need to install FastAPI and uvicorn to expose the Agno Agent. Moreover, we use Ollama to run a local LLM.

Next, you can install these dependencies with the following command: pip install -r requirements.txt

Now, we can create an AG-UI Protocol compatible Agno Agent. For this, we use the AG-UI integration from Agno. Create a file named basic.py and add the following Python code.

basic.py:

from agno.agent.agent import Agent
from agno.app.agui import AGUIApp
from agno.models.ollama import Ollama

chat_agent = Agent(
    name="Assistant",
    model=Ollama(id="llama3.1:8b"),
    instructions="You are a helpful AI assistant.",
    add_datetime_to_instructions=True,
    markdown=True,
)

agui_app = AGUIApp(
    agent=chat_agent,
    name="Basic AG-UI Agent",
    app_id="basic_agui_agent",
    description="A basic agent that demonstrates AG-UI protocol integration.",
)

app = agui_app.get_app()

if __name__ == "__main__":
    agui_app.serve(app="basic:app", port=8000, reload=True)

Perfect. We have created an AG-UI compatible Agno Agent. Next, we set up the AG-UI compatible frontend.

Configuring the AG-UI Frontend Client

In this guide, we use the Dojo Viewer as the AG-UI compatible frontend. To set up the Dojo frontend correctly, there are a few things to keep in mind.

For this reason, we have created an installation guide for you. We tested it on macOS. But it should also work with Linux.

Follow these step-by-step instructions, and the frontend will be up and running in a few minutes.

  • Install protobuf via brew: brew install protobuf
  • Download the installation script for nvm and run it to install: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
  • Install Node.js: nvm install node
  • Install turbo via npm: npm install turbo
  • Download the installation script for pnpm and run it to install: curl -fsSL https://get.pnpm.io/install.sh | sh -

Next, we need to clone the AG-UI GitHub repo. You can do this with the following command: git clone https://github.com/ag-ui-protocol/ag-ui.git

Then, navigate to the typescript-sdk folder in a new terminal and execute the following command to install the required dependencies: pnpm install

Awesome! Now we have everything set up to start the app.

Let’s go!

Running and Testing the Connection

Open two new terminal windows and start the backend and frontend with the following commands.

  • Start the Agno Agent: python basic.py
  • Start the Dojo frontend: pnpm run dev

The Dojo frontend should now be running at http://localhost:3000.

Comparison with other protocols

AG-UI focuses on the interaction between the agent and the user. Together with the A2A (Agent-to-Agent Protocol) and MCP (Model Context Protocol), it forms a solid protocol stack.

The Agent Protocol Stack 🔥

  • MCP connects agents to tools.
  • A2A enables agents to communicate with other agents.
  • AG-UI connects agents to users

The Agent Protocol Stack (Image by authors)

For example, the same agent can communicate with another agent via A2A while interacting with the user through AG-UI and simultaneously calling tools provided by an MCP server.

Conclusion

In this guide, we introduced you to the Agent User Interaction Protocol (AG-UI). You learned how to provide an Agno AI agent and seamlessly connect it with an AG-UI compatible frontend, like the Dojo Viewer.

But the AG-UI is just one piece of the puzzle. It is an important part of the new Agent Protocol Stack, along with the Model Context Protocol (MCP) for connecting tools and the Agent-to-Agent (A2A) protocol for communication between agents.

These protocols are the key to developing sophisticated, modular, and future-proof AI systems. What are you building right now? Share it on X and tag us so we can see it.

💡 Do you enjoy our content and want to read super-detailed articles about data science topics? If so, be sure to check out our premium offer!

AI and Coding Merch

You may also enjoy