Change shell scripts to run new UI (#533)

.gitignore

@@ -171,3 +171,5 @@ postgres-data
 
 ## Frontend
 node_modules
+.env.backup
+.env.old

README.md

@@ -104,6 +104,7 @@ Before you begin, make sure you have the following installed:
 - [Brew (if you're on a Mac)](https://brew.sh/)
 - [Poetry](https://python-poetry.org/docs/#installation)
     - `brew install poetry`
+- [node](https://nodejs.org/en/download/)
 - [Docker](https://docs.docker.com/engine/install/)
   
 Note: Our setup script does these two for you, but they are here for reference.
@@ -127,7 +128,7 @@ Note: Our setup script does these two for you, but they are here for reference.
     ```bash
     ./run_ui.sh
     ```
-1. Navigate to `http://localhost:8501` in your browser to start using the UI
+1. Navigate to `http://localhost:8080` in your browser to start using the UI
 
 ## Additional Setup for Contributors
 If you're looking to contribute to Skyvern, you'll need to install the pre-commit hooks to ensure code quality and consistency. You can do this by running the following command:

run_ui.sh

@@ -1,2 +1,13 @@
-source "$(poetry env info --path)/bin/activate"
-streamlit run streamlit_app/visualizer/streamlit.py -- $@
+#!/bin/bash
+
+kill $(lsof -t -i :8080)
+
+cd skyvern-frontend
+
+if [ ! -f .env ]; then
+  cp .env.example .env
+  echo "[ERROR] Please add your api keys to the skyvern-frontend/.env file."
+fi
+
+npm install --silent
+npm run start

setup.sh

@@ -14,7 +14,7 @@ command_exists() {
 
 ensure_required_commands() {
     # Ensure required commands are available
-    for cmd in poetry; do
+    for cmd in poetry npm; do
         if ! command_exists "$cmd"; then
             echo "Error: $cmd is not installed." >&2
             exit 1
@@ -140,6 +140,17 @@ initialize_env_file() {
     echo ".env file has been initialized."
 }
 
+initialize_frontend_env_file() {
+    if [ -f "skyvern-frontend/.env" ]; then
+        echo "skyvern-frontend/.env file already exists, skipping initialization."
+        return
+    fi
+
+    echo "Initializing skyvern-frontend/.env file..."
+    cp skyvern-frontend/.env.example skyvern-frontend/.env
+    echo "skyvern-frontend/.env file has been initialized."
+}
+
 # Function to remove Poetry environment
 remove_poetry_env() {
     local env_path
@@ -165,6 +176,11 @@ choose_python_version_or_fail() {
 # Function to install dependencies
 install_dependencies() {
     poetry install
+    echo "Installing frontend dependencies"
+    cd skyvern-frontend
+    npm install --silent
+    cd ..
+    echo "Frontend dependencies installed."
 }
 
 activate_poetry_env() {
@@ -258,12 +274,26 @@ create_organization() {
     # Update the secrets-open-source.toml file
     echo -e "[skyvern]\nconfigs = [\n    {\"env\" = \"local\", \"host\" = \"http://127.0.0.1:8000/api/v1\", \"orgs\" = [{name=\"Skyvern\", cred=\"$api_token\"}]}\n]" > .streamlit/secrets.toml
     echo ".streamlit/secrets.toml file updated with organization details."
+
+    # Check if skyvern-frontend/.env exists and back it up
+    # This is redundant for first time set up but useful for subsequent runs
+    if [ -f "skyvern-frontend/.env" ]; then
+        mv skyvern-frontend/.env skyvern-frontend/.env.backup
+        echo "Existing skyvern-frontend/.env file backed up as skyvern-frontend/.env.backup"
+        cp skyvern-frontend/.env.example skyvern-frontend/.env
+    fi
+
+    # Update the skyvern-frontend/.env file
+    # sed wants a backup file extension, and providing empty string doesn't work on all platforms
+    sed -i".old" -e "s/YOUR_API_KEY/$api_token/g" skyvern-frontend/.env
+    echo "skyvern-frontend/.env file updated with API token."
 }
 
 # Main function
 main() {
     ensure_required_commands
     initialize_env_file
+    initialize_frontend_env_file
     choose_python_version_or_fail
     remove_poetry_env
     install_dependencies

skyvern-frontend/.env.example

@@ -8,4 +8,4 @@ VITE_ARTIFACT_API_BASE_URL=http://localhost:9090
 VITE_WSS_BASE_URL=ws://localhost:8000/api/v1
 
 # your api key - for x-api-key header
-VITE_SKYVERN_API_KEY=
+VITE_SKYVERN_API_KEY=YOUR_API_KEY