diff --git a/web/app/components/app/app-publisher/features-wrapper.tsx b/web/app/components/app/app-publisher/features-wrapper.tsx
new file mode 100644
index 0000000000..c5065126f9
--- /dev/null
+++ b/web/app/components/app/app-publisher/features-wrapper.tsx
@@ -0,0 +1,26 @@
+import React, { useCallback } from 'react'
+import type { AppPublisherProps } from '@/app/components/app/app-publisher'
+import AppPublisher from '@/app/components/app/app-publisher'
+import { useFeatures } from '@/app/components/base/features/hooks'
+import type { ModelAndParameter } from '@/app/components/app/configuration/debug/types'
+
+type Props = Omit<AppPublisherProps, 'onPublish'> & {
+  onPublish?: (modelAndParameter?: ModelAndParameter, features?: any) => Promise<any> | any
+}
+
+const FeaturesWrappedAppPublisher = (props: Props) => {
+  const features = useFeatures(s => s.features)
+
+  const handlePublish = useCallback((modelAndParameter?: ModelAndParameter) => {
+    return props.onPublish?.(modelAndParameter, features)
+  }, [features, props])
+
+  return (
+    <AppPublisher {...{
+      ...props,
+      onPublish: handlePublish,
+    }}/>
+  )
+}
+
+export default FeaturesWrappedAppPublisher
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index 6237362a3c..2ec0c0b58d 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -19,7 +19,7 @@ import {
 import type { ModelAndParameter } from '@/app/components/app/configuration/debug/types'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
-import AppPublisher from '@/app/components/app/app-publisher'
+import AppPublisher from '@/app/components/app/app-publisher/features-wrapper'
 import type {
   AnnotationReplyConfig,
   DatasetConfigs,
@@ -638,7 +638,7 @@ const Configuration: FC = () => {
     else { return promptEmpty }
   })()
   const contextVarEmpty = mode === AppType.completion && dataSets.length > 0 && !hasSetContextVar
-  const onPublish = async (modelAndParameter?: ModelAndParameter) => {
+  const onPublish = async (modelAndParameter?: ModelAndParameter, features?: FeaturesData) => {
     const modelId = modelAndParameter?.model || modelConfig.model_id
     const promptTemplate = modelConfig.configs.prompt_template
     const promptVariables = modelConfig.configs.prompt_variables
@@ -679,14 +679,19 @@ const Configuration: FC = () => {
       completion_prompt_config: {},
       user_input_form: promptVariablesToUserInputsForm(promptVariables),
       dataset_query_variable: contextVar || '',
-      opening_statement: introduction || '',
-      suggested_questions: suggestedQuestions || [],
-      more_like_this: moreLikeThisConfig,
-      suggested_questions_after_answer: suggestedQuestionsAfterAnswerConfig,
-      speech_to_text: speechToTextConfig,
-      text_to_speech: textToSpeechConfig,
-      retriever_resource: citationConfig,
-      sensitive_word_avoidance: moderationConfig,
+      //  features
+      more_like_this: features?.moreLikeThis as any,
+      opening_statement: features?.opening?.opening_statement || '',
+      suggested_questions: features?.opening?.suggested_questions || [],
+      sensitive_word_avoidance: features?.moderation as any,
+      speech_to_text: features?.speech2text as any,
+      text_to_speech: features?.text2speech as any,
+      // ##TODO## file_upload
+      file_upload: {
+        image: visionConfig,
+      },
+      suggested_questions_after_answer: features?.suggested as any,
+      retriever_resource: features?.citation as any,
       agent_mode: {
         ...modelConfig.agentConfig,
         strategy: isFunctionCall ? AgentStrategy.functionCall : AgentStrategy.react,
@@ -703,9 +708,6 @@ const Configuration: FC = () => {
           datasets: [...postDatasets],
         } as any,
       },
-      file_upload: {
-        image: visionConfig,
-      },
     }
 
     if (isAdvancedMode) {