diff --git a/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx b/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx
index 1bdf87646d..16f6de3db0 100644
--- a/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx
+++ b/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx
@@ -8,6 +8,9 @@ const AddMoreIcon = importRemixIcon(
 const AddMoreFillIcon = importRemixIcon(
   async () => import("remixicon-react/AddCircleFillIcon"),
 );
+const ArrowGoForwardLineIcon = importRemixIcon(
+  async () => import("remixicon-react/ArrowGoForwardLineIcon"),
+);
 const ArrowGoBackLineIcon = importRemixIcon(
   async () => import("remixicon-react/ArrowGoBackLineIcon"),
 );
@@ -1178,6 +1181,7 @@ const ICON_LOOKUP = {
   "add-line": AddLineIcon,
   "add-more": AddMoreIcon,
   "add-more-fill": AddMoreFillIcon,
+  "arrow-go-forward": ArrowGoForwardLineIcon,
   "alert-fill": AlertFillIcon,
   "alert-line": AlertLineIcon,
   "align-center": AlignCenter,
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
index f758522a82..353d1c1654 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
@@ -14,6 +14,7 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
     children,
     className,
     collapsible = "offcanvas",
+    extraTitleButton,
     onEnter: onEnterProp,
     onEntered: onEnteredProp,
     onExit: onExitProp,
@@ -47,7 +48,7 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
   };
 
   const content = (
-    <SidebarContent title={title}>
+    <SidebarContent extraTitleButton={extraTitleButton} title={title}>
       {typeof children === "function"
         ? children({ isAnimating, state })
         : children}
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx
index 9c88ff3cf8..e3e46dbe8d 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import React, { type Ref } from "react";
+import React, { type ReactNode, type Ref } from "react";
 
 import { Flex } from "../../Flex";
 import { Text } from "../../Text";
@@ -9,6 +9,7 @@ import { useSidebar } from "./use-sidebar";
 
 interface SidebarContentProps {
   title?: string;
+  extraTitleButton?: ReactNode;
   className?: string;
   children: React.ReactNode;
 }
@@ -17,7 +18,7 @@ const _SidebarContent = (
   props: SidebarContentProps,
   ref: Ref<HTMLDivElement>,
 ) => {
-  const { children, className, title, ...rest } = props;
+  const { children, className, extraTitleButton, title, ...rest } = props;
   const { isMobile, setState, state } = useSidebar();
 
   return (
@@ -39,26 +40,29 @@ const _SidebarContent = (
               className={styles.sidebarTitle}
               fontWeight={500}
               lineClamp={1}
-              textAlign="center"
             >
               {title}
             </Text>
           )}
-          {!isMobile && (
-            <Button
-              className={styles.sidebarHeaderExpandButton}
-              color="neutral"
-              icon={
-                state === "full-width"
-                  ? "arrows-diagonal-minimize"
-                  : "arrows-diagonal-2"
-              }
-              onPress={() =>
-                setState(state === "full-width" ? "expanded" : "full-width")
-              }
-              variant="ghost"
-            />
-          )}
+
+          <Flex>
+            {extraTitleButton}
+            {!isMobile && (
+              <Button
+                className={styles.sidebarHeaderExpandButton}
+                color="neutral"
+                icon={
+                  state === "full-width"
+                    ? "arrows-diagonal-minimize"
+                    : "arrows-diagonal-2"
+                }
+                onPress={() =>
+                  setState(state === "full-width" ? "expanded" : "full-width")
+                }
+                variant="ghost"
+              />
+            )}
+          </Flex>
         </Flex>
         <div className={styles.sidebarContentInner}>{children}</div>
       </Flex>
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
index b0b04ccaad..a831a17d4b 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
@@ -170,10 +170,7 @@
 }
 
 .sidebarTitle {
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin: 0 var(--sizing-14);
+  margin: 0 var(--sizing-4);
 }
 
 .sidebarHeaderExpandButton {
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts b/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts
index c67f2bac02..e0df80c18d 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts
@@ -24,6 +24,7 @@ export interface SidebarProviderProps {
 export interface SidebarProps {
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
+  extraTitleButton?: ReactNode;
   onEnter?: () => void;
   onExit?: () => void;
   onEntered?: () => void;
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/Visualization.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/Visualization.tsx
new file mode 100644
index 0000000000..95c4219184
--- /dev/null
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/Visualization.tsx
@@ -0,0 +1,111 @@
+import { Button, Flex } from "@appsmith/ads";
+import type { ActionResponse } from "api/ActionAPI";
+import { type Action } from "entities/Action";
+import React, { useState } from "react";
+import { parseActionResponse } from "../Response/utils";
+import { EmptyVisualization } from "./components/EmptyVisualization";
+import { LoadingOverlay } from "./components/LoadingOverlay";
+import { PromptInput } from "./components/PromptInput";
+import { Result } from "./components/Result";
+import { SuggestionButtons } from "./components/SuggestionButtons";
+import { useGenerateVisualization } from "./useGenerateVisualization";
+import { useSaveVisualization } from "./useSaveVisualization";
+import { ErrorBoundary } from "@sentry/react";
+
+interface VisualizationProps {
+  action: Action;
+  actionResponse?: ActionResponse;
+}
+
+const BOTTOM_BAR_HEIGHT = 37;
+
+export const Visualization = (props: VisualizationProps) => {
+  const { action, actionResponse } = props;
+  const [prompt, setPrompt] = useState("");
+  const { response } = parseActionResponse(actionResponse);
+  const generateVisualization = useGenerateVisualization(
+    action.id,
+    action.visualization?.result,
+  );
+  const saveVisualization = useSaveVisualization(action.id);
+
+  return (
+    // TODO: Remove the hardcoded height
+    <Flex
+      flexDirection="column"
+      height={`calc(100% - ${BOTTOM_BAR_HEIGHT}px)`}
+      position="relative"
+    >
+      <Flex
+        borderBottom="1px solid var(--ads-v2-color-border-muted)"
+        flexDirection="column"
+        gap="spaces-3"
+        padding="spaces-3"
+      >
+        <SuggestionButtons onApply={setPrompt} />
+        <Flex gap="spaces-3">
+          <PromptInput
+            isDisabled={!response || saveVisualization.isLoading}
+            isLoading={generateVisualization.isLoading}
+            onChange={setPrompt}
+            onSubmit={async () =>
+              generateVisualization.execute(prompt, response)
+            }
+            value={prompt}
+          />
+          <Button
+            isDisabled={
+              generateVisualization.isLoading ||
+              saveVisualization.isLoading ||
+              !generateVisualization.hasPrevious
+            }
+            isIconButton
+            kind="secondary"
+            onClick={generateVisualization.previous}
+            size="md"
+            startIcon="arrow-go-back"
+          />
+          <Button
+            isDisabled={
+              generateVisualization.isLoading ||
+              saveVisualization.isLoading ||
+              !generateVisualization.hasNext
+            }
+            isIconButton
+            kind="secondary"
+            onClick={generateVisualization.next}
+            size="md"
+            startIcon="arrow-go-forward"
+          />
+          <Button
+            isDisabled={
+              generateVisualization.isLoading ||
+              saveVisualization.isLoading ||
+              !generateVisualization.elements
+            }
+            isLoading={saveVisualization.isLoading}
+            kind="secondary"
+            onClick={async () =>
+              generateVisualization.elements &&
+              saveVisualization.execute(generateVisualization.elements)
+            }
+            size="md"
+          >
+            Save
+          </Button>
+        </Flex>
+      </Flex>
+
+      <Flex flexDirection="column" flexGrow={1} position="relative">
+        {generateVisualization.elements ? (
+          <ErrorBoundary fallback="Visualization failed. Please try again.">
+            <Result data={response} elements={generateVisualization.elements} />
+          </ErrorBoundary>
+        ) : (
+          <EmptyVisualization />
+        )}
+        {generateVisualization.isLoading && <LoadingOverlay />}
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/EmptyVisualization.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/EmptyVisualization.tsx
new file mode 100644
index 0000000000..a56b24a96b
--- /dev/null
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/EmptyVisualization.tsx
@@ -0,0 +1,18 @@
+import { Flex, Text } from "@appsmith/ads";
+import NoVisualizationSVG from "assets/images/no-visualization.svg";
+import React from "react";
+
+export const EmptyVisualization = () => {
+  return (
+    <Flex
+      alignItems="center"
+      flexDirection="column"
+      gap="spaces-7"
+      height="100%"
+      justifyContent="center"
+    >
+      <img alt="No visualization" src={NoVisualizationSVG} />
+      <Text>The response visualization will be shown here</Text>
+    </Flex>
+  );
+};
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/LoadingOverlay.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/LoadingOverlay.tsx
new file mode 100644
index 0000000000..f61aeeef22
--- /dev/null
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/LoadingOverlay.tsx
@@ -0,0 +1,22 @@
+import { Flex, Text } from "@appsmith/ads";
+import React from "react";
+
+export const LoadingOverlay = () => {
+  return (
+    <Flex
+      alignItems="center"
+      backgroundColor="color-mix(in srgb, var(--ads-v2-color-gray-800) 80%, transparent);"
+      bottom="0"
+      flexDirection="column"
+      justifyContent="center"
+      left="0"
+      position="absolute"
+      right="0"
+      top="0"
+    >
+      <Text color="var(--ads-v2-color-white)" kind="heading-m">
+        Generating visualization...
+      </Text>
+    </Flex>
+  );
+};
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/PromptInput.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/PromptInput.tsx
new file mode 100644
index 0000000000..d69dd29d75
--- /dev/null
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/PromptInput.tsx
@@ -0,0 +1,47 @@
+import { Button, Input } from "@appsmith/ads";
+import React from "react";
+import styled from "styled-components";
+
+interface PromptInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  isLoading: boolean;
+  isDisabled: boolean;
+}
+
+const PromptForm = styled.form`
+  display: flex;
+  flex: 1;
+  gap: var(--ads-v2-spaces-3);
+`;
+
+export const PromptInput = (props: PromptInputProps) => {
+  const { isDisabled, isLoading, onChange, onSubmit, value } = props;
+
+  return (
+    <PromptForm
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+    >
+      <Input
+        isDisabled={isDisabled}
+        onChange={onChange}
+        placeholder="Describe the data visualisation you want"
+        size="md"
+        value={value}
+      />
+      <Button
+        isDisabled={isDisabled || !value}
+        isIconButton
+        isLoading={isLoading}
+        kind="primary"
+        size="md"
+        startIcon="arrow-up-line"
+        type="submit"
+      />
+    </PromptForm>
+  );
+};
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/Result.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/Result.tsx
new file mode 100644
index 0000000000..2dcdafee89
--- /dev/null
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/Result.tsx
@@ -0,0 +1,138 @@
+/* eslint-disable react-perf/jsx-no-new-function-as-prop */
+import { transform } from "@babel/standalone";
+import type { VisualizationElements } from "entities/Action";
+import React, { memo, useEffect, useRef, useState } from "react";
+// @ts-expect-error - Type error due to raw loader
+import customWidgetScript from "!!raw-loader!../../../../../../widgets/CustomWidget/component/customWidgetscript.js";
+// @ts-expect-error - Type error due to raw loader
+import appsmithConsole from "!!raw-loader!../../../../../../widgets/CustomWidget/component/appsmithConsole.js";
+import { EVENTS } from "../../../../../../widgets/CustomWidget/component/customWidgetscript";
+
+interface ResultProps {
+  elements: VisualizationElements;
+  data: unknown;
+}
+
+const theme = {
+  primaryColor: "#000000",
+  backgroundColor: "#FFFFFF",
+  borderRadius: 0,
+  boxShadow: "none",
+  fontFamily: "Arial",
+};
+
+export const Result = memo(({ data, elements }: ResultProps) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [isIframeReady, setIsIframeReady] = useState(false);
+
+  const compiledJs = transform(elements.js, {
+    sourceType: "module",
+    presets: ["react"],
+    targets: {
+      esmodules: true,
+    },
+  });
+
+  useEffect(
+    function setupIframeMessageHandler() {
+      const handler = (event: MessageEvent) => {
+        const iframeWindow =
+          iframeRef.current?.contentWindow ||
+          iframeRef.current?.contentDocument?.defaultView;
+
+        if (event.source === iframeWindow) {
+          iframeRef.current?.contentWindow?.postMessage(
+            {
+              type: EVENTS.CUSTOM_WIDGET_MESSAGE_RECEIVED_ACK,
+              key: event.data.key,
+              success: true,
+            },
+            "*",
+          );
+
+          const message = event.data;
+
+          switch (message.type) {
+            case EVENTS.CUSTOM_WIDGET_READY:
+              setIsIframeReady(true);
+              iframeRef.current?.contentWindow?.postMessage(
+                {
+                  type: EVENTS.CUSTOM_WIDGET_READY_ACK,
+                  model: {
+                    data,
+                  },
+                  ui: {
+                    width: 0,
+                    height: 0,
+                  },
+                  theme,
+                },
+                "*",
+              );
+
+              break;
+            case "CUSTOM_WIDGET_CONSOLE_EVENT":
+              if (message.data.type === "error") {
+                throw new Error(message.data.args);
+              }
+
+              break;
+          }
+        }
+      };
+
+      window.addEventListener("message", handler, false);
+
+      return () => window.removeEventListener("message", handler, false);
+    },
+    [data],
+  );
+
+  useEffect(
+    function updateModel() {
+      if (
+        iframeRef.current &&
+        iframeRef.current.contentWindow &&
+        isIframeReady
+      ) {
+        iframeRef.current.contentWindow.postMessage(
+          {
+            type: EVENTS.CUSTOM_WIDGET_MODEL_CHANGE,
+            model: { model: data },
+          },
+          "*",
+        );
+      }
+    },
+    [data],
+  );
+
+  const srcDoc = `
+    <html>
+      <head>
+        <style>${elements.css}</style>
+      </head>
+      <body>
+      <script type="text/javascript">${appsmithConsole}</script>
+       <script type="module">
+        ${customWidgetScript}
+        main();
+      </script>
+        <script type="module">
+          ${compiledJs.code}
+        </script>
+        ${elements.html}
+      </body>
+    </html>
+  `;
+
+  return (
+    <iframe
+      data-testid="t--visualization-result"
+      ref={iframeRef}
+      sandbox="allow-scripts allow-same-origin"
+      srcDoc={srcDoc}
+      style={{ width: "100%", height: "100%" }}
+    />
+  );
+});
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/SuggestionButtons.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/SuggestionButtons.tsx
new file mode 100644
index 0000000000..7bc13aec2d
--- /dev/null
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/SuggestionButtons.tsx
@@ -0,0 +1,43 @@
+import { Button, Flex } from "@appsmith/ads";
+import React, { memo } from "react";
+
+interface SuggestionButtonsProps {
+  onApply: (suggestion: string) => void;
+}
+
+const suggestions = [
+  {
+    label: "Table",
+    text: "Create a table",
+  },
+  {
+    label: "Chart",
+    text: "Create a chart",
+  },
+  {
+    label: "List",
+    text: "Create a list",
+  },
+  {
+    label: "Form",
+    text: "Create a form",
+  },
+];
+
+export const SuggestionButtons = memo((props: SuggestionButtonsProps) => {
+  const { onApply } = props;
+
+  return (
+    <Flex gap="spaces-2">
+      {suggestions.map((suggestion) => (
+        <Button
+          key={suggestion.label}
+          kind="secondary"
+          onClick={() => onApply(suggestion.text)}
+        >
+          {suggestion.label}
+        </Button>
+      ))}
+    </Flex>
+  );
+});
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/index.ts b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/index.ts
new file mode 100644
index 0000000000..d4249d3de9
--- /dev/null
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/index.ts
@@ -0,0 +1 @@
+export * from "./Visualization";
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/useGenerateVisualization.ts b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/useGenerateVisualization.ts
new file mode 100644
index 0000000000..b58352af2d
--- /dev/null
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/useGenerateVisualization.ts
@@ -0,0 +1,77 @@
+import ActionAPI from "api/ActionAPI";
+import type { VisualizationElements } from "entities/Action";
+import { useCallback, useEffect, useState } from "react";
+
+export const useGenerateVisualization = (
+  actionId: string,
+  elements?: VisualizationElements,
+) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [results, setResults] = useState<VisualizationElements[]>(
+    elements ? [elements] : [],
+  );
+  const [currIndex, setCurrIndex] = useState(0);
+
+  const clampIndex = useCallback(
+    (index: number) => {
+      return Math.max(0, Math.min(index, results.length - 1));
+    },
+    [results],
+  );
+
+  useEffect(
+    function updateCurrIndex() {
+      setCurrIndex(clampIndex(results.length - 1));
+    },
+    [results, clampIndex, setCurrIndex],
+  );
+
+  const execute = useCallback(
+    async (prompt: string, data: unknown) => {
+      setIsLoading(true);
+      setHasError(false);
+
+      try {
+        const response = await ActionAPI.generateVisualization(
+          actionId,
+          prompt,
+          data,
+        );
+
+        setResults((result) => [
+          ...result,
+          {
+            js: response.data.result.js,
+            css: response.data.result.css,
+            html: response.data.result.html,
+          },
+        ]);
+      } catch (error) {
+        setHasError(true);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [actionId],
+  );
+
+  const previous = useCallback(() => {
+    setCurrIndex((i) => clampIndex(i - 1));
+  }, [clampIndex, setCurrIndex]);
+
+  const next = useCallback(() => {
+    setCurrIndex((i) => clampIndex(i + 1));
+  }, [clampIndex, setCurrIndex]);
+
+  return {
+    execute,
+    isLoading,
+    hasError,
+    elements: results.length > 0 ? results[currIndex] : undefined,
+    hasPrevious: currIndex > 0,
+    hasNext: currIndex < results.length - 1,
+    previous,
+    next,
+  };
+};
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/useSaveVisualization.ts b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/useSaveVisualization.ts
new file mode 100644
index 0000000000..3acb5aaffa
--- /dev/null
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/useSaveVisualization.ts
@@ -0,0 +1,41 @@
+import { updateActionProperty } from "actions/pluginActionActions";
+import ActionAPI from "api/ActionAPI";
+import type { VisualizationElements } from "entities/Action";
+import { useCallback, useState } from "react";
+import { useDispatch } from "react-redux";
+
+export const useSaveVisualization = (actionId: string) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const dispatch = useDispatch();
+
+  const execute = useCallback(
+    async (elements: VisualizationElements) => {
+      setIsLoading(true);
+      setHasError(false);
+
+      try {
+        const response = await ActionAPI.saveVisualization(actionId, elements);
+
+        dispatch(
+          updateActionProperty({
+            id: actionId,
+            field: "visualization",
+            value: response.data,
+          }),
+        );
+      } catch (error) {
+        setHasError(true);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [actionId],
+  );
+
+  return {
+    execute,
+    isLoading,
+    hasError,
+  };
+};
diff --git a/app/client/src/api/ActionAPI.tsx b/app/client/src/api/ActionAPI.tsx
index 1cd3c0f14d..ada85c39b2 100644
--- a/app/client/src/api/ActionAPI.tsx
+++ b/app/client/src/api/ActionAPI.tsx
@@ -162,6 +162,49 @@ class ActionAPI extends API {
     return API.get(`${ActionAPI.url}/view`, { applicationId });
   }
 
+  static async generateVisualization(
+    actionId: string,
+    prompt: string,
+    data: unknown,
+  ): Promise<
+    AxiosPromise<{
+      result: { html: string; css: string; js: string; error: string };
+    }>
+  > {
+    return API.post(
+      `${ActionAPI.url}/${actionId}/visualize`,
+      {
+        prompt,
+        data,
+      },
+      {},
+      {
+        timeout: 60000, // 1 minute
+      },
+    );
+  }
+
+  static async saveVisualization(
+    actionId: string,
+    elements: {
+      html: string;
+      css: string;
+      js: string;
+    },
+  ): Promise<
+    AxiosPromise<
+      ApiResponse<{
+        result: { html: string; css: string; js: string; error: string };
+      }>
+    >
+  > {
+    return API.patch(`${ActionAPI.url}/${actionId}/visualize`, {
+      existing: {
+        result: elements,
+      },
+    });
+  }
+
   static async fetchActionsByPageId(
     pageId: string,
   ): Promise<AxiosPromise<ApiResponse<Action[]>>> {
diff --git a/app/client/src/assets/images/no-visualization.svg b/app/client/src/assets/images/no-visualization.svg
new file mode 100644
index 0000000000..f0d8682d42
--- /dev/null
+++ b/app/client/src/assets/images/no-visualization.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="159" fill="none"><g clip-path="url(#a)"><path fill="#ECE6F3" d="M129.287 123.941c-4.426 2.27-4.32 2.467-8.725 4.772-4.404 2.305-4.461 2.192-8.865 4.497-4.405 2.305-4.341 2.425-8.746 4.73-4.404 2.305-4.411 2.305-8.816 4.602-4.404 2.298-4.404 2.305-8.809 4.61-4.404 2.305-4.475 2.185-8.88 4.49-4.404 2.305-4.425 2.27-8.843 4.568-.233.098-.465.021-.718.014a723.923 723.923 0 0 1-5.692-.226c-.225-.007-.436.056-.64-.042-4.271-2.037-4.243-2.094-8.507-4.131-4.264-2.037-4.292-1.98-8.563-4.01-4.27-2.03-4.292-1.981-8.563-4.018-4.27-2.037-4.313-1.945-8.584-3.982-4.27-2.037-4.15-2.291-8.414-4.321-4.264-2.03-4.328-1.91-8.605-3.947-4.278-2.037-4.257-2.065-8.528-4.103-1.295-.62-1.372-2.565-.056-3.143 3.09-1.574 6.175-3.158 9.252-4.751 4.616-2.396 4.686-2.255 9.302-4.652 4.615-2.396 4.552-2.516 9.167-4.913 4.616-2.396 4.714-2.206 9.337-4.602 4.623-2.397 4.609-2.411 9.224-4.808 4.616-2.396 4.588-2.46 9.203-4.863 4.623-2.397 4.567-2.495 9.19-4.892.013 0 .09.014.09.022 4.56 2.15 4.532 2.213 9.091 4.356 4.56 2.142 4.545 2.178 9.105 4.32 4.56 2.143 4.503 2.27 9.062 4.413 4.56 2.142 4.686 1.882 9.245 4.024 4.56 2.143 4.482 2.319 9.042 4.462 4.559 2.143 4.657 1.938 9.224 4.081 4.566 2.143 4.573 2.122 9.139 4.272 1.302.613 1.197 2.6-.126 3.178l.007-.007Z"/><path fill="#EAF0F3" d="M61 56.1c4.672-2.375 4.518-2.678 9.161-5.117 4.644-2.438 4.715-2.297 9.358-4.729 4.644-2.439 4.616-2.488 9.26-4.92 4.643-2.432 4.749-2.227 9.393-4.666 4.643-2.439 4.517-2.678 9.153-5.117 4.637-2.44 4.721-2.284 9.365-4.723s4.644-2.432 9.288-4.87c4.643-2.44 4.615-2.488 9.266-4.927 4.644-2.44 4.552-2.622 9.231-4.998.338-.014 5.383 1.304 5.383 1.643 0 4.912-.078 4.912-.078 9.818s-.14 4.906-.14 9.819v9.819c0 4.905-.021 4.912-.021 9.818s.225 4.906.225 9.819v9.818c0 4.913-.127 4.913-.127 9.819 0 4.906.113 4.913.113 9.819 0 4.905.042 4.912.042 9.825 0 4.913-.049 4.913-.014 9.826.07.796-.345 1.776-1.175 2.206-4.405 2.361-4.524 2.143-8.929 4.511-4.404 2.368-4.341 2.488-8.746 4.849-4.404 2.362-4.425 2.334-8.83 4.702-4.404 2.368-4.362 2.439-8.767 4.807-4.404 2.368-4.411 2.354-8.816 4.722-4.404 2.369-4.517 2.164-8.921 4.533-4.405 2.368-4.327 2.516-8.732 4.884-4.404 2.369-4.475 2.242-8.886 4.61-4.412 2.368-4.292 2.594-8.704 4.948-2.462 1.276-5.467 1.403-8.014.303-.126-.056.38.183.254.127-.803-.345-1.154-1.205-1.19-1.952-.02-4.927-.147-4.927-.147-9.854s.126-4.927.126-9.847c0-4.927-.147-4.927-.147-9.854s.063-4.927.063-9.854v-9.854c0-4.927.183-4.927.176-9.846-.007-4.92-.169-4.927-.169-9.854s-.077-4.927-.077-9.847c0-4.927.295-4.927.295-9.854s-.197-4.927-.197-9.854c0-.324.345-.5.668-.507h.008Z"/><path fill="#fff" stroke="#D5E1E6" stroke-width="1.788" d="M68.65 57.22c-2.076 1.072-4.556 1.216-6.676.304l.065-.15c-.954-.413-.984-1.609-.09-2.073l.01-.005c2.046-1.095 3.15-1.68 4.188-2.23a885.99 885.99 0 0 0 4.671-2.493 97.036 97.036 0 0 0 4.407-2.494l.016-.009c1.067-.636 2.134-1.272 4.317-2.445a393.643 393.643 0 0 1 4.42-2.346l.051-.027c1.096-.573 2.21-1.157 4.393-2.328a246.755 246.755 0 0 1 4.401-2.314l.032-.016a242.08 242.08 0 0 0 4.454-2.344c2.211-1.188 3.314-1.788 4.416-2.388 1.1-.599 2.2-1.197 4.407-2.384a374.777 374.777 0 0 0 4.414-2.405c1.096-.605 2.19-1.21 4.395-2.395 2.205-1.185 3.314-1.765 4.423-2.345h.001a381.582 381.582 0 0 0 4.442-2.356c2.214-1.19 3.315-1.8 4.414-2.41h.001c1.096-.606 2.19-1.212 4.394-2.397h.001c2.943-1.588 5.889-3.168 8.837-4.74 2.023-1.053 4.451-1.01 6.63-.07l.495.215c.48.578.367 1.553-.355 1.928l-.01.005a1696.604 1696.604 0 0 0-4.955 2.66c-.954.513-2.031 1.094-3.891 2.092a171.633 171.633 0 0 0-4.416 2.442l-.024.014c-1.08.615-2.164 1.233-4.348 2.407-2.2 1.183-3.313 1.75-4.428 2.316l-.001.001a192.64 192.64 0 0 0-4.465 2.335 113.444 113.444 0 0 1-4.434 2.278l-.027.014c-1.124.55-2.261 1.108-4.466 2.29a203.104 203.104 0 0 0-4.411 2.424l-.049.027c-1.074.606-2.16 1.218-4.329 2.384a284.197 284.197 0 0 1-4.424 2.337l-.072.037a308.054 308.054 0 0 0-4.376 2.306 136.03 136.03 0 0 0-4.408 2.453l-.033.02c-1.072.619-2.15 1.242-4.326 2.412a341.437 341.437 0 0 1-4.422 2.342h-.001c-1.114.58-2.229 1.162-4.443 2.352-2.016 1.084-3.105 1.68-4.106 2.226-1.206.66-2.286 1.25-4.71 2.542Z"/><path stroke="#80949C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.788" d="M148.57 113.857c-4.419 2.376-4.292 2.608-8.71 4.984-4.419 2.375-4.546 2.142-8.964 4.518-4.419 2.375-4.285 2.622-8.711 4.997-4.425 2.376-4.51 2.199-8.928 4.575-4.419 2.375-4.412 2.382-8.831 4.758-4.418 2.375-4.468 2.29-8.886 4.666-4.419 2.375-4.292 2.608-8.71 4.983-4.42 2.375-4.483 2.263-8.901 4.638-4.419 2.375-4.46 2.312-8.886 4.673-2.308 1.198-5.052 1.473-7.438.444l.106-.254"/><path stroke="#80949C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.788" d="M64.934 157.353c0-4.702.19-4.702.19-9.41 0-4.701-.17-4.701-.17-9.403 0-4.708.113-4.708.113-9.41 0-4.708.07-4.708.07-9.409"/><path fill="#fff" d="M73.541 147.047c-1.09 0-1.977-.923-1.977-2.058 0-2.523-.02-3.785-.042-5.047-.021-1.261-.042-2.516-.042-5.032 0-2.517-.014-3.785-.028-5.047a386.079 386.079 0 0 1-.028-5.033c0-2.516.028-3.799.049-5.032.028-1.241.049-2.524.049-5.047 0-2.524.007-7.556.007-10.08 0-2.523.028-3.792.056-5.032.028-1.24.057-2.524.057-5.047V74.426c0-2.53-.064-3.813-.12-5.06-.056-1.234-.12-2.517-.12-5.026 0-.776.521-1.53 1.295-1.861a613.452 613.452 0 0 1 3.455-1.819c1.498-.789 2.504-1.31 5.277-2.805 2.174-1.17 3.257-1.811 4.306-2.432 1.04-.613 2.117-1.254 4.278-2.417 2.167-1.163 3.285-1.713 4.369-2.249 1.09-.535 2.216-1.085 4.39-2.255 2.174-1.17 3.251-1.812 4.299-2.432 1.042-.62 2.111-1.262 4.278-2.425a153.473 153.473 0 0 1 4.369-2.27c1.084-.542 2.21-1.106 4.377-2.276a637.79 637.79 0 0 1 4.362-2.326c1.084-.571 2.174-1.149 4.334-2.312 2.167-1.17 3.258-1.741 4.349-2.319 1.09-.578 2.181-1.156 4.348-2.319 4.257-2.29 4.334-2.326 8.457-4.483l.253-.134c.254-.105.542-.169.823-.169a1.92 1.92 0 0 1 1.942 1.946c0 2.523.036 3.806.071 5.046.035 1.234.07 2.517.07 5.033 0 2.516-.014 3.778-.035 5.033-.014 1.261-.035 2.523-.035 5.046V62.261c0 1.261-.007 2.516-.007 5.04 0 2.522 0 3.777-.014 5.039 0 1.261-.014 2.523-.014 5.04 0 2.516-.007 3.778-.014 5.04a696.362 696.362 0 0 0-.015 5.039c0 2.516-.042 3.792-.077 5.033-.042 1.24-.084 2.53-.084 5.053 0 2.524.028 3.807.049 5.047.028 1.241.049 2.516.049 5.033 0 .817-.457 1.529-1.189 1.846-2.385 1.262-3.476 1.875-4.63 2.517-.992.557-2.054 1.156-4.038 2.227a182.333 182.333 0 0 0-4.32 2.39 163.24 163.24 0 0 1-4.306 2.382 88.649 88.649 0 0 1-4.377 2.227c-1.097.529-2.23 1.072-4.404 2.242a145.358 145.358 0 0 0-4.313 2.396c-1.049.599-2.132 1.22-4.299 2.383a231.564 231.564 0 0 1-4.356 2.29c-1.097.564-2.195 1.128-4.362 2.298-2.16 1.163-3.243 1.734-4.327 2.312-1.09.578-2.181 1.156-4.362 2.326-2.174 1.17-3.258 1.755-4.341 2.34-1.084.585-2.168 1.17-4.342 2.34-1.913 1.03-2.969 1.629-3.933 2.164a132.185 132.185 0 0 1-4.714 2.559c-.232.099-.5.155-.76.155l.007.028Z"/><path fill="#D5E1E6" d="M143.012 25.404c.774 0 1.59.557 1.59 1.593 0 2.53.035 3.813.07 5.06.035 1.234.07 2.51.07 5.02a273 273 0 0 1-.035 5.032c-.014 1.24-.035 2.523-.035 5.047v10.079c0 2.516 0 3.778-.007 5.04 0 1.261-.007 2.523-.007 5.04 0 2.516 0 3.777-.014 5.039 0 1.262-.014 2.523-.014 5.047 0 2.523-.007 3.778-.014 5.032a780.163 780.163 0 0 0-.014 5.047c0 2.524-.042 3.785-.078 5.019-.042 1.247-.084 2.53-.084 5.068 0 2.537.028 3.813.049 5.053.028 1.234.049 2.517.049 5.026 0 .677-.372 1.262-.978 1.523l-.028.014-.021.014c-2.364 1.247-3.455 1.861-4.615 2.509-1.007.564-2.055 1.156-4.032 2.22a172.893 172.893 0 0 0-4.327 2.397 165 165 0 0 1-4.299 2.375 95.506 95.506 0 0 1-4.362 2.22 98.699 98.699 0 0 0-4.419 2.249c-2.174 1.17-3.265 1.797-4.32 2.396-1.048.6-2.132 1.22-4.292 2.383-2.167 1.163-3.279 1.734-4.348 2.291a291.124 291.124 0 0 0-4.37 2.297c-2.167 1.163-3.257 1.741-4.34 2.319-1.091.578-2.182 1.156-4.35 2.319-2.18 1.17-3.264 1.763-4.354 2.348-1.077.585-2.16 1.17-4.327 2.333a195.607 195.607 0 0 0-3.94 2.171c-1.21.683-2.26 1.275-4.68 2.537a1.622 1.622 0 0 1-.626.127c-.893 0-1.625-.768-1.625-1.706 0-2.523-.021-3.813-.042-5.054a254.992 254.992 0 0 1-.042-5.025c0-2.51-.014-3.806-.029-5.047a382.614 382.614 0 0 1-.028-5.033c0-2.516.028-3.792.05-5.025.028-1.241.049-2.531.049-5.054v-10.079c0-2.517.028-3.793.056-5.026.028-1.24.056-2.53.056-5.054V74.42c0-2.523-.063-3.827-.12-5.075-.056-1.233-.119-2.502-.119-5.011 0-.642.436-1.262 1.084-1.537l.028-.014.02-.014c1.584-.839 2.59-1.367 3.442-1.812 1.505-.789 2.504-1.31 5.27-2.798 2.18-1.17 3.264-1.818 4.313-2.439a107.1 107.1 0 0 1 4.263-2.41c2.153-1.163 3.272-1.706 4.356-2.241 1.09-.536 2.223-1.093 4.404-2.263a97.987 97.987 0 0 0 4.313-2.446c1.034-.613 2.104-1.255 4.257-2.41 2.16-1.164 3.279-1.72 4.355-2.263a135.922 135.922 0 0 0 4.391-2.277c2.167-1.163 3.257-1.74 4.341-2.319 1.09-.578 2.181-1.149 4.348-2.319 2.167-1.163 3.258-1.74 4.341-2.319a654.923 654.923 0 0 0 4.355-2.326c4.222-2.27 4.299-2.312 8.359-4.433l.317-.17c.225-.091.457-.14.689-.14m0-.705c-.323 0-.661.063-.992.211a853.19 853.19 0 0 0-8.71 4.617c-4.341 2.333-4.356 2.305-8.697 4.645-4.341 2.333-4.355 2.305-8.696 4.638-4.341 2.333-4.405 2.206-8.746 4.54-4.341 2.332-4.236 2.523-8.577 4.856-4.334 2.333-4.425 2.17-8.76 4.504-4.34 2.333-4.242 2.509-8.583 4.842-4.342 2.333-4.356 2.305-8.71 4.61-.873.38-1.507 1.24-1.507 2.185 0 5.04.24 5.04.24 10.086V94.58c0 5.039-.113 5.039-.113 10.078 0 5.04-.007 5.04-.007 10.08s-.106 5.04-.106 10.079c0 5.04.057 5.04.057 10.08 0 5.039.084 5.039.084 10.079 0 1.375 1.09 2.411 2.33 2.411.302 0 .618-.064.928-.198 4.37-2.283 4.313-2.389 8.654-4.722 2.894-1.556 5.786-3.116 8.675-4.68 4.342-2.333 4.356-2.305 8.69-4.638 4.341-2.333 4.383-2.256 8.717-4.589 4.342-2.333 4.278-2.446 8.612-4.779 4.335-2.333 4.44-2.136 8.781-4.469 4.342-2.333 4.285-2.438 8.619-4.771 4.335-2.334 4.285-2.432 8.641-4.73.872-.381 1.4-1.219 1.4-2.171 0-5.04-.106-5.04-.106-10.087 0-5.046.162-5.04.162-10.086 0-5.047.035-5.04.035-10.08 0-5.039.021-5.039.021-10.079 0-5.04.014-5.04.014-10.08V47.15c0-5.04.064-5.04.064-10.08s-.148-5.04-.148-10.08c0-1.353-1.07-2.297-2.294-2.297l.028-.014Z"/><path fill="#EAF0F3" d="M82.31 121.897c-2.288 1.163-2.386.966-4.687 2.115-1.569.684-3.138-.36-3.138-2.079 0-2.284-.028-2.284-.028-4.568 0-.951.535-1.656 1.4-2.037 2.287-1.163 2.216-1.304 4.51-2.453 1.57-.683 3.335.402 3.335 2.115 0 2.284.12 2.284.12 4.567 0 .952-.647 1.96-1.52 2.333l.007.007Z"/><path fill="#fff" d="M71.191 80.425c4.637-2.495 4.517-2.72 9.147-5.209 4.63-2.488 4.665-2.439 9.295-4.934s4.65-2.46 9.28-4.955c4.637-2.495 4.651-2.467 9.288-4.955 4.636-2.488 4.707-2.361 9.343-4.856 4.637-2.496 4.51-2.728 9.14-5.223 4.637-2.496 4.756-2.277 9.393-4.772 4.637-2.495 4.651-2.467 9.288-4.962"/><path stroke="#D5E1E6" stroke-miterlimit="10" stroke-width="1.788" d="M71.191 80.425c4.637-2.495 4.517-2.72 9.147-5.209 4.63-2.488 4.665-2.439 9.295-4.934s4.65-2.46 9.28-4.955c4.637-2.495 4.651-2.467 9.288-4.955 4.636-2.488 4.707-2.361 9.343-4.856 4.637-2.496 4.51-2.728 9.14-5.223 4.637-2.496 4.756-2.277 9.393-4.772 4.637-2.495 4.651-2.467 9.288-4.962"/><path fill="#fff" d="M71.055 97.215c4.636-2.496 4.714-2.348 9.35-4.836 4.637-2.488 4.686-2.396 9.323-4.892 4.637-2.495 4.644-2.474 9.274-4.969 4.636-2.495 4.559-2.629 9.196-5.124 4.636-2.495 4.615-2.53 9.252-5.026 4.637-2.495 4.623-2.523 9.252-5.011 4.637-2.495 4.742-2.298 9.379-4.793s4.616-2.538 9.252-5.033"/><path stroke="#D5E1E6" stroke-miterlimit="10" stroke-width="1.788" d="M71.055 97.215c4.636-2.496 4.714-2.348 9.35-4.836 4.637-2.488 4.686-2.396 9.323-4.892 4.637-2.495 4.644-2.474 9.274-4.969 4.636-2.495 4.559-2.629 9.196-5.124 4.636-2.495 4.615-2.53 9.252-5.026 4.637-2.495 4.623-2.523 9.252-5.011 4.637-2.495 4.742-2.298 9.379-4.793s4.616-2.538 9.252-5.033"/><path fill="#fff" d="M71.133 114.405c4.636-2.495 4.594-2.565 9.231-5.061 4.637-2.495 4.616-2.523 9.252-5.018 4.637-2.495 4.644-2.474 9.28-4.962 4.637-2.489 4.666-2.44 9.295-4.934 4.63-2.496 4.7-2.376 9.337-4.87 4.637-2.496 4.58-2.595 9.217-5.09 4.637-2.495 4.574-2.615 9.21-5.11 4.637-2.495 4.714-2.354 9.351-4.842"/><path stroke="#D5E1E6" stroke-miterlimit="10" stroke-width="1.788" d="M71.133 114.405c4.636-2.495 4.594-2.565 9.231-5.061 4.637-2.495 4.616-2.523 9.252-5.018 4.637-2.495 4.644-2.474 9.28-4.962 4.637-2.489 4.666-2.44 9.295-4.934 4.63-2.496 4.7-2.376 9.337-4.87 4.637-2.496 4.58-2.595 9.217-5.09 4.637-2.495 4.574-2.615 9.21-5.11 4.637-2.495 4.714-2.354 9.351-4.842"/><path fill="#fff" d="M71.05 131.287c4.638-2.496 4.7-2.369 9.338-4.864 4.636-2.495 4.566-2.622 9.203-5.117 4.636-2.495 4.784-2.213 9.414-4.709 4.629-2.495 4.608-2.544 9.245-5.032s4.559-2.636 9.196-5.132c4.637-2.495 4.623-2.509 9.259-5.004 4.637-2.495 4.651-2.474 9.288-4.97 4.637-2.495 4.679-2.417 9.315-4.912"/><path stroke="#D5E1E6" stroke-miterlimit="10" stroke-width="1.788" d="M71.05 131.287c4.638-2.496 4.7-2.369 9.338-4.864 4.636-2.495 4.566-2.622 9.203-5.117 4.636-2.495 4.784-2.213 9.414-4.709 4.629-2.495 4.608-2.544 9.245-5.032s4.559-2.636 9.196-5.132c4.637-2.495 4.623-2.509 9.259-5.004 4.637-2.495 4.651-2.474 9.288-4.97 4.636-2.495 4.679-2.417 9.315-4.912"/><path fill="#ECE6F3" d="M141.724 55.19c-4.96 2.664-4.883 2.805-9.843 5.47a6492.105 6492.105 0 0 0-9.914 5.335c-3.44 1.847-7.331 1.501-10.279-.26-2.948-1.763-4.841-5.033-4.841-8.945 0-5.23-.077-5.23-.077-10.46 0-2.707.717-5.287 2.054-7.528 1.337-2.242 3.223-4.166 5.608-5.449 4.559-2.453 4.51-2.537 9.069-4.99 4.559-2.453 4.538-2.495 9.091-4.948 3.799-2.044 8.056-1.509 11.306.437 3.251 1.945 5.721 5.455 5.721 9.776 0 4.32-.197 4.32-.197 8.642 0 2.706-.774 5.258-2.118 7.506-1.344 2.249-3.216 4.138-5.601 5.42l.021-.006Z" style="mix-blend-mode:multiply"/><path fill="#fff" d="M99.882 48.397c0 5.307-.169 5.307-.169 10.622 0 5.307-.07 5.307-.07 10.622 0 5.314.12 5.314.12 10.622 0 5.307.126 5.307.126 10.622 0 5.315-.295 5.315-.295 10.622 0 5.315.21 5.315.21 10.622 0 5.315-.14 5.315-.14 10.622 0 5.315.26 5.315.26 10.623"/><path stroke="#D5E1E6" stroke-miterlimit="10" stroke-width="1.788" d="M99.882 48.397c0 5.307-.169 5.307-.169 10.622 0 5.307-.07 5.307-.07 10.622 0 5.314.12 5.314.12 10.622 0 5.307.126 5.307.126 10.622 0 5.315-.295 5.315-.295 10.622 0 5.315.21 5.315.21 10.622 0 5.315-.14 5.315-.14 10.622 0 5.315.26 5.315.26 10.623"/><path fill="#FCBA44" d="M153.9 40.448c-4.904 2.671-4.939 2.608-9.843 5.286-4.904 2.679-4.932 2.622-9.836 5.287-2.428 1.304-5.488.888-8.472-.395-2.603-1.12-5.298-2.77-7.226-4.962-2.124-2.418-3.412-5.343-3.412-7.993 0-5.23-.127-5.23-.127-10.46 0-2.707.838-5.329 2.182-7.57 1.343-2.242 3.257-4.201 5.635-5.484 4.56-2.453 4.595-2.39 9.154-4.835 4.559-2.446 4.651-2.284 9.203-4.737 2.561-1.374 5.798-1.74 9.048-1.015 3.026.677 6.03 2.15 8.338 4.088 2.575 2.164 4.419 4.984 4.419 8.007.014 5.498-.113 5.498-.099 10.996 0 2.728-.964 5.618-2.645 8.042-1.682 2.425-3.955 4.47-6.319 5.745Z"/><path fill="#FFCD6E" d="M155.054 39.504c-4.96 2.664-4.82 2.918-9.78 5.582-4.96 2.664-5.08 2.446-10.033 5.11-3.441 1.847-7.177 1.586-10.118-.176-2.941-1.762-5.08-4.934-5.08-8.846 0-5.23.028-5.23.028-10.46 0-2.707.753-5.307 2.097-7.549a14.701 14.701 0 0 1 5.671-5.385c4.559-2.453 4.51-2.538 9.069-4.983 4.56-2.446 4.658-2.27 9.217-4.723 3.8-2.044 7.944-1.832 11.195.12 3.25 1.952 5.551 5.505 5.551 9.826 0 4.32-.085 4.32-.085 8.641 0 2.707-.562 5.371-1.899 7.613-1.337 2.241-3.441 3.947-5.819 5.23h-.014Z"/><g stroke="#253135" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3.577"><path d="M136.436 40.47c-3.651-1.543-3.63-1.6-7.282-3.143-.337-.141-.485-.691-.288-1.001 3.785-5.985 3.884-5.914 7.669-11.898M149.18 17.096c3.651 1.543 3.722 1.381 7.373 2.925.338.14.486.74.289 1.05-3.785 5.984-3.842 5.949-7.62 11.926M145.888 16.307c-1.013 4.13-.88 4.158-1.893 8.289-1.013 4.13-1.238 4.074-2.251 8.204-1.014 4.13-1.063 4.117-2.076 8.247"/></g><path stroke="#F9A619" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.788" d="M155.119 39.623c-4.96 2.664-4.89 2.791-9.85 5.456-4.961 2.664-4.947 2.685-9.907 5.35-3.441 1.846-7.36 1.465-10.301-.297s-5.073-5.046-5.073-8.951c0-5.23.078-5.23.078-10.46"/><path fill="#EAF0F3" d="M139.238 74.933c-4.214 2.171-4.179 2.235-8.38 4.434-4.2 2.199-4.158 2.27-8.358 4.476-4.201 2.206-4.215 2.17-8.415 4.37-4.201 2.199-4.285 2.037-8.507 4.194-1.569.683-3.314-.38-3.314-2.094 0-2.284-.049-2.284-.049-4.567 0-.952.591-1.91 1.463-2.284 4.215-2.17 4.194-2.206 8.394-4.405 4.201-2.2 4.173-2.242 8.373-4.448 4.201-2.206 4.264-2.072 8.464-4.278 4.201-2.207 4.229-2.15 8.451-4.3 1.569-.684 3.335.388 3.335 2.108 0 2.283.098 2.283.098 4.567 0 .952-.689 1.86-1.555 2.234v-.007ZM117.333 103.12c-5.854 3.024-5.819 3.094-11.68 6.097-1.569.683-3.391-.529-3.391-2.242 0-2.283.084-2.283.084-4.567 0-.952.436-1.96 1.309-2.34 5.854-3.024 5.903-2.933 11.764-5.935 1.569-.684 3.166.458 3.166 2.17 0 2.285.099 2.285.099 4.568 0 .952-.479 1.868-1.344 2.249h-.007ZM90.09 84.499c-5.853 3.023-5.818 3.094-11.68 6.097-1.568.683-3.39-.529-3.39-2.242 0-2.284.084-2.284.084-4.567 0-.952.436-1.96 1.309-2.34 5.854-3.024 5.903-2.933 11.764-5.935 1.569-.684 3.166.458 3.166 2.17 0 2.284.099 2.284.099 4.568 0 .952-.479 1.868-1.344 2.249h-.007ZM90.09 134.86c-5.853 3.024-5.818 3.094-11.68 6.097-1.568.684-3.39-.529-3.39-2.241 0-2.284.084-2.284.084-4.568 0-.951.436-1.959 1.309-2.34 5.854-3.024 5.903-2.932 11.764-5.935 1.569-.684 3.166.458 3.166 2.171 0 2.284.099 2.284.099 4.567 0 .952-.479 1.868-1.344 2.249h-.007ZM128.444 97.164c-2.287 1.163-2.16 1.424-4.454 2.566-1.569.684-3.279-.627-3.279-2.34 0-2.284-.281-2.284-.281-4.567 0-.952.71-1.833 1.576-2.214 2.286-1.163 2.244-1.254 4.538-2.403 1.569-.684 3.426.528 3.426 2.241 0 2.284-.161 2.284-.161 4.568 0 .951-.493 1.762-1.365 2.142v.007Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 .928h200V158.07H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/app/client/src/ce/entities/FeatureFlag.ts b/app/client/src/ce/entities/FeatureFlag.ts
index c821fead82..a57874f716 100644
--- a/app/client/src/ce/entities/FeatureFlag.ts
+++ b/app/client/src/ce/entities/FeatureFlag.ts
@@ -54,6 +54,7 @@ export const FEATURE_FLAG = {
     "release_external_saas_plugins_enabled",
   release_tablev2_infinitescroll_enabled:
     "release_tablev2_infinitescroll_enabled",
+  release_fn_calling_enabled: "release_fn_calling_enabled",
 } as const;
 
 export type FeatureFlag = keyof typeof FEATURE_FLAG;
@@ -99,6 +100,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   release_ads_entity_item_enabled: false,
   release_external_saas_plugins_enabled: false,
   release_tablev2_infinitescroll_enabled: false,
+  release_fn_calling_enabled: false,
 };
 
 export const AB_TESTING_EVENT_KEYS = {
diff --git a/app/client/src/components/editorComponents/Debugger/constants.ts b/app/client/src/components/editorComponents/Debugger/constants.ts
index 484b7046ad..567c2c5b2b 100644
--- a/app/client/src/components/editorComponents/Debugger/constants.ts
+++ b/app/client/src/components/editorComponents/Debugger/constants.ts
@@ -6,4 +6,5 @@ export enum DEBUGGER_TAB_KEYS {
   ERROR_TAB = "ERROR_TAB",
   LOGS_TAB = "LOGS_TAB",
   STATE_TAB = "STATE_TAB",
+  VISUALIZATION_TAB = "VISUALIZATION_TAB",
 }
diff --git a/app/client/src/entities/Action/index.ts b/app/client/src/entities/Action/index.ts
index a7619968a1..2343a49a64 100644
--- a/app/client/src/entities/Action/index.ts
+++ b/app/client/src/entities/Action/index.ts
@@ -124,6 +124,12 @@ export interface StoredDatasource {
   datasourceConfiguration?: { url?: string };
 }
 
+export interface VisualizationElements {
+  css: string;
+  js: string;
+  html: string;
+}
+
 export interface BaseAction {
   id: string;
   baseId: string;
@@ -157,6 +163,9 @@ export interface BaseAction {
   // will always be undefined for non js actions
   isMainJSCollection?: boolean;
   source?: ActionCreationSourceTypeEnum;
+  visualization?: {
+    result: VisualizationElements;
+  };
 }
 
 interface BaseApiAction extends BaseAction {
diff --git a/app/client/src/layoutSystems/anvil/integrations/selectors.ts b/app/client/src/layoutSystems/anvil/integrations/selectors.ts
index cdd761f6a4..c43d49adab 100644
--- a/app/client/src/layoutSystems/anvil/integrations/selectors.ts
+++ b/app/client/src/layoutSystems/anvil/integrations/selectors.ts
@@ -10,6 +10,10 @@ export const getIsAnvilLayoutEnabled = (state: AppState) => {
   return selectFeatureFlagCheck(state, FEATURE_FLAG.release_anvil_enabled);
 };
 
+export const getReleaseFnCallingEnabled = (state: AppState) => {
+  return selectFeatureFlagCheck(state, FEATURE_FLAG.release_fn_calling_enabled);
+};
+
 /**
  * A selector to verify if the current application is an Anvil application.
  * This is done by getting the layout system type of the current application (getLayoutSystemType)
diff --git a/app/client/src/utils/hooks/useFeatureFlagOverride.ts b/app/client/src/utils/hooks/useFeatureFlagOverride.ts
index ec689c673a..b981d5d49a 100644
--- a/app/client/src/utils/hooks/useFeatureFlagOverride.ts
+++ b/app/client/src/utils/hooks/useFeatureFlagOverride.ts
@@ -16,6 +16,7 @@ export const AvailableFeaturesToOverride: FeatureFlag[] = [
   "release_anvil_enabled",
   "release_layout_conversion_enabled",
   "release_anvil_toggle_enabled",
+  "release_fn_calling_enabled",
 ];
 export type OverriddenFeatureFlags = Partial<Record<FeatureFlag, boolean>>;