Admin UI Dashboard
Relevant source files
The following files were used as context for generating this wiki page:
- ui/litellm-dashboard/README.md/README.md)
- ui/litellm-dashboard/src/app/login/LoginPage.tsx
- ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx/components/Sidebar2.tsx)
- ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
- ui/litellm-dashboard/src/components/add_pass_through.tsx
- ui/litellm-dashboard/src/components/HelpLink.tsx
The Admin UI Dashboard is a comprehensive management interface for the LiteLLM proxy, built using Next.js. It provides administrators and authorized users with tools to manage virtual keys, monitor LLM usage, configure model endpoints, and oversee organizational spend. The dashboard serves as the central control plane for interacting with the LiteLLM proxy's management endpoints.
Sources: ui/litellm-dashboard/README.md, ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx:1-50
Architecture and File Structure
The dashboard follows a strict Next.js file structure. Pages are organized within folders that dictate their routing paths. Components are designed to be "dumb," focusing on rendering data received from hooks or props, while business logic and data fetching are encapsulated in dedicated hooks.
Navigation Flow
The following diagram illustrates how a user accesses the dashboard through the authentication layer to reach various management modules.
The dashboard uses Sidebar2.tsx to handle navigation between different administrative sections based on the user's role.
Sources: ui/litellm-dashboard/README.md, ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx:180-250
Directory Organization
| Level | Path Pattern | Responsibility |
|---|---|---|
| Page | src/app/(dashboard)/{module}/page.tsx | Main entry point for a specific feature. |
| View | src/app/(dashboard)/{module}/{Module}View.tsx | Primary layout component for the feature. |
| Components | src/app/(dashboard)/{module}/components/ | Module-specific UI components. |
| Hooks | src/app/(dashboard)/{module}/hooks/ | Module-specific data fetching and logic. |
| Common | src/components/common_components/ | Reusable UI elements used across multiple modules. |
Sources: ui/litellm-dashboard/README.md
Authentication and Security
The LoginPage serves as the entry point, supporting both credential-based login and Single Sign-On (SSO). By default, the username is admin and the password is the proxy's MASTER_KEY.
Authentication Logic
The UI checks for an existing token cookie and verifies if it is expired using isJwtExpired. If SSO is configured, the dashboard can be set to automatically redirect users to the identity provider.
Sources: ui/litellm-dashboard/src/app/login/LoginPage.tsx:25-70
Usage Monitoring and Metrics
The Usage Page provides detailed insights into LLM consumption. It utilizes the /user/daily/activity endpoint and aggregated tables to handle large volumes of spend logs (1M+ logs).
Usage Data Flow
The dashboard calculates metrics including total requests, successful vs. failed requests, total tokens, and average cost per request.
Sources: ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx:230-300
Key Usage Metrics
| Metric | Description | Source Field |
|---|---|---|
| Total Spend | Cumulative cost in USD across selected period. | metadata.total_spend |
| Total Requests | Aggregate number of API calls made to the proxy. | metadata.total_api_requests |
| Failed Requests | Requests that failed to route or encountered errors. | metadata.total_failed_requests |
| Total Tokens | Sum of prompt and completion tokens. | metadata.total_tokens |
Sources: ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx:470-520
Endpoint and Model Management
The UI allows for the dynamic configuration of models and pass-through endpoints, enabling the proxy to route requests to external APIs or custom deployments.
Pass-Through Configuration
Administrators can add "Pass-Through" endpoints to route requests from the LiteLLM proxy to any external API.
The configuration includes:
- Path Prefix: The route prefix (e.g.,
/bria,/elasticsearch). - Target URL: The destination API endpoint.
- HTTP Methods: Support for GET, POST, PUT, DELETE, and PATCH.
- Authentication Headers: Custom headers like
x-api-keyorAuthorization. - Billing: Optional cost-per-request tracking for the endpoint.
Sources: ui/litellm-dashboard/src/components/add_pass_through.tsx:100-250
User Interface Components
The dashboard utilizes a mix of Ant Design and Tremor components for its layout and data visualization.
Component Guidelines
- Tremor Usage: Tremor is largely deprecated within the project, except for the
Tablecomponent. New features should avoid other Tremor components. - Dumb Components: Files should ideally be under 300 lines and focused solely on rendering.
- Help Links: Standardized
HelpLinkandHelpIconcomponents are used to provide inline documentation links todocs.litellm.ai.
Sources: ui/litellm-dashboard/README.md, ui/litellm-dashboard/src/components/HelpLink.tsx:1-50
Conclusion
The Admin UI Dashboard is a specialized tool for managing LiteLLM proxy instances. By centralizing authentication, usage analytics, and endpoint configuration into a single Next.js application, it provides a scalable environment for LLM operations. Its strict architectural patterns ensure that the interface remains maintainable as more providers and management features are integrated.