diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index ad37e43649..a55cb33563 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -6,8 +6,8 @@ import Workflow from '@/app/components/workflow'
 import { BlockEnum } from '@/app/components/workflow/types'
 const nodes = [
   BlockEnum.Start, BlockEnum.DirectAnswer, BlockEnum.LLM, BlockEnum.KnowledgeRetrieval, BlockEnum.QuestionClassifier,
-  BlockEnum.IfElse, BlockEnum.Code, BlockEnum.TemplateTransform, BlockEnum.HttpRequest,
-  BlockEnum.Tool, BlockEnum.End,
+  BlockEnum.IfElse, BlockEnum.Code, BlockEnum.TemplateTransform, BlockEnum.HttpRequest, BlockEnum.Tool,
+  BlockEnum.VariableAssigner, BlockEnum.End,
 ].map((item, i) => ({
   id: `${i + 1}`,
   type: 'custom',
@@ -43,12 +43,7 @@ const Page: FC = () => {
       <Workflow
         nodes={initialNodes}
         edges={initialEdges}
-        /*
-        * TODO: for debug.
-        * 2 directAnswer 3: llm 5: questionClassifier
-        * 6 if else 7 Code, 8 TemplateTransform 9 http
-        */
-        selectedNodeId='6'
+        selectedNodeId='1'
       />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/constants.ts b/web/app/components/workflow/nodes/constants.ts
index fba0165f13..ec63909c32 100644
--- a/web/app/components/workflow/nodes/constants.ts
+++ b/web/app/components/workflow/nodes/constants.ts
@@ -22,6 +22,8 @@ import HttpNode from './http/node'
 import HttpPanel from './http/panel'
 import ToolNode from './tool/node'
 import ToolPanel from './tool/panel'
+import VariableAssignerNode from './variable-assigner/node'
+import VariableAssignerPanel from './variable-assigner/panel'
 
 export const NodeComponentMap: Record<string, ComponentType> = {
   [BlockEnum.Start]: StartNode,
@@ -35,6 +37,7 @@ export const NodeComponentMap: Record<string, ComponentType> = {
   [BlockEnum.TemplateTransform]: TemplateTransformNode,
   [BlockEnum.HttpRequest]: HttpNode,
   [BlockEnum.Tool]: ToolNode,
+  [BlockEnum.VariableAssigner]: VariableAssignerNode,
 }
 
 export const PanelComponentMap: Record<string, ComponentType> = {
@@ -49,4 +52,5 @@ export const PanelComponentMap: Record<string, ComponentType> = {
   [BlockEnum.TemplateTransform]: TemplateTransformPanel,
   [BlockEnum.HttpRequest]: HttpPanel,
   [BlockEnum.Tool]: ToolPanel,
+  [BlockEnum.VariableAssigner]: VariableAssignerPanel,
 }
diff --git a/web/app/components/workflow/nodes/variable-assigner/mock.ts b/web/app/components/workflow/nodes/variable-assigner/mock.ts
new file mode 100644
index 0000000000..ace6c8800f
--- /dev/null
+++ b/web/app/components/workflow/nodes/variable-assigner/mock.ts
@@ -0,0 +1,12 @@
+import type { VariableAssignerNodeType } from './types'
+
+export const mockData: VariableAssignerNodeType = {
+  title: 'Test',
+  desc: 'Test',
+  type: 'Test',
+  output_type: 'string',
+  variables: [
+    ['aaa', 'name'],
+    ['bbb', 'b', 'c'],
+  ],
+}
diff --git a/web/app/components/workflow/nodes/variable-assigner/node.tsx b/web/app/components/workflow/nodes/variable-assigner/node.tsx
new file mode 100644
index 0000000000..d0863bd5e2
--- /dev/null
+++ b/web/app/components/workflow/nodes/variable-assigner/node.tsx
@@ -0,0 +1,16 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+// import { mockData } from './mock'
+const i18nPrefix = 'workflow.nodes.variableAssigner'
+
+const Node: FC = () => {
+  const { t } = useTranslation()
+  // const { variables } = mockData
+  return (
+    <div className='px-3'>
+      <div className='leading-4 text-xs font-medium text-gray-500 uppercase'>{t(`${i18nPrefix}.title`)}</div>
+    </div>
+  )
+}
+
+export default Node
diff --git a/web/app/components/workflow/nodes/variable-assigner/panel.tsx b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
new file mode 100644
index 0000000000..6e401a9a4e
--- /dev/null
+++ b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react'
+
+const Panel: FC = () => {
+  return (
+    <div>start panel inputs</div>
+  )
+}
+
+export default Panel
diff --git a/web/app/components/workflow/nodes/variable-assigner/types.ts b/web/app/components/workflow/nodes/variable-assigner/types.ts
new file mode 100644
index 0000000000..db0c8b8e31
--- /dev/null
+++ b/web/app/components/workflow/nodes/variable-assigner/types.ts
@@ -0,0 +1,6 @@
+import type { CommonNodeType, ValueSelector } from '@/app/components/workflow/types'
+
+export type VariableAssignerNodeType = CommonNodeType & {
+  output_type: string
+  variables: ValueSelector[]
+}
diff --git a/web/i18n/lang/workflow.en.ts b/web/i18n/lang/workflow.en.ts
index 6f314a762a..1a15363ec0 100644
--- a/web/i18n/lang/workflow.en.ts
+++ b/web/i18n/lang/workflow.en.ts
@@ -71,6 +71,9 @@ const translation = {
         'not null': 'is not null',
       },
     },
+    variableAssigner: {
+      title: 'Assign variables',
+    },
   },
 }
 
diff --git a/web/i18n/lang/workflow.zh.ts b/web/i18n/lang/workflow.zh.ts
index da4c0d3f68..8f0deafe3a 100644
--- a/web/i18n/lang/workflow.zh.ts
+++ b/web/i18n/lang/workflow.zh.ts
@@ -71,6 +71,9 @@ const translation = {
         'not null': '不为空',
       },
     },
+    variableAssigner: {
+      title: '变量赋值',
+    },
   },
 }