Feat: Test MCP server #3221 (#8757)

### What problem does this PR solve?

Feat: Test MCP server #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/profile-setting/mcp/mcp-card.tsx

@@ -3,6 +3,8 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
 import { IMcpServer } from '@/interfaces/database/mcp';
 import { formatDate } from '@/utils/date';
+import { isPlainObject } from 'lodash';
+import { useMemo } from 'react';
 import { McpDropdown } from './mcp-dropdown';
 import { UseBulkOperateMCPReturnType } from './use-bulk-operate-mcp';
 
@@ -15,6 +17,18 @@ export function McpCard({
   selectedList,
   handleSelectChange,
 }: DatasetCardProps) {
+  const toolLength = useMemo(() => {
+    const tools = data.variables?.tools;
+    if (isPlainObject(tools)) {
+      return Object.keys(tools || {}).length;
+    }
+    return 0;
+  }, [data.variables?.tools]);
+  const onCheckedChange = (checked: boolean) => {
+    if (typeof checked === 'boolean') {
+      handleSelectChange(data.id, checked);
+    }
+  };
   return (
     <Card key={data.id} className="w-64">
       <CardContent className="p-2.5 pt-2 group">
@@ -26,11 +40,7 @@ export function McpCard({
             </McpDropdown>
             <Checkbox
               checked={selectedList.includes(data.id)}
-              onCheckedChange={(checked) => {
-                if (typeof checked === 'boolean') {
-                  handleSelectChange(data.id, checked);
-                }
-              }}
+              onCheckedChange={onCheckedChange}
               onClick={(e) => {
                 e.stopPropagation();
               }}
@@ -40,7 +50,7 @@ export function McpCard({
         <div className="flex justify-between items-end">
           <div className="w-full">
             <div className="text-base font-semibold mb-3 line-clamp-1 text-text-sub-title">
-              20 cached tools
+              {toolLength} cached tools
             </div>
             <p className="text-sm text-text-sub-title">
               {formatDate(data.update_date)}