From b57a8abc59bdc7af0a3f8817cd27b2401de861ca Mon Sep 17 00:00:00 2001 From: Romamo Date: Tue, 25 Mar 2025 17:34:56 +0200 Subject: [PATCH 1/4] Added environment variables to bypass the initial setup form --- .env.example | 4 ++++ README.md | 18 ++++++++++++++++++ src/providers/Stream.tsx | 23 ++++++++++++++++++----- 3 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..1269e38 --- /dev/null +++ b/.env.example @@ -0,0 +1,4 @@ +# LangGraph Configuration +VITE_API_URL=http://localhost:2024 +VITE_ASSISTANT_ID=agent +VITE_LANGSMITH_API_KEY= diff --git a/README.md b/README.md index aa78848..3097bb0 100644 --- a/README.md +++ b/README.md @@ -47,3 +47,21 @@ Once the app is running (or if using the deployed site), you'll be prompted to e - **LangSmith API Key**: (only required for connecting to deployed LangGraph servers) Your LangSmith API key to use when authenticating requests sent to LangGraph servers. 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. diff --git a/src/providers/Stream.tsx b/src/providers/Stream.tsx index 5f40efa..2b4b065 100644 --- a/src/providers/Stream.tsx +++ b/src/providers/Stream.tsx @@ -123,9 +123,19 @@ const StreamSession = ({ export const StreamProvider: React.FC<{ children: ReactNode }> = ({ children, }) => { - const [apiUrl, setApiUrl] = useQueryState("apiUrl"); + // Get environment variables + const envApiUrl = import.meta.env.VITE_API_URL as string; + const envAssistantId = import.meta.env.VITE_ASSISTANT_ID as string; + const envApiKey = import.meta.env.VITE_LANGSMITH_API_KEY as string; + + // 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 +143,12 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({ _setApiKey(key); }; - const [assistantId, setAssistantId] = useQueryState("assistantId"); - - if (!apiUrl || !assistantId) { + // Determine final values to use, prioritizing URL params then env vars + const finalApiUrl = apiUrl || envApiUrl; + const finalAssistantId = assistantId || envAssistantId; + + // If we're missing any required values, show the form + if (!finalApiUrl || !finalAssistantId) { return (
From 5df45849ebf3ff766492f0f08a00c77e344e7c00 Mon Sep 17 00:00:00 2001 From: Romamo Date: Wed, 26 Mar 2025 08:50:49 +0200 Subject: [PATCH 2/4] Added environment variables to bypass the initial setup form --- src/providers/Stream.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/providers/Stream.tsx b/src/providers/Stream.tsx index 2b4b065..2bb6a94 100644 --- a/src/providers/Stream.tsx +++ b/src/providers/Stream.tsx @@ -120,6 +120,10 @@ 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, }) => { @@ -194,7 +198,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 />
@@ -212,7 +216,7 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({ id="assistantId" name="assistantId" className="bg-background" - defaultValue={assistantId ?? "agent"} + defaultValue={assistantId || DEFAULT_ASSISTANT_ID} required />
From 8c07cfd28aa46d240ecf344e4a88c49d7bb8a8b2 Mon Sep 17 00:00:00 2001 From: bracesproul Date: Wed, 2 Apr 2025 13:46:41 -0700 Subject: [PATCH 3/4] format --- README.md | 2 -- src/providers/Stream.tsx | 12 ++++++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index c6f10ea..3493ae1 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,6 @@ To use these variables: 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: @@ -121,4 +120,3 @@ return { messages: [result] }; ``` This approach guarantees the message remains completely hidden from the user interface. - diff --git a/src/providers/Stream.tsx b/src/providers/Stream.tsx index 2bb6a94..ce1be22 100644 --- a/src/providers/Stream.tsx +++ b/src/providers/Stream.tsx @@ -133,9 +133,13 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({ const envApiKey = import.meta.env.VITE_LANGSMITH_API_KEY as string; // Use URL params with env var fallbacks - const [apiUrl, setApiUrl] = useQueryState("apiUrl", { defaultValue: envApiUrl || "" }); - const [assistantId, setAssistantId] = useQueryState("assistantId", { defaultValue: envAssistantId || "" }); - + 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(() => { const storedKey = getApiKey(); @@ -150,7 +154,7 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({ // Determine final values to use, prioritizing URL params then env vars const finalApiUrl = apiUrl || envApiUrl; const finalAssistantId = assistantId || envAssistantId; - + // If we're missing any required values, show the form if (!finalApiUrl || !finalAssistantId) { return ( From d6c7ff955b662fdc119229f5b5208f53074f20dc Mon Sep 17 00:00:00 2001 From: bracesproul Date: Wed, 2 Apr 2025 13:49:46 -0700 Subject: [PATCH 4/4] drop type casting --- src/providers/Stream.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/providers/Stream.tsx b/src/providers/Stream.tsx index ce1be22..390167c 100644 --- a/src/providers/Stream.tsx +++ b/src/providers/Stream.tsx @@ -128,9 +128,9 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({ children, }) => { // Get environment variables - const envApiUrl = import.meta.env.VITE_API_URL as string; - const envAssistantId = import.meta.env.VITE_ASSISTANT_ID as string; - const envApiKey = import.meta.env.VITE_LANGSMITH_API_KEY as string; + 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", {