Merge pull request #81 from Romamo/add_env

Added environment variables to bypass the initial setup form

.env.example

@@ -0,0 +1,4 @@
+# LangGraph Configuration
+VITE_API_URL=http://localhost:2024
+VITE_ASSISTANT_ID=agent
+VITE_LANGSMITH_API_KEY=

README.md

@@ -48,6 +48,24 @@ Once the app is running (or if using the deployed site), you'll be prompted to e
 
 After entering these values, click `Continue`. You'll then be redirected to a chat interface where you can start chatting with your LangGraph server.
 
+## Environment Variables
+
+You can bypass the initial setup form by setting the following environment variables:
+
+```
+VITE_API_URL=http://localhost:2024
+VITE_ASSISTANT_ID=agent
+VITE_LANGSMITH_API_KEY=your_api_key_if_needed
+```
+
+To use these variables:
+
+1. Copy the `.env.example` file to a new file named `.env`
+2. Fill in the values in the `.env` file
+3. Restart the application
+
+When these environment variables are set, the application will use them instead of showing the setup form.
+
 ## Hiding Messages in the Chat
 
 You can control the visibility of messages within the Agent Chat UI in two main ways:

src/providers/Stream.tsx

@@ -120,12 +120,30 @@ const StreamSession = ({
   );
 };
 
+// Default values for the form
+const DEFAULT_API_URL = "http://localhost:2024";
+const DEFAULT_ASSISTANT_ID = "agent";
+
 export const StreamProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
-  const [apiUrl, setApiUrl] = useQueryState("apiUrl");
+  // Get environment variables
+  const envApiUrl: string | undefined = import.meta.env.VITE_API_URL;
+  const envAssistantId: string | undefined = import.meta.env.VITE_ASSISTANT_ID;
+  const envApiKey: string | undefined = import.meta.env.VITE_LANGSMITH_API_KEY;
+
+  // Use URL params with env var fallbacks
+  const [apiUrl, setApiUrl] = useQueryState("apiUrl", {
+    defaultValue: envApiUrl || "",
+  });
+  const [assistantId, setAssistantId] = useQueryState("assistantId", {
+    defaultValue: envAssistantId || "",
+  });
+
+  // For API key, use localStorage with env var fallback
   const [apiKey, _setApiKey] = useState(() => {
-    return getApiKey();
+    const storedKey = getApiKey();
+    return storedKey || envApiKey || "";
   });
 
   const setApiKey = (key: string) => {
@@ -133,9 +151,12 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
     _setApiKey(key);
   };
 
-  const [assistantId, setAssistantId] = useQueryState("assistantId");
+  // Determine final values to use, prioritizing URL params then env vars
+  const finalApiUrl = apiUrl || envApiUrl;
+  const finalAssistantId = assistantId || envAssistantId;
 
-  if (!apiUrl || !assistantId) {
+  // If we're missing any required values, show the form
+  if (!finalApiUrl || !finalAssistantId) {
     return (
       <div className="flex items-center justify-center min-h-screen w-full p-4">
         <div className="animate-in fade-in-0 zoom-in-95 flex flex-col border bg-background shadow-lg rounded-lg max-w-3xl">
@@ -181,7 +202,7 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
                 id="apiUrl"
                 name="apiUrl"
                 className="bg-background"
-                defaultValue={apiUrl ?? "http://localhost:2024"}
+                defaultValue={apiUrl || DEFAULT_API_URL}
                 required
               />
             </div>
@@ -199,7 +220,7 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
                 id="assistantId"
                 name="assistantId"
                 className="bg-background"
-                defaultValue={assistantId ?? "agent"}
+                defaultValue={assistantId || DEFAULT_ASSISTANT_ID}
                 required
               />
             </div>