From c631d775bf3467d8771e4ce605b440d66291486a Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <80892890+shaohuzhang1@users.noreply.github.com>
Date: Tue, 19 Aug 2025 17:36:23 +0800
Subject: [PATCH] feat: Add create MCP function (#3885)

Co-authored-by: wangdan-fit2cloud <dan.wang@fit2cloud.com>
---
 ui/src/assets/icon_tool_shop.svg              |  3 +
 ui/src/assets/node/icon_tool.svg              |  3 -
 .../component/prologue-content/index.vue      |  2 +-
 ui/src/components/app-icon/ToolIcon.vue       | 21 +++++
 ui/src/components/folder-breadcrumb/index.vue | 10 +--
 ui/src/components/index.ts                    |  2 +
 ui/src/components/markdown/MdRenderer.vue     |  8 +-
 ui/src/layout/components/breadcrumb/index.vue |  4 +-
 ui/src/locales/lang/en-US/views/tool.ts       |  2 +
 ui/src/locales/lang/zh-CN/views/tool.ts       |  2 +
 ui/src/locales/lang/zh-Hant/views/tool.ts     |  2 +
 ui/src/styles/component.scss                  |  1 +
 ui/src/styles/element-plus.scss               |  5 ++
 .../component/AddKnowledgeDialog.vue          |  6 +-
 .../component/McpServersDialog.vue            | 83 ++++++++++++------
 ui/src/views/paragraph/index.vue              | 12 ++-
 .../ApplicationResourceIndex.vue              | 12 +--
 .../ToolResourceIndex.vue                     | 19 ++--
 .../views/system-shared/ToolSharedIndex.vue   | 20 ++---
 ui/src/views/tool/McpToolFormDrawer.vue       | 86 +++++++++++--------
 ui/src/views/tool/ToolDebugDrawer.vue         | 17 ++--
 ui/src/views/tool/ToolFormDrawer.vue          |  2 +-
 .../tool/component/ToolListContainer.vue      | 20 ++---
 ui/src/views/tool/index.vue                   | 13 +--
 ui/src/workflow/icons/mcp-node-icon.vue       |  4 +-
 ui/src/workflow/nodes/ai-chat-node/index.vue  | 43 ++++++----
 26 files changed, 251 insertions(+), 151 deletions(-)
 create mode 100644 ui/src/assets/icon_tool_shop.svg
 delete mode 100644 ui/src/assets/node/icon_tool.svg
 create mode 100644 ui/src/components/app-icon/ToolIcon.vue

diff --git a/ui/src/assets/icon_tool_shop.svg b/ui/src/assets/icon_tool_shop.svg
new file mode 100644
index 000000000..bb7584439
--- /dev/null
+++ b/ui/src/assets/icon_tool_shop.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.1563 2.66699L26.3594 2.68262C26.8258 2.75455 27.2257 3.06988 27.3994 3.51953L29.4004 8.7002C30.2431 10.8818 29.5573 13.1583 28.0215 14.5771C28.0235 14.6068 28.0264 14.6369 28.0264 14.667V28C28.0264 28.7364 27.4288 29.333 26.6924 29.333H5.35941C4.62303 29.333 4.0264 28.7364 4.0264 28V14.667C4.0264 14.6372 4.02838 14.6074 4.0303 14.5781C2.49502 13.1601 1.80856 10.8847 2.65042 8.7041L4.65335 3.51953L4.74026 3.33594C4.97526 2.92651 5.41431 2.66712 5.89651 2.66699H26.1563ZM20.3653 14.1885C19.388 15.2979 17.959 15.9999 16.3643 16H15.6846C14.0896 15.9999 12.6589 15.2983 11.6817 14.1885C10.7002 15.2988 9.26596 16 7.67288 16C7.33622 16 7.00883 15.9688 6.69241 15.9111V26.667H25.3594V15.9102C25.0425 15.968 24.7142 16 24.377 16C22.7837 15.9999 21.347 15.2993 20.3653 14.1885Z" fill="#FF8800"/>
+</svg>
diff --git a/ui/src/assets/node/icon_tool.svg b/ui/src/assets/node/icon_tool.svg
deleted file mode 100644
index afa97360f..000000000
--- a/ui/src/assets/node/icon_tool.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.50959 19.3955C6.84272 20.0622 5.93829 20.4368 4.99527 20.4367C4.05226 20.4366 3.1479 20.0619 2.48114 19.395C1.81439 18.7282 1.43986 17.8238 1.43994 16.8807C1.44002 15.9377 1.81472 15.0334 2.48159 14.3666L4.6407 12.207C3.70381 9.41949 4.34648 6.21772 6.56692 3.99594C8.78914 1.77372 11.9927 1.13238 14.7816 2.07105C14.9607 2.13105 15.1758 2.21994 15.426 2.33683C15.5488 2.39405 15.656 2.48004 15.7385 2.5875C15.821 2.69496 15.8764 2.82073 15.8999 2.95414C15.9235 3.08754 15.9145 3.22467 15.8738 3.35388C15.8331 3.48309 15.7618 3.60057 15.666 3.69638L11.9096 7.45283L14.4238 9.96705L18.1318 6.25905C18.2333 6.15762 18.3578 6.08226 18.4947 6.0394C18.6316 5.99653 18.7768 5.98744 18.918 6.0129C19.0592 6.03836 19.1921 6.09761 19.3054 6.1856C19.4187 6.27358 19.5091 6.38769 19.5687 6.51816C19.6825 6.76616 19.7683 6.97949 19.8265 7.15861C20.7345 9.93283 20.0856 13.1048 17.8807 15.3097C15.6594 17.5306 12.4571 18.1728 9.66914 17.2359L7.50959 19.395V19.3955Z" fill="white"/>
-</svg>
diff --git a/ui/src/components/ai-chat/component/prologue-content/index.vue b/ui/src/components/ai-chat/component/prologue-content/index.vue
index 1445f3e2c..1a0054436 100644
--- a/ui/src/components/ai-chat/component/prologue-content/index.vue
+++ b/ui/src/components/ai-chat/component/prologue-content/index.vue
@@ -17,6 +17,7 @@
           :source="prologue"
           :send-message="sendMessage"
           reasoning_content=""
+          :type="type"
         ></MdRenderer>
       </el-card>
     </div>
@@ -35,7 +36,6 @@ const props = defineProps<{
   sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
 }>()
 
-
 const showAvatar = computed(() => {
   return props.application.show_avatar == undefined ? true : props.application.show_avatar
 })
diff --git a/ui/src/components/app-icon/ToolIcon.vue b/ui/src/components/app-icon/ToolIcon.vue
new file mode 100644
index 000000000..0047d9907
--- /dev/null
+++ b/ui/src/components/app-icon/ToolIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <el-avatar v-if="type == 'MCP'" shape="square" :size="size">
+    <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
+  </el-avatar>
+  <el-avatar v-else class="avatar-green" shape="square" :size="size">
+    <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+  </el-avatar>
+</template>
+<script setup lang="ts">
+defineOptions({ name: 'ToolIcon' })
+const props = defineProps({
+  type: {
+    type: [String, Number],
+    default: '',
+  },
+  size: {
+    type: [String, Number],
+    default: 32,
+  },
+})
+</script>
diff --git a/ui/src/components/folder-breadcrumb/index.vue b/ui/src/components/folder-breadcrumb/index.vue
index edd796905..8517c19e8 100644
--- a/ui/src/components/folder-breadcrumb/index.vue
+++ b/ui/src/components/folder-breadcrumb/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <el-breadcrumb separator-icon="ArrowRight" style="line-height: 22px">
-    <h2 v-if="breadcrumbData?.length === 1" class="ellipsis" :title="breadcrumbData[0]?.name">
-      {{ breadcrumbData[0]?.name }}
-    </h2>
-    <el-breadcrumb-item v-for="(item, index) in breadcrumbData" :key="index" v-else>
+  <h2 v-if="breadcrumbData?.length === 1" class="ellipsis" :title="breadcrumbData[0]?.name">
+    {{ breadcrumbData[0]?.name }}
+  </h2>
+  <el-breadcrumb separator-icon="ArrowRight" style="line-height: normal" class="mt-4" v-else>
+    <el-breadcrumb-item v-for="(item, index) in breadcrumbData" :key="index">
       <h5 class="ml-4 ellipsis" v-if="index === breadcrumbData.length - 1" :title="item.name">
         {{ item.name }}
       </h5>
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 21e341bea..751fe4e77 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -23,6 +23,7 @@ import TagEllipsis from './tag-ellipsis/index.vue'
 import CardCheckbox from './card-checkbox/index.vue'
 import AiChat from './ai-chat/index.vue'
 import KnowledgeIcon from './app-icon/KnowledgeIcon.vue'
+import ToolIcon from './app-icon/ToolIcon.vue'
 import TagGroup from './tag-group/index.vue'
 import WorkspaceDropdown from './workspace-dropdown/index.vue'
 import FolderBreadcrumb from './folder-breadcrumb/index.vue'
@@ -52,6 +53,7 @@ export default {
     app.component('CardCheckbox', CardCheckbox)
     app.component('AiChat', AiChat)
     app.component('KnowledgeIcon', KnowledgeIcon)
+    app.component('ToolIcon', ToolIcon)
     app.component('TagGroup', TagGroup)
     app.component('WorkspaceDropdown', WorkspaceDropdown)
     app.component('FolderBreadcrumb', FolderBreadcrumb)
diff --git a/ui/src/components/markdown/MdRenderer.vue b/ui/src/components/markdown/MdRenderer.vue
index 5182c68f2..67ec2f73a 100644
--- a/ui/src/components/markdown/MdRenderer.vue
+++ b/ui/src/components/markdown/MdRenderer.vue
@@ -5,9 +5,11 @@
     <template v-for="(item, index) in md_view_list" :key="index">
       <div
         v-if="item.type === 'question'"
-        @click="sendMessage ? sendMessage(item.content, 'new') : (content: string) => {}"
+        @click="
+          sendMessage && type !== 'log' ? sendMessage(item.content, 'new') : (content: string) => {}
+        "
         class="problem-button mt-4 mb-4 flex"
-        :class="sendMessage ? 'cursor' : 'disabled'"
+        :class="sendMessage && type !== 'log' ? 'cursor' : 'disabled'"
       >
         <AppIcon iconName="app-edit" class="mr-8" style="margin-top: 2px"></AppIcon>
         {{ item.content }}
@@ -61,6 +63,7 @@ config({
       tokens[idx].attrSet('target', '_blank')
       return md.renderer.renderToken(tokens, idx, options)
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     document.appendChild
   },
 })
@@ -74,6 +77,7 @@ const props = withDefaults(
     chat_record_id?: string
     runtime_node_id?: string
     disabled?: boolean
+    type?: 'log' | 'ai-chat' | 'debug-ai-chat'
   }>(),
   {
     source: '',
diff --git a/ui/src/layout/components/breadcrumb/index.vue b/ui/src/layout/components/breadcrumb/index.vue
index a505cdaaf..57408cd07 100644
--- a/ui/src/layout/components/breadcrumb/index.vue
+++ b/ui/src/layout/components/breadcrumb/index.vue
@@ -11,12 +11,12 @@
       >
         <img :src="resetUrl(current?.icon, resetUrl('./favicon.ico'))" alt="" />
       </el-avatar>
-      <LogoIcon
+      <!-- <LogoIcon
         v-else-if="isApplication"
         height="28px"
         style="width: 28px; height: 28px; display: block"
         class="mr-8"
-      />
+      /> -->
       <KnowledgeIcon v-else-if="isKnowledge" :type="current?.type" class="mr-8" />
 
       <div class="ellipsis" :title="current?.name">{{ current?.name }}</div>
diff --git a/ui/src/locales/lang/en-US/views/tool.ts b/ui/src/locales/lang/en-US/views/tool.ts
index c73779646..d09c0f42c 100644
--- a/ui/src/locales/lang/en-US/views/tool.ts
+++ b/ui/src/locales/lang/en-US/views/tool.ts
@@ -68,9 +68,11 @@ export default {
       inputPlaceholder: 'Please enter parameter values',
     },
     mcp: {
+      title: 'MCP Service',
       label: 'MCP Server Config',
       placeholder: 'Please enter MCP Server config',
       tip: 'Only supports SSE and Streamable HTTP calling methods',
+      requiredMessage: 'Please enter MCP Server Config',
     },
     debug: {
       run: 'Run',
diff --git a/ui/src/locales/lang/zh-CN/views/tool.ts b/ui/src/locales/lang/zh-CN/views/tool.ts
index d1c1dd061..23823e2b6 100644
--- a/ui/src/locales/lang/zh-CN/views/tool.ts
+++ b/ui/src/locales/lang/zh-CN/views/tool.ts
@@ -64,9 +64,11 @@ export default {
       inputPlaceholder: '请输入参数值',
     },
     mcp: {
+      title: 'MCP 服务',
       label: 'MCP Server Config',
       placeholder: '请输入MCP Server配置',
       tip: '仅支持SSE、Streamable HTTP调用方式',
+      requiredMessage: '请输入 MCP Server Config',
     },
     debug: {
       run: '运行',
diff --git a/ui/src/locales/lang/zh-Hant/views/tool.ts b/ui/src/locales/lang/zh-Hant/views/tool.ts
index a3d06efc9..2c34c9eb2 100644
--- a/ui/src/locales/lang/zh-Hant/views/tool.ts
+++ b/ui/src/locales/lang/zh-Hant/views/tool.ts
@@ -65,9 +65,11 @@ export default {
       inputPlaceholder: '請輸入參數值',
     },
     mcp: {
+      title: 'MCP 服務',
       label: 'MCP Server Config',
       placeholder: '請輸入MCP Server配置',
       tip: '僅支援SSE、Streamable HTTP呼叫方式',
+      requiredMessage: '請輸入 MCP Server Config',
     },
     debug: {
       run: '運行',
diff --git a/ui/src/styles/component.scss b/ui/src/styles/component.scss
index 2b2461928..4726a6011 100644
--- a/ui/src/styles/component.scss
+++ b/ui/src/styles/component.scss
@@ -155,6 +155,7 @@
 
 // radio-button-group
 .app-radio-button-group {
+  background: #ffffff;
   border: 1px solid var(--app-border-color-dark);
   border-radius: var(--el-border-radius-base);
   .el-radio-button {
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 6383d1ca8..0e2cf9af3 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -282,3 +282,8 @@
 .el-tag {
   padding: 0 6px;
 }
+
+// el-input
+.el-input {
+  --el-input-text-color: var(--el-text-color-primary);
+}
diff --git a/ui/src/views/application/component/AddKnowledgeDialog.vue b/ui/src/views/application/component/AddKnowledgeDialog.vue
index fcc8b2e54..63a48c344 100644
--- a/ui/src/views/application/component/AddKnowledgeDialog.vue
+++ b/ui/src/views/application/component/AddKnowledgeDialog.vue
@@ -54,7 +54,7 @@
 
         <el-scrollbar>
           <div class="p-16-24 pt-0" style="height: calc(100vh - 200px)">
-            <el-row :gutter="12" v-loading="loading" v-if="filterData.length">
+            <el-row :gutter="12" v-loading="loading || apiLoading" v-if="filterData.length">
               <el-col
                 :span="12"
                 v-for="(item, index) in filterData.filter((v: any) => v.resource_type !== 'folder')"
@@ -132,7 +132,7 @@ const currentEmbedding = ref('')
 const searchValue = ref('')
 const searchData = ref<Array<any>>([])
 const knowledgeList = ref<Array<any>>([])
-const loading = ref(false)
+const apiLoading = ref(false)
 
 const filterData = computed(() => {
   return currentEmbedding.value
@@ -228,7 +228,7 @@ function getList() {
     isShared: folder_id === 'share',
     systemType: apiType.value,
   })
-    .getKnowledgeList({ folder_id }, loading)
+    .getKnowledgeList({ folder_id }, apiLoading)
     .then((res: any) => {
       knowledgeList.value = uniqueArray([...knowledgeList.value, ...res.data], 'id')
       searchData.value = res.data
diff --git a/ui/src/views/application/component/McpServersDialog.vue b/ui/src/views/application/component/McpServersDialog.vue
index 7500ac4ff..1f7dec2e4 100644
--- a/ui/src/views/application/component/McpServersDialog.vue
+++ b/ui/src/views/application/component/McpServersDialog.vue
@@ -13,6 +13,8 @@
       ref="paramFormRef"
       :model="form"
       require-asterisk-position="right"
+      hide-required-asterisk
+      @submit.prevent
     >
       <el-form-item>
         <el-radio-group v-model="form.mcp_source">
@@ -22,7 +24,22 @@
           <el-radio value="custom">{{ $t('common.custom') }}</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item v-if="form.mcp_source === 'referencing'">
+      <el-form-item
+        v-if="form.mcp_source === 'referencing'"
+        :rules="[
+          {
+            required: true,
+            message:
+              $t('common.selectPlaceholder') +
+              ` MCP ${$t('views.applicationWorkflow.nodes.mcpNode.tool')}`,
+          },
+        ]"
+        prop="mcp_tool_id"
+      >
+        <template #label>
+          {{ `MCP ${$t('views.applicationWorkflow.nodes.mcpNode.tool')}` }}
+          <span class="color-danger">*</span>
+        </template>
         <el-select v-model="form.mcp_tool_id" filterable>
           <el-option
             v-for="mcpTool in mcpToolSelectOptions"
@@ -30,19 +47,35 @@
             :label="mcpTool.name"
             :value="mcpTool.id"
           >
-            <span>{{ mcpTool.name }}</span>
-            <el-tag v-if="mcpTool.scope === 'SHARED'" type="info" class="info-tag ml-8 mt-4">
-              {{ $t('views.shared.title') }}
-            </el-tag>
+            <div class="flex align-center">
+              <el-avatar shape="square" :size="20" class="mr-8">
+                <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
+              </el-avatar>
+              <span>{{ mcpTool.name }}</span>
+              <el-tag v-if="mcpTool.scope === 'SHARED'" type="info" class="info-tag ml-8 mt-4">
+                {{ $t('views.shared.title') }}
+              </el-tag>
+            </div>
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item
         v-else
-        :label="$t('views.applicationWorkflow.nodes.mcpNode.configLabel')"
         prop="mcp_servers"
-        :rules="[{ required: true, message: $t('common.required') }]"
+        :rules="[
+          {
+            required: true,
+            message: $t('common.inputPlaceholder') + ' ' + $t('views.tool.form.mcp.label'),
+          },
+        ]"
       >
+        <template #label>
+          {{ $t('views.tool.form.mcp.label') }}
+          <span class="color-danger">*</span>
+          <el-text type="info" class="color-secondary">
+            （{{ $t('views.tool.form.mcp.tip') }}）
+          </el-text>
+        </template>
         <el-input
           v-model="form.mcp_servers"
           :rows="6"
@@ -63,9 +96,9 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import {computed, inject, onMounted, ref, watch} from 'vue'
-import {loadSharedApi} from "@/utils/dynamics-api/shared-api.ts";
-import {useRoute} from "vue-router";
+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()
@@ -106,38 +139,40 @@ watch(dialogVisible, (bool) => {
       mcp_tool_id: '',
       mcp_source: 'referencing',
     }
+    paramFormRef.value?.clearValidate()
   }
 })
 
-
 function getMcpToolSelectOptions() {
   const obj =
     apiType.value === 'systemManage'
       ? {
-        scope: 'WORKSPACE',
-        tool_type: 'MCP',
-        workspace_id: applicationDetail.value?.workspace_id,
-      }
+          scope: 'WORKSPACE',
+          tool_type: 'MCP',
+          workspace_id: applicationDetail.value?.workspace_id,
+        }
       : {
-        scope: 'WORKSPACE',
-        tool_type: 'MCP',
-      }
+          scope: 'WORKSPACE',
+          tool_type: 'MCP',
+        }
 
-  loadSharedApi({type: 'tool', systemType: apiType.value})
+  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)
+      mcpToolSelectOptions.value = [...res.data.shared_tools, ...res.data.tools].filter(
+        (item: any) => item.is_active,
+      )
     })
 }
 
 const open = (data: any) => {
-  form.value = {...form.value, ...data}
+  form.value = { ...form.value, ...data }
+  form.value.mcp_source = data.mcp_source || 'referencing'
   dialogVisible.value = true
 }
 
 const submit = () => {
-  paramFormRef.value.validate().then((valid: any) => {
+  paramFormRef.value.validate((valid: any) => {
     if (valid) {
       emit('refresh', form.value)
       dialogVisible.value = false
@@ -149,6 +184,6 @@ onMounted(() => {
   getMcpToolSelectOptions()
 })
 
-defineExpose({open})
+defineExpose({ open })
 </script>
 <style lang="scss" scoped></style>
diff --git a/ui/src/views/paragraph/index.vue b/ui/src/views/paragraph/index.vue
index d4b19d6ed..82a6e1177 100644
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -39,7 +39,12 @@
           clearable
         >
           <template #prepend>
-            <el-select v-model="searchType" placeholder="Select" style="width: 80px">
+            <el-select
+              v-model="searchType"
+              placeholder="Select"
+              style="width: 80px"
+              @change="searchTypeChange"
+            >
               <el-option :label="$t('common.title')" value="title" />
               <el-option :label="$t('common.content')" value="content" />
             </el-select>
@@ -227,6 +232,11 @@ const title = ref('')
 const search = ref('')
 const searchType = ref('title')
 
+const searchTypeChange = () => {
+  search.value = ''
+}
+
+
 const dialogVisible = ref(false)
 watch(
   () => ParagraphDialogRef.value?.dialogVisible,
diff --git a/ui/src/views/system-resource-management/ApplicationResourceIndex.vue b/ui/src/views/system-resource-management/ApplicationResourceIndex.vue
index b4682b7f3..b7c86c50f 100644
--- a/ui/src/views/system-resource-management/ApplicationResourceIndex.vue
+++ b/ui/src/views/system-resource-management/ApplicationResourceIndex.vue
@@ -52,18 +52,9 @@
           <template #default="scope">
             <div class="table-name flex align-center">
               <el-icon size="24" class="mr-8">
-                <el-avatar
-                  v-if="isAppIcon(scope.row?.icon)"
-                  shape="square"
-                  :size="24"
-                  style="background: none"
-                  class="mr-8"
-                >
+                <el-avatar shape="square" :size="24" style="background: none" class="mr-8">
                   <img :src="resetUrl(scope.row?.icon)" alt="" />
                 </el-avatar>
-                <el-avatar v-else class="avatar-green" shape="square" :size="24">
-                  <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
-                </el-avatar>
               </el-icon>
               {{ scope.row.name }}
             </div>
@@ -448,7 +439,6 @@ watch(
   { immediate: true },
 )
 
-
 function filterWorkspaceChange(val: string) {
   if (val === 'clear') {
     workspaceArr.value = []
diff --git a/ui/src/views/system-resource-management/ToolResourceIndex.vue b/ui/src/views/system-resource-management/ToolResourceIndex.vue
index cc4ff8f0b..337da90be 100644
--- a/ui/src/views/system-resource-management/ToolResourceIndex.vue
+++ b/ui/src/views/system-resource-management/ToolResourceIndex.vue
@@ -61,9 +61,8 @@
                 >
                   <img :src="resetUrl(row?.icon)" alt="" />
                 </el-avatar>
-                <el-avatar v-else class="avatar-green" shape="square" :size="24">
-                  <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
-                </el-avatar>
+
+                <ToolIcon v-else :size="24" :type="row?.tool_type" />
               </el-icon>
               {{ row.name }}
             </div>
@@ -72,13 +71,15 @@
 
         <el-table-column prop="tool_type" :label="$t('views.system.resource_management.type')">
           <template #default="scope">
-            <span v-if="scope.row.tool_type === 'MCP'">
-              MCP
-            </span>
+            <span v-if="scope.row.tool_type === 'MCP'"> MCP </span>
             <span v-else>
-            {{
-                $t(ToolType[scope.row.template_id ? 'INTERNAL' : ('CUSTOM' as keyof typeof ToolType)])
-            }}
+              {{
+                $t(
+                  ToolType[
+                    scope.row.template_id ? 'INTERNAL' : ('CUSTOM' as keyof typeof ToolType)
+                  ],
+                )
+              }}
             </span>
           </template>
         </el-table-column>
diff --git a/ui/src/views/system-shared/ToolSharedIndex.vue b/ui/src/views/system-shared/ToolSharedIndex.vue
index d3ffe2e8d..e1d6ce0e4 100644
--- a/ui/src/views/system-shared/ToolSharedIndex.vue
+++ b/ui/src/views/system-shared/ToolSharedIndex.vue
@@ -2,19 +2,20 @@
   <div class="tool-shared">
     <ToolListContainer>
       <template #header>
-        <el-breadcrumb separator-icon="ArrowRight">
-          <el-breadcrumb-item>{{ t('views.shared.shared_resources') }}</el-breadcrumb-item>
-          <el-breadcrumb-item>
-            <h5 class="ml-4 color-text-primary">{{ t('views.tool.title') }}</h5>
-          </el-breadcrumb-item>
-        </el-breadcrumb>
-        <div class="mt-16 mb-16">
+        <el-space wrap>
+          <el-breadcrumb separator-icon="ArrowRight">
+            <el-breadcrumb-item>{{ t('views.shared.shared_resources') }}</el-breadcrumb-item>
+            <el-breadcrumb-item>
+              <h5 class="ml-4 color-text-primary">{{ t('views.tool.title') }}</h5>
+            </el-breadcrumb-item>
+          </el-breadcrumb>
+          <el-divider direction="vertical" />
           <el-radio-group v-model="toolType" @change="radioChange" class="app-radio-button-group">
             <el-radio-button value="">{{ $t('views.tool.all') }}</el-radio-button>
             <el-radio-button value="CUSTOM">{{ $t('views.tool.title') }}</el-radio-button>
             <el-radio-button value="MCP">MCP</el-radio-button>
           </el-radio-group>
-        </div>
+        </el-space>
       </template>
     </ToolListContainer>
   </div>
@@ -26,11 +27,10 @@ import { onMounted, ref, reactive, computed } from 'vue'
 import ToolListContainer from '@/views/tool/component/ToolListContainer.vue'
 
 import { t } from '@/locales'
-import useStore from "@/stores";
+import useStore from '@/stores'
 
 const { tool } = useStore()
 
-
 const toolType = ref('')
 
 function radioChange() {
diff --git a/ui/src/views/tool/McpToolFormDrawer.vue b/ui/src/views/tool/McpToolFormDrawer.vue
index c94da16e6..ac7ec86d1 100644
--- a/ui/src/views/tool/McpToolFormDrawer.vue
+++ b/ui/src/views/tool/McpToolFormDrawer.vue
@@ -13,6 +13,7 @@
         :rules="rules"
         label-position="top"
         require-asterisk-position="right"
+        hide-required-asterisk
         v-loading="loading"
         @submit.prevent
       >
@@ -31,10 +32,11 @@
                 :size="32"
                 style="background: none"
               >
-                <img :src="String(form.icon)" alt=""/>
+                <img :src="String(form.icon)" alt="" />
               </el-Avatar>
-              <el-avatar v-else class="avatar-green" shape="square" :size="32">
-                <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt=""/>
+
+              <el-avatar v-else shape="square" :size="32">
+                <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
               </el-avatar>
               <el-Avatar
                 v-if="showEditIcon"
@@ -47,8 +49,9 @@
                 <AppIcon iconName="app-edit"></AppIcon>
               </el-Avatar>
             </div>
-            <el-avatar v-else class="avatar-green mr-12" shape="square" :size="32">
-              <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt=""/>
+
+            <el-avatar v-else shape="square" :size="32" class="mr-12">
+              <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
             </el-avatar>
             <el-input
               v-model="form.name"
@@ -71,24 +74,26 @@
             @blur="form.desc = form.desc?.trim()"
           />
         </el-form-item>
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('views.tool.form.mcp.title') }}
+        </h4>
+
+        <el-form-item :label="$t('views.tool.form.toolDescription.label')" prop="code">
+          <template #label>
+            {{ $t('views.tool.form.mcp.label') }}
+            <span class="color-danger">*</span>
+            <el-text type="info" class="color-secondary">
+              （{{ $t('views.tool.form.mcp.tip') }}）
+            </el-text>
+          </template>
+          <el-input
+            v-model="form.code"
+            :placeholder="mcpServerJson"
+            type="textarea"
+            :autosize="{ minRows: 5 }"
+          />
+        </el-form-item>
       </el-form>
-
-      <h4 class="title-decoration-1 mb-16">
-        {{ $t('views.tool.form.mcp.label') }}
-        <span style="color: red; margin-left: -10px">*</span>
-        <el-text type="info" class="color-secondary">
-          {{ $t('views.tool.form.mcp.tip') }}
-        </el-text>
-      </h4>
-
-      <div class="mb-8">
-        <el-input
-          v-model="form.code"
-          :placeholder="mcpServerJson"
-          type="textarea"
-          :autosize="{ minRows: 5 }"
-        />
-      </div>
     </div>
 
     <template #footer>
@@ -104,30 +109,30 @@
         </el-button>
       </div>
     </template>
-    <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshTool"/>
+    <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshTool" />
   </el-drawer>
 </template>
 
 <script setup lang="ts">
-import {computed, reactive, ref, watch} from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import EditAvatarDialog from '@/views/tool/component/EditAvatarDialog.vue'
-import type {toolData} from '@/api/type/tool'
-import type {FormInstance} from 'element-plus'
-import {MsgConfirm, MsgSuccess} from '@/utils/message'
-import {cloneDeep} from 'lodash'
-import {t} from '@/locales'
-import {isAppIcon} from '@/utils/common'
-import {useRoute} from 'vue-router'
+import type { toolData } from '@/api/type/tool'
+import type { FormInstance } from 'element-plus'
+import { MsgConfirm, MsgSuccess } from '@/utils/message'
+import { cloneDeep } from 'lodash'
+import { t } from '@/locales'
+import { isAppIcon } from '@/utils/common'
+import { useRoute } from 'vue-router'
 import useStore from '@/stores'
 import permissionMap from '@/permission'
-import {loadSharedApi} from '@/utils/dynamics-api/shared-api'
+import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
 
 const route = useRoute()
 
 const props = defineProps({
   title: String,
 })
-const {folder, user} = useStore()
+const { folder, user } = useStore()
 
 const apiType = computed(() => {
   if (route.path.includes('shared')) {
@@ -196,6 +201,13 @@ const rules = reactive({
       trigger: 'blur',
     },
   ],
+  code: [
+    {
+      required: true,
+      message: t('views.tool.form.mcp.requiredMessage'),
+      trigger: 'blur',
+    },
+  ],
 })
 
 function close() {
@@ -209,8 +221,7 @@ function close() {
       .then(() => {
         visible.value = false
       })
-      .catch(() => {
-      })
+      .catch(() => {})
   }
 }
 
@@ -226,7 +237,6 @@ function refreshTool(data: any) {
   form.value.icon = data
 }
 
-
 function openEditAvatar() {
   EditAvatarDialogRef.value.open(form.value)
 }
@@ -236,7 +246,7 @@ const submit = async (formEl: FormInstance | undefined) => {
   await formEl.validate((valid: any) => {
     if (valid) {
       if (isEdit.value) {
-        loadSharedApi({type: 'tool', systemType: apiType.value})
+        loadSharedApi({ type: 'tool', systemType: apiType.value })
           .putTool(form.value?.id as string, form.value, loading)
           .then((res: any) => {
             MsgSuccess(t('common.editSuccess'))
@@ -251,7 +261,7 @@ const submit = async (formEl: FormInstance | undefined) => {
           folder_id: folder.currentFolder?.id,
           ...form.value,
         }
-        loadSharedApi({type: 'tool', systemType: apiType.value})
+        loadSharedApi({ type: 'tool', systemType: apiType.value })
           .postTool(obj, loading)
           .then((res: any) => {
             MsgSuccess(t('common.createSuccess'))
diff --git a/ui/src/views/tool/ToolDebugDrawer.vue b/ui/src/views/tool/ToolDebugDrawer.vue
index 0a8e193c2..b391ace13 100644
--- a/ui/src/views/tool/ToolDebugDrawer.vue
+++ b/ui/src/views/tool/ToolDebugDrawer.vue
@@ -1,5 +1,11 @@
 <template>
-  <el-drawer v-model="debugVisible" size="60%" :append-to-body="true" :modal="false">
+  <el-drawer
+    v-model="debugVisible"
+    size="60%"
+    :append-to-body="true"
+    :modal="false"
+    :show-close="false"
+  >
     <template #header>
       <div class="flex align-center" style="margin-left: -8px">
         <el-button class="cursor mr-4" link @click.prevent="debugVisible = false">
@@ -54,7 +60,8 @@
                 <template #label>
                   <div class="flex">
                     <span
-                      >{{ item.name }} <span class="color-danger" v-if="item.is_required">*</span></span
+                      >{{ item.name }}
+                      <span class="color-danger" v-if="item.is_required">*</span></span
                     >
                     <el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
                   </div>
@@ -95,11 +102,7 @@
 
         <p class="lighter mb-8">{{ $t('views.tool.form.debug.output') }}</p>
 
-        <el-card
-          :class="isSuccess ? '' : 'color-danger'"
-          class="pre-wrap"
-          shadow="never"
-        >
+        <el-card :class="isSuccess ? '' : 'color-danger'" class="pre-wrap" shadow="never">
           {{ String(result) == '0' ? 0 : result || '-' }}
         </el-card>
       </div>
diff --git a/ui/src/views/tool/ToolFormDrawer.vue b/ui/src/views/tool/ToolFormDrawer.vue
index 6bb4817e6..988e3950d 100644
--- a/ui/src/views/tool/ToolFormDrawer.vue
+++ b/ui/src/views/tool/ToolFormDrawer.vue
@@ -196,7 +196,7 @@
       </el-table>
       <h4 class="title-decoration-1 mb-16">
         {{ $t('views.tool.form.param.code') }}
-        <span style="color: red; margin-left: -10px">*</span>
+        <span  class="color-danger" style="margin-left: -10px">*</span>
         <el-text type="info" class="color-secondary">
           {{ $t('views.tool.form.param.paramInfo2') }}
         </el-text>
diff --git a/ui/src/views/tool/component/ToolListContainer.vue b/ui/src/views/tool/component/ToolListContainer.vue
index 953508258..d3fac4be6 100644
--- a/ui/src/views/tool/component/ToolListContainer.vue
+++ b/ui/src/views/tool/component/ToolListContainer.vue
@@ -50,17 +50,19 @@
                     <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
                   </el-avatar>
                   <div class="pre-wrap ml-8">
-                    <div class="lighter">空白创建</div>
+                    <div class="lighter">
+                      {{ $t('views.application.form.appTemplate.blankApp.title') }}
+                    </div>
                   </div>
                 </div>
               </el-dropdown-item>
               <el-dropdown-item @click="openCreateMcpDialog()">
                 <div class="flex align-center">
-                  <el-avatar class="avatar-green" shape="square" :size="32">
-                    <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+                  <el-avatar shape="square" :size="32">
+                    <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
                   </el-avatar>
                   <div class="pre-wrap ml-8">
-                    <div class="lighter">创建MCP</div>
+                    <div class="lighter">{{ $t('common.create') }} MCP</div>
                   </div>
                 </div>
               </el-dropdown-item>
@@ -77,7 +79,7 @@
               >
                 <el-dropdown-item v-if="permissionPrecise.import()">
                   <div class="flex align-center w-full">
-                    <el-avatar shape="square" class="mt-4" :size="36" style="background: none">
+                    <el-avatar shape="square" :size="36" style="background: none">
                       <img src="@/assets/icon_import.svg" alt="" />
                     </el-avatar>
                     <div class="pre-wrap ml-8">
@@ -88,8 +90,8 @@
               </el-upload>
               <el-dropdown-item @click="openToolStoreDialog()">
                 <div class="flex align-center">
-                  <el-avatar class="avatar-green" shape="square" :size="32">
-                    <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+                  <el-avatar shape="square" :size="36" style="background: none">
+                    <img src="@/assets/icon_tool_shop.svg" alt="" />
                   </el-avatar>
                   <div class="pre-wrap ml-8">
                     <div class="lighter">
@@ -173,9 +175,7 @@
                   >
                     <img :src="resetUrl(item?.icon)" alt="" />
                   </el-avatar>
-                  <el-avatar v-else class="avatar-green" shape="square" :size="32">
-                    <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
-                  </el-avatar>
+                  <ToolIcon v-else :size="32" :type="item?.tool_type" />
                 </template>
                 <template #subTitle>
                   <el-text class="color-secondary lighter" size="small">
diff --git a/ui/src/views/tool/index.vue b/ui/src/views/tool/index.vue
index def98866c..63a55bbf8 100644
--- a/ui/src/views/tool/index.vue
+++ b/ui/src/views/tool/index.vue
@@ -16,17 +16,18 @@
     </template>
     <ToolListContainer @refreshFolder="refreshFolder">
       <template #header>
-        <h2 v-if="folder.currentFolder?.id === 'share'">
-          {{ $t('views.shared.shared_tool') }}
-        </h2>
-        <FolderBreadcrumb :folderList="folderList" @click="folderClickHandle" v-else />
-        <div class="mt-16 mb-16">
+        <el-space wrap>
+          <h2 v-if="folder.currentFolder?.id === 'share'">
+            {{ $t('views.shared.shared_tool') }}
+          </h2>
+          <FolderBreadcrumb :folderList="folderList" @click="folderClickHandle" v-else />
+          <el-divider direction="vertical" />
           <el-radio-group v-model="toolType" @change="radioChange" class="app-radio-button-group">
             <el-radio-button value="">{{ $t('views.tool.all') }}</el-radio-button>
             <el-radio-button value="CUSTOM">{{ $t('views.tool.title') }}</el-radio-button>
             <el-radio-button value="MCP">MCP</el-radio-button>
           </el-radio-group>
-        </div>
+        </el-space>
       </template>
     </ToolListContainer>
   </LayoutContainer>
diff --git a/ui/src/workflow/icons/mcp-node-icon.vue b/ui/src/workflow/icons/mcp-node-icon.vue
index 587b4e753..625de8f67 100644
--- a/ui/src/workflow/icons/mcp-node-icon.vue
+++ b/ui/src/workflow/icons/mcp-node-icon.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-avatar shape="square" style="background: #34c724">
-    <img src="@/assets/workflow/icon_mcp.svg" style="width: 65%" alt="" />
+  <el-avatar shape="square">
+    <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
   </el-avatar>
 </template>
 <script setup lang="ts"></script>
diff --git a/ui/src/workflow/nodes/ai-chat-node/index.vue b/ui/src/workflow/nodes/ai-chat-node/index.vue
index e804460b8..39252e5c0 100644
--- a/ui/src/workflow/nodes/ai-chat-node/index.vue
+++ b/ui/src/workflow/nodes/ai-chat-node/index.vue
@@ -117,7 +117,13 @@
         <div class="flex-between mb-16">
           <div class="lighter">MCP</div>
           <div>
-            <el-button type="primary" link @click="openMcpServersDialog" @refreshForm="refreshParam">
+            <el-button
+              type="primary"
+              class="mr-4"
+              link
+              @click="openMcpServersDialog"
+              @refreshForm="refreshParam"
+            >
               <AppIcon iconName="app-setting"></AppIcon>
             </el-button>
             <el-switch size="small" v-model="chat_data.mcp_enable" />
@@ -126,7 +132,13 @@
         <div class="flex-between mb-16">
           <div class="lighter">{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div>
           <div>
-            <el-button type="primary" link @click="openToolDialog" @refreshForm="refreshParam">
+            <el-button
+              type="primary"
+              class="mr-4"
+              link
+              @click="openToolDialog"
+              @refreshForm="refreshParam"
+            >
               <AppIcon iconName="app-setting"></AppIcon>
             </el-button>
             <el-switch size="small" v-model="chat_data.tool_enable" />
@@ -178,7 +190,7 @@
       @refresh="submitReasoningDialog"
     />
     <McpServersDialog ref="mcpServersDialogRef" @refresh="submitMcpServersDialog" />
-    <ToolDialog ref="toolDialogRef" @refresh="submitToolDialog"/>
+    <ToolDialog ref="toolDialogRef" @refresh="submitToolDialog" />
   </NodeContainer>
 </template>
 <script setup lang="ts">
@@ -193,7 +205,7 @@ import ReasoningParamSettingDialog from '@/views/application/component/Reasoning
 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 ToolDialog from '@/views/application/component/ToolDialog.vue'
 const getApplicationDetail = inject('getApplicationDetail') as any
 const route = useRoute()
 
@@ -366,25 +378,24 @@ function getToolSelectOptions() {
   const obj =
     apiType.value === 'systemManage'
       ? {
-        scope: 'WORKSPACE',
-        tool_type: 'CUSTOM',
-        workspace_id: application.value?.workspace_id,
-      }
+          scope: 'WORKSPACE',
+          tool_type: 'CUSTOM',
+          workspace_id: application.value?.workspace_id,
+        }
       : {
-        scope: 'WORKSPACE',
-        tool_type: 'CUSTOM',
-      }
+          scope: 'WORKSPACE',
+          tool_type: 'CUSTOM',
+        }
 
-  loadSharedApi({type: 'tool', systemType: apiType.value})
+  loadSharedApi({ type: 'tool', systemType: apiType.value })
     .getAllToolList(obj)
     .then((res: any) => {
-      toolSelectOptions.value = [...res.data.shared_tools, ...res.data.tools]
-        .filter((item: any) => item.is_active)
+      toolSelectOptions.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') {