feat: add MCP server config validation and user tips

Author: liuruibin

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',

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: '图片生成',

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: '圖片生成',

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'))
   })