fix: add docs to describe how to set up .env.local

README.md

@@ -76,6 +76,19 @@ FRONTEND_HOST=0.0.0.0
 FRONTEND_PORT=3000
 ```
 
+And create an .env.local file in the website directory with the following:
+
+```bash
+OPENAI_API_KEY=sk-xxx
+OPENAI_API_BASE=https://api.openai.com/v1
+MODEL_NAME=gpt-4o-mini
+
+NEXT_PUBLIC_BACKEND_HOST=localhost
+NEXT_PUBLIC_BACKEND_PORT=8000
+```
+
+Note that the openai api key, base, and model name are for the UI assistant only; not the DocETL pipeline execution engine.
+
 4. Start the development server:
 ```bash
 make run-ui-dev

docs/playground/index.md

@@ -10,25 +10,50 @@ The playground allows you to do just that.
 
 ## Installation
 
-First, make sure you have installed the DocETL Python package from source. Fork or clone the repository, then run `make install` in the root directory:
+1. Clone the repository:
+```bash
+git clone https://github.com/ucbepic/docetl.git
+cd docetl
+```
+
+2. Install dependencies:
+```bash
+make install      # Install Python package
+make install-ui   # Install UI dependencies
+```
 
+3. Set up environment variables by creating a `.env` file in the root directory:
 ```bash
-make install
+OPENAI_API_KEY=your_api_key_here # Or any other llm keys
+BACKEND_ALLOW_ORIGINS=
+BACKEND_HOST=localhost
+BACKEND_PORT=8000
+BACKEND_RELOAD=True
+FRONTEND_HOST=0.0.0.0
+FRONTEND_PORT=3000
 ```
 
-Then, to install the dependencies for the playground, run `make install-ui` in the root directory.
+The `.env` file is used for the backend server.
 
+For the front end, create an `.env.local` file in the `website` directory with:
 ```bash
-make install-ui
+OPENAI_API_KEY=sk-xxx
+OPENAI_API_BASE=https://api.openai.com/v1
+MODEL_NAME=gpt-4-mini
+
+NEXT_PUBLIC_BACKEND_HOST=localhost
+NEXT_PUBLIC_BACKEND_PORT=8000
 ```
 
-Then, run `make run-ui-dev` to start the development server.
+!!! note
+    Note that the OpenAI API key, base, and model name in the `.env.local` file are only for the UI assistant functionality, not the DocETL pipeline execution engine.
 
+4. Start the development server:
 ```bash
 make run-ui-dev
 ```
 
-Navigate to [http://localhost:3000/playground](http://localhost:3000/playground) to access the playground. 
+5. Navigate to [http://localhost:3000/playground](http://localhost:3000/playground) to access the playground.
 
 ### Setting up the AI Assistant
 

website/src/contexts/WebSocketContext.tsx

@@ -30,7 +30,9 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({
         return;
       }
 
-      ws.current = new WebSocket(`ws://${process.env.NEXT_PUBLIC_BACKEND_HOST}:${process.env.NEXT_PUBLIC_BACKEND_PORT}/ws/run_pipeline`);
+      ws.current = new WebSocket(
+        `ws://${process.env.NEXT_PUBLIC_BACKEND_HOST}:${process.env.NEXT_PUBLIC_BACKEND_PORT}/ws/run_pipeline`
+      );
 
       ws.current.onopen = () => {
         setReadyState(WebSocket.OPEN);