diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index 0ea0be9bda..6ef58e2775 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -43,7 +43,11 @@ const Page: FC = () => {
       <Workflow
         nodes={initialNodes}
         edges={initialEdges}
-        selectedNodeId='3'// TODO: for debug. 3: llm.
+        /*
+        * TODO: for debug.
+        * 2 directAnswer 3: llm
+        */
+        selectedNodeId='2'
       />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/direct-answer/mock.ts b/web/app/components/workflow/nodes/direct-answer/mock.ts
new file mode 100644
index 0000000000..df2a373c60
--- /dev/null
+++ b/web/app/components/workflow/nodes/direct-answer/mock.ts
@@ -0,0 +1,14 @@
+import type { DirectAnswerNodeType } from './types'
+
+export const mockData: DirectAnswerNodeType = {
+  title: 'Test',
+  desc: 'Test',
+  type: 'Test',
+  variables: [
+    {
+      variable: 'age',
+      value_selector: ['bbb', 'b', 'c'],
+    },
+  ],
+  answer: 'Sorry, I cannot answer this question.',
+}
diff --git a/web/app/components/workflow/nodes/direct-answer/node.tsx b/web/app/components/workflow/nodes/direct-answer/node.tsx
index 8359a92a91..5b53db2a80 100644
--- a/web/app/components/workflow/nodes/direct-answer/node.tsx
+++ b/web/app/components/workflow/nodes/direct-answer/node.tsx
@@ -1,8 +1,21 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { mockData } from './mock'
 
 const Node: FC = () => {
+  const { t } = useTranslation()
+
   return (
-    <div>directAnswer</div>
+    <div className='px-3'>
+      <div className='px-[5px] py-[3px] bg-gray-100 rounded-md'>
+        <div className='leading-4 text-[10px] font-medium text-gray-500 uppercase'>
+          {t('workflow.nodes.directAnswer.answer')}
+        </div>
+        <div className='leading-4 text-xs font-normal text-gray-700'>
+          {mockData.answer}
+        </div>
+      </div>
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/direct-answer/types.ts b/web/app/components/workflow/nodes/direct-answer/types.ts
new file mode 100644
index 0000000000..89bb1a83dc
--- /dev/null
+++ b/web/app/components/workflow/nodes/direct-answer/types.ts
@@ -0,0 +1,6 @@
+import type { CommonNodeType, Variable } from '@/app/components/workflow/types'
+
+export type DirectAnswerNodeType = CommonNodeType & {
+  variables: Variable[]
+  answer: string
+}
diff --git a/web/app/components/workflow/nodes/llm/mock.ts b/web/app/components/workflow/nodes/llm/mock.ts
index a305fb3579..be87ddc92d 100644
--- a/web/app/components/workflow/nodes/llm/mock.ts
+++ b/web/app/components/workflow/nodes/llm/mock.ts
@@ -1,8 +1,8 @@
 import { MemoryRole } from '../../types'
-import type { LLMNodeData } from './types'
+import type { LLMNodeType } from './types'
 import { Resolution } from '@/types/app'
 
-export const mockLLMNodeData: LLMNodeData = {
+export const mockData: LLMNodeType = {
   title: 'Test',
   desc: 'Test',
   type: 'Test',
diff --git a/web/app/components/workflow/nodes/llm/node.tsx b/web/app/components/workflow/nodes/llm/node.tsx
index 053f5d725a..61621687e0 100644
--- a/web/app/components/workflow/nodes/llm/node.tsx
+++ b/web/app/components/workflow/nodes/llm/node.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
-import { mockLLMNodeData } from './mock'
+import { mockData } from './mock'
 import {
   useTextGenerationCurrentProviderAndModelAndModelList,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 
 const Node: FC = () => {
-  const { provider, name: modelId } = mockLLMNodeData.model
+  const { provider, name: modelId } = mockData.model
   const {
 
     textGenerationModelList,
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 2ccdc5f9c3..7eaadbb449 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import VarList from '../_base/components/variable/var-list'
 import useConfig from './use-config'
-import { mockLLMNodeData } from './mock'
+import { mockData } from './mock'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddButton from '@/app/components/base/button/add-button'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
@@ -23,7 +23,7 @@ const Panel: FC = () => {
     handleVarListChange,
     handleAddVariable,
     toggleContextEnabled,
-  } = useConfig(mockLLMNodeData)
+  } = useConfig(mockData)
   const model = inputs.model
   // const modelMode = inputs.model?.mode
   // const isChatMode = modelMode === 'chat'
diff --git a/web/app/components/workflow/nodes/llm/types.ts b/web/app/components/workflow/nodes/llm/types.ts
index c4c38ba2d6..7fa593fea6 100644
--- a/web/app/components/workflow/nodes/llm/types.ts
+++ b/web/app/components/workflow/nodes/llm/types.ts
@@ -1,10 +1,7 @@
 import type { Resolution } from '@/types/app'
-import type { Memory, ModelConfig, PromptItem, ValueSelector, Variable } from '@/app/components/workflow/types'
+import type { CommonNodeType, Memory, ModelConfig, PromptItem, ValueSelector, Variable } from '@/app/components/workflow/types'
 
-export type LLMNodeData = {
-  title: string
-  desc: string
-  type: string
+export type LLMNodeType = CommonNodeType & {
   model: ModelConfig
   variables: Variable[]
   prompt: PromptItem[] | PromptItem
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index ba99e0e526..95b82a0140 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -23,6 +23,12 @@ export type NodeData = {
 }
 export type Node = ReactFlowNode<NodeData>
 
+export type CommonNodeType = {
+  title: string
+  desc: string
+  type: string
+}
+
 export type ValueSelector = string[] // [nodeId, key | obj key path]
 
 export type Variable = {
diff --git a/web/i18n/lang/workflow.en.ts b/web/i18n/lang/workflow.en.ts
index 80dfc12847..55ccd9272e 100644
--- a/web/i18n/lang/workflow.en.ts
+++ b/web/i18n/lang/workflow.en.ts
@@ -3,6 +3,10 @@ const translation = {
     common: {
       outputVars: 'Output Variables',
     },
+    directAnswer: {
+      answer: 'Answer',
+      inputVars: 'Input Variables',
+    },
     llm: {
       model: 'model',
       variables: 'variables',
diff --git a/web/i18n/lang/workflow.zh.ts b/web/i18n/lang/workflow.zh.ts
index e2a9466687..283b24c5bf 100644
--- a/web/i18n/lang/workflow.zh.ts
+++ b/web/i18n/lang/workflow.zh.ts
@@ -1,11 +1,22 @@
 const translation = {
   nodes: {
+    common: {
+      outputVars: '输出变量',
+    },
+    directAnswer: {
+      answer: '回复',
+      inputVars: '输入变量',
+    },
     llm: {
       model: '模型',
       variables: '变量',
       context: '上下文',
       prompt: '提示词',
       vision: '视觉',
+      outputVars: {
+        output: '生成内容',
+        usage: '模型用量信息',
+      },
     },
   },
 }