feat: add MCP server tools integration and UI components

liuruibin · liuruibin · commit 717a10e4cb6e · 2025-03-22T11:35:00.000+08:00
diff --git a/apps/application/flow/step_node/__init__.py b/apps/application/flow/step_node/__init__.py
@@ -25,13 +25,14 @@
 from .start_node import *
 from .text_to_speech_step_node.impl.base_text_to_speech_node import BaseTextToSpeechNode
 from .variable_assign_node import BaseVariableAssignNode
+from .mcp_node import BaseMcpNode
 
 node_list = [BaseStartStepNode, BaseChatNode, BaseSearchDatasetNode, BaseQuestionNode,
              BaseConditionNode, BaseReplyNode,
              BaseFunctionNodeNode, BaseFunctionLibNodeNode, BaseRerankerNode, BaseApplicationNode,
              BaseDocumentExtractNode,
              BaseImageUnderstandNode, BaseFormNode, BaseSpeechToTextNode, BaseTextToSpeechNode,
-             BaseImageGenerateNode, BaseVariableAssignNode]
+             BaseImageGenerateNode, BaseVariableAssignNode, BaseMcpNode]
 
 
 def get_node(node_type):
diff --git a/apps/application/flow/step_node/mcp_node/__init__.py b/apps/application/flow/step_node/mcp_node/__init__.py
@@ -0,0 +1,3 @@
+# coding=utf-8
+
+from .impl import *
diff --git a/apps/application/flow/step_node/mcp_node/i_mcp_node.py b/apps/application/flow/step_node/mcp_node/i_mcp_node.py
@@ -0,0 +1,35 @@
+# coding=utf-8
+
+from typing import Type
+
+from rest_framework import serializers
+
+from application.flow.i_step_node import INode, NodeResult
+from common.util.field_message import ErrMessage
+from django.utils.translation import gettext_lazy as _
+
+
+class McpNodeSerializer(serializers.Serializer):
+    mcp_servers = serializers.JSONField(required=True,
+                                        error_messages=ErrMessage.char(_("Mcp servers")))
+
+    mcp_server = serializers.CharField(required=True,
+                                       error_messages=ErrMessage.char(_("Mcp server")))
+
+    mcp_tool = serializers.CharField(required=True, error_messages=ErrMessage.char(_("Mcp tool")))
+
+    tool_params = serializers.DictField(required=True,
+                                        error_messages=ErrMessage.char(_("Tool parameters")))
+
+
+class IMcpNode(INode):
+    type = 'mcp-node'
+
+    def get_node_params_serializer_class(self) -> Type[serializers.Serializer]:
+        return McpNodeSerializer
+
+    def _run(self):
+        return self.execute(**self.node_params_serializer.data, **self.flow_params_serializer.data)
+
+    def execute(self, mcp_servers, mcp_server, mcp_tool, tool_params, **kwargs) -> NodeResult:
+        pass
diff --git a/apps/application/flow/step_node/mcp_node/impl/__init__.py b/apps/application/flow/step_node/mcp_node/impl/__init__.py
@@ -0,0 +1,3 @@
+# coding=utf-8
+
+from .base_mcp_node import BaseMcpNode
diff --git a/apps/application/flow/step_node/mcp_node/impl/base_mcp_node.py b/apps/application/flow/step_node/mcp_node/impl/base_mcp_node.py
@@ -0,0 +1,45 @@
+# coding=utf-8
+import asyncio
+import json
+from typing import List
+
+from langchain_mcp_adapters.client import MultiServerMCPClient
+
+from application.flow.i_step_node import NodeResult
+from application.flow.step_node.mcp_node.i_mcp_node import IMcpNode
+
+
+class BaseMcpNode(IMcpNode):
+    def save_context(self, details, workflow_manage):
+        self.context['result'] = details.get('result')
+        self.context['question'] = details.get('question')
+        self.answer_text = details.get('result')
+
+    def execute(self, mcp_servers, mcp_server, mcp_tool, tool_params, **kwargs) -> NodeResult:
+        servers = json.loads(mcp_servers)
+        tool_params = {'query': '中北大学如何'}
+
+        async def call_tool(servers, tool_params):
+            async with MultiServerMCPClient(servers) as client:
+                print(tool_params)
+                s = await client.sessions['composio_search'].call_tool(mcp_tool, tool_params)
+
+                return s
+
+        res = asyncio.run(call_tool(servers, tool_params))
+        print(res)
+        return NodeResult({'result': ''}, {})
+
+    def get_reference_content(self, fields: List[str]):
+        return str(self.workflow_manage.get_reference_field(
+            fields[0],
+            fields[1:]))
+
+    def get_details(self, index: int, **kwargs):
+        return {
+            'name': self.node.properties.get('stepName'),
+            "index": index,
+            'run_time': self.context.get('run_time'),
+            'question': self.context.get('question'),
+            'result': self.context.get('result'),
+        }
diff --git a/apps/application/serializers/application_serializers.py b/apps/application/serializers/application_serializers.py
@@ -1319,11 +1319,15 @@ async def get_mcp_tools(servers):
                 async with MultiServerMCPClient(servers) as client:
                     return client.get_tools()
 
