- {(publicPage && publicPageAllowed) || publicPage == false ? (
+ {publicPage == false ? (
Model Hub - Table View
+
+
{/* Filters */}
@@ -265,6 +353,19 @@ const ModelHubTable: React.FC = ({
))}
+
+ Model Hub URL:
+ {`${proxyBaseUrl}/ui/model_hub_table`}
+
{publicPage == false ? (
premiumUser ? (
-
)}
+ Features:
+
+
@@ -278,6 +379,7 @@ const ModelHubTable: React.FC
diff --git a/ui/litellm-dashboard/src/components/model_hub_table_columns.tsx b/ui/litellm-dashboard/src/components/model_hub_table_columns.tsx
index b25916497b9..76e443a6910 100644
--- a/ui/litellm-dashboard/src/components/model_hub_table_columns.tsx
+++ b/ui/litellm-dashboard/src/components/model_hub_table_columns.tsx
@@ -59,7 +59,9 @@ export const modelHubColumns = (
handleSelectAll: (checked: boolean) => void,
showModal: (model: ModelHubData) => void,
copyToClipboard: (text: string) => void,
-): ColumnDef[] => [
+ publicPage: boolean = false,
+): ColumnDef[] => {
+ const allColumns: ColumnDef[] = [
{
header: () => (
{
- const publicA = rowA.original.public === true ? 1 : 0;
- const publicB = rowB.original.public === true ? 1 : 0;
+ const publicA = rowA.original.is_public_model_group === true ? 1 : 0;
+ const publicB = rowB.original.is_public_model_group === true ? 1 : 0;
return publicA - publicB;
},
cell: ({ row }) => {
const model = row.original;
- return model.public === true ? (
+ return model.is_public_model_group === true ? (
Yes
) : (
No
@@ -278,4 +280,20 @@ export const modelHubColumns = (
);
},
},
-];
\ No newline at end of file
+];
+
+ // Filter out columns based on publicPage setting
+ if (publicPage) {
+ return allColumns.filter(column => {
+ // Remove the select/checkbox column
+ if (column.id === "select") return false;
+
+ // Remove the public column
+ if ('accessorKey' in column && column.accessorKey === "public") return false;
+
+ return true;
+ });
+ }
+
+ return allColumns;
+};
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index 1a34eed5833..97940d19eb7 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -108,6 +108,13 @@ export interface CredentialItem {
};
}
+export interface PublicModelHubInfo {
+ docs_title: string;
+ custom_docs_description: string | null;
+ litellm_version: string;
+ useful_links: Record;
+}
+
export interface LiteLLMWellKnownUiConfig {
server_root_path: string;
proxy_base_url: string | null;
@@ -148,6 +155,21 @@ export function setGlobalLitellmHeaderName(
globalLitellmHeaderName = headerName;
}
+export const makeModelGroupPublic = async (accessToken: string, modelGroups: string[]) => {
+ const url = proxyBaseUrl ? `${proxyBaseUrl}/model_group/make_public` : `/model_group/make_public`;
+ const response = await fetch(url, {
+ method: "POST",
+ headers: {
+ [globalLitellmHeaderName]: `Bearer ${accessToken}`,
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ model_groups: modelGroups,
+ }),
+ });
+ return response.json();
+};
+
export const getUiConfig = async () => {
console.log("Getting UI config");
/**Special route to get the proxy base url and server root path */
@@ -164,6 +186,15 @@ export const getUiConfig = async () => {
return jsonData;
};
+export const getPublicModelHubInfo = async () => {
+ const url = defaultProxyBaseUrl
+ ? `${defaultProxyBaseUrl}/public/model_hub/info`
+ : `/public/model_hub/info`;
+ const response = await fetch(url);
+ const jsonData: PublicModelHubInfo = await response.json();
+ return jsonData;
+};
+
export const getOpenAPISchema = async () => {
const url = proxyBaseUrl ? `${proxyBaseUrl}/openapi.json` : `/openapi.json`;
const response = await fetch(url);
@@ -1769,6 +1800,17 @@ export const modelInfoV1Call = async (accessToken: String, modelId: String) => {
}
};
+export const modelHubPublicModelsCall = async () => {
+ const url = proxyBaseUrl ? `${proxyBaseUrl}/public/model_hub` : `/public/model_hub`;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ return response.json();
+};
+
export const modelHubCall = async (accessToken: String) => {
/**
* Get all models on proxy
@@ -4577,6 +4619,7 @@ export const healthCheckHistoryCall = async (
}
};
+
export const latestHealthChecksCall = async (accessToken: String) => {
/**
* Get the latest health check status for all models
diff --git a/ui/litellm-dashboard/src/components/public_model_hub.tsx b/ui/litellm-dashboard/src/components/public_model_hub.tsx
new file mode 100644
index 00000000000..5625ff3377e
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/public_model_hub.tsx
@@ -0,0 +1,870 @@
+import React, { useEffect, useState, useRef, useMemo } from "react";
+import { modelHubPublicModelsCall, proxyBaseUrl, getUiConfig, getPublicModelHubInfo } from "./networking";
+import { ModelDataTable } from "./model_dashboard/table";
+import { ColumnDef } from "@tanstack/react-table";
+import {
+ Card,
+ Text,
+ Title,
+ Button,
+} from "@tremor/react";
+import { message, Tag, Tooltip, Modal, Select } from "antd";
+import { CopyOutlined } from "@ant-design/icons";
+import { ExternalLinkIcon, SearchIcon, EyeIcon, CogIcon } from "@heroicons/react/outline";
+import { Copy, Info } from "lucide-react";
+import { Table as TableInstance } from '@tanstack/react-table';
+import { generateCodeSnippet } from "./chat_ui/CodeSnippets";
+import { EndpointType, getEndpointType } from "./chat_ui/mode_endpoint_mapping";
+import { MessageType } from "./chat_ui/types";
+import { getProviderLogoAndName } from "./provider_info_helpers";
+// Simple approach without react-markdown dependency
+
+interface ModelGroupInfo {
+ model_group: string;
+ providers: string[];
+ max_input_tokens?: number;
+ max_output_tokens?: number;
+ input_cost_per_token?: number;
+ output_cost_per_token?: number;
+ mode?: string;
+ tpm?: number;
+ rpm?: number;
+ supports_parallel_function_calling: boolean;
+ supports_vision: boolean;
+ supports_function_calling: boolean;
+ supported_openai_params?: string[];
+ [key: string]: any;
+}
+
+interface PublicModelHubProps {
+ accessToken?: string | null;
+}
+
+const PublicModelHub: React.FC = ({ accessToken }) => {
+ const [modelHubData, setModelHubData] = useState(null);
+ const [pageTitle, setPageTitle] = useState("LiteLLM Gateway");
+ const [customDocsDescription, setCustomDocsDescription] = useState(null);
+ const [litellmVersion, setLitellmVersion] = useState("");
+ const [usefulLinks, setUsefulLinks] = useState>({});
+ const [loading, setLoading] = useState(true);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [selectedProviders, setSelectedProviders] = useState([]);
+ const [selectedModes, setSelectedModes] = useState([]);
+ const [selectedFeatures, setSelectedFeatures] = useState([]);
+ const [serviceStatus, setServiceStatus] = useState("I'm alive! ✓");
+ const [isModalVisible, setIsModalVisible] = useState(false);
+ const [selectedModel, setSelectedModel] = useState(null);
+ const tableRef = useRef>(null);
+
+ useEffect(() => {
+ const fetchPublicData = async () => {
+ try {
+ setLoading(true);
+ const _modelHubData = await modelHubPublicModelsCall();
+ console.log("ModelHubData:", _modelHubData);
+ setModelHubData(_modelHubData);
+ } catch (error) {
+ console.error("There was an error fetching the public model data", error);
+ setServiceStatus("Service unavailable");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const fetchPublicModelHubInfo = async () => {
+ const publicModelHubInfo = await getPublicModelHubInfo();
+ console.log("Public Model Hub Info:", publicModelHubInfo);
+ setPageTitle(publicModelHubInfo.docs_title);
+ setCustomDocsDescription(publicModelHubInfo.custom_docs_description);
+ setLitellmVersion(publicModelHubInfo.litellm_version);
+ setUsefulLinks(publicModelHubInfo.useful_links || {});
+ };
+
+
+ fetchPublicModelHubInfo();
+
+ fetchPublicData();
+ }, []);
+
+ // Clear filters when filter values change to avoid confusion
+ useEffect(() => {
+ // This would clear selections if we had any selection functionality
+ // For now, it's just for consistency with the original component
+ }, [searchTerm, selectedProviders, selectedModes, selectedFeatures]);
+
+ const getUniqueProviders = (data: ModelGroupInfo[]) => {
+ const providers = new Set();
+ data.forEach(model => {
+ model.providers.forEach(provider => providers.add(provider));
+ });
+ return Array.from(providers);
+ };
+
+ const getUniqueModes = (data: ModelGroupInfo[]) => {
+ const modes = new Set();
+ data.forEach(model => {
+ if (model.mode) modes.add(model.mode);
+ });
+ return Array.from(modes);
+ };
+
+ const getUniqueFeatures = (data: ModelGroupInfo[]) => {
+ const features = new Set();
+ data.forEach(model => {
+ // Find all properties that start with 'supports_' and are true
+ Object.entries(model)
+ .filter(([key, value]) => key.startsWith('supports_') && value === true)
+ .forEach(([key]) => {
+ // Format the feature name (remove 'supports_' prefix and convert to title case)
+ const featureName = key
+ .replace(/^supports_/, '')
+ .split('_')
+ .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(' ');
+ features.add(featureName);
+ });
+ });
+ return Array.from(features).sort();
+ };
+
+
+
+ const filteredData = useMemo(() => {
+ if (!modelHubData) return [];
+
+ let searchResults = modelHubData;
+
+ // Apply search if there's a search term
+ if (searchTerm.trim()) {
+ const lowercaseSearch = searchTerm.toLowerCase();
+ const searchWords = lowercaseSearch.split(/\s+/);
+
+ // First, try flexible matching that handles different separators
+ const exactMatches = modelHubData.filter(model => {
+ const modelName = model.model_group.toLowerCase();
+
+ // Check if it contains the exact search term
+ if (modelName.includes(lowercaseSearch)) {
+ return true;
+ }
+
+ // Check if it contains all search words (handles spaces vs slashes/dashes)
+ return searchWords.every(word => modelName.includes(word));
+ });
+
+ // If we have exact matches, rank them by relevance
+ if (exactMatches.length > 0) {
+ searchResults = exactMatches.sort((a, b) => {
+ const aName = a.model_group.toLowerCase();
+ const bName = b.model_group.toLowerCase();
+
+ // Calculate relevance scores
+ const aExactMatch = aName === lowercaseSearch ? 1000 : 0;
+ const bExactMatch = bName === lowercaseSearch ? 1000 : 0;
+
+ const aStartsWith = aName.startsWith(lowercaseSearch) ? 100 : 0;
+ const bStartsWith = bName.startsWith(lowercaseSearch) ? 100 : 0;
+
+ const aContainsWords = lowercaseSearch.split(/\s+/).every(word => aName.includes(word)) ? 50 : 0;
+ const bContainsWords = lowercaseSearch.split(/\s+/).every(word => bName.includes(word)) ? 50 : 0;
+
+ const aLength = aName.length;
+ const bLength = bName.length;
+
+ const aScore = aExactMatch + aStartsWith + aContainsWords + (1000 - aLength);
+ const bScore = bExactMatch + bStartsWith + bContainsWords + (1000 - bLength);
+
+ return bScore - aScore; // Higher score first
+ });
+ }
+ }
+
+ // Apply other filters
+ return searchResults.filter(model => {
+ const matchesProvider = selectedProviders.length === 0 || selectedProviders.some(provider => model.providers.includes(provider));
+ const matchesMode = selectedModes.length === 0 || selectedModes.includes(model.mode || "");
+
+ // Check if model has any of the selected features
+ const matchesFeature = selectedFeatures.length === 0 ||
+ Object.entries(model)
+ .filter(([key, value]) => key.startsWith('supports_') && value === true)
+ .some(([key]) => {
+ const featureName = key
+ .replace(/^supports_/, '')
+ .split('_')
+ .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(' ');
+ return selectedFeatures.includes(featureName);
+ });
+
+ return matchesProvider && matchesMode && matchesFeature;
+ });
+ }, [modelHubData, searchTerm, selectedProviders, selectedModes, selectedFeatures]);
+
+
+
+ const showModal = (model: ModelGroupInfo) => {
+ setSelectedModel(model);
+ setIsModalVisible(true);
+ };
+
+ const handleModalOk = () => {
+ setIsModalVisible(false);
+ setSelectedModel(null);
+ };
+
+ const handleModalCancel = () => {
+ setIsModalVisible(false);
+ setSelectedModel(null);
+ };
+
+ const copyToClipboard = (text: string) => {
+ navigator.clipboard.writeText(text);
+ message.success("Copied to clipboard!");
+ };
+
+ const formatCapabilityName = (key: string) => {
+ return key
+ .replace(/^supports_/, '')
+ .split('_')
+ .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(' ');
+ };
+
+ const getModelCapabilities = (model: ModelGroupInfo) => {
+ return Object.entries(model)
+ .filter(([key, value]) => key.startsWith('supports_') && value === true)
+ .map(([key]) => key);
+ };
+
+
+
+ const formatCost = (cost: number) => {
+ return `$${(cost * 1_000_000).toFixed(4)}`;
+ };
+
+ const formatTokens = (tokens: number | undefined) => {
+ if (!tokens) return "N/A";
+ if (tokens >= 1000) {
+ return `${(tokens / 1000).toFixed(0)}K`;
+ }
+ return tokens.toString();
+ };
+
+ const formatLimits = (rpm?: number, tpm?: number) => {
+ const limits = [];
+ if (rpm) limits.push(`RPM: ${rpm.toLocaleString()}`);
+ if (tpm) limits.push(`TPM: ${tpm.toLocaleString()}`);
+ return limits.length > 0 ? limits.join(", ") : "N/A";
+ };
+
+
+
+ const publicModelHubColumns = (): ColumnDef[] => [
+ {
+ header: "Model Name",
+ accessorKey: "model_group",
+ enableSorting: true,
+ cell: ({ row }) => (
+ {formatTokens(row.original.max_input_tokens)}
+ ),
+ size: 100,
+ meta: {
+ className: "text-center",
+ },
+ },
+ {
+ header: "Max Output",
+ accessorKey: "max_output_tokens",
+ enableSorting: true,
+ cell: ({ row }) => (
+ {formatTokens(row.original.max_output_tokens)}
+ ),
+ size: 100,
+ meta: {
+ className: "text-center",
+ },
+ },
+ {
+ header: "Input $/1M",
+ accessorKey: "input_cost_per_token",
+ enableSorting: true,
+ cell: ({ row }) => {
+ const cost = row.original.input_cost_per_token;
+ return (
+
+ {cost ? formatCost(cost) : "Free"}
+
+ );
+ },
+ size: 100,
+ meta: {
+ className: "text-center",
+ },
+ },
+ {
+ header: "Output $/1M",
+ accessorKey: "output_cost_per_token",
+ enableSorting: true,
+ cell: ({ row }) => {
+ const cost = row.original.output_cost_per_token;
+ return (
+
+ {cost ? formatCost(cost) : "Free"}
+
+ );
+ },
+ size: 100,
+ meta: {
+ className: "text-center",
+ },
+ },
+ {
+ header: "Features",
+ accessorKey: "supports_vision",
+ enableSorting: false,
+ cell: ({ row }) => {
+ const model = row.original;
+
+ // Dynamically get all features that start with 'supports_' and are true
+ const features = Object.entries(model)
+ .filter(([key, value]) => key.startsWith('supports_') && value === true)
+ .map(([key]) => formatCapabilityName(key));
+
+ if (features.length === 0) {
+ return - ;
+ }
+
+ if (features.length === 1) {
+ return (
+
+ );
+ },
+ size: 120,
+ },
+ {
+ header: "Limits",
+ accessorKey: "rpm",
+ enableSorting: true,
+ cell: ({ row }) => {
+ const model = row.original;
+ return (
+
+
+
+
+
+ ),
+ size: 150,
+ },
+ {
+ header: "Providers",
+ accessorKey: "providers",
+ enableSorting: true,
+ cell: ({ row }) => {
+ const providers = row.original.providers;
+
+ return (
+
+ {providers.map((provider) => {
+ const { logo } = getProviderLogoAndName(provider);
+ return (
+
+ );
+ },
+ size: 120,
+ },
+ {
+ header: "Mode",
+ accessorKey: "mode",
+ enableSorting: true,
+ cell: ({ row }) => {
+ const mode = row.original.mode;
+ const getModeIcon = (mode: string) => {
+ switch (mode?.toLowerCase()) {
+ case "chat":
+ return "💬";
+ case "rerank":
+ return "🔄";
+ case "embedding":
+ return "📄";
+ default:
+ return "🤖";
+ }
+ };
+
+ return (
+
+ {logo && (
+ 
{
+ (e.target as HTMLImageElement).style.display = 'none';
+ }}
+ />
+ )}
+ {provider}
+
+ );
+ })}
+
+ {getModeIcon(mode || "")}
+ {mode || "Chat"}
+
+ );
+ },
+ size: 100,
+ },
+ {
+ header: "Max Input",
+ accessorKey: "max_input_tokens",
+ enableSorting: true,
+ cell: ({ row }) => (
+
+
+ {features[0]}
+
+
+ );
+ }
+
+ return (
+
+
+ {features[0]}
+
+
+
+ }
+ trigger="click"
+ placement="topLeft"
+ >
+ e.stopPropagation()}
+ >
+ +{features.length - 1}
+
+
+ All Features:
+ {features.map((feature, index) => (
+ • {feature}
+ ))}
+
+ {/* Header */}
+
+ {selectedModel?.model_group || "Model Details"}
+ {selectedModel && (
+
+ copyToClipboard(selectedModel.model_group)}
+ className="cursor-pointer text-gray-500 hover:text-blue-500 w-4 h-4"
+ />
+
+ )}
+
+ }
+ width={1000}
+ open={isModalVisible}
+ footer={null}
+ onOk={handleModalOk}
+ onCancel={handleModalCancel}
+ >
+ {selectedModel && (
+
+
+
+
+ {pageTitle}
+
+
+ {/* About Section */}
+
+ About
+
+
+ {/* Useful Links */}
+ {usefulLinks && Object.keys(usefulLinks).length > 0 && (
+
+ Useful Links
+
+ )}
+
+ {/* Health and Endpoint Status */}
+
+ Health and Endpoint Status
+
+
+ {/* Filters */}
+
+
+
+ {/* Models Table */}
+
+
+
+
+ {/* Model Details Modal */}
+ {customDocsDescription ? customDocsDescription : "Proxy Server to call 100+ LLMs in the OpenAI format."}
+
+
+ 🔧
+ Built with litellm: v{litellmVersion}
+
+
+
+ {Object.entries(usefulLinks || {}).map(([title, url]) => (
+
+ ))}
+
+
+ Service status: {serviceStatus}
+
+
+
+
+
+
+ Search Models:
+
+
+
+
+
+
+ Provider:
+
+
+
+ Mode:
+
+
+
+ Features:
+
+
+
+ Available Models
+
+
+
+
+ Showing {filteredData.length} of {modelHubData?.length || 0} models
+
+
+
+ {/* Model Overview */}
+
+ )}
+
+
+ );
+};
+
+export default PublicModelHub;
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/components/public_model_hub_columns.tsx b/ui/litellm-dashboard/src/components/public_model_hub_columns.tsx
new file mode 100644
index 00000000000..faa965e60a2
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/public_model_hub_columns.tsx
@@ -0,0 +1,218 @@
+import React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+import { Badge, Text } from "@tremor/react";
+import { EyeIcon, CogIcon } from "@heroicons/react/outline";
+import { Tag } from "antd";
+
+interface ModelGroupInfo {
+ model_group: string;
+ providers: string[];
+ max_input_tokens?: number;
+ max_output_tokens?: number;
+ input_cost_per_token?: number;
+ output_cost_per_token?: number;
+ mode?: string;
+ tpm?: number;
+ rpm?: number;
+ supports_parallel_function_calling: boolean;
+ supports_vision: boolean;
+ supports_function_calling: boolean;
+ supported_openai_params?: string[];
+ [key: string]: any;
+}
+
+const formatCost = (cost: number) => {
+ return `$${(cost * 1_000_000).toFixed(4)}`;
+};
+
+const formatTokens = (tokens: number | undefined) => {
+ if (!tokens) return "N/A";
+ if (tokens >= 1000) {
+ return `${(tokens / 1000).toFixed(0)}K`;
+ }
+ return tokens.toString();
+};
+
+const formatLimits = (rpm?: number, tpm?: number) => {
+ const limits = [];
+ if (rpm) limits.push(`RPM: ${rpm.toLocaleString()}`);
+ if (tpm) limits.push(`TPM: ${tpm.toLocaleString()}`);
+ return limits.length > 0 ? limits.join(", ") : "N/A";
+};
+
+export const publicModelHubColumns = (): ColumnDef
+ Model Overview
+
+
+ {/* Token and Cost Information */}
+
+
+
+ {/* Wildcard Routing Note */}
+ {selectedModel.model_group.includes('*') && (
+
+ Model Name:
+ {selectedModel.model_group}
+
+
+ Mode:
+ {selectedModel.mode || "Not specified"}
+
+
+ Providers:
+
+
+ {selectedModel.providers.map(provider => {
+ const { logo } = getProviderLogoAndName(provider);
+ return (
+
+
+ );
+ })}
+
+
+ {logo && (
+ {
+ (e.target as HTMLImageElement).style.display = 'none';
+ }}
+ />
+ )}
+ {provider}
+
+
+
+ )}
+
+
+
+ Wildcard Routing
+
+ This model uses wildcard routing. You can pass any value where you see the
+
+ For example, with
+
+ * symbol.
+ {selectedModel.model_group}, you can use any string ({selectedModel.model_group.replace('*', 'my-custom-value')}) that matches this pattern.
+
+ Token & Cost Information
+
+
+ {/* Capabilities */}
+
+
+
+ Max Input Tokens:
+ {selectedModel.max_input_tokens?.toLocaleString() || "Not specified"}
+
+
+ Max Output Tokens:
+ {selectedModel.max_output_tokens?.toLocaleString() || "Not specified"}
+
+
+ Input Cost per 1M Tokens:
+ {selectedModel.input_cost_per_token ? formatCost(selectedModel.input_cost_per_token) : "Not specified"}
+
+
+ Output Cost per 1M Tokens:
+ {selectedModel.output_cost_per_token ? formatCost(selectedModel.output_cost_per_token) : "Not specified"}
+
+
+ Capabilities
+
+
+ {/* Rate Limits */}
+ {(selectedModel.tpm || selectedModel.rpm) && (
+
+ {(() => {
+ const capabilities = getModelCapabilities(selectedModel);
+ const colors = ['green', 'blue', 'purple', 'orange', 'red', 'yellow'];
+
+ if (capabilities.length === 0) {
+ return No special capabilities listed ;
+ }
+
+ return capabilities.map((capability, index) => (
+
+ {formatCapabilityName(capability)}
+
+ ));
+ })()}
+
+
+ Rate Limits
+
+ )}
+
+ {/* Supported OpenAI Parameters */}
+ {selectedModel.supported_openai_params && (
+
+ {selectedModel.tpm && (
+
+
+ Tokens per Minute:
+ {selectedModel.tpm.toLocaleString()}
+
+ )}
+ {selectedModel.rpm && (
+
+ Requests per Minute:
+ {selectedModel.rpm.toLocaleString()}
+
+ )}
+
+ Supported OpenAI Parameters
+
+ )}
+
+ {/* Usage Example */}
+
+ {selectedModel.supported_openai_params.map(param => (
+ {param}
+ ))}
+
+
+ Usage Example
+
+
+
+
+{(() => {
+ const codeSnippet = generateCodeSnippet({
+ apiKeySource: 'custom',
+ accessToken: null,
+ apiKey: 'your_api_key',
+ inputMessage: 'Hello, how are you?',
+ chatHistory: [
+ { role: 'user', content: 'Hello, how are you?', isImage: false } as MessageType
+ ],
+ selectedTags: [],
+ selectedVectorStores: [],
+ selectedGuardrails: [],
+ endpointType: getEndpointType(selectedModel.mode || 'chat'),
+ selectedModel: selectedModel.model_group,
+ selectedSdk: 'openai'
+ });
+ return codeSnippet;
+})()}
+
+
+
+
+
+ {providers.map((provider) => (
+
+ {provider}
+
+ ))}
+
+ );
+ },
+ size: 120,
+ },
+ {
+ header: "Mode",
+ accessorKey: "mode",
+ enableSorting: true,
+ cell: ({ row }) => {
+ const mode = row.original.mode;
+ const getModeIcon = (mode: string) => {
+ switch (mode?.toLowerCase()) {
+ case "chat":
+ return "💬";
+ case "rerank":
+ return "🔄";
+ case "embedding":
+ return "📄";
+ default:
+ return "🤖";
+ }
+ };
+
+ return (
+
+ {getModeIcon(mode || "")}
+ {mode || "Chat"}
+
+ );
+ },
+ size: 100,
+ },
+ {
+ header: "Max Input",
+ accessorKey: "max_input_tokens",
+ enableSorting: true,
+ cell: ({ row }) => (
+
+
+ );
+ }
+
+ if (model.supports_function_calling || model.supports_parallel_function_calling) {
+ features.push(
+
+
+ );
+ }
+
+ return features.length > 0 ? (
+ {features}
+ ) : (
+