---
title: "User Interface"
sidebarTitle: "UI"
description: "Interface to Build multi-agent systems with PraisonAI Agent's framework"
icon: "users"
---

## Installation

```bash
pip install -U "praisonai[ui]"
```

## Interface Types

<CardGroup cols={2}>
  <Card title="Multi-Agent Systems" icon="users">
    Orchestrate multiple agents with UI framework.
  </Card>
</CardGroup>

## Features

Agent orchestration, workflow management, inter-agent communication

## Getting Started

<Steps>
  <Step title="Install Dependencies">
    Each interface has its own installation requirements. Follow the specific guide.
  </Step>
  <Step title="Create Application">
    Use the provided examples and templates to build your application.
  </Step>
  <Step title="Customize">
    Add features and styling to match your needs using the interface's components.
  </Step>
</Steps>

## Chainlit
```bash
export OPENAI_API_KEY="Enter your API key"
chainlit create-secret
export CHAINLIT_AUTH_SECRET=xxxxxxxx
praisonai ui
```

or 

```bash
python -m praisonai ui
```

Default Username: admin
Default Password: admin

### To Change Username and Password

create .env file in the root folder of the project
Add below Variables and required Username/Password
```
CHAINLIT_USERNAME=admin
CHAINLIT_USERNAME=admin
```

## Using Chainlit (with Pictures)

## Run Automatically

### Install Required Package
![Install Required Package](../images/ui-step-1.png)

### User Interface
![User Interface](../images/ui-step-2.png)

### Select Auto Mode
![Select Auto Mode](../images/ui-step-4.png)

### Configure Agent Settings
![Configure Agent Settings](../images/ui-step-3.png)

### Define a Task to Auto Generate Agents and Run
![Define a Task](../images/ui-step-5.png)

### Output
![Output](../images/ui-step-6.png)

## Run Manually

### Select Manual Mode
![Select Manual Mode](../images/ui-step-7.png)

### Modify Agents and Tools
![Modify Agents and Tools](../images/ui-step-10.png)

## Review Generated Agents
![Review Generated Agents](../images/ui-step-9.png)

### Run Agents
![Run Agents](../images/ui-step-8.png)

### Manual Model Output
![Manual Model Output](../images/ui-step-11.png)

<div className="relative w-full aspect-video">
  <iframe
    className="absolute top-0 left-0 w-full h-full"
    src="https://www.youtube.com/embed/tg-ZjNl3OCg"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  ></iframe>
</div>