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 0c6e996..3493ae1 100644 --- a/README.md +++ b/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: diff --git a/src/providers/Stream.tsx b/src/providers/Stream.tsx index 5f40efa..390167c 100644 --- a/src/providers/Stream.tsx +++ b/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 (
@@ -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 />
@@ -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 />