Agent UI

A modern chat interface for AgentOS built with Next.js, Tailwind CSS, and TypeScript. This template provides a ready-to-use UI for connecting to and interacting with your AgentOS instances through the Agno platform.

Features

• 🔗 AgentOS Integration: Seamlessly connect to local and live AgentOS instances
• 💬 Modern Chat Interface: Clean design with real-time streaming support
• 🧩 Tool Calls Support: Visualizes agent tool calls and their results
• 🧠 Reasoning Steps: Displays agent reasoning process (when available)
• 📚 References Support: Show sources used by the agent
• 🖼️ Multi-modality Support: Handles various content types including images, video, and audio
• 🎨 Customizable UI: Built with Tailwind CSS for easy styling
• 🧰 Built with Modern Stack: Next.js, TypeScript, shadcn/ui, Framer Motion, and more

Version Support

• Main Branch: Supports Agno v2.x (recommended)
• v1 Branch: Supports Agno v1.x for legacy compatibility

Getting Started

Prerequisites

Before setting up Agent UI, you need a running AgentOS instance. If you haven't created one yet, check out our Creating Your First OS guide.

Note: Agent UI connects to AgentOS instances through the Agno platform. Make sure your AgentOS is running before attempting to connect.

Installation

Automatic Installation (Recommended)

npx create-agent-ui@latest

Manual Installation

1. Clone the repository:

git clone https://github.com/agno-agi/agent-ui.git
cd agent-ui

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm dev

4. Open http://localhost:3000 with your browser to see the result.

Connecting to Your AgentOS

Agent UI connects directly to your AgentOS instance, allowing you to interact with your agents through a modern chat interface.

Prerequisites: You need a running AgentOS instance before you can connect Agent UI to it. If you haven't created one yet, check out our Creating Your First OS guide.

Step-by-Step Connection Process

1. Configure the Endpoint

By default, Agent UI connects to http://localhost:7777. You can easily change this by:

1. Hovering over the endpoint URL in the left sidebar
2. Clicking the edit option to modify the connection settings

2. Choose Your Environment

• Local Development: Use http://localhost:7777 (default) or your custom local port
• Production: Enter your production AgentOS HTTPS URL

Warning: Make sure your AgentOS is actually running on the specified endpoint before attempting to connect.

3. Test the Connection

Once you've configured the endpoint:

1. The Agent UI will automatically attempt to connect to your AgentOS
2. If successful, you'll see your agents available in the chat interface
3. If there are connection issues, check that your AgentOS is running and accessible. Check out the troubleshooting guide here

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for contribution guidelines.

License

This project is licensed under the MIT License.