feat: enhance MCP tool selection and display in application forms

Author: liuruibin

ui/src/views/application/component/McpServersDialog.vue

@@ -17,7 +17,7 @@
       @submit.prevent
     >
       <el-form-item>
-        <el-radio-group v-model="form.mcp_source">
+        <el-radio-group v-model="form.mcp_source" @change="mcpSourceChange">
           <el-radio value="referencing">
             {{ $t('views.applicationWorkflow.nodes.mcpNode.reference') }}
           </el-radio>
@@ -100,17 +100,8 @@ import { computed, inject, onMounted, ref, watch } from 'vue'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api.ts'
 import { useRoute } from 'vue-router'
 
-const getApplicationDetail = inject('getApplicationDetail') as any
-const applicationDetail = getApplicationDetail()
 const emit = defineEmits(['refresh'])
-const route = useRoute()
-const apiType = computed(() => {
-  if (route.path.includes('resource-management')) {
-    return 'systemManage'
-  } else {
-    return 'workspace'
-  }
-})
+
 const paramFormRef = ref()
 
 const mcpServerJson = `{
@@ -143,32 +134,20 @@ watch(dialogVisible, (bool) => {
   }
 })
 
-function getMcpToolSelectOptions() {
-  const obj =
-    apiType.value === 'systemManage'
-      ? {
-          scope: 'WORKSPACE',
-          tool_type: 'MCP',
-          workspace_id: applicationDetail.value?.workspace_id,
-        }
-      : {
-          scope: 'WORKSPACE',
-          tool_type: 'MCP',
-        }
-
-  loadSharedApi({ type: 'tool', systemType: apiType.value })
-    .getAllToolList(obj, loading)
-    .then((res: any) => {
-      mcpToolSelectOptions.value = [...res.data.shared_tools, ...res.data.tools].filter(
-        (item: any) => item.is_active,
-      )
-    })
+function mcpSourceChange() {
+  if (form.value.mcp_source === 'referencing') {
+    form.value.mcp_servers = ''
+  } else {
+    form.value.mcp_tool_id = ''
+  }
 }
 
-const open = (data: any) => {
+
+const open = (data: any, selectOptions: any) => {
   form.value = { ...form.value, ...data }
   form.value.mcp_source = data.mcp_source || 'referencing'
   dialogVisible.value = true
+  mcpToolSelectOptions.value = selectOptions || []
 }
 
 const submit = () => {
@@ -180,10 +159,6 @@ const submit = () => {
   })
 }
 
-onMounted(() => {
-  getMcpToolSelectOptions()
-})
-
 defineExpose({ open })
 </script>
 <style lang="scss" scoped></style>

ui/src/workflow/nodes/ai-chat-node/index.vue

@@ -114,6 +114,7 @@
           />
         </el-form-item>
 
+        <!-- MCP-->
         <div class="flex-between mb-16">
           <div class="lighter">MCP</div>
           <div>
@@ -129,6 +130,24 @@
             <el-switch size="small" v-model="chat_data.mcp_enable" />
           </div>
         </div>
+        <div class="w-full" v-if="
+          (chat_data.mcp_tool_id) ||
+          (chat_data.mcp_servers && chat_data.mcp_servers.length > 0)"
+        >
+          <div class="flex-between border border-r-6 white-bg mb-4" style="padding: 5px 8px">
+            <div class="flex align-center" style="line-height: 20px">
+              <ToolIcon type="MCP" class="mr-8" :size="20" />
+
+              <div class="ellipsis" :title="relatedObject(toolSelectOptions, chat_data.mcp_tool_id, 'id')?.name">
+                {{ relatedObject(mcpToolSelectOptions, chat_data.mcp_tool_id, 'id')?.name || $t('common.custom') + ' MCP' }}
+              </div>
+            </div>
+            <el-button text @click="chat_data.mcp_tool_id = ''">
+              <el-icon><Close /></el-icon>
+            </el-button>
+          </div>
+        </div>
+        <!-- 工具       -->
         <div class="flex-between mb-16">
           <div class="lighter">{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div>
           <div>
@@ -144,6 +163,22 @@
             <el-switch size="small" v-model="chat_data.tool_enable" />
           </div>
         </div>
+        <div class="w-full" v-if="chat_data.tool_ids?.length > 0">
+          <template v-for="(item, index) in chat_data.tool_ids" :key="index">
+            <div class="flex-between border border-r-6 white-bg mb-4" style="padding: 5px 8px">
+              <div class="flex align-center" style="line-height: 20px">
+                <ToolIcon type="CUSTOM" class="mr-8" :size="20" />
+
+                <div class="ellipsis" :title="relatedObject(toolSelectOptions, item, 'id')?.name">
+                  {{ relatedObject(toolSelectOptions, item, 'id')?.name }}
+                </div>
+              </div>
+              <el-button text @click="removeTool(item)">
+                <el-icon><Close /></el-icon>
+              </el-button>
+            </div>
+          </template>
+        </div>
 
         <el-form-item @click.prevent>
           <template #label>
@@ -206,6 +241,7 @@ import McpServersDialog from '@/views/application/component/McpServersDialog.vue
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
 import { useRoute } from 'vue-router'
 import ToolDialog from '@/views/application/component/ToolDialog.vue'
+import {relatedObject} from "@/utils/array.ts";
 const getApplicationDetail = inject('getApplicationDetail') as any
 const route = useRoute()
 
@@ -352,7 +388,7 @@ function openMcpServersDialog() {
     mcp_tool_id: chat_data.value.mcp_tool_id,
     mcp_source: chat_data.value.mcp_source,
   }
-  mcpServersDialogRef.value.open(config)
+  mcpServersDialogRef.value.open(config, mcpToolSelectOptions.value)
 }
 
 function submitMcpServersDialog(config: any) {
@@ -368,6 +404,10 @@ function openToolDialog() {
 function submitToolDialog(config: any) {
   set(props.nodeModel.properties.node_data, 'tool_ids', config.tool_ids)
 }
+function removeTool(id: any) {
+  const list = props.nodeModel.properties.node_data.tool_ids.filter((v: any) => v !== id)
+  set(props.nodeModel.properties.node_data, 'tool_ids', list)
+}
 
 const toolSelectOptions = ref<any[]>([])
 function getToolSelectOptions() {
@@ -392,6 +432,29 @@ function getToolSelectOptions() {
     })
 }
 
+const mcpToolSelectOptions = ref<any[]>([])
+function getMcpToolSelectOptions() {
+  const obj =
+    apiType.value === 'systemManage'
+      ? {
+          scope: 'WORKSPACE',
+          tool_type: 'MCP',
+          workspace_id: application.value?.workspace_id,
+        }
+      : {
+          scope: 'WORKSPACE',
+          tool_type: 'MCP',
+        }
+
+  loadSharedApi({ type: 'tool', systemType: apiType.value })
+    .getAllToolList(obj)
+    .then((res: any) => {
+      mcpToolSelectOptions.value = [...res.data.shared_tools, ...res.data.tools].filter(
+        (item: any) => item.is_active,
+      )
+    })
+}
+
 onMounted(() => {
   getSelectModel()
   if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
@@ -405,6 +468,7 @@ onMounted(() => {
   }
 
   getToolSelectOptions()
+  getMcpToolSelectOptions()
 })
 </script>
 <style lang="scss" scoped></style>