diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index f68c3ea73..04dbcdf04 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -14,6 +14,7 @@ import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerCompone
 import { ErrorBoundary } from "react-error-boundary";
 import CrashErrorComponent from "./components/CrashErrorComponent";
 import { TabsContext } from "./contexts/tabsContext";
+import { SSEProvider } from "./contexts/SSEContext";
 
 export default function App() {
   let { setCurrent, setShowSideBar, setIsStackedOpen } =
@@ -128,7 +129,9 @@ export default function App() {
           <main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
             {/* Primary column */}
             <div className="w-full h-full">
-              <TabsManagerComponent></TabsManagerComponent>
+              <SSEProvider>
+                <TabsManagerComponent></TabsManagerComponent>
+              </SSEProvider>
             </div>
           </main>
         </div>
diff --git a/src/frontend/src/contexts/SSEContext.tsx b/src/frontend/src/contexts/SSEContext.tsx
new file mode 100644
index 000000000..8d90b26e2
--- /dev/null
+++ b/src/frontend/src/contexts/SSEContext.tsx
@@ -0,0 +1,35 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+} from "react";
+
+const initialValue = {
+  updateSSEData: ({}) => {},
+  sseData: {},
+};
+
+const SSEContext = createContext(initialValue);
+
+export function useSSE() {
+  return useContext(SSEContext);
+}
+
+export function SSEProvider({ children }) {
+  const [sseData, setSSEData] = useState({});
+
+  const updateSSEData = useCallback((newData: any) => {
+    setSSEData((prevData) => ({
+      ...prevData,
+      ...newData,
+    }));
+  }, []);
+
+  return (
+    <SSEContext.Provider value={{ sseData, updateSSEData }}>
+      {children}
+    </SSEContext.Provider>
+  );
+}