From 18309085afa61f9fd2277b53ecd1a441e080ff38 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Wed, 4 Feb 2026 17:38:17 -0800
Subject: [PATCH] v0 - semantic filter UI

---
 .../useMCPSemanticFilterSettings.ts           |  19 ++
 .../useUpdateMCPSemanticFilterSettings.ts     |  25 ++
 .../MCPSemanticFilterSettings.tsx             | 264 ++++++++++++++++++
 .../src/components/mcp_tools/mcp_servers.tsx  |   5 +
 .../src/components/networking.tsx             |  67 +++++
 5 files changed, 380 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/hooks/mcpSemanticFilterSettings/useMCPSemanticFilterSettings.ts
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/hooks/mcpSemanticFilterSettings/useUpdateMCPSemanticFilterSettings.ts
 create mode 100644 ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.tsx

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/mcpSemanticFilterSettings/useMCPSemanticFilterSettings.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/mcpSemanticFilterSettings/useMCPSemanticFilterSettings.ts
new file mode 100644
index 00000000000..e91f5aa670b
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/mcpSemanticFilterSettings/useMCPSemanticFilterSettings.ts
@@ -0,0 +1,19 @@
+import { getMCPSemanticFilterSettings } from "@/components/networking";
+import { useQuery } from "@tanstack/react-query";
+import { createQueryKeys } from "../common/queryKeysFactory";
+import useAuthorized from "../useAuthorized";
+
+const mcpSemanticFilterSettingsKeys = createQueryKeys(
+  "mcpSemanticFilterSettings"
+);
+
+export const useMCPSemanticFilterSettings = () => {
+  const { accessToken } = useAuthorized();
+  return useQuery<Record<string, any>>({
+    queryKey: mcpSemanticFilterSettingsKeys.list({}),
+    queryFn: async () => await getMCPSemanticFilterSettings(accessToken),
+    enabled: !!accessToken,
+    staleTime: 60 * 60 * 1000, // 1 hour
+    gcTime: 60 * 60 * 1000, // 1 hour
+  });
+};
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/mcpSemanticFilterSettings/useUpdateMCPSemanticFilterSettings.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/mcpSemanticFilterSettings/useUpdateMCPSemanticFilterSettings.ts
new file mode 100644
index 00000000000..2062b4f4c29
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/mcpSemanticFilterSettings/useUpdateMCPSemanticFilterSettings.ts
@@ -0,0 +1,25 @@
+import { updateMCPSemanticFilterSettings } from "@/components/networking";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createQueryKeys } from "../common/queryKeysFactory";
+
+const mcpSemanticFilterSettingsKeys = createQueryKeys(
+  "mcpSemanticFilterSettings"
+);
+
+export const useUpdateMCPSemanticFilterSettings = (accessToken: string) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (settings: Record<string, any>) => {
+      if (!accessToken) {
+        throw new Error("Access token is required");
+      }
+      return updateMCPSemanticFilterSettings(accessToken, settings);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: mcpSemanticFilterSettingsKeys.all,
+      });
+    },
+  });
+};
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.tsx
new file mode 100644
index 00000000000..4e2152c8482
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.tsx
@@ -0,0 +1,264 @@
+"use client";
+
+import { useMCPSemanticFilterSettings } from "@/app/(dashboard)/hooks/mcpSemanticFilterSettings/useMCPSemanticFilterSettings";
+import { useUpdateMCPSemanticFilterSettings } from "@/app/(dashboard)/hooks/mcpSemanticFilterSettings/useUpdateMCPSemanticFilterSettings";
+import NotificationManager from "@/components/molecules/notifications_manager";
+import {
+  Alert,
+  Button,
+  Card,
+  Form,
+  InputNumber,
+  Select,
+  Skeleton,
+  Slider,
+  Space,
+  Switch,
+  Typography,
+  Tooltip,
+} from "antd";
+import { QuestionCircleOutlined, CheckCircleOutlined, SaveOutlined } from "@ant-design/icons";
+import { useEffect, useState } from "react";
+import { fetchAvailableModels, ModelGroup } from "@/components/playground/llm_calls/fetch_models";
+
+interface MCPSemanticFilterSettingsProps {
+  accessToken: string | null;
+}
+
+export default function MCPSemanticFilterSettings({ accessToken }: MCPSemanticFilterSettingsProps) {
+  const { data, isLoading, isError, error } = useMCPSemanticFilterSettings();
+  const {
+    mutate: updateSettings,
+    isPending: isUpdating,
+    error: updateError,
+  } = useUpdateMCPSemanticFilterSettings(accessToken || "");
+  const [form] = Form.useForm();
+  const [saveSuccess, setSaveSuccess] = useState(false);
+  const [isDirty, setIsDirty] = useState(false);
+  const [embeddingModels, setEmbeddingModels] = useState<ModelGroup[]>([]);
+  const [loadingModels, setLoadingModels] = useState(true);
+
+  const schema = data?.field_schema;
+  const values = data?.values ?? {};
+
+  useEffect(() => {
+    const loadEmbeddingModels = async () => {
+      if (!accessToken) return;
+      try {
+        setLoadingModels(true);
+        const models = await fetchAvailableModels(accessToken);
+        const embeddingOnly = models.filter((model) => model.mode === "embedding");
+        setEmbeddingModels(embeddingOnly);
+      } catch (error) {
+        console.error("Error fetching embedding models:", error);
+      } finally {
+        setLoadingModels(false);
+      }
+    };
+
+    loadEmbeddingModels();
+  }, [accessToken]);
+
+  useEffect(() => {
+    if (values) {
+      form.setFieldsValue({
+        enabled: values.enabled ?? false,
+        embedding_model: values.embedding_model ?? "text-embedding-3-small",
+        top_k: values.top_k ?? 10,
+        similarity_threshold: values.similarity_threshold ?? 0.3,
+      });
+      setIsDirty(false);
+    }
+  }, [values, form]);
+
+  const handleSave = async () => {
+    try {
+      const formValues = await form.validateFields();
+      updateSettings(formValues, {
+        onSuccess: () => {
+          setIsDirty(false);
+          setSaveSuccess(true);
+          setTimeout(() => setSaveSuccess(false), 3000);
+          NotificationManager.success(
+            "Settings updated successfully. Changes will be applied across all pods within 10 seconds."
+          );
+        },
+        onError: (error) => {
+          NotificationManager.fromBackend(error);
+        },
+      });
+    } catch (error) {
+      console.error("Form validation failed:", error);
+    }
+  };
+
+  if (!accessToken) {
+    return (
+      <div className="p-6 text-center text-gray-500">
+        Please log in to configure semantic filter settings.
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ maxWidth: 800 }}>
+      {isLoading ? (
+        <Skeleton active />
+      ) : isError ? (
+        <Alert
+          type="error"
+          message="Could not load MCP Semantic Filter settings"
+          description={error instanceof Error ? error.message : undefined}
+          style={{ marginBottom: 24 }}
+        />
+      ) : (
+        <>
+          <Alert
+            type="info"
+            message="Semantic Tool Filtering"
+            description="Filter MCP tools semantically based on query relevance. This reduces context window size and improves tool selection accuracy. Click 'Save Settings' to apply changes across all pods (takes effect within 10 seconds)."
+            showIcon
+            style={{ marginBottom: 24 }}
+          />
+
+          {saveSuccess && (
+            <Alert
+              type="success"
+              message="Settings saved successfully"
+              icon={<CheckCircleOutlined />}
+              showIcon
+              closable
+              style={{ marginBottom: 16 }}
+            />
+          )}
+
+          {updateError && (
+            <Alert
+              type="error"
+              message="Could not update settings"
+              description={
+                updateError instanceof Error ? updateError.message : undefined
+              }
+              style={{ marginBottom: 16 }}
+            />
+          )}
+
+          <Form
+            form={form}
+            layout="vertical"
+            disabled={isUpdating}
+            onValuesChange={() => {
+              setIsDirty(true);
+            }}
+          >
+            <Card style={{ marginBottom: 16 }}>
+              <Form.Item
+                name="enabled"
+                label={
+                  <Space>
+                    <Typography.Text strong>Enable Semantic Filtering</Typography.Text>
+                    <Tooltip title="When enabled, only the most relevant MCP tools will be included in requests based on semantic similarity">
+                      <QuestionCircleOutlined style={{ color: "#8c8c8c" }} />
+                    </Tooltip>
+                  </Space>
+                }
+                valuePropName="checked"
+              >
+                <Switch disabled={isUpdating} />
+              </Form.Item>
+              
+              <Typography.Text type="secondary" style={{ display: "block", marginTop: -16, marginBottom: 16 }}>
+                {schema?.properties?.enabled?.description}
+              </Typography.Text>
+            </Card>
+
+            <Card title="Configuration" style={{ marginBottom: 16 }}>
+              <Form.Item
+                name="embedding_model"
+                label={
+                  <Space>
+                    <Typography.Text strong>Embedding Model</Typography.Text>
+                    <Tooltip title="The model used to generate embeddings for semantic matching">
+                      <QuestionCircleOutlined style={{ color: "#8c8c8c" }} />
+                    </Tooltip>
+                  </Space>
+                }
+              >
+                <Select
+                  options={embeddingModels.map((model) => ({
+                    label: model.model_group,
+                    value: model.model_group,
+                  }))}
+                  placeholder={loadingModels ? "Loading models..." : "Select embedding model"}
+                  showSearch
+                  disabled={isUpdating || loadingModels}
+                  loading={loadingModels}
+                  notFoundContent={
+                    loadingModels ? "Loading..." : "No embedding models available"
+                  }
+                />
+              </Form.Item>
+
+              <Form.Item
+                name="top_k"
+                label={
+                  <Space>
+                    <Typography.Text strong>Top K Results</Typography.Text>
+                    <Tooltip title="Maximum number of tools to return after filtering">
+                      <QuestionCircleOutlined style={{ color: "#8c8c8c" }} />
+                    </Tooltip>
+                  </Space>
+                }
+              >
+                <InputNumber
+                  min={1}
+                  max={100}
+                  style={{ width: "100%" }}
+                  disabled={isUpdating}
+                />
+              </Form.Item>
+
+              <Form.Item
+                name="similarity_threshold"
+                label={
+                  <Space>
+                    <Typography.Text strong>Similarity Threshold</Typography.Text>
+                    <Tooltip title="Minimum similarity score (0-1) for a tool to be included">
+                      <QuestionCircleOutlined style={{ color: "#8c8c8c" }} />
+                    </Tooltip>
+                  </Space>
+                }
+              >
+                <Slider
+                  min={0}
+                  max={1}
+                  step={0.05}
+                  marks={{
+                    0: "0.0",
+                    0.3: "0.3",
+                    0.5: "0.5",
+                    0.7: "0.7",
+                    1: "1.0",
+                  }}
+                  disabled={isUpdating}
+                />
+              </Form.Item>
+            </Card>
+
+            <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
+              <Button
+                type="primary"
+                icon={<SaveOutlined />}
+                onClick={handleSave}
+                loading={isUpdating}
+                disabled={!isDirty}
+              >
+                Save Settings
+              </Button>
+            </div>
+          </Form>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
index 77034309c91..e4eedf5a195 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
@@ -13,6 +13,7 @@ import MCPConnect from "./mcp_connect";
 import { mcpServerColumns } from "./mcp_server_columns";
 import { MCPServerView } from "./mcp_server_view";
 import { MCPServer, MCPServerProps, Team } from "./types";
+import MCPSemanticFilterSettings from "../Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings";
 
 const { Text: AntdText, Title: AntdTitle } = Typography;
 const EDIT_OAUTH_UI_STATE_KEY = "litellm-mcp-oauth-edit-state";
@@ -302,6 +303,7 @@ const MCPServers: React.FC<MCPServerProps> = ({ accessToken, userRole, userID })
           <div className="flex">
             <Tab>All Servers</Tab>
             <Tab>Connect</Tab>
+            <Tab>Semantic Filter</Tab>
           </div>
         </TabList>
         <TabPanels>
@@ -390,6 +392,9 @@ const MCPServers: React.FC<MCPServerProps> = ({ accessToken, userRole, userID })
           <TabPanel>
             <MCPConnect />
           </TabPanel>
+          <TabPanel>
+            <MCPSemanticFilterSettings accessToken={accessToken} />
+          </TabPanel>
         </TabPanels>
       </TabGroup>
     </div>
diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index ca4c16a781f..84b6de5b7b4 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -5398,6 +5398,73 @@ export const updateUISettings = async (accessToken: string, settings: any) => {
   }
 };
 
+export const getMCPSemanticFilterSettings = async (accessToken: string) => {
+  /**
+   * Get MCP semantic filter configuration
+   */
+  try {
+    const url = proxyBaseUrl
+      ? `${proxyBaseUrl}/get/mcp_semantic_filter_settings`
+      : `/get/mcp_semantic_filter_settings`;
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        [globalLitellmHeaderName]: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      const errorMessage = deriveErrorMessage(errorData);
+      handleError(errorMessage);
+      throw new Error(errorMessage);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to get MCP semantic filter settings:", error);
+    throw error;
+  }
+};
+
+export const updateMCPSemanticFilterSettings = async (
+  accessToken: string,
+  settings: Record<string, any>
+) => {
+  /**
+   * Update MCP semantic filter settings
+   * Settings will be applied across all pods within 10 seconds
+   */
+  try {
+    const url = proxyBaseUrl
+      ? `${proxyBaseUrl}/update/mcp_semantic_filter_settings`
+      : `/update/mcp_semantic_filter_settings`;
+    const response = await fetch(url, {
+      method: "PATCH",
+      headers: {
+        [globalLitellmHeaderName]: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(settings),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      const errorMessage = deriveErrorMessage(errorData);
+      handleError(errorMessage);
+      throw new Error(errorMessage);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to update MCP semantic filter settings:", error);
+    throw error;
+  }
+};
+
 export const getGuardrailsList = async (accessToken: string) => {
   try {
     const url = proxyBaseUrl ? `${proxyBaseUrl}/v2/guardrails/list` : `/v2/guardrails/list`;