<!-- source: https://deepwiki.com/MervinPraison/PraisonAI/7.3-web-ui-(chainlit) -->

# Web UI (Chainlit)

- README.md
- docker/Dockerfile
- docker/Dockerfile.chat
- docker/Dockerfile.dev
- docker/Dockerfile.ui
- docker/README.md
- src/praisonai-agents/pyproject.toml
- src/praisonai-agents/uv.lock
- src/praisonai/README.md
- src/praisonai/praisonai.rb
- src/praisonai/praisonai/cli/main.py
- src/praisonai/praisonai/deploy.py
- src/praisonai/praisonai/version.py
- src/praisonai/pyproject.toml
- src/praisonai/uv.lock

## Introduction

The Web UI provides a browser-based interface for interacting with PraisonAI agents using the Chainlit framework. It offers two specialized interfaces accessible via Docker containers or direct CLI commands:

- UI Service (Port 8082): General agent interface with praisonai ui command
- Chat Service (Port 8083): Chat-focused interface with web search integration via praisonai chat command

Both interfaces provide real-time streaming responses, tool integration, session management, and authentication support. They are designed for production deployment with Docker containerization.

For other user interfaces in the PraisonAI framework, see:

- Terminal UI (TUI) [#7.2]
- Browser Automation [#7.4]
- Realtime Voice Interface [#7.5]

Sources:

- docker/Dockerfile.ui 1-47
- docker/Dockerfile.chat 1-33
- docker/README.md 1-264

## Installation

The Chainlit UI is an optional component that requires additional dependencies.

### Package Installation

```

```

**Dependencies Installed:**

For chat interface, additional dependencies are included:

- tavily-python==0.5.0 (web search)
- crawl4ai>=0.7.0 (web crawling)
- playwright>=1.47.0 (browser automation for crawling)

Sources:

- src/praisonai/pyproject.toml 30-35
- src/praisonai/pyproject.toml 44-53

## Architecture Overview

The Chainlit Web UI integrates with PraisonAI through a lazy-loading CLI system and runs as a containerized service.

### Deployment Architecture

```

```

Sources:

- docker/Dockerfile.ui 1-47
- docker/Dockerfile.chat 1-33
- docker/README.md 55-75
- src/praisonai/cli/main.py 106-119

### CLI Integration

The Chainlit UI is lazy-loaded in the CLI to avoid startup overhead:

```

```

The lazy loading mechanism prevents importing Chainlit at CLI startup, reducing initialization time from 3500ms to ~20ms for non-UI commands.

Sources:

- src/praisonai/cli/main.py 92-104
- src/praisonai/cli/main.py 106-119
- src/praisonai/cli/main.py 121-132

## Docker Deployment

PraisonAI provides pre-built Docker images for the Chainlit UI services.

### Docker Images

### Single Service Deployment

```

```

### Multi-Service with Docker Compose

```

```

Start services:

```

```

Sources:

- docker/README.md 21-51
- docker/README.md 79-111
- docker/Dockerfile.ui 26-47
- docker/Dockerfile.chat 26-33

### Dockerfile Structure

Both Docker images follow a consistent structure:

```

```

Sources:

- docker/Dockerfile.ui 1-47
- docker/Dockerfile.chat 1-33
- docker/Dockerfile.dev 1-47

### Directory Management

All PraisonAI configuration and Chainlit runtime files are consolidated in `~/.praison/`:

```
~/.praison/
|-- database.sqlite      # Chainlit conversation database
|-- chainlit.md         # Chainlit UI configuration
|-- .chainlit/          # Chainlit runtime files
|   `-- config.toml     # Chainlit settings
|-- .files/             # Uploaded files storage
`-- config/             # PraisonAI configuration
```

**Environment Variable Configuration:**

This consolidation prevents cluttering the project root directory with Chainlit files.

Sources:

- docker/README.md 53-75
- docker/Dockerfile.ui 40-44
- src/praisonai/cli/main.py 108-116

## CLI Commands

### Starting the Web UI

```

```

Both commands launch Chainlit web interfaces that bind to `0.0.0.0` by default, making them accessible from any network interface.

### Development Mode

For development with live reload:

```

```

The development container includes additional tools:

- jupyter , jupyterlab , notebook
- pytest , pytest-asyncio
- mkdocs , mkdocs-material
- All optional dependencies: [ui] , [chat] , [realtime] , [code]

Sources:

- docker/Dockerfile.dev 20-35
- docker/README.md 136-150

## Configuration

### Environment Variables

Sources:

- docker/Dockerfile.ui 40-44
- docker/Dockerfile.chat 26-30
- docker/README.md 79-100

### Authentication Setup

The Chainlit UI supports password-based authentication configured via environment variables:

```

```

For production deployments, always set a strong `CHAINLIT_AUTH_SECRET` to secure session tokens.

Sources:

- docker/README.md 79-111

## Service Endpoints

Once deployed, the Chainlit UI services are accessible at:

For production deployments with load balancing:

```

```

Sources:

- docker/README.md 101-109
- docker/README.md 249-263

## User Workflow

### Typical Usage Flow

```

```

Sources:

- docker/README.md 55-75
- src/praisonai/cli/main.py 106-119

## Features

### 1. Real-Time Streaming

Both UI and Chat services support real-time message streaming for responsive user experience. The Chainlit framework provides WebSocket-based streaming with automatic reconnection handling.

### 2. Persistent Sessions

Conversation history and settings are persisted in SQLite database (`~/.praison/database.sqlite`), allowing users to:

- Resume previous conversations
- Maintain model configuration across sessions
- Access conversation history

### 3. Model Configuration

The UI provides dynamic model configuration through Chainlit settings:

- Change LLM model at runtime
- Adjust temperature and other parameters
- Settings are saved per-thread in the database

### 4. Tool Integration

The Chat service includes web search capabilities via Tavily API:

- Automatic web search when needed
- Web content crawling with crawl4ai
- Fallback to alternative search engines

To enable web search, set the `TAVILY_API_KEY` environment variable:

```

```

Sources:

- docker/Dockerfile.chat 15-21
- src/praisonai/pyproject.toml 44-53

### 5. Multimodal Support

The UI supports image upload and processing for vision-enabled models:

- Upload images directly in the chat interface
- Automatic base64 encoding for LLM consumption
- Image persistence across conversation resumption

### 6. Production-Ready Deployment

Docker images are optimized for production:

- Minimal base image ( python:3.11-slim )
- Health checks included
- Volume mounting for data persistence
- Environment-based configuration
- Supports both standalone and load-balanced deployments

Sources:

- docker/Dockerfile.ui 1-13
- docker/README.md 119-146

## Configuration Options

### Model Settings Management

Both interfaces provide dynamic model configuration through Chainlit's settings system:

**Settings Configuration:**

```

```

**Environment Variables:**

**Settings Persistence:**

```

```

**Database Configuration:**

- Settings stored in SQLite database at ~/.praison/database.sqlite
- Thread-specific metadata for conversation-level settings
- Global settings persistence across sessions

Sources:

- src/praisonai/praisonai/ui/chat.py 151-162
- src/praisonai/praisonai/ui/chat.py 164-186
- src/praisonai/praisonai/ui/code.py 112-123
- src/praisonai/praisonai/ui/code.py 132-161

## Conclusion

The Chainlit UI provides a flexible, feature-rich web interface for interacting with PraisonAI agents. It supports:

1. Multiple agent frameworks (CrewAI and AutoGen)
2. Automatic and manual agent generation
3. Real-time chat with streaming responses
4. Code context gathering for development assistance
5. Web search integration for information retrieval
6. Image processing for multimodal interactions
7. Persistent chat history and settings

This interface serves as a key entry point for users to leverage the power of PraisonAI agents through an intuitive web interface.

Sources:

- praisonai/chainlit_ui.py 1-305
- praisonai/ui/chat.py 1-387
- praisonai/ui/code.py 1-440
- praisonai/ui/sql_alchemy.py 1-708
