Admin Dashboard Overview¶

The SaaS LiteLLM Admin Dashboard is a Next.js web application for managing your platform, organizations, teams, and model access.

What is the Admin Dashboard?¶

The Admin Dashboard provides a user-friendly interface for platform administrators to:

• ✅ Create and manage organizations
• ✅ Create and manage teams with virtual keys
• ✅ Configure model access groups
• ✅ Define model aliases with pricing
• ✅ Allocate and monitor credits
• ✅ Suspend and resume teams
• ✅ Monitor usage and costs

Access URL (Local): http://localhost:3002

Access URL (Production): https://your-admin-dashboard.com

Screenshots¶

First-Time Setup¶

Create your first admin account with the owner role

Dashboard Overview¶

Monitor your LiteLLM infrastructure at a glance

Organizations Management¶

Create and manage customer organizations

Teams Management¶

Manage teams, credits, and virtual API keys

Model Access Groups¶

Control which models teams can access

Model Aliases¶

Create semantic model names with pricing configuration

Key Features¶

🏢 Organization Management¶

• Create top-level organizations
• Manage organization metadata
• View all teams in an organization
• Track organization-level usage

Learn more about organizations

👥 Team Management¶

• Create teams within organizations
• Generate virtual API keys automatically
• Assign model access groups to teams
• Set credit allocations
• Suspend/resume teams
• View team statistics

Learn more about teams

🔐 Model Access Control¶

• Define model access groups (e.g., "gpt-models", "claude-models")
• Assign model aliases to access groups
• Control which teams can access which models
• Flexible permission system

Learn more about model access groups

🎯 Model Aliases¶

• Create semantic model names (e.g., "ChatAgent" → "gpt-4")
• Configure pricing per model (input/output tokens)
• Provider configuration
• Fallback routing

Learn more about model aliases

💳 Credit Management¶

• Allocate credits to teams
• Monitor credit usage
• Track credit transactions
• Set budget modes (job-based, consumption-based)
• Low credit alerts

Learn more about credits

📊 Monitoring & Analytics¶

• Real-time usage statistics
• Cost tracking per team
• Job monitoring
• Team activity logs
• Usage trends

Learn more about monitoring

Starting the Dashboard¶

Local Development¶

cd admin-dashboard

# Install dependencies (first time only)
npm install

# Start development server
npm run dev

The dashboard will be available at: http://localhost:3002

Production Deployment¶

Deploy to Vercel, Netlify, or any Node.js hosting:

# Build for production
npm run build

# Start production server
npm start

Dashboard Architecture¶

graph TD
    A[Admin Dashboard :3002] -->|HTTP/JSON| B[SaaS API :8003]
    B --> C[PostgreSQL Database]

    A -.Manage.-> D[Organizations]
    A -.Manage.-> E[Teams]
    A -.Manage.-> F[Model Access Groups]
    A -.Manage.-> G[Model Aliases]
    A -.Monitor.-> H[Usage & Costs]

    D --> C
    E --> C
    F --> C
    G --> C
    H --> C

    style A fill:#9C27B0
    style B fill:#4CAF50
    style C fill:#FF9800

Components: - Admin Dashboard (Next.js) - Web UI on port 3002 - SaaS API - Backend REST API on port 8003 - PostgreSQL - Data storage

Common Workflows¶

Workflow 1: Onboard a New Customer¶

1. Create Organization
2. Navigate to Organizations → Create
3. Enter organization name and metadata

4. Save organization

5. Create Model Access Group (if needed)

6. Navigate to Model Access → Create Group
7. Define which models this customer can access

8. Assign model aliases

9. Create Team

10. Navigate to Teams → Create
11. Select the organization
12. Assign access groups
13. Allocate initial credits

14. Save and copy the virtual key

15. Share Virtual Key

16. Provide virtual key to customer securely
17. Customer can now make API calls

Workflow 2: Monitor Team Usage¶

1. View Team List
2. Navigate to Teams

3. See all teams with current status

4. Check Team Details

5. Click on a team
6. View credits remaining
7. See recent jobs

