diff --git a/README.md b/README.md index 3e02ac68..fbc8409f 100644 --- a/README.md +++ b/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 diff --git a/docs/playground/index.md b/docs/playground/index.md index f25d2e8d..e85683db 100644 --- a/docs/playground/index.md +++ b/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 diff --git a/website/src/contexts/WebSocketContext.tsx b/website/src/contexts/WebSocketContext.tsx index af963821..e3264764 100644 --- a/website/src/contexts/WebSocketContext.tsx +++ b/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);