feat: Error if graph can not connect

src/providers/Stream.tsx

@@ -1,4 +1,10 @@
-import React, { createContext, useContext, ReactNode, useState } from "react";
+import React, {
+  createContext,
+  useContext,
+  ReactNode,
+  useState,
+  useEffect,
+} from "react";
 import { useStream } from "@langchain/langgraph-sdk/react";
 import { type Message } from "@langchain/langgraph-sdk";
 import {
@@ -15,6 +21,7 @@ import { ArrowRight } from "lucide-react";
 import { PasswordInput } from "@/components/ui/password-input";
 import { getApiKey } from "@/lib/api-key";
 import { useThreads } from "./Thread";
+import { toast } from "sonner";
 
 export type StateType = { messages: Message[]; ui?: UIMessage[] };
 
@@ -36,6 +43,26 @@ async function sleep(ms = 4000) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+async function checkGraphStatus(
+  apiUrl: string,
+  apiKey: string | null,
+): Promise<boolean> {
+  try {
+    const res = await fetch(`${apiUrl}/ok`, {
+      ...(apiKey && {
+        headers: {
+          "X-Api-Key": apiKey,
+        },
+      }),
+    });
+
+    return res.ok;
+  } catch (e) {
+    console.error(e);
+    return false;
+  }
+}
+
 const StreamSession = ({
   children,
   apiKey,
@@ -68,6 +95,24 @@ const StreamSession = ({
     },
   });
 
+  useEffect(() => {
+    checkGraphStatus(apiUrl, apiKey).then((ok) => {
+      if (!ok) {
+        toast.error("Failed to connect to LangGraph server", {
+          description: () => (
+            <p>
+              Please ensure your graph is running at <code>{apiUrl}</code> and
+              your API key is correctly set (if connecting to a deployed graph).
+            </p>
+          ),
+          duration: 10000,
+          richColors: true,
+          closeButton: true,
+        });
+      }
+    });
+  }, [apiKey, apiUrl]);
+
   return (
     <StreamContext.Provider value={streamValue}>
       {children}