diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 4ef0c1cf2..20c686811 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -15,6 +15,8 @@ import { Separator } from "../ui/separator";
 export default function FlowToolbar(): JSX.Element {
   function handleAPIWShortcut(e: KeyboardEvent) {
     e.preventDefault();
+    console.log("oi");
+    console.log(openCodeModal);
     setOpenCodeModal((oldOpen) => !oldOpen);
   }
 
diff --git a/src/frontend/src/modals/apiModal/views/index.tsx b/src/frontend/src/modals/apiModal/views/index.tsx
index 59b3c13ee..0a9c32ee6 100644
--- a/src/frontend/src/modals/apiModal/views/index.tsx
+++ b/src/frontend/src/modals/apiModal/views/index.tsx
@@ -31,9 +31,13 @@ const ApiModal = forwardRef(
     {
       flow,
       children,
+      open: myOpen,
+      setOpen: mySetOpen,
     }: {
       flow: FlowType;
       children: ReactNode;
+      open: boolean;
+      setOpen: (a: boolean | ((o?: boolean) => boolean)) => void;
     },
     ref,
   ) => {
@@ -44,7 +48,10 @@ const ApiModal = forwardRef(
 
     const [activeTweaks, setActiveTweaks] = useState(false);
     const { autoLogin } = useContext(AuthContext);
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] =
+      mySetOpen !== undefined && myOpen !== undefined
+        ? [myOpen, mySetOpen]
+        : useState(false);
     const [activeTab, setActiveTab] = useState("0");
     const pythonApiCode = getPythonApiCode(
       flow?.id,