Agno provides a beautiful UI for interacting with your agents, completely open source, free to use and build on top of. It’s a simple interface that allows you to chat with your agents, view their memory, knowledge, and more.

No data is sent to agno.com, all agent data is stored locally in your sqlite database.

The Open Source Agent UI is built with Next.js and TypeScript. After the success of the Agent Playground, the community asked for a self-hosted alternative and we delivered!

​
Get Started with Agent UI

To clone the Agent UI, run the following command in your terminal:

npx create-agent-ui@latest

Enter y to create a new project, install dependencies, then run the agent-ui using:

cd agent-ui && npm run dev

Open http://localhost:3000 to view the Agent UI, but remember to connect to your local agents.


​
Connect to Local Agents

The Agent UI needs to connect to a playground server, which you can run locally or on any cloud provider.

Let’s start with a local playground server. Create a file playground.py

playground.py
from agno.agent import Agent
from agno.models.openai import OpenAIChat
from agno.playground import Playground, serve_playground_app
from agno.storage.agent.sqlite import SqliteAgentStorage
from agno.tools.duckduckgo import DuckDuckGoTools
from agno.tools.yfinance import YFinanceTools

agent_storage: str = "tmp/agents.db"

web_agent = Agent(
    name="Web Agent",
    model=OpenAIChat(id="gpt-4o"),
    tools=[DuckDuckGoTools()],
    instructions=["Always include sources"],
    # Store the agent sessions in a sqlite database
    storage=SqliteAgentStorage(table_name="web_agent", db_file=agent_storage),
    # Adds the current date and time to the instructions
    add_datetime_to_instructions=True,
    # Adds the history of the conversation to the messages
    add_history_to_messages=True,
    # Number of history responses to add to the messages
    num_history_responses=5,
    # Adds markdown formatting to the messages
    markdown=True,
)

finance_agent = Agent(
    name="Finance Agent",
    model=OpenAIChat(id="gpt-4o"),
    tools=[YFinanceTools(stock_price=True, analyst_recommendations=True, company_info=True, company_news=True)],
    instructions=["Always use tables to display data"],
    storage=SqliteAgentStorage(table_name="finance_agent", db_file=agent_storage),
    add_datetime_to_instructions=True,
    add_history_to_messages=True,
    num_history_responses=5,
    markdown=True,
)

app = Playground(agents=[web_agent, finance_agent]).get_app()

if __name__ == "__main__":
    serve_playground_app("playground:app", reload=True)

In another terminal, run the playground server:

1

Setup your virtual environment

python3 -m venv .venv
source .venv/bin/activate
2

Install dependencies

pip install -U openai duckduckgo-search yfinance sqlalchemy 'fastapi[standard]' agno
3

Export your OpenAI key

export OPENAI_API_KEY=sk-***
4

Run the Playground

python playground.py
Make sure the serve_playground_app() points to the file containing your Playground app.

​
View the playground

  • Open http://localhost:3000 to view the Agent UI
  • Select the localhost:7777 endpoint and start chatting with your agents!