diff --git a/ui/AGENTS.md b/ui/AGENTS.md
index 527dbbe4433..cbe0ae8c1ab 100644
--- a/ui/AGENTS.md
+++ b/ui/AGENTS.md
@@ -17,7 +17,7 @@ Before making changes, determine which areas the task touches and read the corre
   organization, and API type ownership.
 - Views: `src/views/VIEW_README.md` is the source of truth for page responsibilities and
   feature-local code organization.
-- Workflow canvas: `src/workflow-canvas/README.md` is the source of truth for LogicFlow canvas
+- Workflow canvas: `src/workflow-canvas/WORKFLOW_README.md` is the source of truth for LogicFlow canvas
   responsibilities, configuration boundaries, node maintenance, and View integration.
 
 Follow this maintenance flow:
@@ -76,7 +76,7 @@ ui/
 │   │   ├── icons/             # Workflow node icons
 │   │   ├── nodes/             # Workflow node definitions and components
 │   │   ├── plugins/           # Canvas-local plugins
-│   │   ├── README.md          # Canvas boundaries and maintenance rules
+│   │   ├── WORKFLOW_README.md # Canvas boundaries and maintenance rules
 │   │   ├── types.ts           # Workflow canvas protocol types
 │   │   └── index.vue          # MkWorkflow canvas entry
 │   ├── router/                # Vue Router routes and router instance
