AI Assistant
c7f037c58a
- Dashboard Overview with real-time status display - Live Log Viewer (scrollable, filterable) - Config Editor with JSON syntax highlighting - Model Switcher for provider management - Provider Manager for API key configuration - Quick Actions for common tasks - API Routes: status, logs, config, actions, models, providers Tech Stack: - Next.js 14 (App Router) - TypeScript - Tailwind CSS - shadcn/ui components - CodeMirror for JSON editing - Docker support with docker-compose
182 lines
4.2 KiB
Markdown
182 lines
4.2 KiB
Markdown
# OpenClaw Dashboard 🦞
|
|
|
|
Self-hosted Web-UI zur Verwaltung von OpenClaw- und OpenCode-Instanzen.
|
|
|
|
## 🚀 Live Deployment
|
|
|
|
**URL:** https://ai-center.tail7b642c.ts.net/
|
|
**Auth:** `admin / openclaw`
|
|
|
|
## ✨ Features
|
|
|
|
- **Dashboard-Übersicht:** Live-Status aller Instanzen (Gateway, Modelle, System)
|
|
- **Config-Editor:** openclaw.json direkt bearbeiten mit Syntax-Highlighting
|
|
- **Log-Viewer:** Live-Logs des Gateway-Prozesses mit Auto-Refresh
|
|
- **Provider-Management:** API-Keys hinzufügen und verwalten
|
|
- **Model-Switcher:** Aktives Model wechseln mit allen verfügbaren Modellen
|
|
- **Quick Actions:** Gateway starten/stoppen/neustarten
|
|
|
|
## 🛠️ Tech Stack
|
|
|
|
- **Frontend:** Next.js 14 + React + Tailwind CSS + shadcn/ui
|
|
- **Backend:** Next.js API Routes
|
|
- **Auth:** Basic Auth (Middleware)
|
|
- **Deployment:** Node.js + Tailscale Funnel (HTTPS)
|
|
- **Design:** Dark Mode mit Apple/Vercel-Ästhetik
|
|
|
|
## 📦 Setup & Deployment
|
|
|
|
### 1. Dependencies installieren
|
|
|
|
```bash
|
|
cd /mnt/pve/Main-HDD/user-data/projects/openclaw-dashboard
|
|
npm install
|
|
```
|
|
|
|
### 2. Environment konfigurieren
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
# Edit .env to change credentials
|
|
```
|
|
|
|
### 3. Server starten (Development)
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
### 4. Server starten (Production)
|
|
|
|
```bash
|
|
npm run build
|
|
PORT=3001 npm start
|
|
```
|
|
|
|
### 5. HTTPS via Tailscale Funnel
|
|
|
|
```bash
|
|
# Starte den Server
|
|
PORT=3001 npm start &
|
|
|
|
# Tailscale Funnel aktivieren (HTTPS)
|
|
tailscale funnel --bg 3001
|
|
|
|
# Funnel deaktivieren
|
|
tailscale funnel --https=443 off
|
|
```
|
|
|
|
## 🔐 Authentifizierung
|
|
|
|
Standard-Credentials:
|
|
- **Username:** `admin`
|
|
- **Password:** `openclaw`
|
|
|
|
Ändern in `.env`:
|
|
```
|
|
AUTH_USERNAME=your_username
|
|
AUTH_PASSWORD=your_password
|
|
```
|
|
|
|
## 📁 Projektstruktur
|
|
|
|
```
|
|
openclaw-dashboard/
|
|
├── app/
|
|
│ ├── api/ # API Routes
|
|
│ │ ├── status/ # Gateway Status
|
|
│ │ ├── config/ # Config Editor
|
|
│ │ ├── logs/ # Log Viewer
|
|
│ │ ├── providers/ # API Key Management
|
|
│ │ ├── models/ # Model Switcher
|
|
│ │ └── actions/ # Gateway Actions
|
|
│ ├── layout.tsx # Root Layout
|
|
│ ├── page.tsx # Main Page
|
|
│ └── globals.css # Tailwind Styles
|
|
├── components/
|
|
│ ├── ui/ # shadcn/ui Components
|
|
│ ├── DashboardOverview.tsx
|
|
│ ├── ConfigEditor.tsx
|
|
│ ├── LogViewer.tsx
|
|
│ ├── ProviderManager.tsx
|
|
│ ├── ModelSwitcher.tsx
|
|
│ └── QuickActions.tsx
|
|
├── lib/
|
|
│ ├── db.ts # SQLite Database
|
|
│ ├── openclaw.ts # OpenClaw API Wrapper
|
|
│ └── utils.ts # Utilities
|
|
├── middleware.ts # Basic Auth Middleware
|
|
├── next.config.ts # Next.js Config
|
|
├── Dockerfile # Docker Build
|
|
└── docker-compose.yml # Docker Compose
|
|
```
|
|
|
|
## 🌐 API Endpoints
|
|
|
|
| Endpoint | Method | Description |
|
|
|----------|--------|-------------|
|
|
| `/api/status` | GET | System status & Gateway status |
|
|
| `/api/config` | GET/POST | Get/update openclaw.json |
|
|
| `/api/logs` | GET | Get Gateway logs |
|
|
| `/api/providers` | GET/POST | Get/update provider API keys |
|
|
| `/api/models` | GET/POST | Get available models / switch model |
|
|
| `/api/actions` | POST | Execute gateway actions (start/stop/restart) |
|
|
|
|
## 🎨 Design
|
|
|
|
- **Colors:** Dark (#0a0a0a) + Orange (#f97316) + Cyan (#06b6d4)
|
|
- **Theme:** Dark Mode only
|
|
- **Responsive:** Desktop + Mobile
|
|
- **Animations:** Framer Motion (subtil)
|
|
|
|
## 🔧 Troubleshooting
|
|
|
|
### Server startet nicht
|
|
```bash
|
|
# Check logs
|
|
cat /tmp/dashboard.log
|
|
|
|
# Check port
|
|
lsof -i :3001
|
|
```
|
|
|
|
### Tailscale Funnel nicht erreichbar
|
|
```bash
|
|
# Check Tailscale status
|
|
tailscale status
|
|
|
|
# Check Funnel status
|
|
tailscale funnel status
|
|
|
|
# Reset Funnel
|
|
tailscale funnel reset
|
|
tailscale funnel --bg 3001
|
|
```
|
|
|
|
### Auth funktioniert nicht
|
|
```bash
|
|
# Prüfe .env Variablen
|
|
cat .env | grep AUTH
|
|
|
|
# Middleware neu kompilieren
|
|
npm run build
|
|
npm start
|
|
```
|
|
|
|
## 📝 TODO (Future Features)
|
|
|
|
- [ ] OpenCode Instanzen Integration
|
|
- [ ] Multi-Instance Support
|
|
- [ ] Real-time WebSocket Updates
|
|
- [ ] Advanced Analytics Dashboard
|
|
- [ ] Backup & Restore Configuration
|
|
- [ ] Custom Alerts & Notifications
|
|
|
|
## 📄 License
|
|
|
|
MIT
|
|
|
|
---
|
|
|
|
**Built with ❤️ for OpenClaw by Yannick**
|