diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
index 066c6cc737..948cbdd225 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
@@ -14,6 +14,7 @@ import {
   deleteEndpoint,
   disableEndpoint,
   enableEndpoint,
+  updateEndpoint,
 } from '@/service/plugins'
 
 type Props = {
@@ -94,6 +95,22 @@ const EndpointCard = ({
     return addDefaultValue(data.settings, formSchemas)
   }, [data.settings, formSchemas])
 
+  const handleUpdate = (state: any) => {
+    try {
+      updateEndpoint({
+        url: '/workspaces/current/endpoints',
+        body: {
+          endpoint_id: data.id,
+          settings: state,
+          name: state.name,
+        },
+      })
+    }
+    catch (error) {
+      console.error(error)
+    }
+  }
+
   return (
     <div className='p-0.5 bg-background-section-burn rounded-xl'>
       <div className='group p-2.5 pl-3 bg-components-panel-on-panel-item-bg rounded-[10px] border-[0.5px] border-components-panel-border'>
@@ -168,10 +185,10 @@ const EndpointCard = ({
       )}
       {isShowEndpointModal && (
         <EndpointModal
-          id={data.id}
           formSchemas={formSchemas}
           defaultValues={formValue}
           onCancel={hideEndpointModalConfirm}
+          onSaved={handleUpdate}
         />
       )}
     </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
index a40f7345da..de87750ad4 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -8,6 +8,9 @@ import EndpointCard from './endpoint-card'
 import { toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
+import {
+  createEndpoint,
+} from '@/service/plugins'
 
 type Props = {
   pluginUniqueID: string
@@ -31,6 +34,22 @@ const EndpointList = ({
     return toolCredentialToFormSchemas(declaration.settings)
   }, [declaration.settings])
 
+  const handleCreate = (state: any) => {
+    try {
+      createEndpoint({
+        url: '/workspaces/current/endpoints',
+        body: {
+          plugin_unique_identifier: pluginUniqueID,
+          settings: state,
+          name: state.name,
+        },
+      })
+    }
+    catch (error) {
+      console.error(error)
+    }
+  }
+
   return (
     <div className='px-4 py-2 border-t border-divider-subtle'>
       <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
@@ -59,9 +78,9 @@ const EndpointList = ({
       </div>
       {isShowEndpointModal && (
         <EndpointModal
-          id={pluginUniqueID}
           formSchemas={formSchemas}
           onCancel={hideEndpointModal}
+          onSaved={handleCreate}
         />
       )}
     </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index aac18dbcbb..c09de2bdb2 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -7,37 +7,35 @@ import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
-// import Toast from '@/app/components/base/toast'
+import Toast from '@/app/components/base/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import cn from '@/utils/classnames'
 
 type Props = {
-  id: string
   formSchemas: any
   defaultValues?: any
   onCancel: () => void
-  // onSaved: (value: Record<string, any>) => void
+  onSaved: (value: Record<string, any>) => void
 }
 
 const EndpointModal: FC<Props> = ({
-  id,
   formSchemas,
   defaultValues = {},
   onCancel,
-  // onSaved,
+  onSaved,
 }) => {
   const { t } = useTranslation()
   const language = useLanguage()
   const [tempCredential, setTempCredential] = React.useState<any>(defaultValues)
 
   const handleSave = () => {
-    // for (const field of credentialSchema) {
-    //   if (field.required && !tempCredential[field.name]) {
-    //     Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: field.label[language] || field.label.en_US }) })
-    //     return
-    //   }
-    // }
-    // onSaved(tempCredential)
+    for (const field of formSchemas) {
+      if (field.required && !tempCredential[field.name]) {
+        Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: field.label[language] || field.label.en_US }) })
+        return
+      }
+    }
+    onSaved(tempCredential)
   }
 
   return (