fix: resolve dynamic api url to support non-localhost environments

Dockerfile

@@ -14,6 +14,8 @@ RUN npm install
 COPY frontend/ ./
 
 # Build the frontend
+ARG VITE_API_URL
+ENV VITE_API_URL=$VITE_API_URL
 RUN npm run build
 
 # Stage 2: Python Backend

README.md

@@ -91,7 +91,7 @@ In production, the backend server serves the optimized static frontend build. La
 
 _Note: For the docker-compose.yml example you need a LangSmith API key, you can get one from [LangSmith](https://smith.langchain.com/settings)._
 
-_Note: If you are not running the docker-compose.yml example or exposing the backend server to the public internet, you should update the `apiUrl` in the `frontend/src/App.tsx` file to your host. Currently the `apiUrl` is set to `http://localhost:8123` for docker-compose or `http://localhost:2024` for development._
+_Note: In production, the frontend automatically defaults to `window.location.origin` (serving API requests to the same host/port), and in local development to `http://localhost:2024`. If your backend is hosted separately or requires a custom endpoint, you can set the `VITE_API_URL` environment variable or pass `--build-arg VITE_API_URL=<url>` when building the Docker image._
 
 **1. Build the Docker Image:**
 

frontend/.env.example

@@ -0,0 +1,3 @@
+# Optional: URL of the LangGraph backend API.
+# If omitted, defaults to http://localhost:2024 in development and window.location.origin in production.
+# VITE_API_URL=http://localhost:2024

frontend/src/App.tsx

@@ -6,6 +6,15 @@ import { WelcomeScreen } from "@/components/WelcomeScreen";
 import { ChatMessagesView } from "@/components/ChatMessagesView";
 import { Button } from "@/components/ui/button";
 
+const getApiUrl = (): string => {
+  if (import.meta.env.VITE_API_URL && import.meta.env.VITE_API_URL.trim() !== "") {
+    return import.meta.env.VITE_API_URL.trim();
+  }
+  return import.meta.env.DEV
+    ? "http://localhost:2024"
+    : window.location.origin;
+};
+
 export default function App() {
   const [processedEventsTimeline, setProcessedEventsTimeline] = useState<
     ProcessedEvent[]
@@ -22,9 +31,8 @@ export default function App() {
     max_research_loops: number;
     reasoning_model: string;
   }>({
-    apiUrl: import.meta.env.DEV
-      ? "http://localhost:2024"
-      : "http://localhost:8123",
+    apiUrl: getApiUrl(),
+
     assistantId: "agent",
     messagesKey: "messages",
     onUpdateEvent: (event: any) => {

frontend/src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}