From 0f0b6b976e31e32ec58c321538a6744e8ed3c383 Mon Sep 17 00:00:00 2001
From: CaptainB <bin@fit2cloud.com>
Date: Tue, 25 Mar 2025 10:06:24 +0800
Subject: [PATCH] feat: add MCP server config validation and user tips

---
 .../lang/en-US/views/application-workflow.ts     |  3 ++-
 .../lang/zh-CN/views/application-workflow.ts     |  3 ++-
 .../lang/zh-Hant/views/application-workflow.ts   |  3 ++-
 ui/src/workflow/nodes/mcp-node/index.vue         | 16 +++++++++++++---
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/ui/src/locales/lang/en-US/views/application-workflow.ts b/ui/src/locales/lang/en-US/views/application-workflow.ts
index d0aae1b58..1171adaa1 100644
--- a/ui/src/locales/lang/en-US/views/application-workflow.ts
+++ b/ui/src/locales/lang/en-US/views/application-workflow.ts
@@ -226,7 +226,8 @@ export default {
       getToolsSuccess: 'Get Tools Successfully',
       getTool: 'Get Tools',
       tool: 'Tool',
-      toolParam: 'Tool Params'
+      toolParam: 'Tool Params',
+      mcpServerTip: 'Please enter the JSON format of the MCP server config',
     },
     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
index 5427c6df0..fadc70409 100644
--- a/ui/src/locales/lang/zh-CN/views/application-workflow.ts
+++ b/ui/src/locales/lang/zh-CN/views/application-workflow.ts
@@ -226,7 +226,8 @@ export default {
       getToolsSuccess: '获取工具成功',
       getTool: '获取工具',
       tool: '工具',
-      toolParam: '工具参数'
+      toolParam: '工具参数',
+      mcpServerTip: '请输入 JSON 格式的 MCP 服务器配置',
     },
     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
index 71bf93b27..bdc662561 100644
--- a/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
+++ b/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
@@ -226,7 +226,8 @@ export default {
       getToolsSuccess: '獲取工具成功',
       getTool: '獲取工具',
       tool: '工具',
-      toolParam: '工具變數'
+      toolParam: '工具變數',
+      mcpServerTip: '請輸入 JSON 格式的 MCP 服務器配置',
     },
     imageGenerateNode: {
       label: '圖片生成',
diff --git a/ui/src/workflow/nodes/mcp-node/index.vue b/ui/src/workflow/nodes/mcp-node/index.vue
index 81110f94b..e504b9901 100644
--- a/ui/src/workflow/nodes/mcp-node/index.vue
+++ b/ui/src/workflow/nodes/mcp-node/index.vue
@@ -90,12 +90,12 @@ import { isLastNode } from '@/workflow/common/data'
 import applicationApi from '@/api/application'
 import { t } from '@/locales'
 import DynamicsForm from '@/components/dynamics-form/index.vue'
-import { MsgSuccess } from '@/utils/message'
+import { MsgError, MsgSuccess } from '@/utils/message'
 
 const props = defineProps<{ nodeModel: any }>()
 
 const dynamicsFormRef = ref()
-
+const loading = ref(false)
 
 const wheel = (e: any) => {
   if (e.ctrlKey === true) {
@@ -122,7 +122,17 @@ function submitDialog(val: string) {
 }
 
 function getTools() {
-  applicationApi.getMcpTools({ mcp_servers: form_data.value.mcp_servers }).then((res: any) => {
+  if (!form_data.value.mcp_servers) {
+    MsgError(t('views.applicationWorkflow.nodes.mcpNode.mcpServerTip'))
+    return
+  }
+  try {
+    JSON.parse(form_data.value.mcp_servers)
+  } catch (e) {
+    MsgError(t('views.applicationWorkflow.nodes.mcpNode.mcpServerTip'))
+    return
+  }
+  applicationApi.getMcpTools({ mcp_servers: form_data.value.mcp_servers }, loading).then((res: any) => {
     form_data.value.mcp_tools = res.data
     MsgSuccess(t('views.applicationWorkflow.nodes.mcpNode.getToolsSuccess'))
   })