diff --git a/src/backend/langflow/api/validate.py b/src/backend/langflow/api/validate.py
index d80010be4..e1b5a3a1a 100644
--- a/src/backend/langflow/api/validate.py
+++ b/src/backend/langflow/api/validate.py
@@ -46,7 +46,7 @@ def post_validate_node(node_id: str, data: dict):
         node = graph.get_node(node_id)
         if node is not None:
             _ = node.build()
-            return node.params
+            return str(node.params)
         raise Exception(f"Node {node_id} not found")
     except Exception as e:
         logger.exception(e)
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index c96591cc9..93497c0fc 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -1,186 +1,203 @@
 import { TrashIcon } from "@heroicons/react/24/outline";
+import { useDebouncedCallback } from "use-debounce";
 import {
-	classNames,
-	nodeColors,
-	nodeIcons,
-	snakeToNormalCase,
+  classNames,
+  nodeColors,
+  nodeIcons,
+  snakeToNormalCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
 import { useContext, useState, useEffect, useRef } from "react";
 import { NodeDataType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
-import { useCallback } from 'react';
+import { useCallback } from "react";
 
 export default function GenericNode({
-	data,
-	selected,
+  data,
+  selected,
 }: {
-	data: NodeDataType;
-	selected: boolean;
+  data: NodeDataType;
+  selected: boolean;
 }) {
-	const { setErrorData } = useContext(alertContext);
-	const showError = useRef(true);
-	const { types, deleteNode } = useContext(typesContext);
-	const Icon = nodeIcons[types[data.type]];
+  const { setErrorData } = useContext(alertContext);
+  const showError = useRef(true);
+  const { types, deleteNode } = useContext(typesContext);
+  const Icon = nodeIcons[types[data.type]];
+  const [validationStatus, setValidationStatus] = useState("idle");
+  // State for outline color
+  const [isGreenOutline, setIsGreenOutline] = useState(false);
+  const [isRedOutline, setIsRedOutline] = useState(false);
+  const { reactFlowInstance } = useContext(typesContext);
 
-	// State for outline color
-	const [isGreenOutline, setIsGreenOutline] = useState(false);
-	const [isRedOutline, setIsRedOutline] = useState(false);
-	const { reactFlowInstance } = useContext(typesContext);
+  const debouncedValidateNode = useDebouncedCallback(async () => {
+    // Check if the validationStatus is "success"
+    if (validationStatus === "success") return;
 
-	const validateNode = useCallback(async () => {
-		try {
-			const response = await fetch(`/validate/node/${data.id}`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-				},
-				body: JSON.stringify(reactFlowInstance.toObject()),
-			});
+    try {
+      const response = await fetch(`/validate/node/${data.id}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(reactFlowInstance.toObject()),
+      });
 
-			if (response.status === 200) {
-				setIsGreenOutline(true);
-				setIsRedOutline(false);
-			} else if (response.status === 500) {
-				setIsRedOutline(true);
-				setIsGreenOutline(false);
-			}
-		} catch (error) {
-			console.error('Error validating node:', error);
-			setIsRedOutline(true);
-		}
-	}, [data.id, reactFlowInstance]);
+      if (response.status === 200) {
+        setValidationStatus("success");
+      } else if (response.status === 500) {
+        setValidationStatus("error");
+      }
+    } catch (error) {
+      console.error("Error validating node:", error);
+      setValidationStatus("error");
+    }
+  }, 1000);
 
-	useEffect(() => {
-		validateNode();
-	}, [
-		validateNode,
-		...Object.values(data.node.template).flatMap((t) => Object.values(t)),
+  const validateNode = useCallback(() => {
+    debouncedValidateNode();
+  }, [debouncedValidateNode]);
 
-	]);
+  useEffect(() => {
+    validateNode();
+  }, [
+    validateNode,
+    ...Object.values(data.node.template).flatMap((t) => Object.values(t)),
+  ]);
 
-	useEffect(() => {
-		if (isGreenOutline) {
-			setTimeout(() => {
-				setIsGreenOutline(false);
-			}, 1000);
-		}
-	}, [isGreenOutline]);
+  useEffect(() => {
+    if (validationStatus === "success") {
+      setIsGreenOutline(true);
+      setIsRedOutline(false);
+      setTimeout(() => {
+        setIsGreenOutline(false);
+      }, 1000);
+    } else if (validationStatus === "error") {
+      setIsRedOutline(true);
+      setIsGreenOutline(false);
+    } else {
+      setIsGreenOutline(false);
+      setIsRedOutline(false);
+    }
+  }, [validationStatus]);
 
-	const outlineColor = isGreenOutline ? 'animate-pulse-green' : isRedOutline ? 'border-red-outline' : '';
+  const outlineColor = isGreenOutline
+    ? "animate-pulse-green"
+    : isRedOutline
+    ? "border-red-outline"
+    : "";
 
-	if (!Icon) {
-		if (showError.current) {
-			setErrorData({
-				title: data.type
-					? `The ${data.type} node could not be rendered, please review your json file`
-					: "There was a node that can't be rendered, please review your json file",
-			});
-			showError.current = false;
-		}
-		deleteNode(data.id);
-		return;
-	}
+  if (!Icon) {
+    if (showError.current) {
+      setErrorData({
+        title: data.type
+          ? `The ${data.type} node could not be rendered, please review your json file`
+          : "There was a node that can't be rendered, please review your json file",
+      });
+      showError.current = false;
+    }
+    deleteNode(data.id);
+    return;
+  }
 
-	return (
-		<div
-			className={classNames(
-				outlineColor,
-				selected ? "border border-blue-500" : "border dark:border-gray-700",
-				"prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
-			)}
-		>
-			<div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
-				<div className="w-full flex items-center truncate gap-4 text-lg">
-					<Icon
-						className="w-10 h-10 p-1 rounded"
-						style={{
-							color: nodeColors[types[data.type]] ?? nodeColors.unknown,
-						}}
-					/>
-					<div className="truncate">{data.type}</div>
-				</div>
-				<button
-					onClick={() => {
-						deleteNode(data.id);
-					}}
-				>
-					<TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
-				</button>
-			</div>
+  return (
+    <div
+      className={classNames(
+        outlineColor,
+        selected ? "border border-blue-500" : "border dark:border-gray-700",
+        "prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
+      )}
+    >
+      <div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
+        <div className="w-full flex items-center truncate gap-4 text-lg">
+          <Icon
+            className="w-10 h-10 p-1 rounded"
+            style={{
+              color: nodeColors[types[data.type]] ?? nodeColors.unknown,
+            }}
+          />
+          <div className="truncate">{data.type}</div>
+        </div>
+        <button
+          onClick={() => {
+            deleteNode(data.id);
+          }}
+        >
+          <TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
+        </button>
+      </div>
 
-			<div className="w-full h-full py-5">
-				<div className="w-full text-gray-500 px-5 text-sm">
-					{data.node.description}
-				</div>
+      <div className="w-full h-full py-5">
+        <div className="w-full text-gray-500 px-5 text-sm">
+          {data.node.description}
+        </div>
 
-				<>
-					{Object.keys(data.node.template)
-						.filter((t) => t.charAt(0) !== "_")
-						.map((t: string, idx) => (
-							<div key={idx}>
-								{idx === 0 ? (
-									<div
-										className={classNames(
-											"px-5 py-2 mt-2 dark:text-white text-center",
-											Object.keys(data.node.template).filter(
-												(key) =>
-													!key.startsWith("_") && data.node.template[key].show
-											).length === 0
-												? "hidden"
-												: ""
-										)}
-									>
-										Inputs
-									</div>
-								) : (
-									<></>
-								)}
-								{data.node.template[t].show ? (
-									<ParameterComponent
-										data={data}
-										color={
-											nodeColors[types[data.node.template[t].type]] ??
-											nodeColors.unknown
-										}
-										title={
-											data.node.template[t].display_name
-												? data.node.template[t].display_name
-												: data.node.template[t].name
-													? snakeToNormalCase(data.node.template[t].name)
-													: snakeToNormalCase(t)
-										}
-										name={t}
-										tooltipTitle={
-											"Type: " +
-											data.node.template[t].type +
-											(data.node.template[t].list ? " list" : "")
-										}
-										required={data.node.template[t].required}
-										id={data.node.template[t].type + "|" + t + "|" + data.id}
-										left={true}
-										type={data.node.template[t].type}
-									/>
-								) : (
-									<></>
-								)}
-							</div>
-						))}
-					<div className="px-5 py-2 mt-2 dark:text-white text-center">
-						Output
-					</div>
-					<ParameterComponent
-						data={data}
-						color={nodeColors[types[data.type]] ?? nodeColors.unknown}
-						title={data.type}
-						tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
-						id={[data.type, data.id, ...data.node.base_classes].join("|")}
-						type={data.node.base_classes.join("|")}
-						left={false}
-					/>
-				</>
-			</div>
-		</div>
-	);
+        <>
+          {Object.keys(data.node.template)
+            .filter((t) => t.charAt(0) !== "_")
+            .map((t: string, idx) => (
+              <div key={idx}>
+                {idx === 0 ? (
+                  <div
+                    className={classNames(
+                      "px-5 py-2 mt-2 dark:text-white text-center",
+                      Object.keys(data.node.template).filter(
+                        (key) =>
+                          !key.startsWith("_") && data.node.template[key].show
+                      ).length === 0
+                        ? "hidden"
+                        : ""
+                    )}
+                  >
+                    Inputs
+                  </div>
+                ) : (
+                  <></>
+                )}
+                {data.node.template[t].show ? (
+                  <ParameterComponent
+                    data={data}
+                    color={
+                      nodeColors[types[data.node.template[t].type]] ??
+                      nodeColors.unknown
+                    }
+                    title={
+                      data.node.template[t].display_name
+                        ? data.node.template[t].display_name
+                        : data.node.template[t].name
+                        ? snakeToNormalCase(data.node.template[t].name)
+                        : snakeToNormalCase(t)
+                    }
+                    name={t}
+                    tooltipTitle={
+                      "Type: " +
+                      data.node.template[t].type +
+                      (data.node.template[t].list ? " list" : "")
+                    }
+                    required={data.node.template[t].required}
+                    id={data.node.template[t].type + "|" + t + "|" + data.id}
+                    left={true}
+                    type={data.node.template[t].type}
+                  />
+                ) : (
+                  <></>
+                )}
+              </div>
+            ))}
+          <div className="px-5 py-2 mt-2 dark:text-white text-center">
+            Output
+          </div>
+          <ParameterComponent
+            data={data}
+            color={nodeColors[types[data.type]] ?? nodeColors.unknown}
+            title={data.type}
+            tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
+            id={[data.type, data.id, ...data.node.base_classes].join("|")}
+            type={data.node.base_classes.join("|")}
+            left={false}
+          />
+        </>
+      </div>
+    </div>
+  );
 }