diff --git a/public/pages/workflow_detail/components/edit_workflow_metadata_modal.tsx b/public/pages/workflow_detail/components/edit_workflow_metadata_modal.tsx
index 6dbba509..3d60780b 100644
--- a/public/pages/workflow_detail/components/edit_workflow_metadata_modal.tsx
+++ b/public/pages/workflow_detail/components/edit_workflow_metadata_modal.tsx
@@ -85,7 +85,7 @@ export function EditWorkflowMetadataModal(
         }
       )
       .required('Required') as yup.Schema,
-    desription: yup
+    description: yup
       .string()
       .min(0)
       .max(MAX_DESCRIPTION_LENGTH, 'Too long')
diff --git a/public/pages/workflow_detail/tools/errors/errors.tsx b/public/pages/workflow_detail/tools/errors/errors.tsx
index bb78a355..71d5a561 100644
--- a/public/pages/workflow_detail/tools/errors/errors.tsx
+++ b/public/pages/workflow_detail/tools/errors/errors.tsx
@@ -4,11 +4,15 @@
  */
 
 import React from 'react';
-import { EuiCodeBlock, EuiEmptyPrompt } from '@elastic/eui';
-import { isEmpty } from 'lodash';
+import {
+  EuiCodeBlock,
+  EuiEmptyPrompt,
+  EuiFlexItem,
+  EuiSpacer,
+} from '@elastic/eui';
 
 interface ErrorsProps {
-  errorMessage: string;
+  errorMessages: string[];
 }
 
 /**
@@ -18,12 +22,21 @@ interface ErrorsProps {
 export function Errors(props: ErrorsProps) {
   return (
     <>
-      {isEmpty(props.errorMessage) ? (
+      {props.errorMessages?.length === 0 ? (
         <EuiEmptyPrompt title={<h2>No errors</h2>} titleSize="s" />
       ) : (
-        <EuiCodeBlock fontSize="m" isCopyable={false}>
-          {props.errorMessage}
-        </EuiCodeBlock>
+        <>
+          {props.errorMessages.map((errorMessage, idx) => {
+            return (
+              <EuiFlexItem grow={false} key={idx}>
+                <EuiSpacer size="m" />
+                <EuiCodeBlock fontSize="m" isCopyable={false} paddingSize="s">
+                  {errorMessage}
+                </EuiCodeBlock>
+              </EuiFlexItem>
+            );
+          })}
+        </>
       )}
     </>
   );
diff --git a/public/pages/workflow_detail/tools/query/query.tsx b/public/pages/workflow_detail/tools/query/query.tsx
index e3f03d61..60c9c749 100644
--- a/public/pages/workflow_detail/tools/query/query.tsx
+++ b/public/pages/workflow_detail/tools/query/query.tsx
@@ -29,14 +29,12 @@ import {
 import {
   AppState,
   searchIndex,
-  setOpenSearchError,
   setSearchPipelineErrors,
   useAppDispatch,
 } from '../../../../store';
 import {
   containsEmptyValues,
   containsSameValues,
-  formatSearchPipelineErrors,
   getDataSourceId,
   getPlaceholdersFromQuery,
   getSearchPipelineErrors,
@@ -225,15 +223,6 @@ export function Query(props: QueryProps) {
                                     errors: searchPipelineErrors,
                                   })
                                 );
-                                if (!isEmpty(searchPipelineErrors)) {
-                                  dispatch(
-                                    setOpenSearchError({
-                                      error: `Error running search pipeline. ${formatSearchPipelineErrors(
-                                        searchPipelineErrors
-                                      )}`,
-                                    })
-                                  );
-                                }
                               } else {
                                 setSearchPipelineErrors({ errors: {} });
                               }
diff --git a/public/pages/workflow_detail/tools/tools.tsx b/public/pages/workflow_detail/tools/tools.tsx
index 683d51ae..ea1e4c51 100644
--- a/public/pages/workflow_detail/tools/tools.tsx
+++ b/public/pages/workflow_detail/tools/tools.tsx
@@ -44,35 +44,55 @@ const PANEL_TITLE = 'Inspect flows';
  * The base Tools component for performing ingest and search, viewing resources, and debugging.
  */
 export function Tools(props: ToolsProps) {
-  // error message state
+  // error message states. Error may come from several different sources.
   const { opensearch, workflows } = useSelector((state: AppState) => state);
   const opensearchError = opensearch.errorMessage;
   const workflowsError = workflows.errorMessage;
-  const [curErrorMessage, setCurErrorMessage] = useState<string>('');
+  const {
+    ingestPipeline: ingestPipelineErrors,
+    searchPipeline: searchPipelineErrors,
+  } = useSelector((state: AppState) => state.errors);
+  const [curErrorMessages, setCurErrorMessages] = useState<string[]>([]);
 
-  // auto-navigate to errors tab if a new error has been set as a result of
-  // executing OpenSearch or Flow Framework workflow APIs, or from the workflow state
-  // (note that if provision/deprovision fails, there is no concrete exception returned at the API level -
-  // it is just set in the workflow's error field when fetching workflow state)
+  // Propagate any errors coming from opensearch API calls, including ingest/search pipeline verbose calls.
   useEffect(() => {
-    setCurErrorMessage(opensearchError);
-    if (!isEmpty(opensearchError)) {
-      props.setSelectedTabId(INSPECTOR_TAB_ID.ERRORS);
+    if (
+      !isEmpty(opensearchError) ||
+      !isEmpty(ingestPipelineErrors) ||
+      !isEmpty(searchPipelineErrors)
+    ) {
+      if (!isEmpty(opensearchError)) {
+        setCurErrorMessages([opensearchError]);
+      } else if (!isEmpty(ingestPipelineErrors)) {
+        setCurErrorMessages([
+          'Data not ingested. Errors found with the following ingest processor(s):',
+          ...Object.values(ingestPipelineErrors).map((value) => value.errorMsg),
+        ]);
+      } else if (!isEmpty(searchPipelineErrors)) {
+        setCurErrorMessages([
+          'Errors found with the following search processor(s)',
+          ...Object.values(searchPipelineErrors).map((value) => value.errorMsg),
+        ]);
+      }
+    } else {
+      setCurErrorMessages([]);
     }
-  }, [opensearchError]);
+  }, [opensearchError, ingestPipelineErrors, searchPipelineErrors]);
 
