Web Dashboard

Modern web UI for monitoring and managing the AI SDK, built with Tailwind CSS.

The dashboard can be mounted optionally and is fully responsive.

Quick Setup

package main

import (
    "context"
    "github.com/xraph/forge"
    "github.com/xraph/forge/extensions/ai/sdk/server"
)

func main() {
    app := forge.NewApp()
    
    // Get dependencies
    container := app.Container()
    metrics, _ := container.Resolve("metrics")
    logger, _ := container.Resolve("logger")
    
    // Create dashboard
    dashboard := server.NewDashboard(
        metrics.(forge.Metrics),
        logger.(forge.Logger),
    )
    
    // Mount routes
    dashboard.MountRoutes(app.Router())
    
    // Access at http://localhost:8080/dashboard
    app.Start(context.Background())
}

Dashboard Sections

Overview

Real-time system overview with key metrics:

Total Requests - API calls today/this month
Active Agents - Currently running agents
Cost - Spending today/this month
Cache Hit Rate - Percentage of cached responses
Success Rate - Successful vs failed requests
Average Latency - Response times

Request Monitor

Live request feed showing:

Request ID and timestamp
Model used
Input/output tokens
Cost
Latency
Status (success/error)

Filter by:

Model
Status
Time range
Agent ID

Agent Management

View and manage all agents:

Agent ID and status
Active conversations
Memory usage
Tool executions
State data

Actions:

View agent details
Clear history
Update configuration
Delete agent

Cost Analytics

Comprehensive cost tracking:

Daily/weekly/monthly breakdown
Cost by model
Cost by provider
Budget status and alerts
Optimization recommendations

Charts:

Cost trends over time
Model usage distribution
Token consumption
Budget utilization

Performance Metrics

System performance monitoring:

Request latency distribution
Throughput (requests/second)
Error rates
Token usage trends
Cache performance

Graphs:

Latency percentiles (p50, p95, p99)
Request volume over time
Error breakdown
Cache hit/miss ratio

Health Status

System health dashboard:

LLM Providers - Connection status
Vector Store - Health and capacity
Cache - Status and size
Agents - Active count
Workers - Batch processor status

Color-coded status:

🟢 Healthy
🟡 Degraded
🔴 Down

Configuration

dashboard := server.NewDashboard(metrics, logger, server.DashboardConfig{
    // Base path
    BasePath: "/dashboard",
    
    // Authentication
    EnableAuth: true,
    AuthProvider: authProvider,
    
    // Refresh rates
    MetricsRefreshRate: 5 * time.Second,
    RequestRefreshRate: 2 * time.Second,
    
    // Data retention
    RetainRequestHistory: 24 * time.Hour,
    
    // Features
    EnableCostAnalytics:   true,
    EnableAgentManagement: true,
    EnableLiveMetrics:     true,
})

Authentication

Basic Auth

authProvider := server.NewBasicAuth(map[string]string{
    "admin": "hashed_password_here",
})

dashboard := server.NewDashboard(metrics, logger, server.DashboardConfig{
    EnableAuth:   true,
    AuthProvider: authProvider,
})

OAuth2

authProvider := server.NewOAuth2Auth(server.OAuth2Config{
    Provider:     "google",
    ClientID:     os.Getenv("OAUTH_CLIENT_ID"),
    ClientSecret: os.Getenv("OAUTH_CLIENT_SECRET"),
    RedirectURL:  "https://example.com/callback",
})

Custom Auth

type CustomDashboardAuth struct{}

func (a *CustomDashboardAuth) Authenticate(c forge.Context) error {
    session := c.Cookie("session")
    if !isValidSession(session) {
        return c.Redirect(302, "/login")
    }
    return nil
}

dashboard := server.NewDashboard(metrics, logger, server.DashboardConfig{
    EnableAuth:   true,
    AuthProvider: &CustomDashboardAuth{},
})

Customization

Theme

