# Admin UI

A web-based dashboard for monitoring the MCP Hub in real-time.

## Setup

### 1. Get Your OBSERVE_SECRET

The `OBSERVE_SECRET` is stored in `/workspace/.env` on the hub server. Extract it:

```bash
# On the hub server:
grep OBSERVE_SECRET /workspace/.env
```

Copy the secret value (it's a long hex string).

### 2. Open the UI

#### Option A: Via https (production)
```
https://mcp.arik.work/admin-ui/
```

#### Option B: Local development with file:// (offline)
```bash
# Simply open the file in your browser:
file:///workspace/admin-ui/index.html
```

#### Option C: Local development with HTTP server
```bash
cd /workspace/admin-ui
python3 -m http.server 8080
# Then open http://localhost:8080
```

### 3. Connect to the Hub

In the UI, enter:
- **Hub URL**: `wss://mcp.arik.work/ws/observe` (production) or `ws://localhost:3000/ws/observe` (local dev)
- **OBSERVE_SECRET**: Paste the value from step 1

The status light will turn **green** when connected.

### 4. Monitor

- **Backends**: View connected MCP backends
- **Logs**: Real-time event stream from the hub
- **Status**: Connection indicator at the top

## Adding More Backends

To connect additional backends to the hub, edit `/workspace/.env` on the hub server:

```env
OBSERVE_SECRET=...
# Add new backends via environment config or the hub's register endpoint
```

Then restart the hub to pick up new backends.