+
+ );
+}
diff --git a/vite/src/views/products/features/credit-systems/components/AiCreditSchemaRow.tsx b/vite/src/views/products/features/credit-systems/components/AiCreditSchemaRow.tsx
new file mode 100644
index 000000000..b0b2c7b29
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/components/AiCreditSchemaRow.tsx
@@ -0,0 +1,172 @@
+import type { ModelsDevProvider } from "@autumn/shared";
+import { X } from "lucide-react";
+import { useState } from "react";
+import { IconButton } from "@/components/v2/buttons/IconButton";
+import { Input } from "@/components/v2/inputs/Input";
+import { AiModelSelectDropdown } from "./AiModelSelectDropdown";
+
+interface AiCreditSchemaRowProps {
+ modelKey: string;
+ markup: number;
+ provider: ModelsDevProvider;
+ isLoading: boolean;
+ isCustom?: boolean;
+ inputCost?: number;
+ outputCost?: number;
+ onModelChange: (oldModelKey: string, newModelKey: string) => void;
+ onMarkupChange: (modelKey: string, markup: number) => void;
+ onCostChange?: (
+ modelKey: string,
+ field: "input_cost" | "output_cost",
+ value: number,
+ ) => void;
+ onRemove: (modelKey: string) => void;
+}
+
+function formatCost(value: number | null | undefined): string {
+ if (value == null) return "–";
+ return value.toFixed(2);
+}
+
+export function AiCreditSchemaRow({
+ modelKey,
+ markup,
+ provider,
+ isLoading,
+ isCustom,
+ inputCost,
+ outputCost,
+ onModelChange,
+ onMarkupChange,
+ onCostChange,
+ onRemove,
+}: AiCreditSchemaRowProps) {
+ const model = provider.models[modelKey];
+
+ const actualInput = isCustom
+ ? (inputCost ?? 0)
+ : model
+ ? (model.cost.input ?? 0)
+ : null;
+ const actualOutput = isCustom
+ ? (outputCost ?? 0)
+ : model
+ ? (model.cost.output ?? 0)
+ : null;
+ const multiplier = 1 + markup / 100;
+ const userInput = actualInput != null ? actualInput * multiplier : null;
+ const userOutput = actualOutput != null ? actualOutput * multiplier : null;
+
+ const [localModelName, setLocalModelName] = useState(modelKey);
+
+ return (
+
+ Default Markup %
+
+ handleDefaultMarkupChange(Number(e.target.value) || 0)
+ }
+ onBlur={(e) => handleDefaultMarkupChange(Number(e.target.value) || 0)}
+ placeholder="0"
+ className="w-24"
+ />
+
+
+ {activeProviderKeys.map((providerKey) => {
+ const provider = providers[providerKey];
+ const modelFullIds = providerGroups[providerKey] ?? [];
+ const providerName =
+ provider?.name ??
+ providerKey.charAt(0).toUpperCase() + providerKey.slice(1);
+
+ return (
+
+
+
+
+ );
+ })}
+
+
+ {providerName}
+ {providerKey !== "custom" && (
+ 
+ )}
+
+
+
+
+ )}
+
+
+ {providerKey === "custom" && (
+
+ handleModelChange(providerKey, oldKey, newKey)
+ }
+ onMarkupChange={(key, newMarkup) =>
+ handleMarkupChange(providerKey, key, newMarkup)
+ }
+ onCostChange={(key, field, value) =>
+ handleCostChange(providerKey, key, field, value)
+ }
+ onRemove={(key) => handleRemoveModel(providerKey, key)}
+ />
+ );
+ })}
+
+ addModelToProvider(providerKey)}
+ className="w-fit mt-0.5"
+ icon={
+
+
+ In your API tracking, use the format{" "}
+
+ custom/{"modelId"}
+
+
+
+
+ {modelFullIds.map((fullId) => {
+ const [, ...parts] = fullId.split("/");
+ const modelKey = parts.join("/");
+ const isCustom = providerKey === "custom";
+ return (
+
+ Model
+
+
+ {providerKey === "custom" ? "In $/M" : "Cost In"}
+
+
+ {providerKey === "custom" ? "Out $/M" : "Cost Out"}
+
+
+ Markup %
+
+
+ All prices in $/M tokens
+ + e.stopPropagation()}>
+ provider.id}
+ getOptionLabel={(provider) => provider.name}
+ renderValue={() => (
+
+
+
+
+ );
+}
diff --git a/vite/src/views/products/features/credit-systems/components/AiModelSelectDropdown.tsx b/vite/src/views/products/features/credit-systems/components/AiModelSelectDropdown.tsx
new file mode 100644
index 000000000..6512dae37
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/components/AiModelSelectDropdown.tsx
@@ -0,0 +1,53 @@
+import type { ModelsDevModel, ModelsDevProvider } from "@autumn/shared";
+import { useMemo } from "react";
+import { SearchableSelect } from "@/components/v2/selects/SearchableSelect";
+
+interface AiModelSelectDropdownProps {
+ value: string;
+ onValueChange: (modelKey: string) => void;
+ provider: ModelsDevProvider;
+ isLoading: boolean;
+}
+
+export function AiModelSelectDropdown({
+ value,
+ onValueChange,
+ provider,
+ isLoading,
+}: AiModelSelectDropdownProps) {
+ const models: ModelsDevModel[] = useMemo(
+ () => Object.values(provider.models),
+ [provider],
+ );
+
+ return (
+
+ {/* Model Name */}
+
+
+ {/* User Pays Info */}
+ {(userInput != null || userOutput != null) && (
+
+ {isCustom ? (
+ setLocalModelName(e.target.value)}
+ onBlur={() => {
+ if (localModelName !== modelKey) {
+ onModelChange(modelKey, localModelName);
+ }
+ }}
+ placeholder="my-model-id"
+ className="w-full"
+ />
+ ) : (
+
+ onModelChange(modelKey, newModelKey)
+ }
+ provider={provider}
+ isLoading={isLoading}
+ />
+ )}
+
+
+ {/* Input Cost */}
+
+ {isCustom ? (
+
+ onCostChange?.(
+ modelKey,
+ "input_cost",
+ Number(e.target.value) || 0,
+ )
+ }
+ placeholder="0"
+ className="w-full"
+ />
+ ) : (
+
+
+ {/* Output Cost */}
+
+ {formatCost(actualInput)}
+
+ )}
+
+ {isCustom ? (
+
+ onCostChange?.(
+ modelKey,
+ "output_cost",
+ Number(e.target.value) || 0,
+ )
+ }
+ placeholder="0"
+ className="w-full"
+ />
+ ) : (
+
+
+ {/* Markup % */}
+
+ {formatCost(actualOutput)}
+
+ )}
+
+
+ onMarkupChange(modelKey, Number(e.target.value) || 0)
+ }
+ placeholder="0"
+ className="w-full"
+ />
+
+
+ {/* Remove Button */}
+
+ User pays: ${formatCost(userInput)} in / ${formatCost(userOutput)} out
+ $/M
+
+ )}
+ e.stopPropagation()}>
+ model.id}
+ getOptionLabel={(model) => model.name}
+ renderValue={(option) =>
+ option ? (
+ {option.name}
+ ) : provider.models[value]?.name ? (
+ {provider.models[value].name}
+ ) : value ? (
+ {value}
+ ) : (
+
+ {isLoading ? "Loading models..." : "Select model"}
+
+ )
+ }
+ placeholder={isLoading ? "Loading models..." : "Select model"}
+ searchable
+ searchPlaceholder="Search models..."
+ emptyText="No models found"
+ disabled={isLoading}
+ />
+
+ );
+}
diff --git a/vite/src/views/products/features/credit-systems/components/ClassicCreditSchema.tsx b/vite/src/views/products/features/credit-systems/components/ClassicCreditSchema.tsx
new file mode 100644
index 000000000..025640ea2
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/components/ClassicCreditSchema.tsx
@@ -0,0 +1,161 @@
+import type { CreateFeature, CreditSchemaItem, Feature } from "@autumn/shared";
+import { FeatureType } from "@autumn/shared";
+import { PlusIcon } from "@phosphor-icons/react";
+import { X } from "lucide-react";
+import { useEffect, useMemo, useRef } from "react";
+import { toast } from "sonner";
+import { IconButton } from "@/components/v2/buttons/IconButton";
+import { FormLabel } from "@/components/v2/form/FormLabel";
+import { Input } from "@/components/v2/inputs/Input";
+import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
+import { FeatureSelectDropdown } from "./FeatureSelectDropdown";
+
+interface ClassicCreditSchemaProps {
+ creditSystem: CreateFeature;
+ setCreditSystem: (creditSystem: CreateFeature) => void;
+}
+
+export function ClassicCreditSchema({
+ creditSystem,
+ setCreditSystem,
+}: ClassicCreditSchemaProps) {
+ const { features } = useFeaturesQuery();
+ const schema = creditSystem.config?.schema || [];
+ const schemaKeysRef = useRef
+ = allMeteredFeatures.length}
+ className="w-fit mt-4"
+ icon={
+
+ );
+}
diff --git a/vite/src/views/products/features/credit-systems/components/CreditSystemSchema.tsx b/vite/src/views/products/features/credit-systems/components/CreditSystemSchema.tsx
index 2cef9ff85..cb3a082fe 100644
--- a/vite/src/views/products/features/credit-systems/components/CreditSystemSchema.tsx
+++ b/vite/src/views/products/features/credit-systems/components/CreditSystemSchema.tsx
@@ -1,145 +1,136 @@
-import type { CreateFeature, CreditSchemaItem, Feature } from "@autumn/shared";
-import { FeatureType } from "@autumn/shared";
-import { PlusIcon } from "@phosphor-icons/react";
-import { X } from "lucide-react";
-import { toast } from "sonner";
-import { IconButton } from "@/components/v2/buttons/IconButton";
-import { FormLabel } from "@/components/v2/form/FormLabel";
-import { Input } from "@/components/v2/inputs/Input";
+import { type CreateFeature, FeatureType, type ModelsDevProvider } from "@autumn/shared";
+import { useMemo } from "react";
+import { GroupedTabButton } from "@/components/v2/buttons/GroupedTabButton";
import { SheetSection } from "@/components/v2/sheets/SharedSheetComponents";
-import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
-import { FeatureSelectDropdown } from "@/views/products/features/credit-systems/components/FeatureSelectDropdown";
+import { useModelsDevPricing } from "@/hooks/queries/useAiModelsQuery";
+import { AiCreditSchema } from "./AiCreditSchema";
+import { ClassicCreditSchema } from "./ClassicCreditSchema";
+
+type CreditSchemaMode = "classic" | "ai";
+
+const DEFAULT_AI_MODEL_COMPANIES = ["anthropic", "google", "openai"] as const;
+
+const getReleaseDateMs = (releaseDate?: string) => {
+ if (!releaseDate) return -1;
+ const timestamp = Date.parse(releaseDate);
+ return Number.isNaN(timestamp) ? -1 : timestamp;
+};
+
+function getDefaultModelMarkups(
+ providers: Record
+ Metered Feature
+ Credit Cost
+
+
+
+ {schema.map((item: CreditSchemaItem, index: number) => {
+ const availableFeatures = allMeteredFeatures.filter(
+ (feature: Feature) =>
+ !schema.some(
+ (schemaItem: CreditSchemaItem) =>
+ feature.id !== item.metered_feature_id &&
+ schemaItem.metered_feature_id === feature.id,
+ ),
+ );
+
+ return (
+
+
+
+
+ handleSchemaChange(index, "metered_feature_id", featureId)
+ }
+ availableFeatures={availableFeatures}
+ allFeatures={allMeteredFeatures}
+ />
+
+
+ );
+ })}
+
+
+ handleSchemaChange(index, "credit_amount", e.target.value)
+ }
+ onBlur={(e) =>
+ handleSchemaChange(
+ index,
+ "credit_amount",
+ Number(e.target.value) || 0,
+ )
+ }
+ placeholder="eg. 10"
+ />
+
+
-
diff --git a/vite/src/views/products/features/credit-systems/hooks/useAiCreditSchema.ts b/vite/src/views/products/features/credit-systems/hooks/useAiCreditSchema.ts
new file mode 100644
index 000000000..0f3001eb0
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/hooks/useAiCreditSchema.ts
@@ -0,0 +1,259 @@
+import type { CreateFeature } from "@autumn/shared";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { useModelsDevPricing } from "@/hooks/queries/useAiModelsQuery";
+
+type ModelMarkupEntry = {
+ markup: number;
+ input_cost?: number;
+ output_cost?: number;
+};
+
+type ModelMarkups = Record
- Metered Feature
- Credit Cost
-
+
+ {!disableModeSwitch && (
+ = allMeteredFeatures.length}
- className="w-fit mt-4"
- icon={
+ {mode === "classic" ? (
+
);
diff --git a/vite/src/views/products/features/credit-systems/components/UpdateCreditSystemSheet.tsx b/vite/src/views/products/features/credit-systems/components/UpdateCreditSystemSheet.tsx
index 16d280699..de9b800bc 100644
--- a/vite/src/views/products/features/credit-systems/components/UpdateCreditSystemSheet.tsx
+++ b/vite/src/views/products/features/credit-systems/components/UpdateCreditSystemSheet.tsx
@@ -59,6 +59,7 @@ function UpdateCreditSystemSheet({
type: selectedCreditSystem.type,
config: selectedCreditSystem.config,
event_names: selectedCreditSystem.event_names,
+ model_markups: selectedCreditSystem.model_markups,
});
}
}, [open, selectedCreditSystem]);
@@ -74,6 +75,8 @@ function UpdateCreditSystemSheet({
setLoading(true);
try {
+ const isAiCreditSystem = creditSystem.type === FeatureType.AiCreditSystem;
+
await FeatureService.updateFeature(
axiosInstance,
selectedCreditSystem.id,
@@ -81,12 +84,14 @@ function UpdateCreditSystemSheet({
id: creditSystem.id,
name: creditSystem.name,
type: creditSystem.type,
- credit_schema: creditSystem.config?.schema?.map(
- (x: CreditSchemaItem) => ({
- metered_feature_id: x.metered_feature_id,
- credit_cost: Number(x.credit_amount),
- }),
- ),
+ model_markups: creditSystem.model_markups ?? undefined,
+ credit_schema: isAiCreditSystem
+ ? undefined
+ : creditSystem.config?.schema?.map((x: CreditSchemaItem) => ({
+ metered_feature_id: x.metered_feature_id,
+ credit_cost:
+ x.credit_amount != null ? Number(x.credit_amount) : 0,
+ })),
event_names: creditSystem.event_names,
display: undefined,
},
@@ -95,7 +100,6 @@ function UpdateCreditSystemSheet({
await refetch();
toast.success("Credit system updated successfully");
- // Call onSuccess with old and new IDs
if (onSuccess) {
onSuccess(
selectedCreditSystem.id,
@@ -105,7 +109,6 @@ function UpdateCreditSystemSheet({
setOpen(false);
} catch (error: unknown) {
- console.log(error);
toast.error(
getBackendErr(error as AxiosError, "Failed to update credit system"),
);
@@ -134,6 +137,7 @@ function UpdateCreditSystemSheet({
- {schema.map((item: CreditSchemaItem, index: number) => {
- const availableFeatures = allMeteredFeatures.filter(
- (feature: Feature) =>
- !schema.some(
- (schemaItem: CreditSchemaItem) =>
- feature.id !== item.metered_feature_id &&
- schemaItem.metered_feature_id === feature.id,
- ),
- );
-
- return (
-
-
-
-
- handleSchemaChange(index, "metered_feature_id", featureId)
- }
- availableFeatures={availableFeatures}
- allFeatures={allMeteredFeatures}
- />
-
-
- );
- })}
-
-
- handleSchemaChange(index, "credit_amount", e.target.value)
- }
- onBlur={(e) =>
- handleSchemaChange(
- index,
- "credit_amount",
- Number(e.target.value) || 0,
- )
- }
- placeholder="eg. 10"
- />
-
- {featureIds}
);
diff --git a/vite/src/views/products/features/feature-list/FeatureListTable.tsx b/vite/src/views/products/features/feature-list/FeatureListTable.tsx
index a9aca0662..4bddbba2a 100644
--- a/vite/src/views/products/features/feature-list/FeatureListTable.tsx
+++ b/vite/src/views/products/features/feature-list/FeatureListTable.tsx
@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
import { Table } from "@/components/general/table";
import { IconButton } from "@/components/v2/buttons/IconButton";
import { EmptyState } from "@/components/v2/empty-states/EmptyState";
+import { useModelsDevPricing } from "@/hooks/queries/useAiModelsQuery";
import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
import { useEnv } from "@/utils/envUtils";
import { useProductsQueryState } from "@/views/products/hooks/useProductsQueryState";
@@ -18,6 +19,7 @@ import { FeatureListMenuButton } from "./FeatureListMenuButton";
export function FeatureListTable() {
const env = useEnv();
const { features } = useFeaturesQuery();
+ const { providers } = useModelsDevPricing();
const { queryStates } = useProductsQueryState();
const [selectedFeature, setSelectedFeature] = useStateIncluded
- {isConsumable
+ {isAiCreditSystem
+ ? "Set an included USD budget (eg, $10 per month)."
+ : isConsumable
? `Set an included usage limit (eg, 100 ${featureName} per month).`
: isAllocated
? `Set a usage limit (eg, 5 ${featureName}).`
@@ -124,7 +128,9 @@ export function BillingType() {
Priced
- {isConsumable
+ {isAiCreditSystem
+ ? "Bill model usage at the markup you set in USD after the included budget is used."
+ : isConsumable
? `Charge a price for usage (eg, $0.05 per ${singleFeatureName}).`
: isAllocated
? `Charge a price based on usage (eg, $10 per ${singleFeatureName}).`
diff --git a/vite/src/views/products/plan/components/edit-plan-feature/EditPlanFeatureSheet.tsx b/vite/src/views/products/plan/components/edit-plan-feature/EditPlanFeatureSheet.tsx
index 95b2d427d..c6563308d 100644
--- a/vite/src/views/products/plan/components/edit-plan-feature/EditPlanFeatureSheet.tsx
+++ b/vite/src/views/products/plan/components/edit-plan-feature/EditPlanFeatureSheet.tsx
@@ -116,6 +116,7 @@ export function EditPlanFeatureSheet({
const feature = getFeature(item?.feature_id ?? "", features);
const isFeaturePrice = isFeaturePriceItem(item);
+ const isAiCreditSystem = feature?.type === FeatureType.AiCreditSystem;
// Allow confirming a priced feature that has a $0 tier (valid zero-price config)
const isZeroPriceItem =
@@ -166,7 +167,7 @@ export function EditPlanFeatureSheet({
1 ? (
diff --git a/vite/src/views/products/plan/components/edit-plan-feature/IncludedUsage.tsx b/vite/src/views/products/plan/components/edit-plan-feature/IncludedUsage.tsx
index 1daaa82fd..8b4528277 100644
--- a/vite/src/views/products/plan/components/edit-plan-feature/IncludedUsage.tsx
+++ b/vite/src/views/products/plan/components/edit-plan-feature/IncludedUsage.tsx
@@ -1,18 +1,24 @@
+import { IconCheckbox } from "@/components/v2/checkboxes/IconCheckbox";
+import { Input } from "@/components/v2/inputs/Input";
+import {
+ InputGroup,
+ InputGroupInput,
+ InputGroupText,
+} from "@/components/v2/inputs/InputGroup";
+import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
+import { isFeaturePriceItem } from "@/utils/product/getItemType";
+import { useProductItemContext } from "@/views/products/product/product-item/ProductItemContext";
import {
BillingInterval,
billingToItemInterval,
EntInterval,
entToItemInterval,
+ FeatureType,
getFeatureName,
Infinite,
isContUseItem,
} from "@autumn/shared";
import { InfinityIcon } from "@phosphor-icons/react";
-import { IconCheckbox } from "@/components/v2/checkboxes/IconCheckbox";
-import { Input } from "@/components/v2/inputs/Input";
-import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
-import { isFeaturePriceItem } from "@/utils/product/getItemType";
-import { useProductItemContext } from "@/views/products/product/product-item/ProductItemContext";
import { UsageReset } from "./UsageReset";
export function IncludedUsage() {
@@ -24,6 +30,8 @@ export function IncludedUsage() {
const includedUsage = item.included_usage;
const isFeaturePrice = isFeaturePriceItem(item);
+ const feature = features.find((f) => f.id === item.feature_id);
+ const isAiCreditSystem = feature?.type === FeatureType.AiCreditSystem;
// Helper function to get the display value for the input
const getInputValue = () => {
@@ -41,35 +49,71 @@ export function IncludedUsage() {
- Quantity of
-
- {getFeatureName({
- feature: features.find((f) => f.id === item.feature_id),
- plural: true,
- })}{" "}
-
- {!isFeaturePrice ? " that can be used" : " granted before billing"}
+ {isAiCreditSystem ? (
+ <>
+ USD budget{" "}
+ {!isFeaturePrice
+ ? "allocated to this plan"
+ : "granted before billing"}
+
+ ) : (
+ <>
+ Quantity of
+
+ {getFeatureName({ feature, plural: true })}{" "}
+
+ {!isFeaturePrice
+ ? " that can be used"
+ : " granted before billing"}
+
+ )}
- {
- const value = e.target.value.trim();
+ {isAiCreditSystem ? (
+ // Couldn't find a disabled property but data-disabled is accounted for in CSS
+
+ $
+ {
+ const value = e.target.value.trim();
- if (value === "") {
- setItem({ ...item, included_usage: null });
- } else {
- const numValue = value;
- if (!Number.isNaN(numValue)) {
- setItem({ ...item, included_usage: Number(numValue) });
+ if (value === "") {
+ setItem({ ...item, included_usage: null });
+ } else {
+ const numValue = Number(value);
+ if (!Number.isNaN(numValue)) {
+ setItem({ ...item, included_usage: numValue });
+ }
+ }
+ }}
+ disabled={includedUsage === Infinite}
+ type="number"
+ />
+
+ ) : (
+ {
+ const value = e.target.value.trim();
+
+ if (value === "") {
+ setItem({ ...item, included_usage: null });
+ } else {
+ const numValue = Number(value);
+ if (!Number.isNaN(numValue)) {
+ setItem({ ...item, included_usage: numValue });
+ }
}
- }
- }}
- disabled={includedUsage === Infinite}
- type="number"
- />
+ }}
+ disabled={includedUsage === Infinite}
+ type="number"
+ />
+ )}