-            tools = asyncio.run(get_mcp_tools(servers))
-            return [
-                {
-                    'name': tool.name,
-                    'description': tool.description,
-                    'args': tool.args,
-                }
-                for tool in tools]
+            tools = []
+            for server in servers:
+                tools += [
+                    {
+                        'server': server,
+                        'name': tool.name,
+                        'description': tool.description,
+                        'args': tool.args,
+                    }
+                    for tool in asyncio.run(get_mcp_tools({server: servers[server]}))]
+            return tools
+
diff --git a/ui/src/locales/lang/en-US/views/application-workflow.ts b/ui/src/locales/lang/en-US/views/application-workflow.ts
@@ -224,6 +224,9 @@ export default {
       label: 'MCP Server',
       text: 'Call MCP Tools',
       getToolsSuccess: 'Get Tools Successfully',
+      getTool: 'Get Tools',
+      tool: 'Tool',
+      toolParam: 'Tool Params'
     },
     imageGenerateNode: {
       label: 'Image Generation',
diff --git a/ui/src/locales/lang/zh-CN/views/application-workflow.ts b/ui/src/locales/lang/zh-CN/views/application-workflow.ts
@@ -224,6 +224,9 @@ export default {
       label: 'MCP 节点',
       text: '调用 MCP 工具',
       getToolsSuccess: '获取工具成功',
+      getTool: '获取工具',
+      tool: '工具',
+      toolParam: '工具参数'
     },
     imageGenerateNode: {
       label: '图片生成',
diff --git a/ui/src/locales/lang/zh-Hant/views/application-workflow.ts b/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
@@ -224,6 +224,9 @@ export default {
       label: 'MCP 節點',
       text: '呼叫 MCP 工具',
       getToolsSuccess: '獲取工具成功',
+      getTool: '獲取工具',
+      tool: '工具',
+      toolParam: '工具變數'
     },
     imageGenerateNode: {
       label: '圖片生成',
diff --git a/ui/src/workflow/nodes/mcp-node/index.vue b/ui/src/workflow/nodes/mcp-node/index.vue
@@ -15,25 +15,26 @@
           <MdEditorMagnify
             @wheel="wheel"
             title="MCP Server Config"
-            v-model="form_data.mcpServers"
+            v-model="form_data.mcp_servers"
             style="height: 150px"
             @submitDialog="submitDialog"
           />
         </el-form-item>
         <el-form-item>
           <template v-slot:label>
             <div class="flex-between">
-              <span>工具</span>
-              <el-button type="primary" link @click="getTools()">获取工具</el-button>
+              <span>{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</span>
+              <el-button type="primary" link @click="getTools()">
+                {{ $t('views.applicationWorkflow.nodes.mcpNode.getTool') }}
+              </el-button>
             </div>
           </template>
           <el-select
-            v-model="form_data.mcpTool"
-            placeholder="请选择工具"
+            v-model="form_data.mcp_tool"
             @change="changeTool"
           >
             <el-option
-              v-for="item in form_data.mcpTools"
+              v-for="item in form_data.mcp_tools"
               :key="item.value"
               :label="item.name"
               :value="item.name"
@@ -53,10 +54,11 @@
         </el-form-item>
       </el-form>
     </div>
-    <h5 class="title-decoration-1 mb-8">工具参数</h5>
+    <h5 class="title-decoration-1 mb-8">
+      {{ $t('views.applicationWorkflow.nodes.mcpNode.toolParam') }}</h5>
     <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">
       <DynamicsForm
-        v-if="form_data.mcpTool"
+        v-if="form_data.mcp_tool"
         v-model="form_data.tool_params"
         :model="form_data.tool_params"
         label-position="top"
@@ -93,26 +95,31 @@ const wheel = (e: any) => {
   }
 }
 const form = {
-  mcpTool: '',
-  mcpServers: '',
+  mcp_tool: '',
+  mcp_tools: [],
+  mcp_servers: '',
+  mcp_server: '',
   tool_params: {},
   tool_form_field: []
 }
 
 
 function submitDialog(val: string) {
-  set(props.nodeModel.properties.node_data, 'mcpServers', val)
+  set(props.nodeModel.properties.node_data, 'mcp_servers', val)
 }
 
 function getTools() {
-  applicationApi.getMcpTools({ mcp_servers: form_data.value.mcpServers }).then((res: any) => {
-    form_data.value.mcpTools = res.data
+  applicationApi.getMcpTools({ mcp_servers: form_data.value.mcp_servers }).then((res: any) => {
+    form_data.value.mcp_tools = res.data
     MsgSuccess(t('views.applicationWorkflow.nodes.mcpNode.getToolsSuccess'))
   })
 }
 
 function changeTool() {
-  const params = form_data.value.mcpTools.filter((item: any) => item.name === form_data.value.mcpTool)[0].args.params
+  // form_data.value.mcp_server = item.server
+  // console.log(item.server)
+
+  const params = form_data.value.mcp_tools.filter((item: any) => item.name === form_data.value.mcp_tool)[0].args.params
   form_data.value.tool_form_field = []
   for (const item in params.properties) {
     form_data.value.tool_form_field.push({
@@ -124,13 +131,13 @@ function changeTool() {
         props_info: {}
       },
       input_type: 'TextInput',
-      required: params.required.indexOf(item) !== -1,
+      required: params.required?.indexOf(item) !== -1,
       default_value: '',
       show_default_value: false,
       props_info: {
         rules: [
           {
-            required: params.required.indexOf(item) !== -1,
+            required: params.required?.indexOf(item) !== -1,
             message: t('dynamicsForm.tip.requiredMessage'),
             trigger: 'blur'
           }
@@ -158,18 +165,12 @@ const form_data = computed({
 
 
 const replyNodeFormRef = ref()
-const nodeCascaderRef = ref()
-const nodeCascaderRef2 = ref()
 
 const validate = async () => {
-  // console.log(replyNodeFormRef.value.validate())
   let ps = [
     replyNodeFormRef.value?.validate(),
-    ...nodeCascaderRef.value.map((item: any) => item.validate())
+    dynamicsFormRef.value?.validate()
   ]
-  if (nodeCascaderRef2.value) {
-    ps = [...ps, ...nodeCascaderRef.value.map((item: any) => item.validate())]
-  }
   return Promise.all(ps).catch((err: any) => {
     return Promise.reject({ node: props.nodeModel, errMessage: err })
   })

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# coding=utf-8`
	`2`	`+`
	`3`	`+from .impl import *`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# coding=utf-8`
	`2`	`+`
	`3`	`+from .base_mcp_node import BaseMcpNode`