diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal.tsx
index 8e7c09306c..748b8d87eb 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal.tsx
@@ -113,9 +113,7 @@ const SchemaModal: FC<Props> = ({
             <VisualEditorContextProvider>
               <VisualEditor
                 schema={testSchema}
-                onChange={(schema: SchemaRoot) => {
-                  console.log('Schema changed:', schema)
-                }}
+                readOnly
               ></VisualEditor>
             </VisualEditorContextProvider>
           </MittProvider>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts
index 470a322b13..eb3dff83d8 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts
@@ -6,6 +6,7 @@ import type { EditData } from './edit-card'
 import { ArrayType, type Field, Type } from '../../../types'
 import Toast from '@/app/components/base/toast'
 import { findPropertyWithPath } from '../../../utils'
+import _ from 'lodash'
 
 type ChangeEventParams = {
   path: string[],
@@ -19,7 +20,8 @@ type AddEventParams = {
 }
 
 export const useSchemaNodeOperations = (props: VisualEditorProps) => {
-  const { schema: jsonSchema, onChange } = props
+  const { schema: jsonSchema, onChange: doOnChange } = props
+  const onChange = doOnChange || _.noop
   const backupSchema = useVisualEditorStore(state => state.backupSchema)
   const setBackupSchema = useVisualEditorStore(state => state.setBackupSchema)
   const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField)
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
index 1df42532a6..50924b5629 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
@@ -5,11 +5,12 @@ import { useSchemaNodeOperations } from './hooks'
 
 export type VisualEditorProps = {
   schema: SchemaRoot
-  onChange: (schema: SchemaRoot) => void
+  readOnly?: boolean
+  onChange?: (schema: SchemaRoot) => void
 }
 
 const VisualEditor: FC<VisualEditorProps> = (props) => {
-  const { schema } = props
+  const { schema, readOnly } = props
   useSchemaNodeOperations(props)
 
   return (
@@ -20,6 +21,7 @@ const VisualEditor: FC<VisualEditorProps> = (props) => {
         required={false}
         path={[]}
         depth={0}
+        readOnly={readOnly}
       />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
index 70a6b861ad..96bbf999db 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
@@ -19,6 +19,7 @@ type SchemaNodeProps = {
   path: string[]
   parentPath?: string[]
   depth: number
+  readOnly?: boolean
 }
 
 // Support 10 levels of indentation
@@ -57,6 +58,7 @@ const SchemaNode: FC<SchemaNodeProps> = ({
   path,
   parentPath,
   depth,
+  readOnly,
 }) => {
   const [isExpanded, setIsExpanded] = useState(true)
   const hoveringProperty = useVisualEditorStore(state => state.hoveringProperty)
@@ -77,11 +79,13 @@ const SchemaNode: FC<SchemaNodeProps> = ({
   }
 
   const handleMouseEnter = () => {
+    if(!readOnly) return
     if (advancedEditing || isAddingNewField) return
     setHoveringPropertyDebounced(path.join('.'))
   }
 
   const handleMouseLeave = () => {
+    if(!readOnly) return
     if (advancedEditing || isAddingNewField) return
     setHoveringPropertyDebounced(null)
   }
@@ -183,7 +187,7 @@ const SchemaNode: FC<SchemaNodeProps> = ({
       )}
 
       {
-        depth === 0 && !isAddingNewField && (
+        !readOnly && depth === 0 && !isAddingNewField && (
           <AddField />
         )
       }