diff --git a/ui/src/router/admin/system/index.ts b/ui/src/router/admin/system/index.ts
index ff99d841d3e..e7cfebb5f9d 100644
--- a/ui/src/router/admin/system/index.ts
+++ b/ui/src/router/admin/system/index.ts
@@ -13,7 +13,7 @@ export const systemRoutes: RouteRecordRaw = {
       path: 'home',
       name: 'system-home',
       component: () => import('@/views/system/SystemView.vue'),
-      meta: { title: '首页', activeIcon: 'icon_screen_outlined', icon: 'icon_screen_filled', order: 0 },
+      meta: { title: '首页', activeIcon: 'icon_screen_filled', icon: 'icon_screen_outlined', order: 0 },
     },
     {
       path: 'identity',
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 0a1f7f9fd61..622ae465176 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -882,6 +882,12 @@
 /* tabs */
 .el-tabs {
   --el-tabs-header-height: 34px;
+  &.small {
+    --el-tabs-header-height: 28px;
+    .el-tabs__item {
+      font-size: 12px;
+    }
+  }
   &__header {
     margin: 0;
     flex-shrink: 0;
@@ -891,7 +897,7 @@
     flex: 1;
   }
   &__item {
-    padding: 2px 14px;
+    padding: 0 14px;
     font-weight: 400;
     align-items: baseline;
     &.is-active {
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index f323a8bc4e6..04cdde2ea3b 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -28,7 +28,7 @@
   `src/utils`、`src/stores` 或 `src/api`。
 - 所有使用 `src/workflow-canvas/` 渲染画布的路由页面统一放在 `views/workflow/`。这些页面负责
   路由参数、页面头部、保存或发布等页面动作以及后续接口编排；LogicFlow 初始化、节点注册和
-  画布内部行为遵循 `src/workflow-canvas/README.md`，不移入 View。
+  画布内部行为遵循 `src/workflow-canvas/WORKFLOW_README.md`，不移入 View。
 - 页面目录存在多个层级时，目录名应表达业务层级，例如
   `system/identity/groups/UserGroupListView.vue`，不要创建无业务含义的分组目录。
 - 页面脚本中的状态、计算属性和处理方法按照同一业务流程集中放置，并使用简短的业务备注划分
diff --git a/ui/src/views/workflow/components/WorkflowComponentMenu.vue b/ui/src/views/workflow/components/WorkflowComponentMenu.vue
index 757a164c107..4c7e624f8e3 100644
--- a/ui/src/views/workflow/components/WorkflowComponentMenu.vue
+++ b/ui/src/views/workflow/components/WorkflowComponentMenu.vue
@@ -2,14 +2,14 @@
 import { ref } from 'vue'
 
 import { ClickOutside as vClickOutside } from 'element-plus'
-import NodeMenu from '@/workflow-canvas/component/NodeMenu.vue'
-import type { WorkflowMenuNode } from '@/workflow-canvas/config/menu'
+import NodeMenu from '@/workflow-canvas/node-menu/index.vue'
+import type { NodeMenuItem } from '@/workflow-canvas/node-menu/types'
 
 defineOptions({ name: 'WorkflowComponentMenu' })
 
 const emit = defineEmits<{
-  dragstart: [workflowNode: WorkflowMenuNode, event: PointerEvent]
-  select: [workflowNode: WorkflowMenuNode]
+  dragstart: [node: NodeMenuItem, event: PointerEvent]
+  select: [node: NodeMenuItem]
 }>()
 
 const popoverVisible = ref(false)
@@ -20,13 +20,13 @@ const togglePopover = () => {
   popoverVisible.value = !popoverVisible.value
 }
 
-const handleSelect = (workflowNode: WorkflowMenuNode) => {
-  emit('select', workflowNode)
+const handleSelect = (node: NodeMenuItem) => {
+  emit('select', node)
   popoverVisible.value = false
 }
 
-const handleDragStart = (workflowNode: WorkflowMenuNode, event: PointerEvent) => {
-  emit('dragstart', workflowNode, event)
+const handleDragStart = (node: NodeMenuItem, event: PointerEvent) => {
+  emit('dragstart', node, event)
   dragClosing.value = true
   popoverVisible.value = false
 }
@@ -39,7 +39,7 @@ const handleDragStart = (workflowNode: WorkflowMenuNode, event: PointerEvent) =>
     <el-collapse-transition>
       <NodeMenu
         v-show="popoverVisible"
-        class="absolute right-0 top-[calc(100%+8px)] z-[2000]"
+        class="absolute -right-40 top-[calc(100%+8px)] z-[2000]"
         :class="{ 'pointer-events-none': dragClosing }"
         @dragstart="handleDragStart"
         @select="handleSelect"
diff --git a/ui/src/workflow-canvas/WORKFLOW_README.md b/ui/src/workflow-canvas/WORKFLOW_README.md
index dcfb5bf3144..924a50cda91 100644
--- a/ui/src/workflow-canvas/WORKFLOW_README.md
+++ b/ui/src/workflow-canvas/WORKFLOW_README.md
@@ -20,24 +20,29 @@
 
 ```text
 src/workflow-canvas/
-├── component/          # 画布内可复用的控制、菜单和搜索组件
-├── config/             # 节点数据、菜单、映射、常量及预留的本地化配置
+├── component/          # 画布内可复用的控制和搜索组件
+├── config/             # 节点数据、映射、常量及预留的本地化配置
 ├── core/               # 稳定的画布内核与所有节点共用的基础能力
+│   ├── edge/           # 普通边、循环边及边删除按钮
+│   └── node-container/ # 节点容器及其私有的条件、操作下拉组件
 ├── icons/              # 节点图标及图标解析工具
+├── node-menu/          # 基础组件、工具和智能体节点菜单及其菜单配置
 ├── nodes/              # 已迁入节点的注册文件和 Vue 实现
 ├── plugins/            # 仅供画布使用的 LogicFlow 插件
 ├── index.vue           # 画布入口组件 WorkflowCanvas
 ├── style.scss          # 画布内 LogicFlow 全局样式覆盖
 ├── types.ts            # 画布协议类型和枚举
-└── README.md           # 本文档
+└── WORKFLOW_README.md  # 本文档
 ```
 
 ### `core/`
 
-`core` 是配置完成后应保持稳定的基础层。`NodeContainer.vue` 和 `NodeCascader.vue` 是节点的
+`core` 是配置完成后应保持稳定的基础层。`node-container/index.vue` 和 `NodeCascader.vue` 是节点的
 通用结构与交互能力，属于核心代码；连线、快捷键、公共校验、Teleport 和节点公共工具也放在
-这里。只有某项行为是全部或大多数节点都必须遵守的画布规则时，才修改 `core`。新增普通节点
-不应要求调整核心层。
+这里。`node-container/` 内的条件和操作下拉组件是节点容器的私有实现，不作为画布可复用组件
+单独引用；`edge/` 集中维护边的 LogicFlow 注册配置、模型、视图和删除按钮，普通边由画布入口
+显式注册，未接入的边类型不得仅因目录调整而改变注册状态。只有某项行为是全部或大多数节点
+都必须遵守的画布规则时，才修改 `core`。新增普通节点不应要求调整核心层。
 
 节点内需要跟随画布缩放的浮层应保留 `teleported="false"`。如果浮层可能与后绘制的 SVG 锚点
 重叠，使用 `core/utils.ts` 的 `createAnchorGuard()`，通过唯一 key 同步各浮层的
@@ -49,7 +54,6 @@ src/workflow-canvas/
 `config` 是随业务持续维护的配置层，增加、删除或调整节点时通常会更新：
 
 - `node-data.ts`：节点的静态定义和默认属性，只存放数据。
-- `menu.ts`：不同画布模式下的菜单分组和可选节点。
 - `node-mapping.ts`：节点类型到配置数据的映射、模式匹配和默认节点集合。
 - `constants.ts`：仅供工作流画布使用的稳定常量。
 - `locale.ts`：预留的节点文案本地化配置；国际化接入前不参与当前逻辑。
@@ -57,6 +61,12 @@ src/workflow-canvas/
 配置数据中的函数应提取到对应职责文件，不把行为逻辑混入 `node-data.ts`。当前尚未接入国际化
 的文案直接使用中文，不从 `@/locales` 引入 `t`。
 
+### `node-menu/`
+
+`node-menu` 集中维护画布节点选择菜单。`menu.ts` 定义不同画布模式下的基础组件分组；
+`BasicNodeMenu.vue` 负责基础组件搜索和列表；`ResourceNodeMenu.vue` 负责工具与智能体的文件夹、
+搜索和资源列表；`index.vue` 只负责 Tabs 和事件汇总。不要另建一份基础组件节点集合。
+
 ### `nodes/`
 
 每个已实现节点使用一个目录，目录中包含 LogicFlow 注册文件 `index.ts` 和节点视图
@@ -64,7 +74,7 @@ src/workflow-canvas/
 不要再维护一份逐项导入列表。
 
 节点自身的表单、状态和专属校验留在节点目录；多个节点共享且属于画布基础协议的能力才上移到
-`core`。节点应复用 `core/NodeContainer.vue`，需要选择上游节点字段时复用
+`core`。节点应复用 `core/node-container/index.vue`，需要选择上游节点字段时复用
 `core/NodeCascader.vue`。
 
 ## View 接入约定
@@ -98,18 +108,19 @@ src/workflow-canvas/
 1. 在 `types.ts` 的 `WorkflowNodeType` 中声明稳定的 LogicFlow 节点类型值。
 2. 在 `config/node-data.ts` 中添加节点静态配置。
 3. 在 `config/node-mapping.ts` 中维护节点映射；需要作为初始节点时再加入默认节点集合。
-4. 在 `config/menu.ts` 中加入适用画布模式的菜单分组。
+4. 在 `node-menu/menu.ts` 中加入适用画布模式的菜单分组。
 5. 在 `nodes/<node-type>/` 中实现注册文件和节点视图，并按需增加 `icons/` 图标。
 6. 确认节点能被自动注册、从菜单添加、正确连线、校验并导出图数据。
 
 节点协议值统一使用 `WorkflowNodeType` 等枚举或画布常量，不在判断和映射中重复书写
-`ai-chat-node`、`tool-node` 等字符串字面量。
+`ai-chat-node`、`tool-custom-node` 等字符串字面量。
 
 ## 当前迁移范围
 
-- 已实现并注册：基本信息、开始、AI 对话、意图识别、文本转语音、判断器、指定回复。
+- 已实现并注册：基本信息、开始、AI 对话、意图识别、文本转语音、判断器、指定回复、智能体、
+  自定义工具和工具库工具。
 - `config/node-mapping.ts` 保留节点类型映射，以及基本信息和开始节点的默认数据集合。
-- `NodeMenu` 根据当前工作流模式直接渲染 `config/menu.ts` 返回的菜单分组；页面“添加组件”和节点锚点菜单均支持点击创建与拖拽到画布创建。
+- `NodeMenu` 使用 Element Plus Tabs 组织基础组件、工具和智能体；基础组件直接渲染 `node-menu/menu.ts` 返回的菜单分组，工具和智能体复用 Workspace 文件夹树加载可用资源。页面“添加组件”和节点锚点菜单均支持点击创建与拖拽到画布创建。
 - `ApplicationWorkflowView` 已接入详情加载、默认工作流、手动与自动保存、发布以及未保存退出确认。
 - 调试、发布历史、模板中心、完整国际化、枚举补充和其他尚未迁入的节点组件后续再接入。
 
diff --git a/ui/src/workflow-canvas/component/NodeMenu.vue b/ui/src/workflow-canvas/component/NodeMenu.vue
deleted file mode 100644
index 4fb97b0a64e..00000000000
--- a/ui/src/workflow-canvas/component/NodeMenu.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import { computed, inject, ref } from 'vue'
-
-import { getMenuNodes, type WorkflowMenuNode } from '@/workflow-canvas/config/menu'
-import { iconComponent } from '@/workflow-canvas/icons/utils'
-import { WorkflowMode } from '@/workflow-canvas/types'
-
-defineOptions({ name: 'NodeMenu' })
-
-const emit = defineEmits<{
-  dragstart: [workflowNode: WorkflowMenuNode, event: PointerEvent]
-  select: [workflowNode: WorkflowMenuNode]
-}>()
-
-type WorkflowComponentTab = 'basic' | 'tool' | 'application'
-
-const activeTab = ref<WorkflowComponentTab>('basic')
-const searchKeyword = ref('')
-const workflowMode = inject('workflowMode', WorkflowMode.Application)
-
-const workflowComponentTabs: Array<{ label: string; value: WorkflowComponentTab }> = [
-  { label: '基础组件', value: 'basic' },
-  { label: '工具', value: 'tool' },
-  { label: '智能体', value: 'application' },
-]
-
-const workflowComponentGroups = computed(() => getMenuNodes(workflowMode) ?? [])
-
-const filteredComponentGroups = computed(() => {
-  if (activeTab.value !== 'basic') return []
-
-  const keyword = searchKeyword.value.trim().toLocaleLowerCase()
-  if (!keyword) return workflowComponentGroups.value
-
-  return workflowComponentGroups.value
-    .map((group) => ({ ...group, list: group.list.filter((node) => node.label.toLocaleLowerCase().includes(keyword)) }))
-    .filter((group) => group.list.length > 0)
-})
-
-const handleNodeDragStart = (event: PointerEvent, workflowNode: WorkflowMenuNode) => {
-  if (event.button === 0) emit('dragstart', workflowNode, event)
-}
-</script>
-
-<template>
-  <div class="w-[402px] overflow-hidden rounded-md border border-N300 bg-white shadow-lg" @click.stop @mousedown.stop @mousemove.stop>
-    <div class="flex h-11 items-stretch gap-7 border-b border-N300 px-4" role="tablist">
-      <button
-        v-for="componentTab in workflowComponentTabs"
-        :key="componentTab.value"
-        type="button"
-        role="tab"
-        class="relative font-medium"
-        :class="activeTab === componentTab.value ? 'text-primary' : 'text-N900'"
-        :aria-selected="activeTab === componentTab.value"
-        @click="activeTab = componentTab.value"
-      >
-        {{ componentTab.label }}
-        <span v-if="activeTab === componentTab.value" class="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-primary" />
-      </button>
-    </div>
-
-    <div class="p-3">
-      <MkSearchInput v-model="searchKeyword" placeholder="按名称搜索" />
-
-      <el-scrollbar height="400">
-        <template v-if="filteredComponentGroups.length">
-          <template v-for="group in filteredComponentGroups" :key="group.label">
-            <p class="mb-3 mt-3 text-N600">{{ group.label }}</p>
-            <div class="grid grid-cols-2 gap-3">
-              <button
-                v-for="workflowNode in group.list"
-                :key="workflowNode.type"
-                type="button"
-                class="flex h-10 cursor-grab items-center gap-3 rounded-md border border-N300 px-3 text-left text-N900 hover:border-primary hover:text-primary active:cursor-grabbing"
-                @click="emit('select', workflowNode)"
-                @pointerdown="handleNodeDragStart($event, workflowNode)"
-              >
-                <component :is="iconComponent(`${workflowNode.type}-icon`)" class="shrink-0" :size="24" />
-                <span>{{ workflowNode.label }}</span>
-              </button>
-            </div>
-          </template>
-        </template>
-        <MkEmpty v-else :type="searchKeyword ? 'search' : 'default'" :image-size="72" />
-      </el-scrollbar>
-    </div>
-  </div>
-</template>
diff --git a/ui/src/workflow-canvas/core/DeleteEdgeButton.vue b/ui/src/workflow-canvas/core/edge/DeleteEdgeButton.vue
similarity index 95%
rename from ui/src/workflow-canvas/core/DeleteEdgeButton.vue
rename to ui/src/workflow-canvas/core/edge/DeleteEdgeButton.vue
index 968a383eb17..a1dc2817674 100644
--- a/ui/src/workflow-canvas/core/DeleteEdgeButton.vue
+++ b/ui/src/workflow-canvas/core/edge/DeleteEdgeButton.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { BaseEdgeModel } from '@logicflow/core'
 import { inject } from 'vue'
+
+defineOptions({ name: 'DeleteEdgeButton' })
+
 const getModel = inject('getModel') as () => BaseEdgeModel
 const model = getModel()
 const deleteEdge = () => {
diff --git a/ui/src/workflow-canvas/core/edge.ts b/ui/src/workflow-canvas/core/edge/index.ts
similarity index 95%
rename from ui/src/workflow-canvas/core/edge.ts
rename to ui/src/workflow-canvas/core/edge/index.ts
index f3a9c6a8992..bace86290f9 100644
--- a/ui/src/workflow-canvas/core/edge.ts
+++ b/ui/src/workflow-canvas/core/edge/index.ts
@@ -1,10 +1,10 @@
 import { BezierEdge, BezierEdgeModel, h } from '@logicflow/core'
-import { connect, disconnect } from './teleport'
+import { connect, disconnect } from '../teleport'
 import DeleteEdgeButton from './DeleteEdgeButton.vue'
 
 const DEFAULT_WIDTH = 24
 const DEFAULT_HEIGHT = 24
-class CustomEdge2 extends BezierEdge {
+class AppEdgeView extends BezierEdge {
   isMounted = false
   root?: HTMLDivElement
   /**
@@ -111,7 +111,7 @@ class CustomEdge2 extends BezierEdge {
   }
 }
 
-class CustomEdgeModel2 extends BezierEdgeModel {
+class AppEdgeModel extends BezierEdgeModel {
   getArrowStyle() {
     const arrowStyle = super.getArrowStyle()
     arrowStyle.offset = 1
@@ -166,4 +166,4 @@ class CustomEdgeModel2 extends BezierEdgeModel {
   }
 }
 
-export default { type: 'app-edge', view: CustomEdge2, model: CustomEdgeModel2 }
+export default { type: 'app-edge', view: AppEdgeView, model: AppEdgeModel }
diff --git a/ui/src/workflow-canvas/core/loop-edge.ts b/ui/src/workflow-canvas/core/edge/loop-edge.ts
similarity index 92%
rename from ui/src/workflow-canvas/core/loop-edge.ts
rename to ui/src/workflow-canvas/core/edge/loop-edge.ts
index e22c9e87439..645b50de387 100644
--- a/ui/src/workflow-canvas/core/loop-edge.ts
+++ b/ui/src/workflow-canvas/core/edge/loop-edge.ts
@@ -1,6 +1,6 @@
 import { BezierEdge, BezierEdgeModel } from '@logicflow/core'
 
-class CustomEdgeModel2 extends BezierEdgeModel {
+class LoopEdgeModel extends BezierEdgeModel {
   getArrowStyle() {
     const arrowStyle = super.getArrowStyle()
     arrowStyle.offset = 0
@@ -55,4 +55,4 @@ class CustomEdgeModel2 extends BezierEdgeModel {
   }
 }
 
-export default { type: 'loop-edge', view: BezierEdge, model: CustomEdgeModel2 }
+export default { type: 'loop-edge', view: BezierEdge, model: LoopEdgeModel }
diff --git a/ui/src/workflow-canvas/component/NodeConditionDropdown.vue b/ui/src/workflow-canvas/core/node-container/NodeConditionDropdown.vue
similarity index 98%
rename from ui/src/workflow-canvas/component/NodeConditionDropdown.vue
rename to ui/src/workflow-canvas/core/node-container/NodeConditionDropdown.vue
index 289808d7f79..a177bafdfcd 100644
--- a/ui/src/workflow-canvas/component/NodeConditionDropdown.vue
+++ b/ui/src/workflow-canvas/core/node-container/NodeConditionDropdown.vue
@@ -12,7 +12,7 @@ const emit = defineEmits<{
   'visible-change': [visible: boolean]
 }>()
 
-type NodeConditionProperties = {
+interface NodeConditionProperties {
   condition?: boolean | 'AND' | 'OR'
   kind?: WorkflowKind
 }
diff --git a/ui/src/workflow-canvas/component/NodeOperateDropdown.vue b/ui/src/workflow-canvas/core/node-container/NodeOperateDropdown.vue
similarity index 99%
rename from ui/src/workflow-canvas/component/NodeOperateDropdown.vue
rename to ui/src/workflow-canvas/core/node-container/NodeOperateDropdown.vue
index 0cc96ceea33..20e19ee996d 100644
--- a/ui/src/workflow-canvas/component/NodeOperateDropdown.vue
+++ b/ui/src/workflow-canvas/core/node-container/NodeOperateDropdown.vue
@@ -18,7 +18,7 @@ interface NodeNameForm {
   title: string
 }
 
-type NodeOperateProperties = {
+interface NodeOperateProperties {
   disabled?: boolean
   kind?: WorkflowKind
   node_data?: { name?: string }
diff --git a/ui/src/workflow-canvas/core/NodeContainer.vue b/ui/src/workflow-canvas/core/node-container/index.vue
similarity index 95%
rename from ui/src/workflow-canvas/core/NodeContainer.vue
rename to ui/src/workflow-canvas/core/node-container/index.vue
index d7a7e8d431b..f3b0f86362e 100644
--- a/ui/src/workflow-canvas/core/NodeContainer.vue
+++ b/ui/src/workflow-canvas/core/node-container/index.vue
@@ -2,15 +2,17 @@
 import type { BaseNodeModel, Model } from '@logicflow/core'
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { cloneDeep, set } from 'lodash'
-import { iconComponent } from '../icons/utils'
+import { iconComponent } from '@/workflow-canvas/icons/utils'
 import { copyText } from '@/utils/clipboard'
 import { WorkflowNodeType, type ShapeItem, type WorkflowNodeField } from '@/workflow-canvas/types'
-import type { WorkflowMenuNode } from '@/workflow-canvas/config/menu'
-import NodeMenu from '@/workflow-canvas/component/NodeMenu.vue'
-import NodeConditionDropdown from '@/workflow-canvas/component/NodeConditionDropdown.vue'
-import NodeOperateDropdown from '@/workflow-canvas/component/NodeOperateDropdown.vue'
+import NodeMenu from '@/workflow-canvas/node-menu/index.vue'
+import type { NodeMenuItem } from '@/workflow-canvas/node-menu/types'
+import NodeConditionDropdown from './NodeConditionDropdown.vue'
+import NodeOperateDropdown from './NodeOperateDropdown.vue'
 import { createAnchorGuard, handleNodeWheel } from '@/workflow-canvas/core/utils'
 
+defineOptions({ name: 'NodeContainer' })
+
 type NodeContainerProperties = {
   config?: { fields?: WorkflowNodeField[]; output_title?: string }
   disabled?: boolean
@@ -83,9 +85,9 @@ const resizeStepContainer = (nodeHeight: number) => {
   }
 }
 
-function clickNodes(item: WorkflowMenuNode) {
+function clickNodes(item: NodeMenuItem) {
   const anchor = anchorData.value
-  if (!anchor) return
+  if (!anchor || !item.type) return
 
   const width = Number(item.properties?.width ?? 214)
   const height = Number(item.height ?? item.properties?.height ?? 0)
@@ -106,7 +108,7 @@ function clickNodes(item: WorkflowMenuNode) {
   closeNodeMenu()
 }
 
-function dragNode(item: WorkflowMenuNode, event: PointerEvent) {
+function dragNode(item: NodeMenuItem, event: PointerEvent) {
   startDragNode?.(item, event)
   nodeMenuDragClosing.value = true
   closeNodeMenu()
diff --git a/ui/src/workflow-canvas/core/shortcut.ts b/ui/src/workflow-canvas/core/shortcut.ts
index b316cfe7631..0cce9d8bd97 100644
--- a/ui/src/workflow-canvas/core/shortcut.ts
+++ b/ui/src/workflow-canvas/core/shortcut.ts
@@ -6,7 +6,7 @@ import { WorkflowMode, WorkflowNodeType } from '@/workflow-canvas/types'
 import { copyText } from '@/utils/clipboard'
 import { randomId } from '@/utils/common'
 import { workflowModelDict } from '@/workflow-canvas/config/node-mapping'
-import { getMenuNodes } from '@/workflow-canvas/config/menu'
+import { getMenuNodes } from '@/workflow-canvas/node-menu/menu'
 let activeCanvasId: string | null = null
 type Point = { x: number; y: number }
 type WorkflowGraphModel = GraphModel & { get_provide: (node: LogicFlow.NodeData | null, graph: GraphModel | null) => { workflowMode: WorkflowMode } }
diff --git a/ui/src/workflow-canvas/index.vue b/ui/src/workflow-canvas/index.vue
index 9178497b276..9d75a8c1e6f 100644
--- a/ui/src/workflow-canvas/index.vue
+++ b/ui/src/workflow-canvas/index.vue
@@ -5,7 +5,7 @@ import LogicFlow, { type GraphModel } from '@logicflow/core'
 import '@logicflow/core/dist/index.css'
 import { SelectionSelect } from '@logicflow/extension'
 import '@logicflow/extension/lib/index.css'
-import AppEdge from '@/workflow-canvas/core/edge'
+import AppEdge from '@/workflow-canvas/core/edge/index'
 import { initDefaultShortcut } from '@/workflow-canvas/core/shortcut'
 import { disconnectAll, getTeleport } from '@/workflow-canvas/core/teleport'
 import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
diff --git a/ui/src/workflow-canvas/node-menu/BasicNodeMenu.vue b/ui/src/workflow-canvas/node-menu/BasicNodeMenu.vue
new file mode 100644
index 00000000000..a12851b436a
--- /dev/null
+++ b/ui/src/workflow-canvas/node-menu/BasicNodeMenu.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue'
+import { getMenuNodes, type WorkflowMenuNode } from '@/workflow-canvas/node-menu/menu'
+import { iconComponent } from '@/workflow-canvas/icons/utils'
+import { WorkflowMode } from '@/workflow-canvas/types'
+
+defineOptions({ name: 'BasicNodeMenu' })
+
+const emit = defineEmits<{
+  dragstart: [workflowNode: WorkflowMenuNode, event: PointerEvent]
+  select: [workflowNode: WorkflowMenuNode]
+}>()
+
+const searchKeyword = ref('')
+const workflowMode = inject('workflowMode', WorkflowMode.Application)
+const workflowComponentGroups = computed(() => getMenuNodes(workflowMode) ?? [])
+
+const filteredComponentGroups = computed(() => {
+  const keyword = searchKeyword.value.trim().toLocaleLowerCase()
+  if (!keyword) return workflowComponentGroups.value
+
+  return workflowComponentGroups.value
+    .map((group) => ({ ...group, list: group.list.filter((node) => node.label.toLocaleLowerCase().includes(keyword)) }))
+    .filter((group) => group.list.length > 0)
+})
+
+function handleNodeDragStart(event: PointerEvent, workflowNode: WorkflowMenuNode) {
+  if (event.button === 0) emit('dragstart', workflowNode, event)
+}
+</script>
+
+<template>
+  <div>
+    <MkSearchInput v-model="searchKeyword" placeholder="按名称搜索" />
+
+    <el-scrollbar height="500">
+      <template v-if="filteredComponentGroups.length">
+        <template v-for="group in filteredComponentGroups" :key="group.label">
+          <p class="mb-3 mt-3 text-N600">{{ group.label }}</p>
+          <div class="grid grid-cols-2 gap-3">
+            <button
+              v-for="workflowNode in group.list"
+              :key="workflowNode.type"
+              type="button"
+              class="flex h-10 cursor-grab items-center gap-3 rounded-md border border-N300 px-3 text-left text-N900 hover:border-primary hover:text-primary active:cursor-grabbing"
+              @click="emit('select', workflowNode)"
+              @pointerdown="handleNodeDragStart($event, workflowNode)"
+            >
+              <component :is="iconComponent(`${workflowNode.type}-icon`)" class="shrink-0" :size="24" />
+              <span>{{ workflowNode.label }}</span>
+            </button>
+          </div>
+        </template>
+      </template>
+      <MkEmpty v-else type="search" />
+    </el-scrollbar>
+  </div>
+</template>
diff --git a/ui/src/workflow-canvas/node-menu/ResourceNodeMenu.vue b/ui/src/workflow-canvas/node-menu/ResourceNodeMenu.vue
new file mode 100644
index 00000000000..0567da7e42f
--- /dev/null
+++ b/ui/src/workflow-canvas/node-menu/ResourceNodeMenu.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { cloneDeep } from 'lodash'
+import ApplicationApi from '@/api/admin/workspace/application/application'
+import SharedApi from '@/api/admin/workspace/shared'
+import ToolApi from '@/api/admin/workspace/tool/tool'
+import { APPLICATION_TYPE, RESOURCE_TYPE, TOOL_SCOPE, TOOL_TYPE } from '@/api/enums'
+import type { ApplicationDetail, ApplicationType, FolderItem, ToolItem, ToolType } from '@/api/types'
+import FolderTree from '@/components/business/folder-tree/index.vue'
+import { FOLDER_ENTRY_ID } from '@/constants'
+import { applicationNode, toolLibNode, toolWorkflowLibNode } from '@/workflow-canvas/config/node-data'
+import type { NodeMenuItem, NodeMenuResourceSource } from './types'
+
+defineOptions({ name: 'ResourceNodeMenu' })
+
+const props = defineProps<{ source: NodeMenuResourceSource }>()
+const emit = defineEmits<{
+  dragstart: [node: NodeMenuItem, event: PointerEvent]
+  select: [node: NodeMenuItem]
+}>()
+
+interface ResourceMenuItem {
+  applicationType?: ApplicationType
+  desc?: string | null
+  icon?: string
+  id: string
+  name: string
+  node: NodeMenuItem
+  toolType?: ToolType
+}
+
+const RESOURCE_PAGE = { currentPage: 1, pageSize: 1_000 }
+const SUPPORTED_TOOL_TYPES: ToolType[] = [TOOL_TYPE.CUSTOM, TOOL_TYPE.WORKFLOW]
+const route = useRoute()
+const currentFolderId = ref('')
+const loading = ref(false)
+const resourceItems = ref<ResourceMenuItem[]>([])
+const searchKeyword = ref('')
+const isToolMenu = computed(() => props.source === RESOURCE_TYPE.TOOL)
+const currentApplicationId = computed(() => {
+  const applicationId = route.params.applicationId
+  return Array.isArray(applicationId) ? applicationId[0] : applicationId
+})
+
+const filteredResourceItems = computed(() => {
+  const keyword = searchKeyword.value.trim().toLocaleLowerCase()
+  if (!keyword) return resourceItems.value
+  return resourceItems.value.filter((resource) => resource.name.toLocaleLowerCase().includes(keyword))
+})
+
+function createToolNode(tool: ToolItem): NodeMenuItem {
+  const node = cloneDeep(tool.tool_type === TOOL_TYPE.WORKFLOW ? toolWorkflowLibNode : toolLibNode) as NodeMenuItem
+  const inputFields = (tool.input_field_list ?? []).map((field) => ({ ...field, value: field.source === 'reference' ? [] : '' }))
+
+  node.properties = {
+    ...node.properties,
+    stepName: tool.name,
+    node_data: { ...cloneDeep(tool), input_field_list: inputFields, tool_lib_id: tool.id },
+  }
+  return node
+}
+
+function createApplicationNode(application: ApplicationDetail): NodeMenuItem {
+  const node = cloneDeep(applicationNode) as NodeMenuItem
+  node.properties = {
+    ...node.properties,
+    stepName: application.name,
+    node_data: { application_id: application.id, icon: application.icon, name: application.name },
+  }
+  return node
+}
+
+function loadTools(folder: FolderItem) {
+  const requestApi = folder.id === FOLDER_ENTRY_ID.SHARED ? SharedApi : ToolApi
+  const folderQuery = folder.id === FOLDER_ENTRY_ID.SHARED ? {} : { folder_id: folder.id }
+
+  return requestApi.getToolPage(RESOURCE_PAGE, { ...folderQuery, scope: TOOL_SCOPE.WORKSPACE }).then((page) => {
+    resourceItems.value = page.records
+      .filter((tool) => tool.is_active && SUPPORTED_TOOL_TYPES.includes(tool.tool_type))
+      .map((tool) => ({
+        desc: tool.desc,
+        icon: tool.icon,
+        id: tool.id,
+        name: tool.name,
+        node: createToolNode(tool),
+        toolType: tool.tool_type,
+      }))
+  })
+}
+
+function loadApplications(folder: FolderItem) {
+  return ApplicationApi.getApplicationPage(RESOURCE_PAGE, { folder_id: folder.id, publish_status: 'published' }).then((page) => {
+    resourceItems.value = page.records
+      .filter((application) => application.resource_type === 'application' && application.is_publish && application.id !== currentApplicationId.value)
+      .map((application) => ({
+        applicationType: application.type,
+        desc: application.desc,
+        icon: application.icon,
+        id: application.id,
+        name: application.name,
+        node: createApplicationNode(application),
+      }))
+  })
+}
+
+function handleFolderChange(folder?: FolderItem) {
+  if (!folder) {
+    resourceItems.value = []
+    return
+  }
+
+  loading.value = true
+  const request = isToolMenu.value ? loadTools(folder) : loadApplications(folder)
+  return request.finally(() => {
+    loading.value = false
+  })
+}
+
+function handleNodeDragStart(event: PointerEvent, node: NodeMenuItem) {
+  if (event.button === 0) emit('dragstart', node, event)
+}
+</script>
+
+<template>
+  <div class="flex h-[450px] min-h-0">
+    <aside class="flex w-60 shrink-0 border-r pt-3">
+      <FolderTree
+        v-model="currentFolderId"
+        :can-edit="false"
+        :show-shared="isToolMenu"
+        :source="source"
+        @loaded="handleFolderChange"
+        @select="handleFolderChange"
+      />
+    </aside>
+
+    <section v-loading="loading" class="flex min-w-0 flex-1 flex-col">
+      <div class="shrink-0 p-3">
+        <MkSearchInput v-model="searchKeyword" placeholder="按名称搜索" />
+      </div>
+
+      <el-scrollbar class="min-h-0 flex-1">
+        <div v-if="filteredResourceItems.length" class="grid grid-cols-2 gap-3 px-3 pb-3">
+          <el-popover
+            v-for="resource in filteredResourceItems"
+            :key="resource.id"
+            placement="right"
+            :width="280"
+            :show-after="500"
+            :persistent="false"
+          >
+            <template #reference>
+              <button
+                type="button"
+                class="flex h-10 min-w-0 cursor-grab items-center gap-2 rounded-md border border-N300 px-3 text-left text-N900 hover:border-primary hover:text-primary active:cursor-grabbing"
+                @click="emit('select', resource.node)"
+                @pointerdown="handleNodeDragStart($event, resource.node)"
+              >
+                <ToolIcon v-if="isToolMenu" :icon="resource.icon" :size="20" :type="resource.toolType" />
+                <ApplicationIcon v-else :icon="resource.icon" :size="20" />
+                <span class="min-w-0 flex-1 truncate" :title="resource.name">{{ resource.name }}</span>
+              </button>
+            </template>
+
+            <div class="flex min-w-0 items-center gap-2">
+              <ToolIcon v-if="isToolMenu" :icon="resource.icon" :size="24" :type="resource.toolType" />
+              <ApplicationIcon v-else :icon="resource.icon" :size="24" />
+              <h6 class="min-w-0 flex-1 break-all">{{ resource.name }}</h6>
+              <el-tag
+                v-if="resource.applicationType"
+                size="small"
+                :type="resource.applicationType === APPLICATION_TYPE.WORK_FLOW ? 'warning' : 'primary'"
+              >
+                {{ resource.applicationType === APPLICATION_TYPE.WORK_FLOW ? '高级智能体' : '简易智能体' }}
+              </el-tag>
+            </div>
+            <p v-if="resource.desc" class="mt-2 text-sm text-N600">{{ resource.desc }}</p>
+          </el-popover>
+        </div>
+        <MkEmpty v-else :type="searchKeyword ? 'search' : 'default'" :image-size="72" />
+      </el-scrollbar>
+    </section>
+  </div>
+</template>
diff --git a/ui/src/workflow-canvas/node-menu/index.vue b/ui/src/workflow-canvas/node-menu/index.vue
new file mode 100644
index 00000000000..0440a40926a
--- /dev/null
+++ b/ui/src/workflow-canvas/node-menu/index.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { RESOURCE_TYPE } from '@/api/enums'
+import BasicNodeMenu from './BasicNodeMenu.vue'
+import ResourceNodeMenu from './ResourceNodeMenu.vue'
+import type { NodeMenuItem, NodeMenuTab } from './types'
+
+defineOptions({ name: 'NodeMenu' })
+
+const emit = defineEmits<{
+  dragstart: [node: NodeMenuItem, event: PointerEvent]
+  select: [node: NodeMenuItem]
+}>()
+
+const activeTab = ref<NodeMenuTab>('basic')
+
+function handleDragStart(node: NodeMenuItem, event: PointerEvent) {
+  emit('dragstart', node, event)
+}
+</script>
+
+<template>
+  <div
+    class="overflow-hidden rounded-xl border bg-white shadow-md p-4 pb-0!"
+    :class="activeTab === 'basic' ? 'w-[402px]' : 'w-[640px]'"
+    @click.stop
+    @mousedown.stop
+    @mousemove.stop
+  >
+    <el-tabs v-model="activeTab" class="small">
+      <el-tab-pane label="基础组件" name="basic">
+        <BasicNodeMenu @dragstart="handleDragStart" @select="emit('select', $event)" />
+      </el-tab-pane>
+      <el-tab-pane label="工具" name="tool" lazy>
+        <ResourceNodeMenu :source="RESOURCE_TYPE.TOOL" @dragstart="handleDragStart" @select="emit('select', $event)" />
+      </el-tab-pane>
+      <el-tab-pane label="智能体" name="application" lazy>
+        <ResourceNodeMenu :source="RESOURCE_TYPE.APPLICATION" @dragstart="handleDragStart" @select="emit('select', $event)" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow-canvas/config/menu.ts b/ui/src/workflow-canvas/node-menu/menu.ts
similarity index 99%
rename from ui/src/workflow-canvas/config/menu.ts
rename to ui/src/workflow-canvas/node-menu/menu.ts
index 6afa0a06ccf..8467c20e7e1 100644
--- a/ui/src/workflow-canvas/config/menu.ts
+++ b/ui/src/workflow-canvas/node-menu/menu.ts
@@ -1,5 +1,5 @@
 import { WorkflowMode, WorkflowNodeType, type ShapeItem } from '@/workflow-canvas/types'
-import * as NodeData from './node-data'
+import * as NodeData from '../config/node-data'
 
 export interface WorkflowMenuNode extends ShapeItem {
   height?: number
diff --git a/ui/src/workflow-canvas/node-menu/types.ts b/ui/src/workflow-canvas/node-menu/types.ts
new file mode 100644
index 00000000000..e947b4759b7
--- /dev/null
+++ b/ui/src/workflow-canvas/node-menu/types.ts
@@ -0,0 +1,6 @@
+import { RESOURCE_TYPE } from '@/api/enums'
+import type { ShapeItem } from '@/workflow-canvas/types'
+
+export type NodeMenuItem = ShapeItem & { height?: number }
+export type NodeMenuResourceSource = typeof RESOURCE_TYPE.APPLICATION | typeof RESOURCE_TYPE.TOOL
+export type NodeMenuTab = 'application' | 'basic' | 'tool'
diff --git a/ui/src/workflow-canvas/nodes/ai-chat-node/index.vue b/ui/src/workflow-canvas/nodes/ai-chat-node/index.vue
index 6a97a680cf2..b05c9dff003 100644
--- a/ui/src/workflow-canvas/nodes/ai-chat-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/ai-chat-node/index.vue
@@ -4,7 +4,7 @@ import { groupBy, set } from 'lodash'
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
 import type { BaseNodeModel } from '@logicflow/core'
 import { useWorkflowStore } from '@/workflow-canvas/store'
 import type { ModelItem } from '@/api/types'
diff --git a/ui/src/workflow-canvas/nodes/application-node/index.ts b/ui/src/workflow-canvas/nodes/application-node/index.ts
new file mode 100644
index 00000000000..e6dc4bd333d
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/application-node/index.ts
@@ -0,0 +1,11 @@
+import ApplicationNode from './index.vue'
+import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowNodeType } from '@/workflow-canvas/types'
+
+class ApplicationNodeView extends WorkflowNodeView {
+  constructor(props: ConstructorParameters<typeof WorkflowNodeView>[0]) {
+    super(props, ApplicationNode)
+  }
+}
+
+export default { type: WorkflowNodeType.Application, model: WorkflowNodeModel, view: ApplicationNodeView }
diff --git a/ui/src/workflow-canvas/nodes/application-node/index.vue b/ui/src/workflow-canvas/nodes/application-node/index.vue
new file mode 100644
index 00000000000..3182abec6be
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/application-node/index.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { computed, inject, onMounted, useTemplateRef } from 'vue'
+import { QuestionFilled } from '@element-plus/icons-vue'
+import { cloneDeep } from 'lodash'
+import type { FormInstance } from 'element-plus'
+import ApplicationApi from '@/api/admin/workspace/application/application'
+import { APPLICATION_TYPE } from '@/api/enums'
+import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
+import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowNodeType } from '@/workflow-canvas/types'
+
+defineOptions({ name: 'WorkflowApplicationNode' })
+
+type FieldLabel = string | { label?: string }
+type UploadField = 'audio' | 'document' | 'image' | 'video'
+type UploadListKey = `${UploadField}_list`
+
+interface ApplicationApiInputField {
+  is_required: boolean
+  label?: FieldLabel
+  value: string[]
+  variable: FieldLabel
+}
+
+interface ApplicationUserInputField {
+  field: string
+  label: FieldLabel
+  required: boolean
+  value: string[]
+}
+
+interface ApplicationNodeForm {
+  api_input_field_list: ApplicationApiInputField[]
+  application_id?: string
+  audio_list?: string[]
+  document_list?: string[]
+  icon?: string
+  image_list?: string[]
+  is_result: boolean
+  name?: string
+  question_reference_address: string[]
+  user_input_field_list: ApplicationUserInputField[]
+  video_list?: string[]
+}
+
+interface ReferencedApplicationProperties {
+  api_input_field_list?: ApplicationApiInputField[]
+  node_data?: {
+    file_upload_enable?: boolean
+    file_upload_setting?: Partial<Record<UploadField, boolean>>
+  }
+  user_input_field_list?: ApplicationUserInputField[]
+}
+
+const uploadFields: UploadField[] = ['document', 'image', 'audio', 'video']
+const getModel = inject('getModel') as () => WorkflowNodeModel
+const model = getModel()
+
+const formRef = useTemplateRef<FormInstance>('formRef')
+const questionCascaderRef = useTemplateRef<InstanceType<typeof NodeCascader>>('questionCascaderRef')
+
+const applicationNodeData = (model.properties.node_data ?? {}) as Partial<ApplicationNodeForm>
+if (!Array.isArray(applicationNodeData.question_reference_address)) {
+  applicationNodeData.question_reference_address = [WorkflowNodeType.Start, 'question']
+}
+if (!Array.isArray(applicationNodeData.api_input_field_list)) applicationNodeData.api_input_field_list = []
+if (!Array.isArray(applicationNodeData.user_input_field_list)) applicationNodeData.user_input_field_list = []
+if (applicationNodeData.is_result === undefined) applicationNodeData.is_result = false
+model.properties.node_data = applicationNodeData as ApplicationNodeForm
+
+const formData = computed<ApplicationNodeForm>({
+  get: () => model.properties.node_data as ApplicationNodeForm,
+  set: (value) => (model.properties.node_data = value),
+})
+
+function formatFieldLabel(label: FieldLabel) {
+  return typeof label === 'object' && label !== null ? (label.label ?? '') : label
+}
+
+function validate() {
+  return Promise.all([questionCascaderRef.value?.validate(), formRef.value?.validate()]).catch((error) =>
+    Promise.reject({ node: model, errMessage: error }),
+  )
+}
+
+function syncUploadField(field: UploadField, enabled: boolean) {
+  const listKey: UploadListKey = `${field}_list`
+  if (enabled) {
+    if (!Array.isArray(formData.value[listKey])) formData.value[listKey] = []
+    return
+  }
+  delete formData.value[listKey]
+}
+
+function mergeApiInputFields(fields: ApplicationApiInputField[] = []) {
+  const previousFields = cloneDeep(formData.value.api_input_field_list)
+  formData.value.api_input_field_list = fields.map((field) => {
+    const previousField = previousFields.find((item) => JSON.stringify(item.variable) === JSON.stringify(field.variable))
+    return {
+      ...field,
+      label: formatFieldLabel(field.label ?? field.variable),
+      value: previousField?.value ?? field.value ?? [],
+    }
+  })
+}
+
+function mergeUserInputFields(fields: ApplicationUserInputField[] = []) {
+  const previousFields = cloneDeep(formData.value.user_input_field_list)
+  formData.value.user_input_field_list = fields.map((field) => {
+    const previousField = previousFields.find((item) => item.field === field.field)
+    return {
+      ...field,
+      label: formatFieldLabel(field.label),
+      value: previousField?.value ?? field.value ?? [],
+    }
+  })
+}
+
+function refreshApplicationFields() {
+  const applicationId = formData.value.application_id
+  if (!applicationId) {
+    model.properties.status = 500
+    return
+  }
+
+  ApplicationApi.getApplicationDetail(applicationId)
+    .then((application) => {
+      formData.value.name = application.name
+
+      if (application.type === APPLICATION_TYPE.WORK_FLOW) {
+        const startNode = application.work_flow?.nodes?.[0]
+        if (!startNode) {
+          model.properties.status = 500
+          return
+        }
+
+        const startProperties = (startNode.properties ?? {}) as ReferencedApplicationProperties
+        mergeApiInputFields(cloneDeep(startProperties.api_input_field_list ?? []))
+        mergeUserInputFields(cloneDeep(startProperties.user_input_field_list ?? []))
+
+        const uploadSetting = startProperties.node_data?.file_upload_setting ?? {}
+        uploadFields.forEach((field) => syncUploadField(field, Boolean(startProperties.node_data?.file_upload_enable && uploadSetting[field])))
+      } else {
+        uploadFields.forEach((field) => syncUploadField(field, false))
+      }
+
+      model.properties.status = application.id ? 200 : 500
+    })
+    .catch(() => {
+      model.properties.status = 500
+    })
+}
+
+onMounted(() => {
+  refreshApplicationFields()
+  model.validate = validate
+})
+</script>
+
+<template>
+  <NodeContainer :node-model="model">
+    <h6 class="mb-3">节点设置</h6>
+
+    <el-card shadow="never" class="card-never">
+      <el-form ref="formRef" :model="formData" label-position="top" require-asterisk-position="right" @submit.prevent>
+        <el-form-item label="用户问题" prop="question_reference_address" :rules="{ message: '请选择用户问题', trigger: 'change', required: true }">
+          <NodeCascader
+            ref="questionCascaderRef"
+            v-model="formData.question_reference_address"
+            :node-model="model"
+            class="w-full"
+            placeholder="请选择用户问题"
+          />
+        </el-form-item>
+
+        <el-form-item v-if="formData.document_list !== undefined" label="选择文档" prop="document_list">
+          <NodeCascader v-model="formData.document_list" :node-model="model" class="w-full" placeholder="请选择文档" />
+        </el-form-item>
+
+        <el-form-item v-if="formData.image_list !== undefined" label="选择图片" prop="image_list">
+          <NodeCascader v-model="formData.image_list" :node-model="model" class="w-full" placeholder="请选择图片" />
+        </el-form-item>
+
+        <el-form-item v-if="formData.audio_list !== undefined" label="选择音频" prop="audio_list">
+          <NodeCascader v-model="formData.audio_list" :node-model="model" class="w-full" placeholder="请选择音频" />
+        </el-form-item>
+
+        <el-form-item v-if="formData.video_list !== undefined" label="选择视频" prop="video_list">
+          <NodeCascader v-model="formData.video_list" :node-model="model" class="w-full" placeholder="请选择视频" />
+        </el-form-item>
+
+        <el-form-item
+          v-for="(field, index) in formData.api_input_field_list"
+          :key="`api-input-${index}`"
+          :label="formatFieldLabel(field.variable)"
+          :prop="`api_input_field_list.${index}.value`"
+          :rules="{ required: field.is_required, message: `请选择${formatFieldLabel(field.variable)}`, trigger: 'change' }"
+        >
+          <NodeCascader v-model="field.value" :node-model="model" class="w-full" placeholder="请选择参数" />
+        </el-form-item>
+
+        <el-form-item
+          v-for="(field, index) in formData.user_input_field_list"
+          :key="`user-input-${index}`"
+          :label="formatFieldLabel(field.label)"
+          :prop="`user_input_field_list.${index}.value`"
+          :rules="{ required: field.required, message: `请选择${formatFieldLabel(field.label)}`, trigger: 'change' }"
+        >
+          <NodeCascader v-model="field.value" :node-model="model" class="w-full" placeholder="请选择参数" />
+        </el-form-item>
+
+        <el-form-item label="返回内容" @click.prevent>
+          <template #label>
+            <div class="flex items-center gap-1">
+              <span>返回内容</span>
+              <el-tooltip content="开启后，该节点的输出会作为工作流的最终回复内容" effect="dark" placement="right">
+                <MkIcon :icon="QuestionFilled" class="cursor-help text-N600" />
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch v-model="formData.is_result" size="small" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </NodeContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/base-node/index.vue b/ui/src/workflow-canvas/nodes/base-node/index.vue
index ed30f058380..9c37edf21c7 100644
--- a/ui/src/workflow-canvas/nodes/base-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/base-node/index.vue
@@ -3,7 +3,7 @@ import { computed, inject, onMounted, useTemplateRef } from 'vue'
 
 import { set } from 'lodash'
 import type { FormInstance } from 'element-plus'
-import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
 import type { BaseNodeModel } from '@logicflow/core'
 
 defineOptions({ name: 'WorkflowBaseNode' })
diff --git a/ui/src/workflow-canvas/nodes/condition-node/index.vue b/ui/src/workflow-canvas/nodes/condition-node/index.vue
index d9fa7d40c48..e22c72ef395 100644
--- a/ui/src/workflow-canvas/nodes/condition-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/condition-node/index.vue
@@ -93,7 +93,7 @@ import type { FormInstance } from 'element-plus'
 import type { BaseNodeModel } from '@logicflow/core'
 
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
 import { handleNodeWheel } from '@/workflow-canvas/core/utils'
 import { compareList } from '@/workflow-canvas/config/constants'
 import { randomId } from '@/utils/common'
diff --git a/ui/src/workflow-canvas/nodes/form-node/index.vue b/ui/src/workflow-canvas/nodes/form-node/index.vue
index 18410b13a84..13e7508dceb 100644
--- a/ui/src/workflow-canvas/nodes/form-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/form-node/index.vue
@@ -106,7 +106,7 @@ import { set, cloneDeep } from 'lodash'
 import Sortable from 'sortablejs'
 import type { FormInstance } from 'element-plus'
 
-import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
 import { MkDynamicsFormConstructor, dynamicFormTypeOptions, type FormField, type VisibilityFieldOption } from '@/components/mk-dynamics-form'
 import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
 import type { BaseNodeModel } from '@logicflow/core'
diff --git a/ui/src/workflow-canvas/nodes/image-generate-node/index.vue b/ui/src/workflow-canvas/nodes/image-generate-node/index.vue
index 60d4bedf093..6c276864074 100644
--- a/ui/src/workflow-canvas/nodes/image-generate-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/image-generate-node/index.vue
@@ -5,7 +5,7 @@ import { QuestionFilled } from '@element-plus/icons-vue'
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
 import { useWorkflowStore } from '@/workflow-canvas/store'
 import type { BaseNodeModel } from '@logicflow/core'
 import type { ModelItem, ModelProviderItem } from '@/api/types'
diff --git a/ui/src/workflow-canvas/nodes/image-understand-node/index.vue b/ui/src/workflow-canvas/nodes/image-understand-node/index.vue
index cdc294a066c..e5daa48cbd5 100644
--- a/ui/src/workflow-canvas/nodes/image-understand-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/image-understand-node/index.vue
@@ -5,7 +5,7 @@ import { set } from 'lodash'
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
 import { useWorkflowStore } from '@/workflow-canvas/store'
 import type { BaseNodeModel } from '@logicflow/core'
 import type { ModelItem, ModelProviderItem } from '@/api/types'
diff --git a/ui/src/workflow-canvas/nodes/intent-node/index.vue b/ui/src/workflow-canvas/nodes/intent-node/index.vue
index a8c8c221755..3c03c6741bd 100644
--- a/ui/src/workflow-canvas/nodes/intent-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/intent-node/index.vue
@@ -5,7 +5,7 @@ import { cloneDeep, set } from 'lodash'
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
 import { useWorkflowStore } from '@/workflow-canvas/store'
 import type { BaseNodeModel } from '@logicflow/core'
 import type { ModelItem, ModelProviderItem } from '@/api/types'
diff --git a/ui/src/workflow-canvas/nodes/question-node/index.vue b/ui/src/workflow-canvas/nodes/question-node/index.vue
index d82b73bf73e..70f81ee2653 100644
--- a/ui/src/workflow-canvas/nodes/question-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/question-node/index.vue
@@ -5,7 +5,7 @@ import { set } from 'lodash'
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
 import { useWorkflowStore } from '@/workflow-canvas/store'
 import type { BaseNodeModel } from '@logicflow/core'
 import type { ModelItem, ModelProviderItem } from '@/api/types'
diff --git a/ui/src/workflow-canvas/nodes/reply-node/index.vue b/ui/src/workflow-canvas/nodes/reply-node/index.vue
index 00fb30667d4..499ecd8ad59 100644
--- a/ui/src/workflow-canvas/nodes/reply-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/reply-node/index.vue
@@ -5,7 +5,7 @@ import { set } from 'lodash'
 import type { FormInstance } from 'element-plus'
 import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
 import { isLastNode } from '@/workflow-canvas/core/utils'
 import type { BaseNodeModel } from '@logicflow/core'
 
diff --git a/ui/src/workflow-canvas/nodes/speech-to-text-node/index.vue b/ui/src/workflow-canvas/nodes/speech-to-text-node/index.vue
index 82ed9652565..5f54e02c5cd 100644
--- a/ui/src/workflow-canvas/nodes/speech-to-text-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/speech-to-text-node/index.vue
@@ -4,7 +4,7 @@ import { set } from 'lodash'
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
 import { useWorkflowStore } from '@/workflow-canvas/store'
 import type { BaseNodeModel } from '@logicflow/core'
 import type { ModelItem, ModelProviderItem } from '@/api/types'
diff --git a/ui/src/workflow-canvas/nodes/start-node/index.vue b/ui/src/workflow-canvas/nodes/start-node/index.vue
index 47e856a7eb1..c7a29bcc1b4 100644
--- a/ui/src/workflow-canvas/nodes/start-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/start-node/index.vue
@@ -4,7 +4,7 @@ import { computed, inject, onBeforeUnmount, onMounted } from 'vue'
 import { CopyDocument } from '@element-plus/icons-vue'
 import { cloneDeep, set } from 'lodash'
 import type { WorkflowNodeField, WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
-import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 import { copyText } from '@/utils/clipboard'
 import type { BaseEdgeModel, BaseNodeModel, GraphModel } from '@logicflow/core'
diff --git a/ui/src/workflow-canvas/nodes/text-to-speech-node/index.vue b/ui/src/workflow-canvas/nodes/text-to-speech-node/index.vue
index 34f91b98eeb..981dd9898c6 100644
--- a/ui/src/workflow-canvas/nodes/text-to-speech-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/text-to-speech-node/index.vue
@@ -4,7 +4,7 @@ import { set } from 'lodash'
 import type { FormInstance } from 'element-plus'
 import ModelSelect from '@/components/business/model-select/index.vue'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
-import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
 import { useWorkflowStore } from '@/workflow-canvas/store'
 import type { BaseNodeModel } from '@logicflow/core'
 import type { ModelItem, ModelProviderItem } from '@/api/types'
diff --git a/ui/src/workflow-canvas/nodes/tool-custom-node/InputFieldDialog.vue b/ui/src/workflow-canvas/nodes/tool-custom-node/InputFieldDialog.vue
new file mode 100644
index 00000000000..161d5d4cded
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-custom-node/InputFieldDialog.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { nextTick, reactive, ref } from 'vue'
+import { cloneDeep } from 'lodash'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ToolInputField, ToolInputFieldType } from '@/api/types'
+
+defineOptions({ name: 'WorkflowToolInputFieldDialog' })
+
+const emit = defineEmits<{ refresh: [field: ToolInputField] }>()
+
+const inputFieldTypes: ToolInputFieldType[] = ['string', 'int', 'float', 'dict', 'array']
+const formRef = ref<FormInstance>()
+const visible = ref(false)
+const editing = ref(false)
+const inputFieldForm = reactive<ToolInputField>({ desc: '', is_required: true, name: '', source: 'reference', type: 'string' })
+const formRules: FormRules<ToolInputField> = {
+  name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
+}
+
+function open(field?: ToolInputField) {
+  editing.value = Boolean(field)
+  if (field) Object.assign(inputFieldForm, cloneDeep(field))
+  visible.value = true
+  nextTick(() => formRef.value?.clearValidate())
+}
+
+function handleSubmit() {
+  formRef.value?.validate((valid) => {
+    if (!valid) return
+    emit('refresh', cloneDeep(inputFieldForm))
+    visible.value = false
+  })
+}
+
+function resetData() {
+  editing.value = false
+  Reflect.deleteProperty(inputFieldForm, 'value')
+  Object.assign(inputFieldForm, { desc: '', is_required: true, name: '', source: 'reference', type: 'string' })
+  formRef.value?.clearValidate()
+}
+
+defineExpose({ open })
+</script>
+
+<template>
+  <MkDialog v-model="visible" :title="editing ? '编辑参数' : '添加参数'" width="500" @closed="resetData">
+    <el-form ref="formRef" :model="inputFieldForm" :rules="formRules" label-position="top" require-asterisk-position="right" @submit.prevent>
+      <el-form-item label="参数名称" prop="name">
+        <el-input
+          v-model="inputFieldForm.name"
+          maxlength="64"
+          placeholder="请输入参数名称"
+          @blur="inputFieldForm.name = inputFieldForm.name.trim()"
+        />
+      </el-form-item>
+      <el-form-item label="数据类型">
+        <el-select v-model="inputFieldForm.type" class="w-full">
+          <el-option v-for="fieldType in inputFieldTypes" :key="fieldType" :label="fieldType" :value="fieldType" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="参数说明">
+        <el-input
+          v-model="inputFieldForm.desc"
+          maxlength="128"
+          placeholder="请输入参数说明"
+          show-word-limit
+          @blur="inputFieldForm.desc = inputFieldForm.desc?.trim()"
+        />
+      </el-form-item>
+      <el-form-item label="来源">
+        <el-select v-model="inputFieldForm.source" class="w-full">
+          <el-option label="引用参数" value="reference" />
+          <el-option label="自定义" value="custom" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否必填" @click.prevent>
+        <el-switch v-model="inputFieldForm.is_required" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button plain @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ editing ? '保存' : '添加' }}</el-button>
+    </template>
+  </MkDialog>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/tool-custom-node/index.ts b/ui/src/workflow-canvas/nodes/tool-custom-node/index.ts
new file mode 100644
index 00000000000..a4c69fc3f74
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-custom-node/index.ts
@@ -0,0 +1,11 @@
+import ToolCustomNode from './index.vue'
+import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowNodeType } from '@/workflow-canvas/types'
+
+class ToolCustomNodeView extends WorkflowNodeView {
+  constructor(props: ConstructorParameters<typeof WorkflowNodeView>[0]) {
+    super(props, ToolCustomNode)
+  }
+}
+
+export default { type: WorkflowNodeType.ToolLibCustom, model: WorkflowNodeModel, view: ToolCustomNodeView }
diff --git a/ui/src/workflow-canvas/nodes/tool-custom-node/index.vue b/ui/src/workflow-canvas/nodes/tool-custom-node/index.vue
new file mode 100644
index 00000000000..62525447514
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-custom-node/index.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, inject, onMounted, ref, useTemplateRef } from 'vue'
+import { QuestionFilled } from '@element-plus/icons-vue'
+import type { FormInstance } from 'element-plus'
+import type { ToolInputField } from '@/api/types'
+import PythonCodeEditor from '@/components/codemirror-editor/python.vue'
+import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
+import { handleNodeWheel, isLastNode } from '@/workflow-canvas/core/utils'
+import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowMode } from '@/workflow-canvas/types'
+import InputFieldDialog from './InputFieldDialog.vue'
+
+defineOptions({ name: 'WorkflowToolCustomNode' })
+
+type ToolNodeInputField =
+  | (Omit<ToolInputField, 'source'> & { source: 'reference'; value: string[] })
+  | (Omit<ToolInputField, 'source'> & { source: 'custom'; value: string })
+
+interface ToolCustomNodeForm {
+  code: string
+  input_field_list: ToolNodeInputField[]
+  is_result: boolean
+}
+
+const getModel = inject('getModel') as () => WorkflowNodeModel
+const workflowMode = inject<WorkflowMode>('workflowMode', WorkflowMode.Application)
+const model = getModel()
+
+const formRef = useTemplateRef<FormInstance>('formRef')
+const inputFieldDialogRef = useTemplateRef<InstanceType<typeof InputFieldDialog>>('inputFieldDialogRef')
+const currentFieldIndex = ref<number>()
+
+const toolCustomNodeData = (model.properties.node_data ?? {}) as Partial<ToolCustomNodeForm>
+const shouldInitializeResult = toolCustomNodeData.is_result === undefined
+if (toolCustomNodeData.code === undefined) toolCustomNodeData.code = ''
+if (!Array.isArray(toolCustomNodeData.input_field_list)) toolCustomNodeData.input_field_list = []
+if (toolCustomNodeData.is_result === undefined) toolCustomNodeData.is_result = false
+model.properties.node_data = toolCustomNodeData as ToolCustomNodeForm
+
+const formData = computed<ToolCustomNodeForm>({
+  get: () => model.properties.node_data as ToolCustomNodeForm,
+  set: (value) => (model.properties.node_data = value),
+})
+
+const showReturnContent = computed(() =>
+  [WorkflowMode.Application, WorkflowMode.ApplicationLoop, WorkflowMode.Tool, WorkflowMode.ToolLoop].includes(workflowMode),
+)
+
+function validate() {
+  return formRef.value?.validate().catch((error) => Promise.reject({ node: model, errMessage: error })) ?? Promise.resolve()
+}
+
+function handleOpenInputField(field?: ToolNodeInputField, index?: number) {
+  currentFieldIndex.value = index
+  inputFieldDialogRef.value?.open(field)
+}
+
+function handleDeleteInputField(index: number) {
+  formData.value.input_field_list.splice(index, 1)
+}
+
+function handleInputFieldRefresh(field: ToolInputField) {
+  const inputField: ToolNodeInputField =
+    field.source === 'reference' ? { ...field, source: 'reference', value: [] } : { ...field, source: 'custom', value: '' }
+
+  if (currentFieldIndex.value === undefined) {
+    formData.value.input_field_list.push(inputField)
+  } else {
+    formData.value.input_field_list.splice(currentFieldIndex.value, 1, inputField)
+  }
+  currentFieldIndex.value = undefined
+}
+
+onMounted(() => {
+  if (shouldInitializeResult) formData.value.is_result = isLastNode(model)
+  model.validate = validate
+})
+</script>
+
+<template>
+  <NodeContainer :node-model="model">
+    <h6 class="mb-3">节点设置</h6>
+
+    <el-form ref="formRef" :model="formData" label-position="top" hide-required-asterisk @submit.prevent>
+      <div class="mb-2 flex-between">
+        <h6>输入参数</h6>
+        <el-button link type="primary" @click="handleOpenInputField()">
+          <MkIcon name="icon_add_outlined" class="mr-1" />
+          添加
+        </el-button>
+      </div>
+
+      <el-card shadow="never" class="card-never mb-4" style="--el-card-padding: 12px">
+        <template v-if="formData.input_field_list.length">
+          <el-form-item
+            v-for="(field, index) in formData.input_field_list"
+            :key="`${field.name}-${index}`"
+            :prop="`input_field_list.${index}.value`"
+            :rules="{
+              required: field.is_required,
+              message: field.source === 'reference' ? '请选择参数' : '请输入参数',
+              trigger: field.source === 'reference' ? 'change' : 'blur',
+            }"
+          >
+            <template #label>
+              <div class="flex w-full items-center justify-between gap-2">
+                <div class="flex min-w-0 items-center gap-1">
+                  <span class="max-w-32 truncate" :title="field.name">{{ field.name }}</span>
+                  <el-tooltip v-if="field.desc" :content="field.desc" effect="dark" placement="right">
+                    <MkIcon :icon="QuestionFilled" class="cursor-help text-N600" />
+                  </el-tooltip>
+                  <span v-if="field.is_required" class="text-danger">*</span>
+                  <el-tag size="small" type="info">{{ field.type }}</el-tag>
+                </div>
+
+                <div class="flex shrink-0 items-center">
+                  <el-button text type="primary" @click.stop="handleOpenInputField(field, index)">
+                    <MkIcon name="icon_edit_outlined" />
+                  </el-button>
+                  <el-button text type="primary" @click="handleDeleteInputField(index)">
+                    <MkIcon name="icon_delete-trash_outlined" />
+                  </el-button>
+                </div>
+              </div>
+            </template>
+
+            <NodeCascader v-if="field.source === 'reference'" v-model="field.value" :node-model="model" class="w-full" placeholder="请选择参数" />
+            <el-input v-else v-model="field.value" placeholder="请输入参数" />
+          </el-form-item>
+        </template>
+        <MkEmpty v-else :image-size="60" />
+      </el-card>
+
+      <h6 class="mb-2">Python 代码</h6>
+      <PythonCodeEditor v-model="formData.code" class="h-32" title="Python 代码" @wheel="handleNodeWheel" />
+
+      <el-form-item v-if="showReturnContent" label="返回内容" class="mt-4" @click.prevent>
+        <template #label>
+          <div class="flex items-center gap-1">
+            <span>返回内容</span>
+            <el-tooltip content="开启后，该节点的输出会作为工作流的最终回复内容" effect="dark" placement="right">
+              <MkIcon :icon="QuestionFilled" class="cursor-help text-N600" />
+            </el-tooltip>
+          </div>
+        </template>
+        <el-switch v-model="formData.is_result" size="small" />
+      </el-form-item>
+    </el-form>
+
+    <InputFieldDialog ref="inputFieldDialogRef" @refresh="handleInputFieldRefresh" />
+  </NodeContainer>
+</template>
diff --git a/ui/src/workflow-canvas/nodes/tool-lib-node/index.ts b/ui/src/workflow-canvas/nodes/tool-lib-node/index.ts
new file mode 100644
index 00000000000..a9daffcdfa6
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-lib-node/index.ts
@@ -0,0 +1,11 @@
+import ToolLibNode from './index.vue'
+import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowNodeType } from '@/workflow-canvas/types'
+
+class ToolLibNodeView extends WorkflowNodeView {
+  constructor(props: ConstructorParameters<typeof WorkflowNodeView>[0]) {
+    super(props, ToolLibNode)
+  }
+}
+
+export default { type: WorkflowNodeType.ToolLib, model: WorkflowNodeModel, view: ToolLibNodeView }
diff --git a/ui/src/workflow-canvas/nodes/tool-lib-node/index.vue b/ui/src/workflow-canvas/nodes/tool-lib-node/index.vue
new file mode 100644
index 00000000000..8ea1419fcb8
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-lib-node/index.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed, inject, onMounted, useTemplateRef } from 'vue'
+import { QuestionFilled } from '@element-plus/icons-vue'
+import { cloneDeep } from 'lodash'
+import type { FormInstance } from 'element-plus'
+import type { ToolInputField } from '@/api/types'
+import ToolApi from '@/api/admin/workspace/tool/tool'
+import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
+import { isLastNode } from '@/workflow-canvas/core/utils'
+import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowMode } from '@/workflow-canvas/types'
+
+defineOptions({ name: 'WorkflowToolLibNode' })
+
+type ToolNodeInputField =
+  | (Omit<ToolInputField, 'source'> & { source: 'reference'; value: string[] })
+  | (Omit<ToolInputField, 'source'> & { source: 'custom'; value: string })
+
+interface ToolLibNodeForm {
+  input_field_list: ToolNodeInputField[]
+  is_result?: boolean
+  name?: string
+  tool_lib_id?: string
+}
+
+const getModel = inject('getModel') as () => WorkflowNodeModel
+const workflowMode = inject<WorkflowMode>('workflowMode', WorkflowMode.Application)
+const model = getModel()
+
+const formRef = useTemplateRef<FormInstance>('formRef')
+
+const toolLibNodeData = (model.properties.node_data ?? {}) as Partial<ToolLibNodeForm>
+const shouldInitializeResult = toolLibNodeData.is_result === undefined
+if (!Array.isArray(toolLibNodeData.input_field_list)) toolLibNodeData.input_field_list = []
+model.properties.node_data = toolLibNodeData as ToolLibNodeForm
+
+const formData = computed<ToolLibNodeForm>({
+  get: () => model.properties.node_data as ToolLibNodeForm,
+  set: (value) => (model.properties.node_data = value),
+})
+
+const showReturnContent = computed(() =>
+  [WorkflowMode.Application, WorkflowMode.ApplicationLoop, WorkflowMode.Tool, WorkflowMode.ToolLoop].includes(workflowMode),
+)
+
+function validate() {
+  return formRef.value?.validate().catch((error) => Promise.reject({ node: model, errMessage: error })) ?? Promise.resolve()
+}
+
+function createInputField(field: ToolInputField, previousFields: ToolNodeInputField[]): ToolNodeInputField {
+  const previousField = previousFields.find((item) => item.name === field.name && item.source === field.source)
+  if (field.source === 'reference') {
+    return {
+      ...field,
+      source: 'reference',
+      value: previousField?.source === 'reference' ? cloneDeep(previousField.value) : [],
+    }
+  }
+  return {
+    ...field,
+    source: 'custom',
+    value: previousField?.source === 'custom' ? previousField.value : '',
+  }
+}
+
+function refreshToolFields() {
+  const toolId = formData.value.tool_lib_id
+  if (!toolId) {
+    model.properties.status = 500
+    return
+  }
+
+  ToolApi.getToolDetail(toolId)
+    .then((tool) => {
+      const previousFields = formData.value.input_field_list
+      formData.value.name = tool.name
+      formData.value.input_field_list = (tool.input_field_list ?? []).map((field) => createInputField(field, previousFields))
+      model.properties.status = tool.is_active ? 200 : 500
+    })
+    .catch(() => {
+      model.properties.status = 500
+    })
+}
+
+onMounted(() => {
+  if (shouldInitializeResult) formData.value.is_result = isLastNode(model)
+  refreshToolFields()
+  model.validate = validate
+})
+</script>
+
+<template>
+  <NodeContainer :node-model="model">
+    <h6 class="mb-3">节点设置</h6>
+    <h6 class="mb-2">输入参数</h6>
+
+    <el-form ref="formRef" :model="formData" label-position="top" hide-required-asterisk @submit.prevent>
+      <el-card shadow="never" class="card-never mb-4" style="--el-card-padding: 12px">
+        <template v-if="formData.input_field_list.length">
+          <el-form-item
+            v-for="(field, index) in formData.input_field_list"
+            :key="`${field.name}-${index}`"
+            :prop="`input_field_list.${index}.value`"
+            :rules="{
+              required: field.is_required,
+              message: field.source === 'reference' ? '请选择参数' : '请输入参数',
+              trigger: field.source === 'reference' ? 'change' : 'blur',
+            }"
+          >
+            <template #label>
+              <div class="flex w-full items-center gap-1">
+                <span class="max-w-40 truncate" :title="field.name">{{ field.name }}</span>
+                <el-tooltip v-if="field.desc" :content="field.desc" effect="dark" placement="right">
+                  <MkIcon :icon="QuestionFilled" class="cursor-help text-N600" />
+                </el-tooltip>
+                <span v-if="field.is_required" class="text-danger">*</span>
+                <el-tag size="small" type="info">{{ field.type }}</el-tag>
+              </div>
+            </template>
+
+            <NodeCascader v-if="field.source === 'reference'" v-model="field.value" :node-model="model" class="w-full" placeholder="请选择参数" />
+            <el-input v-else v-model="field.value" placeholder="请输入参数" />
+          </el-form-item>
+        </template>
+        <MkEmpty v-else :image-size="60" />
+      </el-card>
+
+      <el-form-item v-if="showReturnContent" label="返回内容" @click.prevent>
+        <template #label>
+          <div class="flex items-center gap-1">
+            <span>返回内容</span>
+            <el-tooltip content="开启后，该节点的输出会作为工作流的最终回复内容" effect="dark" placement="right">
+              <MkIcon :icon="QuestionFilled" class="cursor-help text-N600" />
+            </el-tooltip>
+          </div>
+        </template>
+        <el-switch v-model="formData.is_result" size="small" />
+      </el-form-item>
+    </el-form>
+  </NodeContainer>
+</template>
diff --git a/ui/src/workflow-canvas/types.ts b/ui/src/workflow-canvas/types.ts
index 2686d2d86a4..75fdf0ca6d8 100644
--- a/ui/src/workflow-canvas/types.ts
+++ b/ui/src/workflow-canvas/types.ts
@@ -12,7 +12,7 @@ export enum WorkflowNodeType {
   Reply = 'reply-node',
   ToolLib = 'tool-lib-node',
   ToolWorkflowLib = 'tool-workflow-lib-node',
-  ToolLibCustom = 'tool-node',
+  ToolLibCustom = 'tool-custom-node',
   RerankerNode = 'reranker-node',
   Application = 'application-node',
   DocumentExtractNode = 'document-extract-node',