8. Check usage statistics

9. Add Credits (if needed)

10. Click "Add Credits"
11. Enter amount
12. Confirm transaction

Workflow 3: Suspend a Team¶

1. Navigate to Team
2. Find the team in Teams list

3. Click team name

4. Suspend Team

5. Click "Suspend" button
6. Confirm suspension

7. Team can no longer make API calls

8. Resume Team (when ready)

9. Click "Resume" button
10. Team access restored

Learn more about suspend/resume

Dashboard Sections¶

Organizations Section¶

Path: /organizations

• List all organizations
• Create new organizations
• View organization details
• List teams in organization
• Organization usage statistics

Teams Section¶

Path: /teams

• List all teams
• Create new teams
• View team details
• Manage virtual keys
• Add/remove credits
• Suspend/resume teams
• View team usage

Model Access Section¶

Path: /model-access

• List access groups
• Create access groups
• Assign model aliases
• Manage permissions

Model Aliases Section¶

Path: /model-aliases

• List all model aliases
• Create new aliases
• Configure pricing
• Provider settings

Monitoring Section¶

Path: /monitoring

• Dashboard overview
• Usage statistics
• Cost tracking
• Job monitoring
• Team activity

Configuration¶

Environment Variables¶

Create .env.local in the admin-panel/ directory:

# SaaS API URL (required)
NEXT_PUBLIC_API_URL=http://localhost:8003

# Note: MASTER_KEY is entered by users at login,
# not stored in this file

API Connection¶

The dashboard connects to the SaaS API to: - Fetch data (organizations, teams, etc.) - Create/update/delete resources - Monitor usage and costs

All API calls are authenticated (implementation depends on your auth strategy).

Security Considerations¶

Authentication¶

The Admin Dashboard uses MASTER_KEY authentication to protect administrative endpoints.

How it works: 1. Users enter their MASTER_KEY on the login page 2. Dashboard validates key by making test request to /api/model-groups 3. Valid key is stored in localStorage 4. All API requests include X-Admin-Key header with the key

Setting up:

Local Development:

# .env
MASTER_KEY=sk-admin-local-dev-change-in-production

Production (Railway):

# Railway Variables
MASTER_KEY=sk-admin-GENERATE-SECURE-KEY-HERE

Generate secure keys:

openssl rand -hex 32
# Format: sk-admin-<generated-hex>

Full Authentication Guide

Network Security¶

Production Best Practices:

1. HTTPS Only - Always use HTTPS in production
2. VPN Access - Restrict dashboard to VPN network
3. IP Whitelist - Limit access to specific IPs
4. Rate Limiting - Prevent brute force attacks
5. Audit Logging - Log all admin actions
6. CORS Configuration - Add production admin panel URL to CORS

Data Protection¶

• Don't expose virtual keys in logs
• Mask sensitive data in UI
• Implement RBAC if multiple admins
• Regular security audits

Troubleshooting¶

Dashboard Won't Start¶

Problem: npm run dev fails

Solutions:

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Check Node.js version (should be 16+)
node --version

# Try with clean cache
npm cache clean --force
npm install

Can't Connect to API¶

Problem: Dashboard shows "API connection failed"

Solutions: 1. Verify SaaS API is running: curl http://localhost:8003/health 2. Check NEXT_PUBLIC_API_URL in .env.local 3. Check browser console for CORS errors 4. Verify firewall isn't blocking port 8003

Data Not Loading¶

Problem: Lists show empty or "Loading..."

Solutions: 1. Check browser network tab for API errors 2. Verify database has data 3. Check SaaS API logs for errors 4. Ensure PostgreSQL is running

Keyboard Shortcuts¶

Next Steps¶

Now that you understand the dashboard overview:

1. Set Up Organizations - Create your first organization
2. Create Teams - Set up teams with virtual keys
3. Configure Model Access - Control model access
4. Manage Credits - Allocate credits to teams
5. Monitor Usage - Track usage and costs

Additional Resources¶

• API Reference - Backend API documentation
• Integration Guide - How teams integrate
• Troubleshooting - Common issues