dashboard.SetTheme(server.DashboardTheme{
    PrimaryColor:   "#3B82F6",  // Blue
    SuccessColor:   "#10B981",  // Green
    WarningColor:   "#F59E0B",  // Orange
    DangerColor:    "#EF4444",  // Red
    BackgroundColor: "#F9FAFB",  // Light gray
    TextColor:      "#111827",  // Dark gray
})

Logo

dashboard.SetLogo("/static/logo.svg")

Custom Pages

dashboard.AddPage("/dashboard/custom", customHandler)

WebSocket Updates

The dashboard uses WebSockets for real-time updates:

// Client-side (auto-connected)
const ws = new WebSocket('ws://localhost:8080/dashboard/ws');

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  
  switch(data.type) {
    case 'request':
      updateRequestFeed(data.request);
      break;
    case 'metrics':
      updateMetrics(data.metrics);
      break;
    case 'agent':
      updateAgentStatus(data.agent);
      break;
  }
};

Embedding

Embed the dashboard in your own application:

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <div id="my-content">
        <!-- Your content -->
    </div>
    
    <!-- Embedded dashboard -->
    <iframe src="/dashboard" width="100%" height="800px"></iframe>
</body>
</html>

Export & Reporting

Export Metrics

GET /dashboard/export/metrics?start=2024-01-01&end=2024-01-31

Downloads CSV with metrics data.

Generate Report

POST /dashboard/report
Content-Type: application/json

{
  "type": "monthly",
  "format": "pdf",
  "sections": ["overview", "costs", "performance"]
}

Generates and downloads a PDF report.

Screenshots

Overview Dashboard

Shows key metrics, charts, and system status at a glance.

Request Monitor

Real-time feed of all API requests with filtering options.

Cost Analytics

Detailed cost breakdown with trends and optimization tips.

Agent Management

List of all agents with status and management actions.

Mobile Support

The dashboard is fully responsive and works on:

Desktop (1920x1080+)
Tablet (768x1024)
Mobile (375x667+)

Mobile features:

Collapsible sidebar
Touch-optimized controls
Responsive charts
Simplified views

Development

Run Locally

cd extensions/ai/sdk/server
go run main.go

Access at http://localhost:8080/dashboard

Build for Production

# Build with embedded assets
go build -tags production -o dashboard-server

# Run
./dashboard-server

Deployment

Docker

FROM golang:1.23-alpine AS builder
WORKDIR /app
COPY . .
RUN go build -tags production -o dashboard ./cmd/dashboard

FROM alpine:latest
COPY --from=builder /app/dashboard /dashboard
EXPOSE 8080
CMD ["/dashboard"]

Behind Nginx

server {
    listen 80;
    server_name dashboard.example.com;
    
    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        
        # WebSocket support
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Security

HTTPS Only

dashboard := server.NewDashboard(metrics, logger, server.DashboardConfig{
    RequireHTTPS: true,
})

IP Whitelist

dashboard.SetIPWhitelist([]string{
    "10.0.0.0/8",      // Internal network
    "192.168.1.100",   // Admin IP
})

Content Security Policy

dashboard.SetCSP(server.CSPConfig{
    DefaultSrc: []string{"'self'"},
    ScriptSrc:  []string{"'self'", "'unsafe-inline'"},
    StyleSrc:   []string{"'self'", "'unsafe-inline'"},
    ImgSrc:     []string{"'self'", "data:", "https:"},
})

Troubleshooting

Dashboard Not Loading

# Check if dashboard is mounted
curl http://localhost:8080/dashboard

# Check logs
tail -f /var/log/forge/dashboard.log

WebSocket Connection Failed

// Enable WebSocket debugging
dashboard.SetDebug(true)

// Check firewall rules
# Allow WebSocket connections on port 8080

Slow Performance

// Reduce refresh rates
dashboard := server.NewDashboard(metrics, logger, server.DashboardConfig{
    MetricsRefreshRate: 10 * time.Second,  // Slower
    RetainRequestHistory: 1 * time.Hour,    // Less history
})

Next Steps

API Server - REST API documentation
Integration - Full integration guide
Examples - Usage examples

Dashboard

On this page