# OpenClaw WebUI

A modern, OpenWebUI-compatible chat interface for OpenClaw with LDAP SSO support.

![OpenClaw WebUI](https://via.placeholder.com/800x400?text=OpenClaw+WebUI)

## Features

- **Modern Chat Interface** - Clean, responsive UI inspired by OpenWebUI
- **Multi-file Upload** - Attach files to messages
- **Code Canvas** - Side panel for code editing and viewing
- **Chat History** - Persistent conversation storage
- **Streaming Responses** - Real-time token streaming
- **LDAP SSO** - Enterprise authentication via LDAP
- **Model Selection** - Switch between OpenClaw agents
- **Dark Theme** - Easy on the eyes

## Quick Start

```bash
# Install dependencies
npm install

# Development mode (with hot reload)
npm run dev

# Production build
npm run build

# Start production server
npm start
```

The server runs on port 3000 by default.

## Configuration

Configure via environment variables:

```bash
# Server
PORT=3000
NODE_ENV=production

# OpenClaw Gateway
OPENCLAW_GATEWAY=http://127.0.0.1:18789

# LDAP Authentication
LDAP_ENABLED=true
LDAP_URL=ldap://localhost:389
LDAP_BASE_DN=ou=users,dc=example,dc=com

# Session
SESSION_SECRET=your-secret-key

# Development (disable auth)
DISABLE_AUTH=true
```

## Architecture

```
┌─────────────────────────────────────────────────────────┐
│                     OpenClaw WebUI                       │
├─────────────────────────────────────────────────────────┤
│  Frontend (Vanilla JS + Vite)                           │
│  ├── Chat Interface                                      │
│  ├── File Upload                                         │
│  ├── Code Canvas                                         │
│  └── History Sidebar                                     │
├─────────────────────────────────────────────────────────┤
│  Backend (Express.js)                                    │
│  ├── LDAP SSO Authentication                             │
│  ├── Session Management                                  │
│  ├── Chat History Persistence                            │
│  ├── File Upload Handling                                │
│  └── /v1/chat/completions Proxy                          │
├─────────────────────────────────────────────────────────┤
│  OpenClaw Gateway (port 18789)                           │
│  ├── WebSocket Protocol                                  │
│  ├── OpenAI-Compatible API                               │
│  └── Agent Execution                                     │
└─────────────────────────────────────────────────────────┘
```

## API Endpoints

### Authentication
- `GET /api/auth/status` - Check authentication status
- `POST /api/auth/login` - Login with username/password
- `POST /api/auth/logout` - Logout

### Conversations
- `GET /api/conversations` - List all conversations
- `POST /api/conversations` - Create new conversation
- `PUT /api/conversations/:id` - Update conversation
- `DELETE /api/conversations/:id` - Delete conversation
- `GET /api/conversations/:id/messages` - Get messages
- `POST /api/conversations/:id/messages` - Save message

### Files
- `POST /api/upload` - Upload file
- `GET /api/upload/:id` - Download file
- `GET /api/upload/:id/meta` - Get file metadata

### OpenAI-Compatible
- `POST /v1/chat/completions` - Chat completions (proxied to OpenClaw)
- `GET /v1/models` - List available models

## LDAP Configuration

The LDAP integration supports standard Active Directory and OpenLDAP setups:

```bash
# LDAP Server URL
LDAP_URL=ldap://ldap.example.com:389

# Base DN for user search
LDAP_BASE_DN=ou=users,dc=example,dc=com

# Bind DN for searching (if needed)
LDAP_BIND_DN=cn=admin,dc=example,dc=com
LDAP_BIND_PASSWORD=admin_password

# Custom search filter (optional)
LDAP_SEARCH_FILTER=(uid={{username}})
```

Users authenticate with their LDAP username and password.

## Development

```bash
# Run in development mode
npm run dev

# This starts:
# - Backend server on port 3000 (with hot reload)
# - Vite dev server on port 5173 (with HMR)
# - Proxy from Vite to backend for /api and /v1
```

## Production Deployment

```bash
# Build frontend
npm run build

# Start production server
NODE_ENV=production npm start
```

The production server serves static files from `dist/` and handles all API routes.

## File Structure

```
openclaw-webui/
├── client/
│   ├── index.html
│   ├── main.js           # Main application
│   └── public/
│       ├── styles.css
│       └── favicon.svg
├── server/
│   └── index.js          # Express server
├── data/                 # Chat history (gitignored)
├── dist/                 # Production build (gitignored)
├── package.json
├── vite.config.js
└── README.md
```

## License

MIT License - See LICENSE file for details.

## Credits

Built for [OpenClaw](https://github.com/openclaw/openclaw) - AI assistant framework.