Admin UI
Admin UI Overview
React management dashboard for the Realtime Platform with 17+ pages for configuration and monitoring.
The Admin UI is a React single-page application built with Material UI (MUI) that provides full graphical management of the Realtime Platform. No raw JSON editing required for standard workflows.
Accessing the Admin UI
Development: http://localhost:5173 (Vite dev server)
Environment Variable: VITE_API_URL — Backend API base URL (default: http://localhost:3000)
First-Time Setup
On first launch, the UI detects that no users exist and redirects to the Setup page where you create the initial admin account.
Global Controls
Application Selector
The AppBar includes an application selector that scopes all data to the selected application. Every API call includes the X-Application-Id header automatically.
Environment Selector
A color-coded environment badge (Development / Staging / Production) persists across page navigations. Environment-aware pages respond to the current selection.
| Environment | Color |
|---|---|
| Development | Blue |
| Staging | Orange |
| Production | Green |
User Menu
The AppBar displays the current user's name with a logout option.
Navigation Sections
The sidebar is organized into seven sections:
Overview
Dashboard, Monitoring, Alert Center
Registry
Topics, Schemas, Mappings, Environment Grid, Deployments
Services
Document Browser, Document Inspector, Socket Channels
Webhooks
Endpoints, Delivery Logs
Debugging
Event Debugger, Replay Tool
Dashboards
Realtime Delivery, Database Pipeline, Async Reliability
Security
Signing Keys, Users, Roles, Invites
Technology Stack
| Technology | Purpose |
|---|---|
| React | UI framework |
| Material UI (MUI) | Component library |
| React Router | Client-side routing |
| Vite | Build tool and dev server |
Running the Admin UI
# Development (with hot reload)
pnpm --filter @realtime/admin-ui dev
# Production build
pnpm --filter @realtime/admin-ui build
# Serve from apps/admin-ui/dist/