openclaw-webui/README.md

OpenClaw WebUI

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

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

# 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:

# 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:

# 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

# 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

# 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 - AI assistant framework.