+
+ Provider
+
+
+
+ }
+ rules={[{ required: true, message: "Please select a provider" }]}
+ >
+
+ String(option?.label ?? "").toLowerCase().includes(input.toLowerCase())
+ }
+ >
+ {Object.entries(Providers).map(([providerEnum, providerDisplayName]) => {
+ const providerValue = provider_map[providerEnum as keyof typeof provider_map];
+ // Only show providers that don't already have a discount configured
+ if (providerValue && discountConfig[providerValue]) {
+ return null;
+ }
+ return (
+
+
+ );
+ })}
+
+
+
+
+ Discount Percentage
+
+
+
+ }
+ rules={[{ required: true, message: "Please enter a discount percentage" }]}
+ >
+
+
+
+ );
+};
+
+export default AddProviderForm;
+
diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.tsx b/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.tsx
new file mode 100644
index 00000000000..3c0b7298601
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.tsx
@@ -0,0 +1,301 @@
+import React, { useState, useEffect } from "react";
+import { Card, Title, Text, Subtitle, Grid, Col, Button, TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/react";
+import { Modal, Form } from "antd";
+import { getProxyBaseUrl } from "@/components/networking";
+import NotificationsManager from "../molecules/notifications_manager";
+import { Providers, provider_map } from "../provider_info_helpers";
+import { CostTrackingSettingsProps, DiscountConfig } from "./types";
+import { getProviderBackendValue } from "./provider_display_helpers";
+import ProviderDiscountTable from "./provider_discount_table";
+import AddProviderForm from "./add_provider_form";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { DocsMenu } from "../HelpLink";
+import HowItWorks from "./how_it_works";
+
+const DOCS_LINKS = [
+ { label: "Custom pricing for models", href: "https://docs.litellm.ai/docs/proxy/custom_pricing" },
+ { label: "Spend tracking", href: "https://docs.litellm.ai/docs/proxy/cost_tracking" },
+];
+
+const CostTrackingSettings: React.FC
+ 
handleImageError(e, providerDisplayName)}
+ />
+ {providerDisplayName}
+
+
+
+
+
+
+
+ {contextHolder}
+
+ {/* Header Section - Outside the card */}
+
+
+ }
+ open={isModalVisible}
+ width={1000}
+ onCancel={handleModalCancel}
+ footer={null}
+ className="top-8"
+ styles={{
+ body: { padding: "24px" },
+ header: { padding: "24px 24px 0 24px", border: "none" },
+ }}
+ >
+
+
+
+ {/* Main Content Card with Tabs */}
+
+
+ Configure cost discounts for different LLM providers. Changes are saved automatically.
+
+
+
+
+ Cost Tracking Settings
+
+
+
+
+ Provider Discounts
+ Test It
+
+
+
+ {isFetching ? (
+
+
+
+
+
+
+
+
+ Loading configuration...
+
+ ) : Object.keys(discountConfig).length > 0 ? (
+
+
+ ) : (
+
+
+
+ No provider discounts configured
+
+
+ Click "Add Provider Discount" to get started
+
+
+ )}
+
+
+ Add Provider Discount
+
+
+ Select a provider and set its discount percentage. Enter a value between 0% and 100% (e.g., 5 for a 5% discount).
+
+
+
+
+
+ );
+};
+
+export default CostTrackingSettings;
diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/how_it_works.tsx b/ui/litellm-dashboard/src/components/CostTrackingSettings/how_it_works.tsx
new file mode 100644
index 00000000000..d213e679d2c
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/CostTrackingSettings/how_it_works.tsx
@@ -0,0 +1,148 @@
+import React, { useState, useMemo } from "react";
+import { Title, Text, TextInput } from "@tremor/react";
+import CodeBlock from "@/app/(dashboard)/api-reference/components/CodeBlock";
+
+const HowItWorks: React.FC = () => {
+ const [responseCost, setResponseCost] = useState("");
+ const [discountAmount, setDiscountAmount] = useState("");
+
+ const calculatedDiscount = useMemo(() => {
+ const cost = parseFloat(responseCost);
+ const discount = parseFloat(discountAmount);
+
+ if (isNaN(cost) || isNaN(discount) || cost === 0 || discount === 0) {
+ return null;
+ }
+
+ const originalCost = cost + discount;
+ const discountPercentage = (discount / originalCost) * 100;
+
+ return {
+ originalCost: originalCost.toFixed(10),
+ finalCost: cost.toFixed(10),
+ discountAmount: discount.toFixed(10),
+ discountPercentage: discountPercentage.toFixed(2),
+ };
+ }, [responseCost, discountAmount]);
+
+ return (
+
+
+ );
+};
+
+export default HowItWorks;
+
diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/index.ts b/ui/litellm-dashboard/src/components/CostTrackingSettings/index.ts
new file mode 100644
index 00000000000..11adc414664
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/CostTrackingSettings/index.ts
@@ -0,0 +1,8 @@
+export { default as CostTrackingSettings } from "./cost_tracking_settings";
+export { default as ProviderDiscountTable } from "./provider_discount_table";
+export { default as AddProviderForm } from "./add_provider_form";
+export { default as HowItWorks } from "./how_it_works";
+export type { CostTrackingSettingsProps, DiscountConfig, CostDiscountResponse } from "./types";
+export type { ProviderDisplayInfo } from "./provider_display_helpers";
+export * from "./provider_display_helpers";
+
diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_discount_table.tsx b/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_discount_table.tsx
new file mode 100644
index 00000000000..235fe40ee21
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_discount_table.tsx
@@ -0,0 +1,152 @@
+import React, { useState } from "react";
+import { TextInput, Icon, Text } from "@tremor/react";
+import { TrashIcon, PencilAltIcon, CheckIcon, XIcon } from "@heroicons/react/outline";
+import { SimpleTable } from "../common_components/simple_table";
+import { DiscountConfig } from "./types";
+import { getProviderDisplayInfo, handleImageError } from "./provider_display_helpers";
+
+interface ProviderDiscountTableProps {
+ discountConfig: DiscountConfig;
+ onDiscountChange: (provider: string, value: string) => void;
+ onRemoveProvider: (provider: string, providerDisplayName: string) => void;
+}
+
+interface ProviderDiscountRow {
+ provider: string;
+ discount: number;
+}
+
+const ProviderDiscountTable: React.FC
+ Cost Calculation
+
+ Discounts are applied to provider costs:
+
+ final_cost = base_cost × (1 - discount%/100)
+
+ Example
+
+ A 5% discount on a $10.00 request results in: $10.00 × (1 - 0.05) = $9.50
+
+
+
+ Valid Range
+
+ Discount percentages must be between 0% and 100%
+
+
+
+
+ Validating Discounts
+
+ Make a test request and check the response headers to verify discounts are applied:
+
+
+ Look for these headers in the response:
+
+
+
+
+
+
+ Final cost after discount
+
+
+ x-litellm-response-cost
+
+
+ Original cost before discount
+
+
+ x-litellm-response-cost-original
+
+
+ Amount discounted
+
+
+ x-litellm-response-cost-discount-amount
+
+
+ Discount Calculator
+
+ Enter values from your response headers to verify the discount:
+
+
+
+
+
+ {calculatedDiscount && (
+
+
+
+
+
+
+
+ Calculated Results
+
+ )}
+
+
+
+ Original Cost:
+
+ ${calculatedDiscount.originalCost}
+
+ Final Cost:
+
+ ${calculatedDiscount.finalCost}
+
+ Discount Amount:
+
+ ${calculatedDiscount.discountAmount}
+
+ Discount Applied:
+ {calculatedDiscount.discountPercentage}%
+
+
+ {logo && (
+ 
handleImageError(e, displayName)}
+ />
+ )}
+ {displayName}
+
+ );
+ },
+ },
+ {
+ header: "Discount Percentage",
+ cell: (row) => (
+
+ {editingProvider === row.provider ? (
+ <>
+ handleKeyDown(e, row.provider)}
+ placeholder="5"
+ className="w-20"
+ autoFocus
+ />
+ %
+ handleSaveEdit(row.provider)}
+ className="cursor-pointer text-green-600 hover:text-green-700"
+ />
+ {(row.discount * 100).toFixed(1)}%
+ handleStartEdit(row.provider, row.discount)}
+ className="cursor-pointer text-blue-600 hover:text-blue-700"
+ />
+
+ )}
+
+ ),
+ width: "250px",
+ },
+ {
+ header: "Actions",
+ cell: (row) => {
+ const { displayName } = getProviderDisplayInfo(row.provider);
+ return (
+
+
+ {showTooltip && (
+
+ );
+};
+
+/**
+ * A dropdown menu for multiple documentation links.
+ * Linear-style: Single "Docs" button that expands to show multiple relevant links.
+ *
+ * @example
+ *
+
+ )}
+ {content}
+ {learnMoreHref && (
+
+ {learnMoreText}
+
+
+ )}
+
+
+
+
+ {isOpen && (
+
+ );
+};
+
diff --git a/ui/litellm-dashboard/src/components/common_components/simple_table.tsx b/ui/litellm-dashboard/src/components/common_components/simple_table.tsx
new file mode 100644
index 00000000000..3ef3a070120
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/common_components/simple_table.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { Table, TableHead, TableRow, TableHeaderCell, TableBody, TableCell, Text } from "@tremor/react";
+
+export interface SimpleTableColumn
+ {items.map((item, index) => (
+ setIsOpen(false)}
+ >
+ {item.label}
+
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+ How It Works
+
+
+
+
+ );
+};
+
+export default CostTrackingSettings;
+
diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index f40ae673665..b974cdfaa9f 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -191,6 +191,13 @@ const Sidebar: React.FC
+ Cost Tracking Settings
+
+ Configure cost discounts for different LLM providers. Discounts are applied as multipliers.
+
+
+
+
+
+
+ {isFetching ? (
+
+ Provider Discounts
+
+ Set custom discount rates per provider (e.g., 0.05 = 5% discount)
+
+
+
+
+ Loading configuration...
+
+ ) : (
+ <>
+ {Object.keys(discountConfig).length > 0 ? (
+
+
+
+
+ ) : (
+
+
+ No provider discounts configured. Add your first provider below.
+
+
+ )}
+
+
+
+
+
+
+ )}
+
+ Add Provider Discount
+
+ Common providers: vertex_ai, gemini, openai, anthropic, openrouter, bedrock, azure
+
+
+
+
+
+ Cost Calculation
+
+ Discounts are applied to provider costs:
+
+ final_cost = base_cost × (1 - discount)
+
+ Example
+
+ A 5% discount (0.05) on a $10.00 request results in: $10.00 × (1 - 0.05) = $9.50
+
+
+
+ Valid Range
+
+ Discount values must be between 0 (0%) and 1 (100%)
+
+
+