+
+ )}
+
+
+
+
+ Setting authentication for pass-through endpoints is a LiteLLM Enterprise feature. Get a trial key{" "}
+
+ here
+
+ .
+
+
+
+
+ {endpointData.auth ? "Auth Required" : "No Auth"}
+
+
{endpointData.cost_per_request !== undefined && (
${endpointData.cost_per_request}
+ Authentication Required
+
+ {endpointData.auth ? "Yes" : "No"}
+
+
+ Authentication
+
+
+
+ ),
+ accessorKey: "auth",
+ cell: (info: any) =>
+ })
{
+ e.currentTarget.style.display = "none";
+ }}
+ />
+ {displayName}
+
+);
+
+interface CreateSearchToolProps {
+ userRole: string;
+ accessToken: string | null;
+ onCreateSuccess: (newSearchTool: SearchTool) => void;
+ isModalVisible: boolean;
+ setModalVisible: (visible: boolean) => void;
+}
+
+const CreateSearchTool: React.FCAdd New Search Tool
+
+
+
+
+ {/* Test Connection Results Modal */}
+
+
+ );
+ }
+
+ if (!testResult) {
+ return null;
+ }
+
+ return (
+
+
+ Testing connection to {litellmParams.search_provider || "search provider"}...
+
+
+
+
+
+
+
+ {testResult.status === "success" ? (
+
+ );
+};
+
+export default SearchConnectionTest;
+
diff --git a/ui/litellm-dashboard/src/components/search_tools/search_tool_columns.tsx b/ui/litellm-dashboard/src/components/search_tools/search_tool_columns.tsx
new file mode 100644
index 00000000000..ce43930bbd7
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/search_tools/search_tool_columns.tsx
@@ -0,0 +1,94 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { SearchTool } from "./types";
+import { Icon } from "@tremor/react";
+import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
+import { Tooltip } from "antd";
+
+export const searchToolColumns = (
+ onView: (searchToolId: string) => void,
+ onEdit: (searchToolId: string) => void,
+ onDelete: (searchToolId: string) => void,
+ availableProviders: Array<{ provider_name: string; ui_friendly_name: string }>,
+): ColumnDef
+
+ ) : (
+ <>
+
+
+
+
+
+ Connection to {litellmParams.search_provider} successful!
+
+ {testResult.test_query && (
+
+ Test query:
+ )}
+ {testResult.results_count !== undefined && (
+
+ Results retrieved: {testResult.results_count}
+
+ )}
+
+ {testResult.test_query}
+
+
+
+ )}
+
+
+ Connection to {litellmParams.search_provider || "search provider"} failed
+
+
+
+
+
+ Error:{" "}
+
+
+ {errorMessage}
+
+
+ {testResult.error_type && (
+
+
+ {showDetails && (
+
+
+ Error type:{" "}
+
+
+ )}
+
+ {testResult.message && (
+
+ {testResult.error_type}
+
+
+
+
+ )}
+
+
+ Full Error Details
+
+
+ )}
+
+
+ {testResult.message}
+
+
+
+ Troubleshooting tips:
+
+
+ -
+
- Verify your API key is correct and active +
- Check if the search provider service is operational +
- Ensure you have sufficient credits/quota with the provider +
- Review the provider's documentation for any additional requirements +
+ }>
+ View Search Documentation
+
+
+
+ onEdit(row.original.search_tool_id!)}
+ className="cursor-pointer"
+ />
+ onDelete(row.original.search_tool_id!)}
+ className="cursor-pointer"
+ />
+
+ ),
+ },
+];
+
diff --git a/ui/litellm-dashboard/src/components/search_tools/search_tool_tester.tsx b/ui/litellm-dashboard/src/components/search_tools/search_tool_tester.tsx
new file mode 100644
index 00000000000..28b34b06089
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/search_tools/search_tool_tester.tsx
@@ -0,0 +1,344 @@
+import React, { useState } from "react";
+import { Button, Input, Typography, Spin, message } from "antd";
+import { SearchOutlined, LoadingOutlined } from "@ant-design/icons";
+import { searchToolQueryCall } from "../networking";
+import NotificationsManager from "../molecules/notifications_manager";
+import { Card, Title as TremorTitle } from "@tremor/react";
+
+const { Text } = Typography;
+
+interface SearchResult {
+ title: string;
+ url: string;
+ snippet: string;
+}
+
+interface SearchToolQueryResponse {
+ results: SearchResult[];
+}
+
+interface SearchToolTesterProps {
+ searchToolName: string;
+ accessToken: string;
+ className?: string;
+}
+
+export const SearchToolTester: React.FC
+ Test Search Tool
+
+
+
+ {/* Search Bar at Top */}
+
+
+
+
+ {/* Results Area */}
+
+
+
+
+ }
+ loading={isLoading}
+ style={{
+ height: "48px",
+ paddingLeft: "24px",
+ paddingRight: "24px",
+ borderRadius: "8px",
+ fontWeight: 500,
+ fontSize: "15px",
+ backgroundColor: isLoading || !query.trim() ? undefined : "#1890ff",
+ borderColor: isLoading || !query.trim() ? undefined : "#1890ff",
+ boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+ }}
+ >
+ Search
+
+
+ {!latestResults && !isLoading ? (
+
+
+ Test your search tool
+ Enter a query above to see search results
+
+ ) : (
+
+
+
+ {isLoading && (
+
+ )}
+
+ Searching...
+
+ )}
+
+ {latestResults && !isLoading && (
+ <>
+ {/* Query Info Bar */}
+
+
+
+ {/* Search Results */}
+ {latestResults.response && latestResults.response.results && latestResults.response.results.length > 0 ? (
+
+
+
+ Search Query
+
+ {latestResults.query}
+
+ {formatTimestamp(latestResults.timestamp)}
+
+
+
+
+ {latestResults.response?.results?.length || 0} {latestResults.response?.results?.length === 1 ? 'result' : 'results'}
+
+ {latestResults.latency !== undefined && (
+ <>
+ •
+
+ {latestResults.latency}ms
+
+
+ )}
+
+ {latestResults.response.results.map((result, resultIndex) => {
+ const isResultExpanded = expandedResults[`0-${resultIndex}`] || false;
+
+ return (
+
+ ) : (
+ {
+ e.currentTarget.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+ e.currentTarget.style.borderColor = "#e0e7ff";
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.boxShadow = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+ e.currentTarget.style.borderColor = "#e5e7eb";
+ }}
+ >
+
+ );
+ })}
+
+ {/* Title and External Link */}
+
+
+ {/* URL */}
+
+ {result.url}
+
+ {/* Snippet Preview */}
+
+ {isResultExpanded ? result.snippet : `${result.snippet.substring(0, 200)}${result.snippet.length > 200 ? '...' : ''}`}
+
+
+ {/* Expand/Collapse */}
+ {result.snippet.length > 200 && (
+
+ )}
+
+ No results found
+ Try a different search query
+
+ )}
+
+ )}
+
+ {/* Search History Sidebar */}
+ {searchHistory.length > 1 && (
+
+
+
+
+ )}
+
+ Previous Searches
+
+
+
+ {searchHistory.slice(1, 6).map((entry, index) => (
+
+ {
+ setQuery(entry.query);
+ }}
+ >
+
+ ))}
+ {entry.query}
+
+
+ {entry.response?.results?.length || 0} {entry.response?.results?.length === 1 ? 'result' : 'results'}
+
+ {entry.latency !== undefined && (
+ <>
+ •
+
+ {entry.latency}ms
+
+
+ )}
+ •
+ {formatTimestamp(entry.timestamp)}
+
+
+
+
+ Provider
+
+
+
+ API Key
+
+
+
+ Created At
+
+
+
+ {searchTool.search_tool_info?.description && (
+
+ Description
+
+ )}
+
+ {/* Search Tool Tester */}
+
+ );
+};
+
+
diff --git a/ui/litellm-dashboard/src/components/search_tools/search_tools.tsx b/ui/litellm-dashboard/src/components/search_tools/search_tools.tsx
new file mode 100644
index 00000000000..bcc923aee78
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/search_tools/search_tools.tsx
@@ -0,0 +1,292 @@
+import React, { useState, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Modal, Form, Input, Select } from "antd";
+import { Button, Title, Text, Grid, Col } from "@tremor/react";
+import { DataTable } from "../view_logs/table";
+import { searchToolColumns } from "./search_tool_columns";
+import {
+ fetchSearchTools,
+ updateSearchTool,
+ deleteSearchTool,
+ fetchAvailableSearchProviders,
+} from "../networking";
+import { SearchTool, AvailableSearchProvider } from "./types";
+import { isAdminRole } from "@/utils/roles";
+import NotificationsManager from "../molecules/notifications_manager";
+import { SearchToolView } from "./search_tool_view";
+import CreateSearchTool from "./create_search_tool";
+
+interface SearchToolsProps {
+ accessToken: string | null;
+ userRole: string | null;
+ userID: string | null;
+}
+
+const DeleteModal: React.FC<{
+ isModalOpen: boolean;
+ title: string;
+ confirmDelete: () => void;
+ cancelDelete: () => void;
+}> = ({ isModalOpen, title, confirmDelete, cancelDelete }) => {
+ if (!isModalOpen) return null;
+ return (
+
+
+
+
+
+
+
+ {searchTool.search_tool_name}
+
+
+ {searchTool.search_tool_id}
+
+
+ {getProviderDisplayName(searchTool.litellm_params.search_provider)}
+
+
+ {searchTool.litellm_params.api_key ? "****" : "Not set"}
+
+
+
+ {searchTool.created_at ? new Date(searchTool.created_at).toLocaleString() : "Unknown"}
+
+
+
+ {searchTool.search_tool_info.description}
+
+
+ {accessToken && (
+
+ Are you sure you want to delete this search tool?
+ +Missing required authentication parameters.
;
+ }
+
+ const ToolsTab = () =>
+ selectedToolId ? (
+
+
+ );
+
+ return (
+
+ }
+ getRowCanExpand={() => false}
+ isLoading={isLoadingTools}
+ noDataMessage="No search tools configured"
+ />
+
+
+ {
+ setEditModalVisible(false);
+ form.resetFields();
+ setSelectedToolId(null);
+ }}
+ width={600}
+ >
+ {renderEditForm()}
+
+
+ Search Tools
+ Configure and manage your search providers
+ {isAdminRole(userRole) && (
+
+ )}
+
+
+ );
+};
+
+export default SearchTools;
diff --git a/ui/litellm-dashboard/src/components/search_tools/types.tsx b/ui/litellm-dashboard/src/components/search_tools/types.tsx
new file mode 100644
index 00000000000..77935c5efc8
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/search_tools/types.tsx
@@ -0,0 +1,36 @@
+export interface SearchToolLiteLLMParams {
+ search_provider: string;
+ api_key?: string;
+ api_base?: string;
+ timeout?: number;
+ max_retries?: number;
+ [key: string]: any;
+}
+
+export interface SearchToolInfo {
+ description?: string;
+ [key: string]: any;
+}
+
+export interface SearchTool {
+ search_tool_id?: string;
+ search_tool_name: string;
+ litellm_params: SearchToolLiteLLMParams;
+ search_tool_info?: SearchToolInfo;
+ created_at?: string;
+ updated_at?: string;
+}
+
+export interface SearchToolsResponse {
+ search_tools: SearchTool[];
+}
+
+export interface AvailableSearchProvider {
+ provider_name: string;
+ ui_friendly_name: string;
+}
+
+export interface AvailableSearchProvidersResponse {
+ providers: AvailableSearchProvider[];
+}
+
diff --git a/ui/litellm-dashboard/src/components/templates/model_dashboard.tsx b/ui/litellm-dashboard/src/components/templates/model_dashboard.tsx
index d13786113ea..13bd411cc0a 100644
--- a/ui/litellm-dashboard/src/components/templates/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/templates/model_dashboard.tsx
@@ -1364,6 +1364,7 @@ const OldModelDashboard: React.FC