+  // Propagate any errors coming from the workflow, either runtime from API call, or persisted in the indexed workflow itself.
   useEffect(() => {
-    setCurErrorMessage(workflowsError);
-    if (!isEmpty(workflowsError)) {
-      props.setSelectedTabId(INSPECTOR_TAB_ID.ERRORS);
-    }
+    setCurErrorMessages(!isEmpty(workflowsError) ? [workflowsError] : []);
   }, [workflowsError]);
   useEffect(() => {
-    setCurErrorMessage(props.workflow?.error || '');
-    if (!isEmpty(props.workflow?.error)) {
+    setCurErrorMessages(props.workflow?.error ? [props.workflow.error] : []);
+  }, [props.workflow?.error]);
+
+  // auto-navigate to errors tab if new errors have been found
+  useEffect(() => {
+    if (curErrorMessages.length > 0) {
       props.setSelectedTabId(INSPECTOR_TAB_ID.ERRORS);
     }
-  }, [props.workflow?.error]);
+  }, [curErrorMessages]);
 
   // auto-navigate to ingest tab if a populated value has been set, indicating ingest has been ran
   useEffect(() => {
@@ -136,7 +156,7 @@ export function Tools(props: ToolsProps) {
                   />
                 )}
                 {props.selectedTabId === INSPECTOR_TAB_ID.ERRORS && (
-                  <Errors errorMessage={curErrorMessage} />
+                  <Errors errorMessages={curErrorMessages} />
                 )}
                 {props.selectedTabId === INSPECTOR_TAB_ID.RESOURCES && (
                   <Resources workflow={props.workflow} />
diff --git a/public/pages/workflow_detail/workflow_inputs/config_field_list.tsx b/public/pages/workflow_detail/workflow_inputs/config_field_list.tsx
index eae7e97e..4704c5ac 100644
--- a/public/pages/workflow_detail/workflow_inputs/config_field_list.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/config_field_list.tsx
@@ -126,7 +126,6 @@ export function ConfigFieldList(props: ConfigFieldListProps) {
             el = (
               <EuiFlexItem key={idx}>
                 <ModelField
-                  field={field}
                   fieldPath={fieldPath}
                   showMissingInterfaceCallout={false}
                 />
diff --git a/public/pages/workflow_detail/workflow_inputs/index.ts b/public/pages/workflow_detail/workflow_inputs/index.ts
index bf513c09..081d4d34 100644
--- a/public/pages/workflow_detail/workflow_inputs/index.ts
+++ b/public/pages/workflow_detail/workflow_inputs/index.ts
@@ -4,3 +4,4 @@
  */
 
 export * from './workflow_inputs';
+export * from './input_fields';
diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/model_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/model_field.tsx
index 764169cf..1cf101e4 100644
--- a/public/pages/workflow_detail/workflow_inputs/input_fields/model_field.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/input_fields/model_field.tsx
@@ -21,18 +21,21 @@ import {
   MODEL_STATE,
   WorkflowFormValues,
   ModelFormValue,
-  IConfigField,
   ML_CHOOSE_MODEL_LINK,
   ML_REMOTE_MODEL_LINK,
 } from '../../../../../common';
 import { AppState } from '../../../../store';
 
 interface ModelFieldProps {
-  field: IConfigField;
   fieldPath: string; // the full path in string-form to the field (e.g., 'ingest.enrich.processors.text_embedding_processor.inputField')
   hasModelInterface?: boolean;
   onModelChange?: (modelId: string) => void;
   showMissingInterfaceCallout?: boolean;
+  label?: string;
+  helpText?: string;
+  fullWidth?: boolean;
+  showError?: boolean;
+  showInvalid?: boolean;
 }
 
 type ModelItem = ModelFormValue & {
@@ -118,9 +121,14 @@ export function ModelField(props: ModelFieldProps) {
       )}
       <Field name={props.fieldPath}>
         {({ field, form }: FieldProps) => {
+          const isInvalid =
+            (props.showInvalid ?? true) &&
+            getIn(errors, `${field.name}.id`) &&
+            getIn(touched, `${field.name}.id`);
           return (
             <EuiCompressedFormRow
-              label={'Model'}
+              fullWidth={props.fullWidth}
+              label={props.label || 'Model'}
               labelAppend={
                 <EuiText size="xs">
                   <EuiLink href={ML_CHOOSE_MODEL_LINK} target="_blank">
@@ -128,9 +136,13 @@ export function ModelField(props: ModelFieldProps) {
                   </EuiLink>
                 </EuiText>
               }
-              helpText={'The model ID.'}
+              helpText={props.helpText || 'The model ID.'}
+              isInvalid={isInvalid}
+              error={props.showError && getIn(errors, `${field.name}.id`)}
             >
               <EuiCompressedSuperSelect
+                data-testid="selectDeployedModel"
+                fullWidth={props.fullWidth}
                 disabled={isEmpty(deployedModels)}
                 options={deployedModels.map(
                   (option) =>
@@ -165,11 +177,7 @@ export function ModelField(props: ModelFieldProps) {
                     props.onModelChange(option);
                   }
                 }}
-                isInvalid={
-                  getIn(errors, field.name) && getIn(touched, field.name)
-                    ? true
-                    : undefined
-                }
+                isInvalid={isInvalid}
               />
             </EuiCompressedFormRow>
           );
diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/ml_processor_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/ml_processor_inputs.tsx
index b48f41da..c81abe7e 100644
--- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/ml_processor_inputs.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/ml_processor_inputs.tsx
@@ -200,7 +200,6 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
         />
       ) : (
         <ModelField
-          field={modelField}
           fieldPath={modelFieldPath}
           hasModelInterface={modelInterface !== undefined}
           onModelChange={onModelChange}
diff --git a/public/pages/workflow_detail/workflow_inputs/processors_list.tsx b/public/pages/workflow_detail/workflow_inputs/processors_list.tsx
index 6584aa91..2bc0a9da 100644
--- a/public/pages/workflow_detail/workflow_inputs/processors_list.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/processors_list.tsx
@@ -17,7 +17,8 @@ import {
   EuiAccordion,
   EuiSpacer,
   EuiText,
-  EuiIconTip,
+  EuiIcon,
+  EuiCallOut,
 } from '@elastic/eui';
 import { cloneDeep, isEmpty } from 'lodash';
 import { getIn, useFormikContext } from 'formik';
@@ -85,6 +86,11 @@ export function ProcessorsList(props: ProcessorsListProps) {
   const [isPopoverOpen, setPopover] = useState(false);
   const [processors, setProcessors] = useState<IProcessorConfig[]>([]);
 
+  // Accordions do not persist an open/closed state, so we manually persist
+  const [processorOpenState, setProcessorOpenState] = useState<{
+    [processorId: string]: boolean;
+  }>({});
+
   function clearProcessorErrors(): void {
     if (props.context === PROCESSOR_CONTEXT.INGEST) {
       dispatch(setIngestPipelineErrors({ errors: {} }));
@@ -379,31 +385,60 @@ export function ProcessorsList(props: ProcessorsListProps) {
                 `${processorIndex}.errorMsg`,
                 undefined
               );
+        const errorFound =
+          processorFormError !== undefined ||
+          processorRuntimeError !== undefined;
+        const isAddedProcessor =
+          processorAdded && processorIndex === processors.length - 1;
+        const processorOpen =
+          processorOpenState[processor.id] ?? isAddedProcessor;
+        const errorMsg = processorFormError
+          ? 'Form error(s) detected'
+          : 'Runtime error(s) detected';
 
         return (
           <EuiFlexItem key={processorIndex}>
             <EuiPanel paddingSize="s">
               <EuiAccordion
-                initialIsOpen={
-                  processorAdded && processorIndex === processors.length - 1
-                }
+                initialIsOpen={isAddedProcessor}
                 id={`accordion${processor.id}`}
+                onToggle={(isOpen) => {
+                  setProcessorOpenState({
+                    ...processorOpenState,
+                    [processor.id]: isOpen,
+                  });
+                }}
                 buttonContent={
-                  <EuiFlexGroup direction="row">
+                  <EuiFlexGroup direction="column" gutterSize="none">
                     <EuiFlexItem grow={false}>
                       <EuiText>{`${processor.name || 'Processor'}`}</EuiText>
                     </EuiFlexItem>
-                    {(processorFormError !== undefined ||
-                      processorRuntimeError !== undefined) && (
+                    {errorFound && !processorOpen && (
                       <EuiFlexItem grow={false}>
-                        <EuiIconTip
-                          aria-label="Warning"
-                          size="m"
-                          type="alert"
-                          color="danger"
-                          content={processorFormError || processorRuntimeError}
-                          position="right"
-                        />
+                        <EuiFlexGroup
+                          direction="row"
+                          gutterSize="s"
+                          alignItems="flexStart"
+                        >
+                          <EuiFlexItem grow={false}>
+                            <EuiIcon
+                              color="danger"
+                              type={'alert'}
+                              style={{ marginTop: '4px' }}
+                            />
+                          </EuiFlexItem>
+                          <EuiFlexItem grow={false}>
+                            <EuiText
+                              size="s"
+                              color="danger"
+                              style={{
+                                marginTop: '0px',
+                              }}
+                            >
+                              {errorMsg}
+                            </EuiText>
+                          </EuiFlexItem>
+                        </EuiFlexGroup>
                       </EuiFlexItem>
                     )}
                   </EuiFlexGroup>
@@ -421,6 +456,21 @@ export function ProcessorsList(props: ProcessorsListProps) {
               >
                 <EuiSpacer size="s" />
                 <EuiFlexItem style={{ paddingLeft: '28px' }}>
+                  {errorFound && processorOpen && (
+                    <>
+                      <EuiCallOut
+                        size="s"
+                        color="danger"
+                        iconType={'alert'}
+                        title={errorMsg}
+                      >
+                        <EuiText size="s">
+                          {processorFormError || processorRuntimeError}
+                        </EuiText>
+                      </EuiCallOut>
+                      <EuiSpacer size="s" />
+                    </>
+                  )}
                   <ProcessorInputs
                     uiConfig={props.uiConfig}
                     config={processor}
diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
index 474ec8c6..eaf18c0c 100644
--- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -40,7 +40,6 @@ import {
   getWorkflow,
   provisionWorkflow,
   setIngestPipelineErrors,
-  setOpenSearchError,
   simulatePipeline,
   updateWorkflow,
   useAppDispatch,
@@ -57,7 +56,6 @@ import {
   getDataSourceId,
   prepareDocsForSimulate,
   getIngestPipelineErrors,
-  formatIngestPipelineErrors,
 } from '../../../utils';
 import { BooleanField } from './input_fields';
 import '../workspace/workspace-styles.scss';
@@ -81,6 +79,8 @@ interface WorkflowInputsProps {
   setCachedFormikState: (cachedFormikState: CachedFormikState) => void;
 }
 
+const SUCCESS_TOAST_ID = 'success_toast_id';
+
 /**
  * The workflow inputs component containing the multi-step flow to create ingest
  * and search flows for a particular workflow.
@@ -290,6 +290,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
         props.setIsRunningIngest(false);
         setLastIngested(Date.now());
         getCore().notifications.toasts.add({
+          id: SUCCESS_TOAST_ID,
           iconType: 'check',
           color: 'success',
           title: 'Ingest flow updated',
@@ -306,7 +307,10 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                   <EuiFlexItem grow={false}>
                     <EuiSmallButton
                       fill={false}
-                      onClick={() => props.displaySearchPanel()}
+                      onClick={() => {
+                        props.displaySearchPanel();
+                        getCore().notifications.toasts.remove(SUCCESS_TOAST_ID);
+                      }}
                     >
                       Test flow
                     </EuiSmallButton>
@@ -603,14 +607,6 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                 );
                 if (isEmpty(ingestPipelineErrors)) {
                   bulkIngest(ingestDocsObjs);
-                } else {
-                  dispatch(
-                    setOpenSearchError({
-                      error: `Data not ingested. ${formatIngestPipelineErrors(
-                        ingestPipelineErrors
-                      )}`,
-                    })
-                  );
                 }
               })
               .catch((error: any) => {
@@ -912,6 +908,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                       onClick={async () => {
                         if (await validateAndUpdateSearchResources()) {
                           getCore().notifications.toasts.add({
+                            id: SUCCESS_TOAST_ID,
                             iconType: 'check',
                             color: 'success',
                             title: 'Search flow updated',
@@ -931,9 +928,12 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                                     <EuiFlexItem grow={false}>
                                       <EuiSmallButton
                                         fill={false}
-                                        onClick={() =>
-                                          props.displaySearchPanel()
-                                        }
+                                        onClick={() => {
+                                          props.displaySearchPanel();
+                                          getCore().notifications.toasts.remove(
+                                            SUCCESS_TOAST_ID
+                                          );
+                                        }}
                                       >
                                         Test flow
                                       </EuiSmallButton>
diff --git a/public/pages/workflows/new_workflow/quick_configure_inputs.tsx b/public/pages/workflows/new_workflow/quick_configure_inputs.tsx
deleted file mode 100644
index 1c4f521b..00000000
--- a/public/pages/workflows/new_workflow/quick_configure_inputs.tsx
+++ /dev/null
@@ -1,528 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { get, isEmpty } from 'lodash';
-import {
-  EuiCompressedFormRow,
-  EuiText,
-  EuiSpacer,
-  EuiCompressedSuperSelect,
-  EuiSuperSelectOption,
-  EuiAccordion,
-  EuiCompressedFieldText,
-  EuiCompressedFieldNumber,
-  EuiCallOut,
-  EuiLink,
-} from '@elastic/eui';
-import {
-  DEFAULT_IMAGE_FIELD,
-  DEFAULT_LLM_RESPONSE_FIELD,
-  DEFAULT_TEXT_FIELD,
-  DEFAULT_VECTOR_FIELD,
-  ML_CHOOSE_MODEL_LINK,
-  ML_REMOTE_MODEL_LINK,
-  MODEL_STATE,
-  Model,
-  ModelInterface,
-  QuickConfigureFields,
-  WORKFLOW_TYPE,
-} from '../../../../common';
-import { AppState } from '../../../store';
-import { getEmbeddingModelDimensions, parseModelInputs } from '../../../utils';
-
-interface QuickConfigureInputsProps {
-  workflowType?: WORKFLOW_TYPE;
-  setFields(fields: QuickConfigureFields): void;
-}
-
-// Dynamic component to allow optional input configuration fields for different use cases.
-// Hooks back to the parent component with such field values
-export function QuickConfigureInputs(props: QuickConfigureInputsProps) {
-  const { models, connectors } = useSelector((state: AppState) => state.ml);
-
-  // Deployed models state
-  const [deployedModels, setDeployedModels] = useState<Model[]>([]);
-
-  // Selected LLM interface state. Used for exposing a dropdown
-  // of available model inputs to select from.
-  const [selectedLLMInterface, setSelectedLLMInterface] = useState<
-    ModelInterface | undefined
-  >(undefined);
-
-  // Hook to update available deployed models
-  useEffect(() => {
-    if (models) {
-      setDeployedModels(
-        Object.values(models || {}).filter(
-          (model) => model.state === MODEL_STATE.DEPLOYED
-        )
-      );
-    }
-  }, [models]);
-
-  // Local field values state
-  const [fieldValues, setFieldValues] = useState<QuickConfigureFields>({});
-
-  // Advanced config accordion state
-  const [accordionState, setAccordionState] = useState<'open' | 'closed'>(
-    'closed'
-  );
-
-  // on initial load, and when there are any deployed models found, set
-  // defaults for the field values for certain workflow types
-  useEffect(() => {
-    let defaultFieldValues = {} as QuickConfigureFields;
-    switch (props.workflowType) {
-      case WORKFLOW_TYPE.SEMANTIC_SEARCH:
-      case WORKFLOW_TYPE.HYBRID_SEARCH: {
-        defaultFieldValues = {
-          textField: DEFAULT_TEXT_FIELD,
-          vectorField: DEFAULT_VECTOR_FIELD,
-        };
-        break;
-      }
-      case WORKFLOW_TYPE.MULTIMODAL_SEARCH: {
-        defaultFieldValues = {
-          textField: DEFAULT_TEXT_FIELD,
-          vectorField: DEFAULT_VECTOR_FIELD,
-          imageField: DEFAULT_IMAGE_FIELD,
-        };
-        break;
-      }
-      case WORKFLOW_TYPE.RAG: {
-        defaultFieldValues = {
-          textField: DEFAULT_TEXT_FIELD,
-          promptField: '',
-          llmResponseField: DEFAULT_LLM_RESPONSE_FIELD,
-        };
-        break;
-      }
-      case WORKFLOW_TYPE.VECTOR_SEARCH_WITH_RAG: {
-        defaultFieldValues = {
-          textField: DEFAULT_TEXT_FIELD,
-          vectorField: DEFAULT_VECTOR_FIELD,
-          promptField: '',
-          llmResponseField: DEFAULT_LLM_RESPONSE_FIELD,
-        };
-        break;
-      }
-      case WORKFLOW_TYPE.CUSTOM:
-      default:
-        break;
-    }
-    setFieldValues(defaultFieldValues);
-  }, [deployedModels]);
-
-  // Hook to update the parent field values
-  useEffect(() => {
-    props.setFields(fieldValues);
-  }, [fieldValues]);
-
-  // Try to pre-fill the dimensions based on the chosen embedding model
-  // If not found, we display a helper callout, and automatically
-  // open the accordion to guide the user.
-  const [unknownEmbeddingLength, setUnknownEmbeddingLength] = useState<boolean>(
-    false
-  );
-  useEffect(() => {
-    const selectedModel = deployedModels.find(
-      (model) => model.id === fieldValues.embeddingModelId
-    );
-    if (selectedModel?.connectorId !== undefined) {
-      const connector = connectors[selectedModel.connectorId];
-      if (connector !== undefined) {
-        const dimensions = getEmbeddingModelDimensions(connector);
-        if (dimensions === undefined) {
-          setUnknownEmbeddingLength(true);
-          setAccordionState('open');
-        }
-        setUnknownEmbeddingLength(dimensions === undefined);
-        setFieldValues({
-          ...fieldValues,
-          embeddingLength: getEmbeddingModelDimensions(connector),
-        });
-      }
-    }
-  }, [fieldValues.embeddingModelId, deployedModels, connectors]);
-
-  // Set the LLM interface if an LLM is defined
-  useEffect(() => {
-    const selectedModel = deployedModels.find(
-      (model) => model.id === fieldValues.llmId
-    );
-    setSelectedLLMInterface(selectedModel?.interface);
-  }, [fieldValues.llmId, deployedModels, connectors]);
-
-  // If an LLM interface is defined, set a default prompt field, if applicable.
-  useEffect(() => {
-    if (
-      (props.workflowType === WORKFLOW_TYPE.RAG ||
-        props.workflowType === WORKFLOW_TYPE.VECTOR_SEARCH_WITH_RAG) &&
-      selectedLLMInterface !== undefined
-    ) {
-      setFieldValues({
-        ...fieldValues,
-        promptField: get(parseModelInputs(selectedLLMInterface), '0.label'),
-      });
-    }
-  }, [selectedLLMInterface]);
-
-  return (
-    <>
-      {props.workflowType !== WORKFLOW_TYPE.CUSTOM ? (
-        // Always include some model selection. For anything other than the vanilla RAG type,
-        // we will always have a selectable embedding model.
-        <>
-          <EuiSpacer size="m" />
-          {unknownEmbeddingLength && (
-            <>
-              <EuiCallOut
-                size="s"
-                title="No embedding length found. Make sure to manually configure below."
-                color="warning"
-              />
-              <EuiSpacer size="s" />
-            </>
-          )}
-          <EuiCompressedFormRow
-            fullWidth={true}
-            label={
-              props.workflowType === WORKFLOW_TYPE.RAG
-                ? 'Large language model'
-                : 'Embedding model'
-            }
-            labelAppend={
-              // TODO: update to be a popover with more content.
-              <EuiText size="xs">
-                <EuiLink href={ML_CHOOSE_MODEL_LINK} target="_blank">
-                  Learn more
-                </EuiLink>
-              </EuiText>
-            }
-            isInvalid={false}
-            helpText={
-              isEmpty(deployedModels)
-                ? undefined
-                : props.workflowType === WORKFLOW_TYPE.RAG
-                ? 'The large language model to generate user-friendly responses.'
-                : 'The model to generate embeddings.'
-            }
-          >
-            {isEmpty(deployedModels) ? (
-              <EuiCallOut
-                color="primary"
-                size="s"
-                title={
-                  <EuiText size="s">
-                    You have no models registered in your cluster.{' '}
-                    <EuiLink href={ML_REMOTE_MODEL_LINK} target="_blank">
-                      Learn more
-                    </EuiLink>{' '}
-                    about integrating ML models.
-                  </EuiText>
-                }
-              />
-            ) : (
-              <EuiCompressedSuperSelect
-                data-testid="selectDeployedModel"
-                fullWidth={true}
-                options={deployedModels.map(
-                  (option) =>
-                    ({
-                      value: option.id,
-                      inputDisplay: (
-                        <>
-                          <EuiText size="s">{option.name}</EuiText>
-                        </>
-                      ),
-                      dropdownDisplay: (
-                        <>
-                          <EuiText size="s">{option.name}</EuiText>
-                          <EuiText size="xs" color="subdued">
-                            Deployed
-                          </EuiText>
-                          <EuiText size="xs" color="subdued">
-                            {option.algorithm}
-                          </EuiText>
-                        </>
-                      ),
-                      disabled: false,
-                    } as EuiSuperSelectOption<string>)
-                )}
-                valueOfSelected={
-                  props.workflowType === WORKFLOW_TYPE.RAG
-                    ? fieldValues?.llmId
-                    : fieldValues?.embeddingModelId || ''
-                }
-                onChange={(option: string) => {
-                  if (props.workflowType === WORKFLOW_TYPE.RAG) {
-                    setFieldValues({
-                      ...fieldValues,
-                      llmId: option,
-                    });
-                  } else {
-                    setFieldValues({
-                      ...fieldValues,
-                      embeddingModelId: option,
-                    });
-                  }
-                }}
-                isInvalid={false}
-              />
-            )}
-          </EuiCompressedFormRow>
-          <EuiSpacer size="s" />
-          {
-            // For vector search + RAG, include the LLM model selection as well
-            props.workflowType === WORKFLOW_TYPE.VECTOR_SEARCH_WITH_RAG && (
-              <>
-                <EuiCompressedFormRow
-                  fullWidth={true}
-                  label={'Large language model'}
-                  labelAppend={
-                    // TODO: update to be a popover with more content.
-                    <EuiText size="xs">
-                      <EuiLink href={ML_CHOOSE_MODEL_LINK} target="_blank">
-                        Learn more
-                      </EuiLink>
-                    </EuiText>
-                  }
-                  isInvalid={false}
-                  helpText={
-                    isEmpty(deployedModels)
-                      ? undefined
-                      : 'The large language model to generate user-friendly responses.'
-                  }
-                >
-                  {isEmpty(deployedModels) ? (
-                    <EuiCallOut
-                      color="primary"
-                      size="s"
-                      title={
-                        <EuiText size="s">
-                          You have no models registered in your cluster.{' '}
-                          <EuiLink href={ML_REMOTE_MODEL_LINK} target="_blank">
-                            Learn more
-                          </EuiLink>{' '}
-                          about integrating ML models.
-                        </EuiText>
-                      }
-                    />
-                  ) : (
-                    <EuiCompressedSuperSelect
-                      data-testid="selectDeployedModelLLM"
-                      fullWidth={true}
-                      options={deployedModels.map(
-                        (option) =>
-                          ({
-                            value: option.id,
-                            inputDisplay: (
-                              <>
-                                <EuiText size="s">{option.name}</EuiText>
-                              </>
-                            ),
-                            dropdownDisplay: (
-                              <>
-                                <EuiText size="s">{option.name}</EuiText>
-                                <EuiText size="xs" color="subdued">
-                                  Deployed
-                                </EuiText>
-                                <EuiText size="xs" color="subdued">
-                                  {option.algorithm}
-                                </EuiText>
-                              </>
-                            ),
-                            disabled: false,
-                          } as EuiSuperSelectOption<string>)
-                      )}
-                      valueOfSelected={fieldValues?.llmId || ''}
-                      onChange={(option: string) => {
-                        setFieldValues({
-                          ...fieldValues,
-                          llmId: option,
-                        });
-                      }}
-                      isInvalid={false}
-                    />
-                  )}
-                </EuiCompressedFormRow>
-                <EuiSpacer size="s" />
-              </>
-            )
-          }
-          <EuiSpacer size="s" />
-          <EuiAccordion
-            id="optionalConfiguration"
-            buttonContent="Optional configuration"
-            forceState={accordionState}
-            data-testid="optionalConfigurationButton"
-            onToggle={() =>
-              accordionState === 'open'
-                ? setAccordionState('closed')
-                : setAccordionState('open')
-            }
-          >
-            <>
-              <EuiSpacer size="s" />
-              <EuiCompressedFormRow
-                fullWidth={true}
-                label={'Text field'}
-                isInvalid={false}
-                helpText={`The name of the text document field to be ${
-                  props.workflowType === WORKFLOW_TYPE.RAG
-                    ? 'used as context to the large language model (LLM).'
-                    : 'embedded.'
-                }`}
-              >
-                <EuiCompressedFieldText
-                  data-testid="textFieldQuickConfigure"
-                  fullWidth={true}
-                  value={fieldValues?.textField || ''}
-                  onChange={(e) => {
-                    setFieldValues({
-                      ...fieldValues,
-                      textField: e.target.value,
-                    });
-                  }}
-                />
-              </EuiCompressedFormRow>
-              <EuiSpacer size="s" />
-              {props.workflowType === WORKFLOW_TYPE.MULTIMODAL_SEARCH && (
-                <>
-                  <EuiCompressedFormRow
-                    fullWidth={true}
-                    label={'Image field'}
-                    isInvalid={false}
-                    helpText="The name of the document field containing the image binary."
-                  >
-                    <EuiCompressedFieldText
-                      fullWidth={true}
-                      value={fieldValues?.imageField || ''}
-                      onChange={(e) => {
-                        setFieldValues({
-                          ...fieldValues,
-                          imageField: e.target.value,
-                        });
-                      }}
-                    />
-                  </EuiCompressedFormRow>
-                  <EuiSpacer size="s" />
-                </>
-              )}
-              {(props.workflowType === WORKFLOW_TYPE.SEMANTIC_SEARCH ||
-                props.workflowType === WORKFLOW_TYPE.MULTIMODAL_SEARCH ||
-                props.workflowType === WORKFLOW_TYPE.HYBRID_SEARCH ||
-                props.workflowType ===
-                  WORKFLOW_TYPE.VECTOR_SEARCH_WITH_RAG) && (
-                <>
-                  <EuiCompressedFormRow
-                    fullWidth={true}
-                    label={'Vector field'}
-                    isInvalid={false}
-                    helpText="The name of the document field containing the vector embedding."
-                  >
-                    <EuiCompressedFieldText
-                      fullWidth={true}
-                      value={fieldValues?.vectorField || ''}
-                      onChange={(e) => {
-                        setFieldValues({
-                          ...fieldValues,
-                          vectorField: e.target.value,
-                        });
-                      }}
-                    />
-                  </EuiCompressedFormRow>
-                  <EuiSpacer size="s" />
-                  <EuiCompressedFormRow
-                    fullWidth={true}
-                    label={'Embedding length'}
-                    isInvalid={false}
-                    helpText="The length / dimension of the generated vector embeddings. Autofilled values may be inaccurate."
-                  >
-                    <EuiCompressedFieldNumber
-                      fullWidth={true}
-                      value={fieldValues?.embeddingLength || ''}
-                      onChange={(e) => {
-                        setFieldValues({
-                          ...fieldValues,
-                          embeddingLength: Number(e.target.value),
-                        });
-                      }}
-                    />
-                  </EuiCompressedFormRow>
-                </>
-              )}
-              {(props.workflowType === WORKFLOW_TYPE.RAG ||
-                props.workflowType ===
-                  WORKFLOW_TYPE.VECTOR_SEARCH_WITH_RAG) && (
-                <>
-                  <EuiCompressedFormRow
-                    fullWidth={true}
-                    label={'Prompt field'}
-                    isInvalid={false}
-                    helpText={'The model input field representing the prompt.'}
-                  >
-                    <EuiCompressedSuperSelect
-                      data-testid="selectPromptField"
-                      fullWidth={true}
-                      options={parseModelInputs(selectedLLMInterface).map(
-                        (option) =>
-                          ({
-                            value: option.label,
-                            inputDisplay: (
-                              <>
-                                <EuiText size="s">{option.label}</EuiText>
-                              </>
-                            ),
-                            dropdownDisplay: (
-                              <>
-                                <EuiText size="s">{option.label}</EuiText>
-                                <EuiText size="xs" color="subdued">
-                                  {option.type}
-                                </EuiText>
-                              </>
-                            ),
-                            disabled: false,
-                          } as EuiSuperSelectOption<string>)
-                      )}
-                      valueOfSelected={fieldValues?.promptField || ''}
-                      onChange={(option: string) => {
-                        setFieldValues({
-                          ...fieldValues,
-                          promptField: option,
-                        });
-                      }}
-                      isInvalid={false}
-                    />
-                  </EuiCompressedFormRow>
-                  <EuiSpacer size="s" />
-                  <EuiCompressedFormRow
-                    fullWidth={true}
-                    label={'LLM response field'}
-                    isInvalid={false}
-                    helpText="The name of the field containing the large language model (LLM) response."
-                  >
-                    <EuiCompressedFieldText
-                      fullWidth={true}
-                      value={fieldValues?.llmResponseField || ''}
-                      onChange={(e) => {
-                        setFieldValues({
-                          ...fieldValues,
-                          llmResponseField: e.target.value,
-                        });
-                      }}
-                    />
-                  </EuiCompressedFormRow>
-                </>
-              )}
-            </>
-          </EuiAccordion>
-        </>
-      ) : undefined}
-    </>
-  );
-}
diff --git a/public/pages/workflows/new_workflow/quick_configure_modal.tsx b/public/pages/workflows/new_workflow/quick_configure_modal.tsx
index d216b1f7..6f307327 100644
--- a/public/pages/workflows/new_workflow/quick_configure_modal.tsx
+++ b/public/pages/workflows/new_workflow/quick_configure_modal.tsx
@@ -5,6 +5,8 @@
 
 import React, { useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
+import * as yup from 'yup';
+import { Formik, getIn } from 'formik';
 import { isEmpty } from 'lodash';
 import { useSelector } from 'react-redux';
 import { flattie } from 'flattie';
@@ -16,9 +18,12 @@ import {
   EuiModalBody,
   EuiModalFooter,
   EuiSmallButtonEmpty,
-  EuiCompressedFieldText,
-  EuiCompressedFormRow,
-  EuiCompressedTextArea,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiCallOut,
+  EuiSpacer,
+  EuiText,
+  EuiLink,
 } from '@elastic/eui';
 import {
   DEFAULT_PROMPT_RESULTS_FIELD,
@@ -49,76 +54,141 @@ import {
   WORKFLOW_NAME_RESTRICTIONS,
   MAX_DESCRIPTION_LENGTH,
   MapFormValue,
+  MAX_STRING_LENGTH,
+  Model,
+  MODEL_STATE,
+  ML_REMOTE_MODEL_LINK,
 } from '../../../../common';
-import { APP_PATH } from '../../../utils';
+import { APP_PATH, getInitialValue } from '../../../utils';
 import { AppState, createWorkflow, useAppDispatch } from '../../../store';
 import {
   constructUrlWithParams,
   getDataSourceId,
+  getEmbeddingModelDimensions,
   parseModelInputs,
   parseModelOutputs,
 } from '../../../utils/utils';
-import { QuickConfigureInputs } from './quick_configure_inputs';
+import { QuickConfigureOptionalFields } from './quick_configure_optional_fields';
+import { ModelField, TextField } from '../../workflow_detail/workflow_inputs';
 
 interface QuickConfigureModalProps {
   workflow: Workflow;
   onClose(): void;
 }
 
-// Modal to handle workflow creation. Includes a static field to set the workflow name, and
-// an optional set of quick-configure fields, that when populated, help pre-populate
-// some of the detailed workflow configuration.
+// Modal to handle workflow creation. Includes a static field to set the workflow name,
+// any required models, and an optional set of quick-configure fields, that when populated,
+// help pre-populate some of the detailed workflow configuration.
 export function QuickConfigureModal(props: QuickConfigureModalProps) {
   const dispatch = useAppDispatch();
   const dataSourceId = getDataSourceId();
   const history = useHistory();
-  const { models } = useSelector((state: AppState) => state.ml);
+  const { models, connectors } = useSelector((state: AppState) => state.ml);
   const { workflows } = useSelector((state: AppState) => state.workflows);
 
-  // model interface states
-  const [embeddingModelInterface, setEmbeddingModelInterface] = useState<
-    ModelInterface | undefined
-  >(undefined);
-  const [llmInterface, setLLMInterface] = useState<ModelInterface | undefined>(
-    undefined
-  );
-
-  // workflow name state
-  const [workflowName, setWorkflowName] = useState<string>('');
-  const [workflowNameTouched, setWorkflowNameTouched] = useState<boolean>(
-    false
-  );
-  const workflowNameExists = Object.values(workflows || {})
-    .map((workflow) => workflow.name)
-    .includes(workflowName);
-
-  // workflow description state
-  const [workflowDescription, setWorkflowDescription] = useState<string>('');
+  // is creating state
+  const [isCreating, setIsCreating] = useState<boolean>(false);
 
+  // The set of both req'd and optional fields
   const [quickConfigureFields, setQuickConfigureFields] = useState<
     QuickConfigureFields
   >({});
 
-  // is creating state
-  const [isCreating, setIsCreating] = useState<boolean>(false);
-
-  // custom sanitization on workflow name
-  function isInvalidName(name: string): boolean {
-    return (
-      name === '' ||
-      name.length > 100 ||
-      WORKFLOW_NAME_REGEXP.test(name) === false ||
-      workflowNameExists
-    );
-  }
+  // sub-form values/schema. dependent on the workflow type.
+  // certain types require different subsets of models.
+  const [tempErrors, setTempErrors] = useState<boolean>(false);
+  const [formValues, setFormValues] = useState<{}>({});
+  const [formSchemaObj, setFormSchemaObj] = useState<{}>({});
+  useEffect(() => {
+    const workflowType = props.workflow?.ui_metadata?.type;
+    // All workflows require a unique name, and optional description.
+    let tempFormValues = {
+      name: getInitialValue('string'),
+      description: getInitialValue('string'),
+    } as {};
+    let tempFormSchemaObj = {
+      name: yup
+        .string()
+        .test('workflowName', WORKFLOW_NAME_RESTRICTIONS, (name) => {
+          return !(
+            name === undefined ||
+            name === '' ||
+            name.length > 100 ||
+            WORKFLOW_NAME_REGEXP.test(name) === false
+          );
+        })
+        .test(
+          'workflowName',
+          'This workflow name is already in use. Use a different name',
+          (name) => {
+            return !(
+              Object.values(workflows || {})
+                .map((workflow) => workflow.name)
+                .includes(name || '') && name !== props.workflow?.name
+            );
+          }
+        )
+        .required('Required') as yup.Schema,
+      description: yup
+        .string()
+        .min(0)
+        .max(MAX_DESCRIPTION_LENGTH, 'Too long')
+        .optional() as yup.Schema,
+    } as {};
 
-  // custom sanitization on workflow description
-  function isInvalidDescription(description: string): boolean {
-    return description.length > MAX_DESCRIPTION_LENGTH;
-  }
+    // If not custom/blank, we will have more req'd form fields for the users to supply
+    if (workflowType !== WORKFLOW_TYPE.CUSTOM) {
+      // if a RAG workflow, require an LLM
+      if (
+        workflowType === WORKFLOW_TYPE.RAG ||
+        workflowType === WORKFLOW_TYPE.VECTOR_SEARCH_WITH_RAG
+      ) {
+        tempFormValues = {
+          ...tempFormValues,
+          llm: getInitialValue('model'),
+        };
+        tempFormSchemaObj = {
+          ...tempFormSchemaObj,
+          llm: yup.object({
+            id: yup
+              .string()
+              .trim()
+              .min(1, 'Too short')
+              .max(MAX_STRING_LENGTH, 'Too long')
+              .required('Required'),
+          }),
+        };
+      }
+      // all workflows besides custom and vanilla RAG require an embedding model
+      if (workflowType !== WORKFLOW_TYPE.RAG) {
+        tempFormValues = {
+          ...tempFormValues,
+          embeddingModel: getInitialValue('model'),
+        };
+        tempFormSchemaObj = {
+          ...tempFormSchemaObj,
+          embeddingModel: yup.object({
+            id: yup
+              .string()
+              .trim()
+              .min(1, 'Too short')
+              .max(MAX_STRING_LENGTH, 'Too long')
+              .required('Required'),
+          }),
+        };
+      }
+    }
+    setFormValues(tempFormValues);
+    setFormSchemaObj(tempFormSchemaObj);
+  }, [props.workflow?.ui_metadata?.type]);
 
-  // fetching model interface if available. used to prefill some
-  // of the input/output maps
+  // model interface states, used for pre-populating some of the downstream ML processor configs
+  const [embeddingModelInterface, setEmbeddingModelInterface] = useState<
+    ModelInterface | undefined
+  >(undefined);
+  const [llmInterface, setLLMInterface] = useState<ModelInterface | undefined>(
+    undefined
+  );
   useEffect(() => {
     setEmbeddingModelInterface(
       models[quickConfigureFields?.embeddingModelId || '']?.interface
@@ -128,111 +198,236 @@ export function QuickConfigureModal(props: QuickConfigureModalProps) {
     setLLMInterface(models[quickConfigureFields?.llmId || '']?.interface);
   }, [models, quickConfigureFields?.llmId]);
 
+  // Deployed models state
+  const [deployedModels, setDeployedModels] = useState<Model[]>([]);
+  useEffect(() => {
+    if (models) {
+      setDeployedModels(
+        Object.values(models || {}).filter(
+          (model) => model.state === MODEL_STATE.DEPLOYED
+        )
+      );
+    }
+  }, [models]);
+
+  // Try to pre-fill the dimensions if an embedding model is selected
+  const [unknownEmbeddingLength, setUnknownEmbeddingLength] = useState<boolean>(
+    false
+  );
+  useEffect(() => {
+    const selectedModel = deployedModels.find(
+      (model) => model.id === quickConfigureFields?.embeddingModelId
+    );
+    if (selectedModel?.connectorId !== undefined) {
+      const connector = connectors[selectedModel.connectorId];
+      if (connector !== undefined) {
+        const dimensions = getEmbeddingModelDimensions(connector);
+        if (dimensions === undefined) {
+          setUnknownEmbeddingLength(true);
+        }
+        setUnknownEmbeddingLength(dimensions === undefined);
+        setQuickConfigureFields({
+          ...quickConfigureFields,
+          embeddingLength: getEmbeddingModelDimensions(connector),
+        });
+      }
+    }
+  }, [quickConfigureFields?.embeddingModelId, deployedModels, connectors]);
+
   return (
-    <EuiModal onClose={() => props.onClose()} style={{ width: '40vw' }}>
-      <EuiModalHeader>
-        <EuiModalHeaderTitle>
-          <p>{`Quick configure`}</p>
-        </EuiModalHeaderTitle>
-      </EuiModalHeader>
-      <EuiModalBody>
-        <EuiCompressedFormRow
-          fullWidth={true}
-          label={'Name'}
-          error={
-            workflowNameExists
-              ? 'This workflow name is already in use. Use a different name'
-              : WORKFLOW_NAME_RESTRICTIONS
-          }
-          isInvalid={workflowNameTouched && isInvalidName(workflowName)}
-        >
-          <EuiCompressedFieldText
-            fullWidth={true}
-            placeholder={'Enter a name for this workflow'}
-            value={workflowName}
-            onChange={(e) => {
-              setWorkflowNameTouched(true);
-              setWorkflowName(e.target.value?.trim());
-            }}
-            onBlur={() => setWorkflowNameTouched(true)}
-          />
-        </EuiCompressedFormRow>
-        <EuiCompressedFormRow
-          fullWidth={true}
-          label={'Description'}
-          error={'Too long'}
-          isInvalid={isInvalidDescription(workflowDescription)}
-        >
-          <EuiCompressedTextArea
-            fullWidth={true}
-            placeholder="Enter a description for this workflow"
-            value={workflowDescription}
-            onChange={(e) => {
-              setWorkflowDescription(e.target.value);
-            }}
-          />
-        </EuiCompressedFormRow>
-        <QuickConfigureInputs
-          workflowType={props.workflow.ui_metadata?.type}
-          setFields={setQuickConfigureFields}
-        />
-      </EuiModalBody>
-      <EuiModalFooter>
-        <EuiSmallButtonEmpty
-          onClick={() => props.onClose()}
-          data-testid="quickConfigureCancelButton"
-        >
-          Cancel
-        </EuiSmallButtonEmpty>
-        <EuiSmallButton
-          disabled={isInvalidName(workflowName) || isCreating}
-          isLoading={isCreating}
-          onClick={() => {
-            setIsCreating(true);
-            let workflowToCreate = {
-              ...props.workflow,
-              name: workflowName,
-              description: workflowDescription,
-            } as Workflow;
-            if (!isEmpty(quickConfigureFields)) {
-              workflowToCreate = injectQuickConfigureFields(
-                workflowToCreate,
-                quickConfigureFields,
-                embeddingModelInterface,
-                llmInterface
-              );
-            }
-            dispatch(
-              createWorkflow({
-                apiBody: workflowToCreate,
-                dataSourceId,
-              })
-            )
-              .unwrap()
-              .then((result) => {
-                setIsCreating(false);
-                const { workflow } = result;
-                history.replace(
-                  constructUrlWithParams(
-                    APP_PATH.WORKFLOWS,
-                    workflow.id,
-                    dataSourceId
-                  )
-                );
-              })
-              .catch((err: any) => {
-                setIsCreating(false);
-                console.error(err);
-              });
-          }}
-          data-testid="quickConfigureCreateButton"
-          fill={true}
-          color="primary"
-        >
-          Create
-        </EuiSmallButton>
-      </EuiModalFooter>
-    </EuiModal>
+    <Formik
+      enableReinitialize={true}
+      initialValues={formValues}
+      validationSchema={yup.object(formSchemaObj)}
+      onSubmit={(values) => {}}
+      validate={(values) => {}}
+    >
+      {(formikProps) => {
+        // update tempErrors if errors detected
+        useEffect(() => {
+          setTempErrors(!isEmpty(formikProps.errors));
+        }, [formikProps.errors]);
+
+        return (
+          <EuiModal onClose={() => props.onClose()} style={{ width: '40vw' }}>
+            <EuiModalHeader>
+              <EuiModalHeaderTitle>
+                <p>{`Quick configure`}</p>
+              </EuiModalHeaderTitle>
+            </EuiModalHeader>
+            <EuiModalBody>
+              <EuiFlexGroup direction="column" gutterSize="s">
+                <EuiFlexItem>
+                  <TextField
+                    label="Name - required"
+                    fullWidth={true}
+                    fieldPath={`name`}
+                    showError={true}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <TextField
+                    label="Description - optional"
+                    fullWidth={true}
+                    fieldPath={`description`}
+                    showError={true}
+                    placeholder="Provide a description for this workflow."
+                    textArea={true}
+                  />
+                </EuiFlexItem>
+                {props.workflow?.ui_metadata?.type !== WORKFLOW_TYPE.CUSTOM &&
+                  isEmpty(deployedModels) && (
+                    <EuiFlexItem>
+                      <EuiCallOut
+                        color="warning"
+                        iconType={'alert'}
+                        size="s"
+                        title={
+                          <EuiText size="s">
+                            Preset unavailable. You have no models registered in
+                            your cluster.{' '}
+                            <EuiLink
+                              href={ML_REMOTE_MODEL_LINK}
+                              target="_blank"
+                            >
+                              Learn more
+                            </EuiLink>{' '}
+                            about integrating ML models.
+                          </EuiText>
+                        }
+                      />
+                    </EuiFlexItem>
+                  )}
+                {(props.workflow?.ui_metadata?.type === WORKFLOW_TYPE.RAG ||
+                  props.workflow?.ui_metadata?.type ===
+                    WORKFLOW_TYPE.VECTOR_SEARCH_WITH_RAG) &&
+                  !isEmpty(deployedModels) && (
+                    <EuiFlexItem>
+                      <ModelField
+                        fieldPath="llm"
+                        showMissingInterfaceCallout={false}
+                        label="Large language model - required"
+                        helpText="The large language model to generate user-friendly responses."
+                        fullWidth={true}
+                        showError={true}
+                        onModelChange={(modelId) =>
+                          setQuickConfigureFields({
+                            ...quickConfigureFields,
+                            llmId: modelId,
+                          })
+                        }
+                      />
+                    </EuiFlexItem>
+                  )}
+                {props.workflow?.ui_metadata?.type !== WORKFLOW_TYPE.CUSTOM &&
+                  props.workflow?.ui_metadata?.type !== WORKFLOW_TYPE.RAG &&
+                  !isEmpty(deployedModels) && (
+                    <EuiFlexItem>
+                      <>
+                        {unknownEmbeddingLength && (
+                          <>
+                            <EuiCallOut
+                              size="s"
+                              title="No embedding length found. Make sure to manually configure below."
+                              color="warning"
+                            />
+                            <EuiSpacer size="s" />
+                          </>
+                        )}
+                        <ModelField
+                          fieldPath="embeddingModel"
+                          showMissingInterfaceCallout={false}
+                          label="Embedding model - required"
+                          helpText="The model to generate embeddings."
+                          fullWidth={true}
+                          showError={true}
+                          onModelChange={(modelId) =>
+                            setQuickConfigureFields({
+                              ...quickConfigureFields,
+                              embeddingModelId: modelId,
+                            })
+                          }
+                        />
+                      </>
+                    </EuiFlexItem>
+                  )}
+              </EuiFlexGroup>
+              {props.workflow?.ui_metadata?.type !== WORKFLOW_TYPE.CUSTOM && (
+                <>
+                  <EuiSpacer size="m" />
+                  <QuickConfigureOptionalFields
+                    workflowType={props.workflow.ui_metadata?.type}
+                    fields={quickConfigureFields}
+                    setFields={setQuickConfigureFields}
+                  />
+                </>
+              )}
+            </EuiModalBody>
+            <EuiModalFooter>
+              <EuiSmallButtonEmpty
+                onClick={() => props.onClose()}
+                data-testid="quickConfigureCancelButton"
+              >
+                Cancel
+              </EuiSmallButtonEmpty>
+              <EuiSmallButton
+                disabled={tempErrors || isCreating}
+                isLoading={isCreating}
+                onClick={() => {
+                  formikProps.submitForm().then(() => {
+                    formikProps.validateForm().then((resp) => {
+                      if (isEmpty(resp)) {
+                        setIsCreating(true);
+                        let workflowToCreate = {
+                          ...props.workflow,
+                          name: getIn(formikProps.values, 'name'),
+                          description: getIn(formikProps.values, 'description'),
+                        } as Workflow;
+                        if (!isEmpty(quickConfigureFields)) {
+                          workflowToCreate = injectQuickConfigureFields(
+                            workflowToCreate,
+                            quickConfigureFields,
+                            embeddingModelInterface,
+                            llmInterface
+                          );
+                        }
+                        dispatch(
+                          createWorkflow({
+                            apiBody: workflowToCreate,
+                            dataSourceId,
+                          })
+                        )
+                          .unwrap()
+                          .then((result) => {
+                            setIsCreating(false);
+                            const { workflow } = result;
+                            history.replace(
+                              constructUrlWithParams(
+                                APP_PATH.WORKFLOWS,
+                                workflow.id,
+                                dataSourceId
+                              )
+                            );
+                          })
+                          .catch((err: any) => {
+                            setIsCreating(false);
+                            console.error(err);
+                          });
+                      }
+                    });
+                  });
+                }}
+                data-testid="quickConfigureCreateButton"
+                fill={true}
+                color="primary"
+              >
+                Create
+              </EuiSmallButton>
+            </EuiModalFooter>
+          </EuiModal>
+        );
+      }}
+    </Formik>
   );
 }
 
diff --git a/public/pages/workflows/new_workflow/quick_configure_optional_fields.tsx b/public/pages/workflows/new_workflow/quick_configure_optional_fields.tsx
new file mode 100644
index 00000000..54e641c2
--- /dev/null
+++ b/public/pages/workflows/new_workflow/quick_configure_optional_fields.tsx
@@ -0,0 +1,290 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { get } from 'lodash';
+import {
+  EuiCompressedFormRow,
+  EuiText,
+  EuiSpacer,
+  EuiCompressedSuperSelect,
+  EuiSuperSelectOption,
+  EuiAccordion,
+  EuiCompressedFieldText,
+  EuiCompressedFieldNumber,
+} from '@elastic/eui';
+import {
+  DEFAULT_IMAGE_FIELD,
+  DEFAULT_LLM_RESPONSE_FIELD,
+  DEFAULT_TEXT_FIELD,
+  DEFAULT_VECTOR_FIELD,
+  MODEL_STATE,
+  Model,
+  ModelInterface,
+  QuickConfigureFields,
+  WORKFLOW_TYPE,
+} from '../../../../common';
+import { AppState } from '../../../store';
+import { parseModelInputs } from '../../../utils';
+
+interface QuickConfigureOptionalFieldsProps {
+  workflowType?: WORKFLOW_TYPE;
+  fields?: QuickConfigureFields; // the set of static/required fields permanently displayed in the modal. Includes all model info.
+  setFields(fields: QuickConfigureFields): void;
+}
+
+// Dynamic list of optional quick-configuration fields based on the selected use case. Updates/adds
+// to the parent QuickConfigureFields for auto-filling preset configurations.
+export function QuickConfigureOptionalFields(
+  props: QuickConfigureOptionalFieldsProps
+) {
+  const { models, connectors } = useSelector((state: AppState) => state.ml);
+
+  // Deployed models state
+  const [deployedModels, setDeployedModels] = useState<Model[]>([]);
+  useEffect(() => {
+    if (models) {
+      setDeployedModels(
+        Object.values(models || {}).filter(
+          (model) => model.state === MODEL_STATE.DEPLOYED
+        )
+      );
+    }
+  }, [models]);
+
+  // Local field values state
+  const [optionalFieldValues, setOptionalFieldValues] = useState<
+    QuickConfigureFields
+  >({});
+
+  // on initial load, set defaults for the field values for certain workflow types
+  useEffect(() => {
+    let defaultFieldValues = {} as QuickConfigureFields;
+    switch (props.workflowType) {
+      case WORKFLOW_TYPE.SEMANTIC_SEARCH:
+      case WORKFLOW_TYPE.HYBRID_SEARCH: {
+        defaultFieldValues = {
+          textField: DEFAULT_TEXT_FIELD,
+          vectorField: DEFAULT_VECTOR_FIELD,
+        };
+        break;
+      }
+      case WORKFLOW_TYPE.MULTIMODAL_SEARCH: {
+        defaultFieldValues = {
+          textField: DEFAULT_TEXT_FIELD,
+          vectorField: DEFAULT_VECTOR_FIELD,
+          imageField: DEFAULT_IMAGE_FIELD,
+        };
+        break;
+      }
+      case WORKFLOW_TYPE.RAG: {
+        defaultFieldValues = {
+          textField: DEFAULT_TEXT_FIELD,
+          promptField: '',
+          llmResponseField: DEFAULT_LLM_RESPONSE_FIELD,
+        };
+        break;
+      }
+      case WORKFLOW_TYPE.VECTOR_SEARCH_WITH_RAG: {
+        defaultFieldValues = {
+          textField: DEFAULT_TEXT_FIELD,
+          vectorField: DEFAULT_VECTOR_FIELD,
+          promptField: '',
+          llmResponseField: DEFAULT_LLM_RESPONSE_FIELD,
+        };
+        break;
+      }
+      case WORKFLOW_TYPE.CUSTOM:
+      default:
+        break;
+    }
+    setOptionalFieldValues(defaultFieldValues);
+  }, []);
+
+  // Selected LLM interface state. Used for exposing a dropdown
+  // of available model inputs to select from.
+  const [selectedLLMInterface, setSelectedLLMInterface] = useState<
+    ModelInterface | undefined
+  >(undefined);
+  useEffect(() => {
+    if (props.fields?.llmId) {
+      const selectedModel = deployedModels.find(
+        (model) => model.id === props.fields?.llmId
+      );
+      setSelectedLLMInterface(selectedModel?.interface);
+      setOptionalFieldValues({
+        ...optionalFieldValues,
+        promptField: get(parseModelInputs(selectedModel?.interface), '0.label'),
+      });
+    }
+  }, [props.fields?.llmId, deployedModels, connectors]);
+
+  // Override/add any optional fields set here
+  useEffect(() => {
+    props.setFields({ ...props.fields, ...optionalFieldValues });
+  }, [optionalFieldValues]);
+
+  return (
+    <EuiAccordion
+      id="optionalConfiguration"
+      buttonContent="Optional configuration"
+      data-testid="optionalConfigurationButton"
+    >
+      <>
+        <EuiSpacer size="s" />
+        <EuiCompressedFormRow
+          fullWidth={true}
+          label={'Text field'}
+          isInvalid={false}
+          helpText={`The name of the text document field to be ${
+            props.workflowType === WORKFLOW_TYPE.RAG
+              ? 'used as context to the large language model (LLM).'
+              : 'embedded.'
+          }`}
+        >
+          <EuiCompressedFieldText
+            data-testid="textFieldQuickConfigure"
+            fullWidth={true}
+            value={optionalFieldValues?.textField || ''}
+            onChange={(e) => {
+              setOptionalFieldValues({
+                ...optionalFieldValues,
+                textField: e.target.value,
+              });
+            }}
+          />
+        </EuiCompressedFormRow>
+        <EuiSpacer size="s" />
+        {props.workflowType === WORKFLOW_TYPE.MULTIMODAL_SEARCH && (
+          <>
+            <EuiCompressedFormRow
+              fullWidth={true}
+              label={'Image field'}
+              isInvalid={false}
+              helpText="The name of the document field containing the image binary."
+            >
+              <EuiCompressedFieldText
+                fullWidth={true}
+                value={optionalFieldValues?.imageField || ''}
+                onChange={(e) => {
+                  setOptionalFieldValues({
+                    ...optionalFieldValues,
+                    imageField: e.target.value,
+                  });
+                }}
+              />
+            </EuiCompressedFormRow>
+            <EuiSpacer size="s" />
+          </>
+        )}
+        {(props.workflowType === WORKFLOW_TYPE.SEMANTIC_SEARCH ||
+          props.workflowType === WORKFLOW_TYPE.MULTIMODAL_SEARCH ||
+          props.workflowType === WORKFLOW_TYPE.HYBRID_SEARCH ||
+          props.workflowType === WORKFLOW_TYPE.VECTOR_SEARCH_WITH_RAG) && (
+          <>
+            <EuiCompressedFormRow
+              fullWidth={true}
+              label={'Vector field'}
+              isInvalid={false}
+              helpText="The name of the document field containing the vector embedding."
+            >
+              <EuiCompressedFieldText
+                fullWidth={true}
+                value={optionalFieldValues?.vectorField || ''}
+                onChange={(e) => {
+                  setOptionalFieldValues({
+                    ...optionalFieldValues,
+                    vectorField: e.target.value,
+                  });
+                }}
+              />
+            </EuiCompressedFormRow>
+            <EuiSpacer size="s" />
+            <EuiCompressedFormRow
+              fullWidth={true}
+              label={'Embedding length'}
+              isInvalid={false}
+              helpText="The length / dimension of the generated vector embeddings. Autofilled values may be inaccurate."
+            >
+              <EuiCompressedFieldNumber
+                fullWidth={true}
+                value={props.fields?.embeddingLength || ''}
+                onChange={(e) => {
+                  setOptionalFieldValues({
+                    ...optionalFieldValues,
+                    embeddingLength: Number(e.target.value),
+                  });
+                }}
+              />
+            </EuiCompressedFormRow>
+          </>
+        )}
+        {(props.workflowType === WORKFLOW_TYPE.RAG ||
+          props.workflowType === WORKFLOW_TYPE.VECTOR_SEARCH_WITH_RAG) && (
+          <>
+            <EuiCompressedFormRow
+              fullWidth={true}
+              label={'Prompt field'}
+              isInvalid={false}
+              helpText={'The model input field representing the prompt.'}
+            >
+              <EuiCompressedSuperSelect
+                data-testid="selectPromptField"
+                fullWidth={true}
+                options={parseModelInputs(selectedLLMInterface).map(
+                  (option) =>
+                    ({
+                      value: option.label,
+                      inputDisplay: (
+                        <>
+                          <EuiText size="s">{option.label}</EuiText>
+                        </>
+                      ),
+                      dropdownDisplay: (
+                        <>
+                          <EuiText size="s">{option.label}</EuiText>
+                          <EuiText size="xs" color="subdued">
+                            {option.type}
+                          </EuiText>
+                        </>
+                      ),
+                      disabled: false,
+                    } as EuiSuperSelectOption<string>)
+                )}
+                valueOfSelected={optionalFieldValues?.promptField || ''}
+                onChange={(option: string) => {
+                  setOptionalFieldValues({
+                    ...optionalFieldValues,
+                    promptField: option,
+                  });
+                }}
+                isInvalid={false}
+              />
+            </EuiCompressedFormRow>
+            <EuiSpacer size="s" />
+            <EuiCompressedFormRow
+              fullWidth={true}
+              label={'LLM response field'}
+              isInvalid={false}
+              helpText="The name of the field containing the large language model (LLM) response."
+            >
+              <EuiCompressedFieldText
+                fullWidth={true}
+                value={optionalFieldValues?.llmResponseField || ''}
+                onChange={(e) => {
+                  setOptionalFieldValues({
+                    ...optionalFieldValues,
+                    llmResponseField: e.target.value,
+                  });
+                }}
+              />
+            </EuiCompressedFormRow>
+          </>
+        )}
+      </>
+    </EuiAccordion>
+  );
+}
diff --git a/public/store/reducers/opensearch_reducer.ts b/public/store/reducers/opensearch_reducer.ts
index 952a5e27..2983919d 100644
--- a/public/store/reducers/opensearch_reducer.ts
+++ b/public/store/reducers/opensearch_reducer.ts
@@ -32,7 +32,6 @@ export const INITIAL_OPENSEARCH_STATE = {
 };
 
 const OPENSEARCH_PREFIX = 'opensearch';
-const SET_OPENSEARCH_ERROR = `${OPENSEARCH_PREFIX}/setError`;
 const CAT_INDICES_ACTION = `${OPENSEARCH_PREFIX}/catIndices`;
 const GET_MAPPINGS_ACTION = `${OPENSEARCH_PREFIX}/mappings`;
 const SEARCH_INDEX_ACTION = `${OPENSEARCH_PREFIX}/search`;
@@ -43,13 +42,6 @@ const GET_INGEST_PIPELINE_ACTION = `${OPENSEARCH_PREFIX}/getIngestPipeline`;
 const GET_SEARCH_PIPELINE_ACTION = `${OPENSEARCH_PREFIX}/getSearchPipeline`;
 const GET_INDEX_ACTION = `${OPENSEARCH_PREFIX}/getIndex`;
 
-export const setOpenSearchError = createAsyncThunk(
-  SET_OPENSEARCH_ERROR,
-  async ({ error }: { error: string }, { rejectWithValue }) => {
-    return error;
-  }
-);
-
 export const catIndices = createAsyncThunk(
   CAT_INDICES_ACTION,
   async (
@@ -329,9 +321,6 @@ const opensearchSlice = createSlice({
         state.loading = true;
         state.errorMessage = '';
       })
-      .addCase(setOpenSearchError.fulfilled, (state, action) => {
-        state.errorMessage = action.payload;
-      })
       .addCase(catIndices.fulfilled, (state, action) => {
         const indicesMap = new Map<string, Index>();
         action.payload.forEach((index: Index) => {
diff --git a/public/utils/utils.ts b/public/utils/utils.ts
index 9ce5392a..39bbcd53 100644
--- a/public/utils/utils.ts
+++ b/public/utils/utils.ts
@@ -215,7 +215,7 @@ export function getIngestPipelineErrors(
       if (processorResult.error?.reason !== undefined) {
         ingestPipelineErrors[idx] = {
           processorType: processorResult.processor_type,
-          errorMsg: processorResult.error.reason,
+          errorMsg: `Type: ${processorResult.processor_type}. Error: ${processorResult.error.reason}`,
         };
       }
     });
@@ -223,16 +223,6 @@ export function getIngestPipelineErrors(
   return ingestPipelineErrors;
 }
 
-export function formatIngestPipelineErrors(
-  errors: IngestPipelineErrors
-): string {
-  let msg = 'Errors found with the following ingest processor(s):\n\n';
-  Object.values(errors || {}).forEach((processorError, idx) => {
-    msg += `Processor type: ${processorError.processorType}. Error: ${processorError.errorMsg}\n\n`;
-  });
-  return msg;
-}
-
 export function getSearchPipelineErrors(
   searchResponseVerbose: SearchResponseVerbose
 ): SearchPipelineErrors {
@@ -241,23 +231,13 @@ export function getSearchPipelineErrors(
     if (processorResult?.error !== undefined) {
       searchPipelineErrors[idx] = {
         processorType: processorResult.processor_name,
-        errorMsg: processorResult.error,
+        errorMsg: `Type: ${processorResult.processor_name}. Error: ${processorResult.error}`,
       };
     }
   });
   return searchPipelineErrors;
 }
 
-export function formatSearchPipelineErrors(
-  errors: IngestPipelineErrors
-): string {
-  let msg = 'Errors found with the following search processor(s):\n\n';
-  Object.values(errors || {}).forEach((processorError, idx) => {
-    msg += `Processor type: ${processorError.processorType}. Error: ${processorError.errorMsg}\n\n`;
-  });
-  return msg;
-}
-
 // ML inference processors will use standard dot notation or JSONPath depending on the input.
 // We follow the same logic here to generate consistent results.
 export function generateTransform(