Merge pull request #146 from plpycoin/main

chore: Use environment variable configuration files to set host, port

.env.sample

@@ -0,0 +1,9 @@
+OPENAI_API_KEY=
+
+BACKEND_ALLOW_ORIGINS=
+BACKEND_HOST=localhost
+BACKEND_PORT=8000
+BACKEND_RELOAD=True
+
+FRONTEND_HOST=0.0.0.0
+FRONTEND_PORT=3000

Makefile

@@ -1,3 +1,6 @@
+# Load environment variables from .env file
+include .env
+
 .PHONY: tests tests-basic lint install mypy update ui-install ui-run
 
 # Existing commands
@@ -32,13 +35,13 @@ run-ui-dev:
 	@echo "Starting server..."
 	@python server/app/main.py & \
 	echo "Starting UI development server..." && \
-	cd $(UI_DIR) && npm run dev
+	cd $(UI_DIR) && HOST=${FRONTEND_HOST}  PORT=${FRONTEND_PORT} npm run dev
 
 run-ui:
 	@echo "Starting server..."
 	@python server/app/main.py & \
 	echo "Building UI..." && \
-	cd $(UI_DIR) && npm run build && npm run start
+	cd $(UI_DIR) && npm run build && HOST=${FRONTEND_HOST}  PORT=${FRONTEND_PORT} NEXT_PUBLIC_FRONTEND_ALLOWED_HOSTS=${FRONTEND_ALLOWED_HOSTS} npm run start
 
 # Help command
 help:

README.md

@@ -70,15 +70,23 @@ pip install poetry
 poetry install
 ```
 
-4. Set up your OpenAI API key:
+4. Set up your OpenAI API key and other environment variables:
 
-Create a .env file in the project root and add your OpenAI API key:
+Copy the .env.sample file under the root directory to .env and modify the environment variables inside as needed.
 
 ```bash
 OPENAI_API_KEY=your_api_key_here
+
+BACKEND_ALLOW_ORIGINS=
+BACKEND_HOST=localhost
+BACKEND_PORT=8000
+BACKEND_RELOAD=True
+
+FRONTEND_HOST=0.0.0.0
+FRONTEND_PORT=3000
 ```
 
-Alternatively, you can set the OPENAI_API_KEY environment variable in your shell.
+Alternatively, you can set the OPENAI_API_KEY environment variable and others in your shell.
 
 5. Run the basic test suite to ensure everything is working (this costs less than $0.01 with OpenAI):
 

server/app/main.py

@@ -6,14 +6,22 @@
 
 load_dotenv()
 
+# Read backend configuration from .env
+host = os.getenv("BACKEND_HOST", "127.0.0.1")
+port = int(os.getenv("BACKEND_PORT", 8000))
+reload = os.getenv("BACKEND_RELOAD", "False").lower() == "true"
+
+# Set default allow_origins if BACKEND_ALLOW_ORIGINS is not provided
+allow_origins = os.getenv("BACKEND_ALLOW_ORIGINS", "http://localhost:3000").split(",")
+
 app = FastAPI()
 os.environ["USE_FRONTEND"] = "true"
 
 
 # Add CORS middleware
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["http://localhost:3000"],  # Adjust this to your Next.js app's URL
+    allow_origins=allow_origins,  # Adjust this to your Next.js app's URL
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -30,4 +38,4 @@ async def root():
 if __name__ == "__main__":
     import uvicorn
 
-    uvicorn.run("server.app.main:app", host="0.0.0.0", port=8000, reload=True)
+    uvicorn.run("server.app.main:app", host=host, port=port, reload=reload)

website/.env.local.sample

@@ -0,0 +1,7 @@
+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
+

website/README.md

@@ -2,6 +2,20 @@ This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-
 
 ## Getting Started
 
+### Setting up environment variables
+
+Copy the .env.sample file from the root directory to .env.local and modify the environment variables inside:
+
+```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=8008
+
+```
+
 First, run the development server:
 
 ```bash

website/src/app/api/chat/route.ts

@@ -1,14 +1,19 @@
-import { openai } from "@ai-sdk/openai";
+import { createOpenAI } from "@ai-sdk/openai";
 import { streamText } from "ai";
 
 // Allow streaming responses up to 60 seconds
 export const maxDuration = 60;
+const openai = createOpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+  baseURL: process.env.OPENAI_API_BASE,
+  compatibility: 'strict', // strict mode, enable when using the OpenAI API
+});
 
 export async function POST(req: Request) {
   const { messages } = await req.json();
 
   const result = await streamText({
-    model: openai("gpt-4o-mini"),
+    model: openai(process.env.MODEL_NAME),
     system: "You are a helpful assistant.",
     messages,
   });

website/src/app/api/runPipeline/route.ts

@@ -162,7 +162,8 @@ export async function POST(request: Request) {
     await fs.writeFile(filePath, yamlString, "utf8");
 
     // Submit the YAML config to the FastAPI endpoint
-    const response = await axios.post("http://localhost:8000/run_pipeline", {
+
+    const response = await axios.post(`http://${process.env.NEXT_PUBLIC_BACKEND_HOST}:${process.env.NEXT_PUBLIC_BACKEND_PORT}/run_pipeline`, {
       yaml_config: filePath,
     });
 

website/src/app/playground/page.tsx

@@ -518,7 +518,7 @@ const WrappedCodeEditorPipelineApp: React.FC = () => {
   useEffect(() => {
     setIsLocalhost(
       window.location.hostname === "localhost" ||
-        window.location.hostname === "127.0.0.1"
+      window.location.hostname === "127.0.0.1"
     );
   }, []);
 

website/src/contexts/WebSocketContext.tsx

@@ -30,7 +30,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({
         return;
       }
 
-      ws.current = new WebSocket("ws://localhost:8000/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);