Feat: Render the mcp list on the agent page #3221 (#8829)

### What problem does this PR solve?
Feat: Render the mcp list on the agent page #3221

### Type of change


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

web/src/pages/agent/canvas/node/tool-node.tsx

@@ -4,18 +4,15 @@ import { get } from 'lodash';
 import { memo, useCallback } from 'react';
 import { NodeHandleId } from '../../constant';
 import { ToolCard } from '../../form/agent-form/agent-tools';
+import { useFindMcpById } from '../../hooks/use-find-mcp-by-id';
 import useGraphStore from '../../store';
 import { NodeWrapper } from './node-wrapper';
 
-function InnerToolNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IToolNode>) {
+function InnerToolNode({ id, isConnectable = true }: NodeProps<IToolNode>) {
   const { edges, getNode } = useGraphStore((state) => state);
   const upstreamAgentNodeId = edges.find((x) => x.target === id)?.source;
   const upstreamAgentNode = getNode(upstreamAgentNodeId);
+  const { findMcpById } = useFindMcpById();
 
   const handleClick = useCallback(() => {}, []);
 
@@ -25,6 +22,12 @@ function InnerToolNode({
     [],
   );
 
+  const mcpList: IAgentForm['mcp'] = get(
+    upstreamAgentNode,
+    'data.form.mcp',
+    [],
+  );
+
   return (
     <NodeWrapper>
       <Handle
@@ -44,6 +47,16 @@ function InnerToolNode({
             {x.component_name}
           </ToolCard>
         ))}
+        {mcpList.map((x) => (
+          <ToolCard
+            key={x.mcp_id}
+            onClick={handleClick}
+            className="cursor-pointer"
+            data-tool={x.mcp_id}
+          >
+            {findMcpById(x.mcp_id)?.name}
+          </ToolCard>
+        ))}
       </ul>
     </NodeWrapper>
   );