diff --git a/ui/litellm-dashboard/src/components/mcp_tools/index.tsx b/ui/litellm-dashboard/src/components/mcp_tools/index.tsx index 9018752705..ae3d4fac62 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/index.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/index.tsx @@ -5,6 +5,31 @@ import { columns, ToolTestPanel } from './columns'; import { MCPTool, MCPToolsViewerProps, CallMCPToolResponse } from './types'; import { listMCPTools, callMCPTool } from '../networking'; +// Wrapper to handle the type mismatch between MCPTool and DataTable's expected type +function DataTableWrapper({ + columns, + data, + isLoading, +}: { + columns: any; + data: MCPTool[]; + isLoading: boolean; +}) { + // Create a dummy renderSubComponent and getRowCanExpand function + const renderSubComponent = () =>
; + const getRowCanExpand = () => false; + + return ( + + ); +} + export default function MCPToolsViewer({ accessToken, userRole, @@ -49,7 +74,7 @@ export default function MCPToolsViewer({ const toolsData = React.useMemo(() => { if (!mcpTools) return []; - return mcpTools.map(tool => ({ + return mcpTools.map((tool: MCPTool) => ({ ...tool, onToolSelect: (tool: MCPTool) => { setSelectedTool(tool); @@ -61,7 +86,7 @@ export default function MCPToolsViewer({ // Filter tools based on search term const filteredTools = React.useMemo(() => { - return toolsData.filter(tool => { + return toolsData.filter((tool: MCPTool) => { const searchLower = searchTerm.toLowerCase(); return ( tool.name.toLowerCase().includes(searchLower) || @@ -122,7 +147,7 @@ export default function MCPToolsViewer({
-