Nova
5aa5ab73f3
Features: - Modern chat interface with streaming responses - Multi-file upload support - Code canvas panel for code viewing/editing - Chat history persistence - LDAP SSO authentication - OpenAI-compatible API proxy to OpenClaw gateway - Model/agent selection - Dark theme
180 lines
5.5 KiB
Markdown
180 lines
5.5 KiB
Markdown
# 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
|
|
|
|
```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. |