Added environment variables to bypass the initial setup form

This commit is contained in:
Romamo
2025-03-25 17:34:56 +02:00
parent 35fbb5c40c
commit b57a8abc59
3 changed files with 40 additions and 5 deletions

4
.env.example Normal file
View File

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

View File

@@ -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. - **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. 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.

View File

@@ -123,9 +123,19 @@ const StreamSession = ({
export const StreamProvider: React.FC<{ children: ReactNode }> = ({ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
children, 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(() => { const [apiKey, _setApiKey] = useState(() => {
return getApiKey(); const storedKey = getApiKey();
return storedKey || envApiKey || "";
}); });
const setApiKey = (key: string) => { const setApiKey = (key: string) => {
@@ -133,9 +143,12 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
_setApiKey(key); _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 ( return (
<div className="flex items-center justify-center min-h-screen w-full p-4"> <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"> <div className="animate-in fade-in-0 zoom-in-95 flex flex-col border bg-background shadow-lg rounded-lg max-w-3xl">