@acarmisc/backstage-plugin-litellm 0.10.2 → 0.12.0

package/README.md

@@ -0,0 +1,57 @@
+# @acarmisc/backstage-plugin-litellm
+
+Frontend for the **Backstage LiteLLM Governance Plugin** — lets developers manage LiteLLM virtual API keys and monitor AI model usage directly from Backstage.
+
+Built with the [New Frontend System](https://backstage.io/docs/frontend-system/) (`@backstage/frontend-plugin-api`) and Material-UI.
+
+Pair this package with the backend, [`@acarmisc/backstage-plugin-litellm-backend`](https://www.npmjs.com/package/@acarmisc/backstage-plugin-litellm-backend), which proxies requests to your LiteLLM instance and resolves Backstage identity.
+
+Full setup docs, configuration reference, and architecture notes live in the [project README](https://github.com/acarmisc/backstage-plugin-litellm-govai#readme).
+
+## Installation
+
+This plugin is designed to be used **within a Backstage monorepo**.
+
+```bash
+yarn add --cwd packages/app @acarmisc/backstage-plugin-litellm
+```
+
+You'll also need the backend package installed and configured — see its [README](https://www.npmjs.com/package/@acarmisc/backstage-plugin-litellm-backend) for `app-config.yaml` setup.
+
+## Usage
+
+### Full page
+
+```tsx
+import { litellmPlugin, LiteLLMPage } from '@acarmisc/backstage-plugin-litellm';
+
+// packages/app/src/App.tsx
+<Route path="/litellm" element={<LiteLLMPage />} />
+```
+
+### Home page widget
+
+`LiteLLMHomeWidget` is a compact card for the Backstage homepage. It shows the signed-in user's own usage — identity is resolved server-side from the Backstage token, so no `userId` prop is required.
+
+```tsx
+import { LiteLLMHomeWidget } from '@acarmisc/backstage-plugin-litellm';
+
+<LiteLLMHomeWidget defaultPeriod="7d" />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `defaultPeriod` | `'today' \| '7d' \| '30d'` | `'7d'` | Period shown on first render |
+| `title` | `string` | `'LiteLLM Usage'` | Card title override |
+
+## Exports
+
+- `litellmPlugin` — the frontend plugin instance
+- `LiteLLMPage` — main plugin page (keys, usage, team context)
+- `LiteLLMHomeWidget` — homepage usage summary card
+- `DashboardHeader`, `KeysTable`, `UsageStats`, `TeamUsage` — individual page sections, exported for composition
+- `LiteLlmApi`, `liteLlmApiRef` — API client and its Backstage API ref
+
+## License
+
+Apache-2.0

package/dist/components/DashboardHeader.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import { UserInfo, TeamInfo } from '../types';
+import { UserInfo, TeamInfo, VirtualKey } from '../types';
 interface DashboardHeaderProps {
     userInfo: UserInfo;
     teams: TeamInfo[];
+    keys: VirtualKey[];
     loading: boolean;
+    onGenerateKeyClick: () => void;
 }
 export declare const DashboardHeader: React.FC<DashboardHeaderProps>;
 export {};

package/dist/components/GenerateKeyDialog.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { VirtualKey, ModelInfo, TeamInfo, GenerateKeyRequest, GenerateKeyResponse, LiteLlmConfig } from '../types';
+interface GenerateKeyDialogProps {
+    open: boolean;
+    onClose: () => void;
+    keys: VirtualKey[];
+    models: ModelInfo[];
+    teams: TeamInfo[];
+    /** Current user's LiteLLM user id, used to pre-fill a default key alias. */
+    username?: string;
+    /** Controls for the "Generate New Key" form; see litellm.keyGeneration in app-config.yaml. */
+    keyGenerationSettings?: {
+        allowUnlimitedBudget: boolean;
+        teamRequired: boolean;
+    };
+    onGenerateKey: (request: GenerateKeyRequest) => Promise<GenerateKeyResponse>;
+    onGetConfig: () => Promise<LiteLlmConfig>;
+}
+export declare const GenerateKeyDialog: React.FC<GenerateKeyDialogProps>;
+export {};

package/dist/components/KeysTable.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { VirtualKey, ModelInfo, TeamInfo, GenerateKeyRequest, GenerateKeyResponse, UpdateKeyRequest, LiteLlmConfig } from '../types';
+import { VirtualKey, ModelInfo, UpdateKeyRequest } from '../types';
 interface KeysTableProps {
     keys: VirtualKey[];
     models: ModelInfo[];
-    teams: TeamInfo[];
+    /** Opens the shared "Generate New Key" dialog (rendered at page level). */
+    onGenerateKeyClick: () => void;
     loading: boolean;
-    onGenerateKey: (request: GenerateKeyRequest) => Promise<GenerateKeyResponse>;
     onUpdateKey: (keyId: string, request: UpdateKeyRequest) => Promise<void>;
     onBlockKey: (keyId: string) => Promise<void>;
     onUnblockKey: (keyId: string) => Promise<void>;
@@ -14,8 +14,6 @@ interface KeysTableProps {
     onPruneExpiredKeys: () => Promise<{
         pruned: number;
     }>;
-    /** Resolve the public LiteLLM proxy URL, used for ready-to-paste snippets. */
-    onGetConfig: () => Promise<LiteLlmConfig>;
 }
 export declare const KeysTable: React.FC<KeysTableProps>;
 export {};