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.

• 🔗 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

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

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.

npx create-agent-ui@latest

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.

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.

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

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

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

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.

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.

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

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

This project is licensed under the MIT License.