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

1. Install dependencies:

pnpm install

1. Start the development server:

pnpm dev

1. 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. Configure Authentication (Optional)

If your AgentOS instance requires authentication, you can configure it in two ways:

Option 1: Environment Variable (Recommended)

Set the OS_SECURITY_KEY environment variable:

# In your .env.local file or shell environment
NEXT_PUBLIC_OS_SECURITY_KEY=your_auth_token_here

Note: This uses the same environment variable as AgentOS, so if you're running both on the same machine, you only need to set it once. The token will be automatically loaded when the application starts.

Option 2: UI Configuration

1. In the left sidebar, locate the "Auth Token" section
2. Click on the token field to edit it
3. Enter your authentication token
4. The token will be securely stored and included in all API requests

Security Note: Authentication tokens are stored locally in global store and are included as Bearer tokens in API requests to your AgentOS instance.

4. 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.